超简单的ViewPager导航栏联动实现--TabLayout

效果如下：

实现这个效果非常的简单，就两个控件，一个TabLayout，一个ViewPager,主要通过TabLayout的setupWithViewPager() 方法来使TabLayout和ViewPager联动

下面说说具体实现步骤。

1，TabLayout有自己的包，所以第一步是在build.gradle里面添加依赖包，具体代码是：

compile 'com.android.support:design:24.0.0'

然后同步下一就可以了

2，接下来就可以在布局文件里面使用了，布局文件代码如下：

接下来就是在代码中实现具体逻辑了

关于TabLayout的代码就只有几行：

 //设置标题
        titleList = new ArrayList<>();
        titleList.add("高圆圆");
        titleList.add("江一燕");
        titleList.add("佟丽娅");
        mTab = (TabLayout) findViewById(R.id.main_tab);
        //设置tab的模式
        mTab.setTabMode(TabLayout.MODE_FIXED);
        //添加tab选项卡
        for (int i = 0; i < titleList.size(); i++) {
            mTab.addTab(mTab.newTab().setText(titleList.get(i)));
        }
        //把TabLayout和ViewPager关联起来
        mTab.setupWithViewPager(mViewPager);

接下来就是编写ViewPager的逻辑：

我这里是在ViewPager里面放置图片，

 //设置ViewPager里面也要显示的图片
        mList = new ArrayList<>();
        ImageView yuanYuan = new ImageView(this);
        ImageView yiYan = new ImageView(this);
        ImageView liYa = new ImageView(this);
        yuanYuan.setImageResource(R.mipmap.gaoyuanyuan);
        yiYan.setImageResource(R.mipmap.jiangyiyan);
        liYa.setImageResource(R.mipmap.tongliya);
        //设置图片显示全屏
        yuanYuan.setScaleType(ImageView.ScaleType.FIT_XY);
        yiYan.setScaleType(ImageView.ScaleType.FIT_XY);
        liYa.setScaleType(ImageView.ScaleType.FIT_XY);
        mList.add(yuanYuan);
        mList.add(yiYan);
        mList.add(liYa);

然后就可以在实例化ViewPager的Adapter的时候通过构造方法传递过去使用了

 mViewPager = (ViewPager) findViewById(R.id.main_viewpager);

 //实例化adapter
        mAdapter = new MyViewPagerAdapter(mList,titleList);
        //给ViewPager绑定Adapter
        mViewPager.setAdapter(mAdapter);

接下来就是ViewPager的Adapter的编写：

package com.duanlian.tablayoutdemo.adapter;

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import java.util.List;

public class MyViewPagerAdapter extends PagerAdapter {
    private List list;
    private List titleList;
    public MyViewPagerAdapter(List mList,List titleList) {
        this.list = mList;
        this.titleList = titleList;
    }

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

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view==object;
    }
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(list.get(position));//添加页卡
        return list.get(position);
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(list.get(position));//删除页卡
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return titleList.get(position);//页卡标题
    }
}

顺便把MainActivity的整体代码都贴出来：

package com.duanlian.tablayoutdemo;

import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Window;
import android.widget.ImageView;

import com.duanlian.tablayoutdemo.adapter.MyViewPagerAdapter;

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

public class MainActivity extends AppCompatActivity {

    private ViewPager mViewPager;
    private TabLayout mTab;
    private MyViewPagerAdapter mAdapter;
    private List mList;
    private List titleList;

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

    /**
     * 实例化控件
     */
    private void initView() {
        mViewPager = (ViewPager) findViewById(R.id.main_viewpager);
        //设置ViewPager里面也要显示的图片
        mList = new ArrayList<>();
        ImageView yuanYuan = new ImageView(this);
        ImageView yiYan = new ImageView(this);
        ImageView liYa = new ImageView(this);
        yuanYuan.setImageResource(R.mipmap.gaoyuanyuan);
        yiYan.setImageResource(R.mipmap.jiangyiyan);
        liYa.setImageResource(R.mipmap.tongliya);
        //设置图片显示全屏
        yuanYuan.setScaleType(ImageView.ScaleType.FIT_XY);
        yiYan.setScaleType(ImageView.ScaleType.FIT_XY);
        liYa.setScaleType(ImageView.ScaleType.FIT_XY);
        mList.add(yuanYuan);
        mList.add(yiYan);
        mList.add(liYa);
        //设置标题
        titleList = new ArrayList<>();
        titleList.add("高圆圆");
        titleList.add("江一燕");
        titleList.add("佟丽娅");
        mTab = (TabLayout) findViewById(R.id.main_tab);
        //设置tab的模式
        mTab.setTabMode(TabLayout.MODE_FIXED);
        //添加tab选项卡
        for (int i = 0; i < titleList.size(); i++) {
            mTab.addTab(mTab.newTab().setText(titleList.get(i)));
        }
        //把TabLayout和ViewPager关联起来
        mTab.setupWithViewPager(mViewPager);
        //实例化adapter
        mAdapter = new MyViewPagerAdapter(mList,titleList);
        //给ViewPager绑定Adapter
        mViewPager.setAdapter(mAdapter);


    }
}

我还在AndroidManifest里面把Title去掉了，去掉会显得好看一点

  android:theme="@style/Theme.Design.NoActionBar"

到此结束，是不是很简单demo地址：http://download.csdn.net/detail/dl10210950/9607981

代码有不足和不对的地方，望指正，谢谢