Android UI 基礎之ViewPager的使用

 ViewPager是谷歌官方給我們提供的一個兼容低版本安卓設備的軟件包，裏面包括了只有只有在Android 3.0 以上可以使用的api，而ViewPager就是其中之一，我們使用ViewPager可以完場很多事情，從最簡單的導航，到頁面菜單等， 其用發與ListView用法類似，也許要一個適配器  PageAdapter。

ViewPager實現頁面切換：

效果如下：

 

 ViewPager是谷歌一個向下兼容包（android-support-v4.jar）裏面的類，所以要使用它先引入android-support-v4.jar。該jar包一般存在於android SDK目錄sdk\extras\android\support\v4下面。

 

效果二：

 

實現過程：

在佈局中添加控件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    tools:context="com.xiyou.com.viewpageruse.MainActivity">
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <android.support.v4.view.PagerTabStrip
            android:id="@+id/viewpagertab"
            layout_gravity="top"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </android.support.v4.view.ViewPager>
</LinearLayout>

android.support.v4.view.PagerTitleStrip 用來顯示頂部標題。 

在MainActivity 中找到ViewPager控件和PagerTitleStrip 控件

pager = (ViewPager) findViewById(R.id.viewpager);
tabStrip = (PagerTabStrip) findViewById(R.id.viewpagertab);

爲ViewPager寫數據適配器， ViewPager使用的是數據適配器是PagerAdapter

所以要繼承PagerAdapter（抽象類）寫個實現類。

class MypageAdapter extends PagerAdapter {
    @Override

//返回頁卡的數量
    public int getCount() {
        return views.size();
    }

    // 實例化頁卡
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        View v = views.get(position);
        container.addView(v);
        return v;
    }

    // 刪除選項卡
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(views.get(position));
    }

    // 判斷當前視圖V是否爲返回的對象
    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }
    // 設置標籤顯示的標題
    @Override
    public CharSequence getPageTitle(int position) {
        return titles[position];
    }
}

定義每一個圖片的佈局，在MainActivity中將佈局文件佈局轉換爲View 

並且添加到動態數組中，以便在適配器中使用。

 private String[] titles = {"引導一", "引導二", "引導三", "引導四"};
private ArrayList<View> views = new ArrayList<>();

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));

設置PagerTitleStrip 的屬性

分別爲指示器的顏色，背景色，以及字體顏色

tabStrip.setBackgroundColor(getResources().getColor(android.R.color.holo_blue_bright));
tabStrip.setTabIndicatorColor(getResources().getColor(android.R.color.holo_orange_light));
tabStrip.setTextColor(Color.WHITE);

 完整代碼如下：

public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {
    private ViewPager pager;
    private PagerTabStrip tabStrip;
    private String[] titles = {"引導一", "引導二", "引導三", "引導四"};
    private ArrayList<View> views = new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        pager = (ViewPager) findViewById(R.id.viewpager);
        tabStrip = (PagerTabStrip) findViewById(R.id.viewpagertab);
        // 設置默認顯示的選項卡
        pager.setCurrentItem(2);
        invitViews();
        pager.setAdapter(new MypageAdapter());
        pager.setOnPageChangeListener(this);
    }
    // 添加布局
    private void invitViews() {
        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));
        tabStrip.setBackgroundColor(getResources().getColor(android.R.color.holo_blue_bright));
        tabStrip.setTabIndicatorColor(getResources().getColor(android.R.color.holo_orange_light));
        tabStrip.setTextColor(Color.WHITE);
    }
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    }
    @Override
    public void onPageSelected(int position) {
        Toast.makeText(MainActivity.this, "當前選中的是頁面" + position, Toast.LENGTH_SHORT).show();
    }
    @Override
    public void onPageScrollStateChanged(int state) {
    }
    class MypageAdapter extends PagerAdapter {
        @Override
        public int getCount() {
            return views.size();
        }
        // 實例化每一個佈局
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View v = views.get(position);
            container.addView(v);
            return v;
        }
        // 刪除選項卡
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(views.get(position));
        }
        // 判斷當前視圖V是否爲返回的對象
        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }
        // 獲取標題
        @Override
        public CharSequence getPageTitle(int position) {
            return titles[position];
        }
    }
}