ViewPager多页面滑动效果

 

     Android的左右滑动在实际编程经常用到，比如查看多张图片，左右切换tab页。

     自Android3.0之后的SDK中提供了android-support-v4包用以实现版本兼容，让老版本系统下的应用通过加入jar包实现扩展，其中有一个可以实现左右滑动的类ViewPager。

一、建立工程，如图

二、activity_main.xml中代码

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
     >
     <android.support.v4.view.ViewPager
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:id="@+id/viewpager"
         android:layout_gravity="center"
         >
         <android.support.v4.view.PagerTitleStrip
             android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:id="@+id/pagertitle"
             android:layout_gravity="top"
             >
             
         </android.support.v4.view.PagerTitleStrip>
         
     </android.support.v4.view.ViewPager>

</RelativeLayout>

三、tabX.xml中代码
 tab1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ProgressBar
        android:id="@+id/progressBar1"
        style="?android:attr/progressBarStyleLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

 tab2.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <SeekBar
        android:id="@+id/seekBar1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

 tab3.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ProgressBar
        android:id="@+id/progressBar1"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

四、MainActivity.java中代码

package com.study.viewpager;

import java.util.ArrayList;
import java.util.List;

import android.os.Bundle;
import android.app.Activity;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.PagerTitleStrip;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;

public class MainActivity extends Activity {

    private ViewPager viewPager;
    private PagerTitleStrip pagerTitleStrip;//表示滑动的每一页的标题
    private List<View> list; //表示装载滑动的布局
    private List<String> titleList; //表示滑动的每一页的标题
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        viewPager = (ViewPager)this.findViewById(R.id.viewpager);
        pagerTitleStrip = (PagerTitleStrip)this.findViewById(R.id.pagertitle);
        //动态加载布局
        View view1 = LayoutInflater.from(MainActivity.this).inflate(R.layout.tab1, null);
        View view2 = LayoutInflater.from(MainActivity.this).inflate(R.layout.tab2, null);
        View view3 = LayoutInflater.from(MainActivity.this).inflate(R.layout.tab3, null);
        list = new ArrayList<View>();
        list.add(view1);
        list.add(view2);
        list.add(view3);
        titleList = new ArrayList<String>();
        titleList.add("title1");
        titleList.add("title2");
        titleList.add("title3");
        viewPager.setAdapter(new MyAdapter());
        
    }

    class MyAdapter extends PagerAdapter{

        @Override
        public int getCount() {
            //布局的个数
            return list.size();
        }
        
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            // TODO Auto-generated method stub
            //super.destroyItem(container, position, object);
            ((ViewPager)container).removeView(list.get(position));
        }
        
        @Override
        public CharSequence getPageTitle(int position) {
            // TODO Auto-generated method stub
            return titleList.get(position);
            
        }
        
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            ((ViewPager)container).addView(list.get(position));
            return list.get(position);
        }

        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {
            
            return arg0 == arg1;
        }
        
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
    
}

五、效果图