Tablayout 的使用

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

       我使用的 android studio进行开发的，所以引用TabLayout很简单，只要在build.gradle中加入compile 'com.android.support:design:22.2.0'即可。

       这个使用是我在仿 知乎 的时候使用。所以页面就和知乎很像了
       fragment_find.xml



[html] view plain copy
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    xmlns:app="http://schemas.android.com/apk/res-auto"  
    android:orientation="vertical">  

    <android.support.design.widget.TabLayout  
        android:id="@+id/tab_FindFragment_title"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:background="@color/titleBlue"  
        app:tabIndicatorColor="@color/white"  
        app:tabSelectedTextColor="@color/gray"  
        app:tabTextColor="@color/white"  
        />  


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

</LinearLayout>  

    这里面没有什么特别的，就是添加了一个TabLayout和Viewpager作为上下的布局。其中


[html] view plain copy
app:tabIndicatorColor="@color/white"                 // 下方滚动的下划线颜色  
app:tabSelectedTextColor="@color/gray"               // tab被选中后，文字的颜色  
app:tabTextColor="@color/white"                      // tab默认的文字颜色  

  Find_tab_Adapter.Java  它是viewpager的Adapter，因为这里面我每个栏目下，都会有一些列表，所以采用list<View>的方式，在里面切换layout不太适合，所以我采用了List<Fragment>来直接加载多个fragment



[java] view plain copy
package com.example.cg.myzhihu.Adapters;  


import android.support.v4.app.Fragment;  
import android.support.v4.app.FragmentManager;  
import android.support.v4.app.FragmentPagerAdapter;  

import java.util.List;  

/** 
 * Created by cg on 2015/9/26. 
 */  
public class Find_tab_Adapter extends FragmentPagerAdapter {  

    private List<Fragment> list_fragment;                         //fragment列表  
    private List<String> list_Title;                              //tab名的列表  



    public Find_tab_Adapter(FragmentManager fm,List<Fragment> list_fragment,List<String> list_Title) {  
        super(fm);  
        this.list_fragment = list_fragment;  
        this.list_Title = list_Title;  
    }  

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

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

    //此方法用来显示tab上的名字  
    @Override  
    public CharSequence getPageTitle(int position) {  

        return list_Title.get(position % list_Title.size());  
    }  
}  

FindFragment.java这个的说法，全在标注里面了
[java] view plain copy
package com.example.cg.myzhihu;  


import android.os.Bundle;  
import android.support.design.widget.TabLayout;  
import android.support.v4.app.Fragment;  
import android.support.v4.app.FragmentPagerAdapter;  
import android.support.v4.view.ViewPager;  
import android.view.LayoutInflater;  
import android.view.View;  
import android.view.ViewGroup;  

import com.example.cg.myzhihu.Adapters.Find_tab_Adapter;  

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


/** 
 * 发现页面 
 */  
public class FindFragment extends Fragment {  

    private TabLayout tab_FindFragment_title;                            //定义TabLayout  
    private ViewPager vp_FindFragment_pager;                             //定义viewPager  
    private FragmentPagerAdapter fAdapter;                               //定义adapter  

    private List<Fragment> list_fragment;                                //定义要装fragment的列表  
    private List<String> list_title;                                     //tab名称列表  

    private Find_hotRecommendFragment hotRecommendFragment;              //热门推荐fragment  
    private Find_hotCollectionFragment hotCollectionFragment;            //热门收藏fragment  
    private Find_hotMonthFragment hotMonthFragment;                      //本月热榜fragment  
    private Find_hotToday hotToday;                                      //今日热榜fragment  

    @Override  
    public View onCreateView(LayoutInflater inflater, ViewGroup container,  
                             Bundle savedInstanceState) {  
        View view = inflater.inflate(R.layout.fragment_find, container, false);  

        initControls(view);  

        return view;  
    }  

    /** 
     * 初始化各控件 
     * @param view 
     */  
    private void initControls(View view) {  

        tab_FindFragment_title = (TabLayout)view.findViewById(R.id.tab_FindFragment_title);  
        vp_FindFragment_pager = (ViewPager)view.findViewById(R.id.vp_FindFragment_pager);  

        //初始化各fragment  
        hotRecommendFragment = new Find_hotRecommendFragment();  
        hotCollectionFragment = new Find_hotCollectionFragment();  
        hotMonthFragment = new Find_hotMonthFragment();  
        hotToday = new Find_hotToday();  

        //将fragment装进列表中  
        list_fragment = new ArrayList<>();  
        list_fragment.add(hotRecommendFragment);  
        list_fragment.add(hotCollectionFragment);  
        list_fragment.add(hotMonthFragment);  
        list_fragment.add(hotToday);  

        //将名称加载tab名字列表，正常情况下，我们应该在values/arrays.xml中进行定义然后调用  
        list_title = new ArrayList<>();  
        list_title.add("热门推荐");  
        list_title.add("热门收藏");  
        list_title.add("本月热榜");  
        list_title.add("今日热榜");  

        //设置TabLayout的模式  
        tab_FindFragment_title.setTabMode(TabLayout.MODE_FIXED);  
        //为TabLayout添加tab名称  
        tab_FindFragment_title.addTab(tab_FindFragment_title.newTab().setText(list_title.get(0)));  
        tab_FindFragment_title.addTab(tab_FindFragment_title.newTab().setText(list_title.get(1)));  
        tab_FindFragment_title.addTab(tab_FindFragment_title.newTab().setText(list_title.get(2)));  
        tab_FindFragment_title.addTab(tab_FindFragment_title.newTab().setText(list_title.get(3)));  

        fAdapter = new Find_tab_Adapter(getActivity().getSupportFragmentManager(),list_fragment,list_title);  

        //viewpager加载adapter  
        vp_FindFragment_pager.setAdapter(fAdapter);  
        //tab_FindFragment_title.setViewPager(vp_FindFragment_pager);  
        //TabLayout加载viewpager  
        tab_FindFragment_title.setupWithViewPager(vp_FindFragment_pager);  
        //tab_FindFragment_title.set  
    }  


}