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，然后再导包就可以了