使用viewpager adapter實作微信的滑動界面

1.布局檔案（最上面是一個viewpager，下面是四個linearlayout水準排列）

<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"
    android:orientation="vertical" >

    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="wrap_content"
        android:layout_height="0dp" 
        android:layout_weight="1">
    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <LinearLayout
            android:id="@+id/lin_weixin"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical"
            android:layout_marginBottom="5dp" >

            <ImageView
                android:id="@+id/lin_weixin_iv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:src="@drawable/mk" />

            <TextView
                android:id="@+id/lin_weixin_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#389B15"
                android:text="微信" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/lin_tongxun"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical" >

            <ImageView
               android:id="@+id/lin_tongxun_iv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:src="@drawable/tg" />

            <TextView
                android:id="@+id/lin_tongxun_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="通訊錄" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/lin_faxian"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical" >

            <ImageView
                android:id="@+id/lin_faxian_iv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:src="@drawable/fg" />

            <TextView
                android:id="@+id/lin_faxian_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="發現" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/lin_wo"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical" >

            <ImageView
                android:id="@+id/lin_wo_iv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:src="@drawable/pg" />

            <TextView
                 android:id="@+id/lin_wo_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="我" />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>
           

2.主activity

public class MainActivity extends Activity implements OnClickListener {

    //定義一個集合，裡面存放的是界面下方存放的四個布局檔案個
    private List<View> listvViews = new ArrayList<View>();
    //定義一個數組
    private LinearLayout[] linearLayouts = new LinearLayout[];
    //定義一個數組，裡面存放的是界面下方四個布局的ID
    private int[] linIDs = { R.id.lin_weixin, R.id.lin_tongxun,
            R.id.lin_faxian, R.id.lin_wo };

    //定義一個資料，用于存儲圖檔
    private ImageView[] imageView = new ImageView[];
    //定義一個數組，裡面存放的是布局中需要的圖檔的id
    private int[] imgIDs = { R.id.lin_weixin_iv, R.id.lin_tongxun_iv,
            R.id.lin_faxian_iv, R.id.lin_wo_iv };

    //定義一個數組，裡面存放的是當四個布局被選中的時候顯示的圖檔
    private int[] imageK = { R.drawable.mk, R.drawable.tk, R.drawable.fk,
            R.drawable.pk };
    //定義一個數組，裡面存放的是當四個布局未被選中的時候顯示的圖檔
    private int[] imageG = { R.drawable.mg, R.drawable.tg, R.drawable.fg,
            R.drawable.pg };

    //定義一個數組，裡面存放的是布局中顯示的文字
    private TextView[] textViews = new TextView[];
    //定義一個數組，裡面存放的是布局中顯示的文字的ID
    private int[] tvIDs = { R.id.lin_weixin_tv, R.id.lin_tongxun_tv,
            R.id.lin_faxian_tv, R.id.lin_wo_tv };
    private ViewPager viewPager;
    private MyViewPagerAdapter myViewPagerAdapter;

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initData();
        initViewOpers();

        // 給viewpager綁定資料源
        myViewPagerAdapter = new MyViewPagerAdapter(listvViews);
        viewPager.setAdapter(myViewPagerAdapter);
    }

    private void initViewOpers() {
        viewPager.setOnPageChangeListener(new OnPageChangeListener() {

            public void onPageSelected(int arg0) {
            //當滑動viewpager的時候，下面的圖檔和字型随之改變
                changeColor(arg0);
            }

            public void onPageScrolled(int arg0, float arg1, int arg2) {

            }

            public void onPageScrollStateChanged(int arg0) {

            }
        });
    }

    private void initView() {

        viewPager = (ViewPager) findViewById(R.id.vp);
        //擷取每一個布局控件并給每一個布局設定點選事件
        for (int i = ; i < linIDs.length; i++) {
            linearLayouts[i] = (LinearLayout) findViewById(linIDs[i]);
            linearLayouts[i].setOnClickListener(MainActivity.this);
        }

        //擷取圖檔空間
        for (int i = ; i < imgIDs.length; i++) {
            imageView[i] = (ImageView) findViewById(imgIDs[i]);
        }

        //擷取textview控件
        for (int i = ; i < textViews.length; i++) {
            textViews[i] = (TextView) findViewById(tvIDs[i]);
        }
    }

    private void initData() {
        //使用布局填充器擷取布局（每一個布局裡面顯示的是我們看到的具體内容）
        View view1 = getLayoutInflater().inflate(R.layout.weixin_item, null);
        View view2 = getLayoutInflater().inflate(R.layout.tongxun_item, null);
        View view3 = getLayoutInflater().inflate(R.layout.faxian_item, null);
        View view4 = getLayoutInflater().inflate(R.layout.wo_item, null);
        //将每一個局部添加到集合中
        listvViews.add(view1);
        listvViews.add(view2);
        listvViews.add(view3);
        listvViews.add(view4);
    }

    public void onClick(View v) {
    //當點選下面布局的時候圖檔和文字随之改變
        switch (v.getId()) {
        case R.id.lin_weixin:
            changeColor();
            viewPager.setCurrentItem();
            break;

        case R.id.lin_tongxun:
            changeColor();
            viewPager.setCurrentItem();
            break;
        case R.id.lin_faxian:
            changeColor();
            viewPager.setCurrentItem();
            break;
        case R.id.lin_wo:
            changeColor();
            viewPager.setCurrentItem();
            break;
        }
    }

    // 更改圖檔和textview中的字型顔色（選擇的圖檔和字型都是#389B15，沒有選擇的是#6D6D6D）
    private void changeColor(int index) {
        for (int i = ; i < ; i++) {
            if (index == i) {
                textViews[index].setTextColor(Color.parseColor("#389B15"));
                imageView[i].setImageResource(imageK[i]);
            } else {
                textViews[i].setTextColor(Color.parseColor("#6D6D6D"));
                imageView[i].setImageResource(imageG[i]);
            }
        }
    }
}
           

3.給viewpager設定擴充卡

public class MyViewPagerAdapter extends PagerAdapter {
    private List<View> listvViews = null;
    private Context context;

    public MyViewPagerAdapter(List<View> listvViews) {
        super();
        this.listvViews = listvViews;
    }

    public int getCount() {
        return listvViews.size();
    }

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

    public void destroyItem(ViewGroup container, int position, Object object) {
        // super.destroyItem(container, position, object);
        //這一步必須寫（用于移除viewpager）
        container.removeView(listvViews.get(position));
    }

    public Object instantiateItem(ViewGroup container, int position) {
        View view = listvViews.get(position);
        //container指的就是viewpager對象
        container.addView(listvViews.get(position));
        return view;
    }

}