Tablayout依赖 android 安卓开发tablayout

---

TabLayout的简单使用

我们在应用viewpager的时候，经常会使用TabPageIndicator来与其配合。达到很漂亮的效果。但是TabPageIndicator是第三方的，而且比较老了，当然了现在很多大神都已经开始自己写TabPageIndicator来满足自己的需求，在2015年的google大会上，google发布了新的Android Support Design库，里面包含了几个新的控件，其中就有一个TabLayout，它就可以完成TabPageIndicator的效果，而且还是官方的，最好的是它可以兼容到2.2以上版本，包括2.2,

我们先看源码的解释,如图所示

其实TabLayout是继承了水平滑动的ScrollView,所以可以实现我们的上面动态图中导航栏标签的滑动

---

我们再看接口的定义

这个是源码里面Tab选中的监听接口,可以看到里面定义了三个方法,tab选中,未选中,重新选中的三个方法,所以我们在滑动的时候,系统会自动的去监听你选中的是那个tab,然后把当前的显示出来

---

这个是TabLayout的重绘,其实就是我们自定义View重写的几个构造函数,如下图所示

---

然后再看动态图中滑动的时候,随着滑动的绿条的实现源码

这些都在源码中实现好了,所以感谢万能的谷歌吧!!!

---

接下来我们就开始实现博文刚开始的动态图内容吧:

---

首先要使用Tablayout就要导入这个包,因为我用的是AS开发,导入依赖就可以

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

---

因为下面随着滑动的是Fragment,那么我们必定要用到ViewPager,因此用到这两个就必须要用到FragmentPagerAdapter

---

本Demo是利用ViewPager+Fragment+TabLayout实现的,大概实现步骤如下

1. 布局文件引入TabLayout
2. ViewPager+Fragment的书写
3. Fragment的数据集合
4. 我们采用单列的形式创建Fragment
5. 数据源的书写

我们就按照这五步来实现我们的demo,

---

第一步,布局文件

<!--直接引入TabLayout-->         <android.support.design.widget.TabLayout
android:id="@+id/tabLayout"               android:layout_width="match_parent"
android:layout_height="50dp"
android:visibility="gone"                app:tabIndicatorColor="@android:color/holo_green_light"
app:tabMode="scrollable"              app:tabSelectedTextColor="@android:color/holo_red_light"             app:tabTextAppearance="@style/mySetting"             app:tabTextColor="@android:color/background_dark"/>
<!--引入ViewPager-->   
    <android.support.v4.view.ViewPager
        android:id="@+id/top_news_ViewPager"
        android:visibility="gone"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>

第二步的书写

---

public class MyFragment extends BaseFragment {

    private ListView mListView;
    private List<String> list;
    private MyBroadTopNewsAdapter newsAdapter;
    public static MyFragment newInstance(String parmas) {
        Bundle args = new Bundle();
        args.putString("flag", parmas);
        MyFragment fragment = new MyFragment();
        fragment.setArguments(args);//将存有值的Bundle利用setArguments再次存起来
        return fragment;
    }

    @Override
    public View initView() {
        View view = View.inflate(getActivity(),R.layout.myfragment, null);
        mListView = (ListView) view.findViewById(R.id.myFragment_listView);
        list = new ArrayList<>();
        for (int i = 0; i < 50; i++) {
            list.add("宋学虎");
        }
        newsAdapter = new MyBroadTopNewsAdapter(getActivity(),list);
        mListView.setAdapter(newsAdapter);
        return view;
    }

    @Override
    public void setData() {

    }

}

第三步的书写,adapter适配器

public class MyBroadProvinceAdapter extends FragmentStatePagerAdapter {

    private List<String> mlist;//标题集合
    private List<Fragment> list;//内容集合
    public MyBroadProvinceAdapter(FragmentManager fm, List<String> mlist, List<Fragment> list) {
        super(fm);
        this.mlist = mlist;
        this.list = list;
    }

    @Override
    public Fragment getItem(int position) {
        return list.get(position);
    }

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

    //设置标题展示内容
    @Override
    public CharSequence getPageTitle(int position) {
        return mlist.get(position);
    }
}

第四步mainActivity的书写

private TabLayout mTabLayout;
    private ViewPager mViewPager;
    private List<String> titles;
    private List<Fragment> listFragment;
    private MyBroadProvinceAdapter mAdapter;
    private String[] titles1 = {"体育", "娱乐", "手机", "教育", "科学",
            "嘻哈", "头条", "电视", "住房", "轻松一刻"};

    private void initView() {
        mListView = (ListView) findViewById(R.id.top_news_listView);
        mTabLayout = (TabLayout) findViewById(R.id.tabLayout);
        mViewPager = (ViewPager) findViewById(R.id.top_news_ViewPager);
    }

---

titles = new ArrayList<>();
            listFragment = new ArrayList<>();
            for (int i = 0; i < 10; i++) {
                titles.add(titles1[i]);
                listFragment.add(MyFragment.newInstance(titles1[i]));
            }
            mAdapter = new MyBroadProvinceAdapter(getSupportFragmentManager(), titles, listFragment);
            mViewPager.setAdapter(mAdapter);
            mTabLayout.setupWithViewPager(mViewPager);