ViewPager

這是谷歌官方提供的一個(gè)兼容低版本安卓設(shè)備的軟件包，里面包含了只有在安卓3.0以上可以使用的API。ViewPager就是其中之一。利用它，我們可以做很多的事情，從最簡(jiǎn)單的道行，到頁(yè)面菜單等等。與ListVew類似，他需要一個(gè)適配器，就是PagerAdapter。

有四個(gè)分頁(yè)，每個(gè)分頁(yè)都有自己名字和布局，通過(guò)名字與布局的匹配，自定義適配器將其轉(zhuǎn)化為View。

布局文件

主布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_main" tools:context=".MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity = "top">

        <android.support.v4.view.PagerTabStrip
            android:id="@+id/pagertab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity = "bottom"
            />

    </android.support.v4.view.ViewPager>

</LinearLayout>

每個(gè)頁(yè)面的布局文件

<?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">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/a"
        android:scaleType="centerCrop"
        android:id="@+id/imageview"
        />

</LinearLayout>

Activity

/**
 * ViewPager組建的使用
 */

public class MainActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private PagerTabStrip pagerTabStrip;

    private String[] titles={"第一張圖","第二張圖","第三張圖","第四張圖"};

    private ArrayList<View> views = new ArrayList<>();


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        viewPager = (ViewPager) findViewById(R.id.viewPager);
        pagerTabStrip = (PagerTabStrip) findViewById(pagertab);

        initViews();

        viewPager.setAdapter(new MyPagerAdapter());

    }

    private void initViews(){
        views.add(getLayoutInflater().inflate(R.layout.layout1,null));
        views.add(getLayoutInflater().inflate(R.layout.layout2,null));
        views.add(getLayoutInflater().inflate(R.layout.layout3,null));
        views.add(getLayoutInflater().inflate(R.layout.layout4,null));
    }


    //適配器
    class MyPagerAdapter extends PagerAdapter{

        //實(shí)例化選項(xiàng)卡
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View view =views.get(position);
            container.addView(view);
            return view;
        }

        //刪除選項(xiàng)卡
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            super.destroyItem(container, position, object);
        }

        @Override
        public int getCount() {
            return views.size();
        }

        //判斷視圖是否為返回的對(duì)象
        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }


        //獲取標(biāo)題
        @Override
        public CharSequence getPageTitle(int position) {
            return titles[position];
        }
    }
}

這里有四個(gè)注意事項(xiàng)：

1.這里ViewPager和PagerTabStrip(滾動(dòng)條)都要把包名寫全了，不然會(huì)ClassNotFound
2.API中說(shuō)：在布局xml把PagerTabStrip當(dāng)作ViewPager的一個(gè)自標(biāo)簽開(kāi)用，不能拿出來(lái)，不然會(huì)報(bào)錯(cuò)
3.在PagerTabStrip標(biāo)簽中可以用屬性android:layout_gravity="Top|Bottom"來(lái)指定title的位置
4.如果要顯示出PagerTabStrip某一頁(yè)的title，需要在ViewPager的Adapter中實(shí)現(xiàn)getPageTitle(int)

pagerTabStrip.setBackgroundColor(Color.BLUE);   //設(shè)置滾動(dòng)條背景顏色

頁(yè)面切換的事件監(jiān)聽(tīng)

繼承ViewPager.OnPageChangeListener

public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener{

    private ViewPager viewPager;
    private PagerTabStrip pagerTabStrip;

    private String[] titles={"第一張圖","第二張圖","第三張圖","第四張圖"};

    private ArrayList<View> views = new ArrayList<>();


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        viewPager = (ViewPager) findViewById(R.id.viewPager);
        pagerTabStrip = (PagerTabStrip) findViewById(pagertab);

        initViews();


        viewPager.setAdapter(new MyPagerAdapter());
        viewPager.setOnPageChangeListener(this);

    }

    private void initViews(){
        views.add(getLayoutInflater().inflate(R.layout.layout1,null));
        views.add(getLayoutInflater().inflate(R.layout.layout2,null));
        views.add(getLayoutInflater().inflate(R.layout.layout3,null));
        views.add(getLayoutInflater().inflate(R.layout.layout4,null));

    }

    //事件監(jiān)聽(tīng)的四個(gè)方法
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        Toast.makeText(getApplicationContext(),"選中",Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }


    //適配器
    class MyPagerAdapter extends PagerAdapter{

        //實(shí)例化選項(xiàng)卡
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View view =views.get(position);
            container.addView(view);
            return view;
        }

        //刪除選項(xiàng)卡
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            super.destroyItem(container, position, object);
        }

        @Override
        public int getCount() {
            return views.size();
        }

        //判斷視圖是否為返回的對(duì)象
        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }


        //獲取標(biāo)題
        @Override
        public CharSequence getPageTitle(int position) {
            return titles[position];
        }
    }
}

程序首次啟動(dòng)的引導(dǎo)

程序首次啟動(dòng)引導(dǎo)一般好幾個(gè)頁(yè)面，每個(gè)頁(yè)面對(duì)應(yīng)下面的一個(gè)小圓點(diǎn)，當(dāng)滑倒當(dāng)前頁(yè)面時(shí)，對(duì)應(yīng)頁(yè)面的小圓點(diǎn)對(duì)有反應(yīng)
基于上面描述，程序需要包含以下一些內(nèi)容

• 首先得有每個(gè)頁(yè)面的布局文件，還有小圓點(diǎn)的形式的布局文件，由于小圓點(diǎn)會(huì)和每個(gè)頁(yè)面的布局文件重合，所以使用FragmentLayout布局，內(nèi)嵌n個(gè)ImageView(包含圓點(diǎn))。
• 布局文件到View的轉(zhuǎn)化對(duì)應(yīng)，需要自定義的適配器
• 切換頁(yè)面的時(shí)候，對(duì)應(yīng)的小圓點(diǎn)要有所變化，所以需要有切換頁(yè)面的時(shí)間監(jiān)聽(tīng)器
• 布局文件和小圓點(diǎn)都應(yīng)該有默認(rèn)的樣式，要初始化
• 頁(yè)面的變化應(yīng)該有對(duì)應(yīng)的圓點(diǎn)的變化，需要傳遞一個(gè)值，指示頁(yè)面變化，傳入圓點(diǎn)變化。

以下是示例代碼：

主文件布局：一個(gè)ViewPager和四個(gè)圓點(diǎn)（FragmentLayout）

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_main2"
    tools:context="com.example.tianmengmeng.coding12.Main2Activity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity = "top"/>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center|bottom"
        android:id="@+id/point_layout"
        >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/start"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/start"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/start"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/start"/>
    </LinearLayout>

</FrameLayout>

每個(gè)頁(yè)面的布局：四個(gè)類似只寫了一個(gè)

<?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">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/a"
        android:scaleType="centerCrop"
        android:id="@+id/imageview"
        />
</LinearLayout>

Activity：文件資源的加載，事件的監(jiān)聽(tīng)

public class Main2Activity extends AppCompatActivity implements ViewPager.OnPageChangeListener{

    //定義ViewPager和存放每個(gè)頁(yè)面圖片的容器
    private ViewPager viewPager;
    //每個(gè)頁(yè)面是一個(gè)Layout，不能簡(jiǎn)單的用數(shù)組存放
    private ArrayList<View> views = new ArrayList<>();

    //定義存放圓點(diǎn)的數(shù)組，每個(gè)圓點(diǎn)是同類型的組件，可以直接用數(shù)組來(lái)定義
    private ImageView[] imageViews;

    //定義當(dāng)前頁(yè)
    private int currentIndex = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);

        //初始化圓點(diǎn)，初始化頁(yè)面
        initViews();
        initPoint();
    }
    
    //初始化頁(yè)面
    private void initViews(){

        viewPager = (ViewPager) findViewById(R.id.viewPager);

        //獲取圖片資源
        views.add(getLayoutInflater().inflate(R.layout.layout1,null));
        views.add(getLayoutInflater().inflate(R.layout.layout2, null));
        views.add(getLayoutInflater().inflate(R.layout.layout3, null));
        views.add(getLayoutInflater().inflate(R.layout.layout4, null));

        //將圖片資源通過(guò)適配器加入視圖
        viewPager.setAdapter(new MyPagerAdapter());
        //監(jiān)聽(tīng)頁(yè)面的變化
        viewPager.setOnPageChangeListener(this);
    }


    //初始化圓點(diǎn)
    private void initPoint() {
        LinearLayout point_layout = (LinearLayout) findViewById(R.id.point_layout);
        imageViews = new ImageView[views.size()];
        for (int i = 0; i < imageViews.length; i++) {
            //獲取linearlayout下的二級(jí)組件
            imageViews[i] = (ImageView) point_layout.getChildAt(i);
        }

        currentIndex = 0;
        imageViews[currentIndex].setImageResource(R.drawable.selected);
    }

    //當(dāng)頁(yè)面放生變化后，通關(guān)過(guò)傳入的頁(yè)面數(shù)，改變對(duì)應(yīng)的圓點(diǎn)狀態(tài)
   private void setCurentPoint(int position) {
        //注意：當(dāng)前位置沒(méi)有發(fā)生變化時(shí)，圓點(diǎn)的狀態(tài)不用改變
        if(currentIndex<0 || currentIndex  == position || currentIndex > imageViews.length - 1){
            return;
        }
       
        //設(shè)置對(duì)應(yīng)的圖片的改變
        imageViews[currentIndex].setImageResource(R.drawable.start);
        imageViews[position].setImageResource(R.drawable.selected);

        //指向當(dāng)前頁(yè)面
        currentIndex = position;
    }
    @Override 
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    //監(jiān)聽(tīng)頁(yè)面的改變
    @Override
    public void onPageSelected(int position) {
        setCurentPoint(position);
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }


    //適配器
    class MyPagerAdapter extends PagerAdapter {

        //實(shí)例化選項(xiàng)卡
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View view =views.get(position);
            container.addView(view);
            return view;
        }

        //刪除選項(xiàng)卡
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            super.destroyItem(container, position, object);
        }

        @Override
        public int getCount() {
            return views.size();
        }

        //判斷視圖是否為返回的對(duì)象
        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

    }

}