ViewPage滑動頁面（1）

本博客是觀看immoc上面的視頻解說然後自己整理得到的，源碼也是imooc上面的，謝謝。
第一種完成的方法：（使用傳統的xml文件，重量級）
1、設置佈局，其中需要注意的是ViewPager是在v4的包中，所以標籤應該註明是v4包中的ViewPager的class文件，如下格式

 <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:layout_weight="1.0"
       >
       </android.support.v4.view.ViewPager>

2、初始化界面，將界面中的所有控件都找到，主要是ViewPager，然後給ViewPager設置Adapter,實現Adapter需要實現4個方法，分別是

getCount()
isViewFromObject
destroyItem(ViewGroup container, int position, Object object)
instantiateItem(ViewGroup container, int position)

而我們需要爲我們的ViewPager裏面放置多少個View可供滑動，那麼我們需要使用一個List的集合進行保存我們的View對象，例如如下代碼：

List<View>mViews=new List<View>();

通過尋找控件，然後設置適配器，我們已經可以實現ViewPager的滑動和界面的初始化，但是在這個時候我們滑動的時候我們的底下的圖標並沒有變化，同時底部的圖標並沒有點擊事件。
3、最後是設置點擊事件，滑動事件，爲此我們需要爲底部的按鈕設置點擊事件，通過判斷id，然後我們可以實現將底部的按鈕的顏色進行變化，同時將ViewPager.currentItem();設置爲我們需要的。
而滑動事件，是爲ViewPager進行監聽，通過判斷最後是滑動到那個狀態，我們可以通過獲取當前滑動的頁面，然後進行替換。
具體代碼如下：

package com.imooc.tab01;

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

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.LinearLayout;

public class MainActivity extends Activity implements OnClickListener
{

    private ViewPager mViewPager;
    private PagerAdapter mAdapter;
    private List<View> mViews = new ArrayList<View>();
    // TAB

    private LinearLayout mTabWeixin;
    private LinearLayout mTabFrd;
    private LinearLayout mTabAddress;
    private LinearLayout mTabSetting;

    private ImageButton mWeixinImg;
    private ImageButton mFrdImg;
    private ImageButton mAddressImg;
    private ImageButton mSettingImg;

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

        initView();

        initEvents();

    }

    private void initEvents()
    {
        mTabWeixin.setOnClickListener(this);
        mTabFrd.setOnClickListener(this);
        mTabAddress.setOnClickListener(this);
        mTabSetting.setOnClickListener(this);

        mViewPager.setOnPageChangeListener(new OnPageChangeListener()
        {

            @Override
            public void onPageSelected(int arg0)
            {
                int currentItem = mViewPager.getCurrentItem();
                resetImg();
                switch (currentItem)
                {
                case 0:
                    mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
                    break;
                case 1:
                    mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
                    break;
                case 2:
                    mAddressImg
                            .setImageResource(R.drawable.tab_address_pressed);
                    break;
                case 3:
                    mSettingImg
                            .setImageResource(R.drawable.tab_settings_pressed);
                    break;

                }

            }

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

            }

            @Override
            public void onPageScrollStateChanged(int arg0)
            {

            }
        });
    }

    private void initView()
    {
        mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
        // tabs
        mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);
        mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);
        mTabAddress = (LinearLayout) findViewById(R.id.id_tab_address);
        mTabSetting = (LinearLayout) findViewById(R.id.id_tab_settings);
        // ImageButton
        mWeixinImg = (ImageButton) findViewById(R.id.id_tab_weixin_img);
        mFrdImg = (ImageButton) findViewById(R.id.id_tab_frd_img);
        mAddressImg = (ImageButton) findViewById(R.id.id_tab_address_img);
        mSettingImg = (ImageButton) findViewById(R.id.id_tab_settings_img);

        LayoutInflater mInflater = LayoutInflater.from(this);
        View tab01 = mInflater.inflate(R.layout.tab01, null);
        View tab02 = mInflater.inflate(R.layout.tab02, null);
        View tab03 = mInflater.inflate(R.layout.tab03, null);
        View tab04 = mInflater.inflate(R.layout.tab04, null);
        mViews.add(tab01);
        mViews.add(tab02);
        mViews.add(tab03);
        mViews.add(tab04);

        mAdapter = new PagerAdapter()
        {

            @Override
            public void destroyItem(ViewGroup container, int position,
                    Object object)
            {
                container.removeView(mViews.get(position));
            }

            @Override
            public Object instantiateItem(ViewGroup container, int position)
            {
                View view = mViews.get(position);
                container.addView(view);
                return view;
            }

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

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

        mViewPager.setAdapter(mAdapter);

    }

    @Override
    public void onClick(View v)
    {
        resetImg();
        switch (v.getId())
        {
        case R.id.id_tab_weixin:
            mViewPager.setCurrentItem(0);
            mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
            break;
        case R.id.id_tab_frd:
            mViewPager.setCurrentItem(1);
            mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
            break;
        case R.id.id_tab_address:
            mViewPager.setCurrentItem(2);
            mAddressImg.setImageResource(R.drawable.tab_address_pressed);
            break;
        case R.id.id_tab_settings:
            mViewPager.setCurrentItem(3);
            mSettingImg.setImageResource(R.drawable.tab_settings_pressed);
            break;

        default:
            break;
        }
    }

    /**
     * 將所有的圖片切換爲暗色的
     */
    private void resetImg()
    {
        mWeixinImg.setImageResource(R.drawable.tab_weixin_normal);
        mFrdImg.setImageResource(R.drawable.tab_find_frd_normal);
        mAddressImg.setImageResource(R.drawable.tab_address_normal);
        mSettingImg.setImageResource(R.drawable.tab_settings_normal);
    }

}

自己寫的代碼如下：

package com.example.viewpager01;

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

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.LinearLayout;

public class MainActivity extends Activity implements OnClickListener {

    private ViewPager viewpager;

    private LinearLayout TabWeiXin;
    private LinearLayout Friend;
    private LinearLayout Address;
    private LinearLayout Setting;

    private ImageButton settings_img;
    private ImageButton address_img;
    private ImageButton frd_img;
    private ImageButton weixin_img;

    private List<View> mViews;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        initView();
        intiEvents();

    }

    private void intiEvents() {
        TabWeiXin.setOnClickListener(this);
        Friend.setOnClickListener(this);
        Address.setOnClickListener(this);
        Setting.setOnClickListener(this);
        // 給Viewpager設置滑動監聽
        viewpager.setOnPageChangeListener(new OnPageChangeListener() {

            @Override
            public void onPageSelected(int arg0) {
                resetImg();
                int currentPage = viewpager.getCurrentItem();
                switch (currentPage) {
                case 0:
                    weixin_img.setImageResource(R.drawable.tab_weixin_pressed);
                    break;
                case 1:
                    frd_img.setImageResource(R.drawable.tab_find_frd_pressed);
                    break;
                case 2:
                    address_img.setImageResource(R.drawable.tab_address_pressed);
                    break;
                case 3:
                    settings_img.setImageResource(R.drawable.tab_settings_pressed);
                    break;

                default:
                    break;
                }

            }

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

            }

            @Override
            public void onPageScrollStateChanged(int arg0) {

            }
        });
    }

    private void initView() {
        // 初始化界面
        viewpager = (ViewPager) findViewById(R.id.id_viewpager);

        TabWeiXin = (LinearLayout) findViewById(R.id.id_tab_weixin);
        Friend = (LinearLayout) findViewById(R.id.id_tab_frd);
        Address = (LinearLayout) findViewById(R.id.id_tab_address);
        Setting = (LinearLayout) findViewById(R.id.id_tab_settings);

        settings_img = (ImageButton) findViewById(R.id.id_tab_settings_img);
        address_img = (ImageButton) findViewById(R.id.id_tab_address_img);
        frd_img = (ImageButton) findViewById(R.id.id_tab_frd_img);
        weixin_img = (ImageButton) findViewById(R.id.id_tab_weixin_img);

        // 給List增加布局文件
        LayoutInflater inflater = LayoutInflater.from(this);
        mViews = new ArrayList<View>();
        View mView_weixin = inflater.inflate(R.layout.tab01, null);
        View mView_friend = inflater.inflate(R.layout.tab02, null);
        View mView_address = inflater.inflate(R.layout.tab03, null);
        View mView_setting = inflater.inflate(R.layout.tab04, null);

        mViews.add(mView_weixin);
        mViews.add(mView_friend);
        mViews.add(mView_address);
        mViews.add(mView_setting);

        // 設置適配器
        viewpager.setAdapter(new MyAdapter());
    }

    class MyAdapter extends PagerAdapter {

        // 還需要複寫初始化和銷燬兩個方法

        @Override
        public int getCount() {

            return mViews.size();
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {

            container.removeView(mViews.get(position));
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            container.addView(mViews.get(position));
            return mViews.get(position);
        }

        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {

            return arg0 == arg1;
        }

    }

    private void resetImg() {
        weixin_img.setImageResource(R.drawable.tab_weixin_normal);
        frd_img.setImageResource(R.drawable.tab_find_frd_normal);
        address_img.setImageResource(R.drawable.tab_address_normal);
        settings_img.setImageResource(R.drawable.tab_settings_normal);
    }

    @Override
    public void onClick(View v) {
        resetImg();
        switch (v.getId()) {
        case R.id.id_tab_weixin:
            viewpager.setCurrentItem(0);
            weixin_img.setImageResource(R.drawable.tab_weixin_pressed);
            break;
        case R.id.id_tab_frd:
            viewpager.setCurrentItem(1);
            frd_img.setImageResource(R.drawable.tab_find_frd_pressed);
            break;
        case R.id.id_tab_address:
            viewpager.setCurrentItem(2);
            address_img.setImageResource(R.drawable.tab_address_pressed);
            break;
        case R.id.id_tab_settings:
            viewpager.setCurrentItem(3);
            settings_img.setImageResource(R.drawable.tab_settings_pressed);
            break;

        default:
            break;
        }

    }

}

其實剛纔遇到一個問題You need to use a Theme.AppCompat theme (or descendant) with this activity,解決辦法就是將ActionBarActivity換成Activity，然後再導包就可以了