TabLayout

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     android:layout_width="match_parent"  
3.     android:layout_height="match_parent"  
4.     xmlns:app="http://schemas.android.com/apk/res-auto"  
5.     android:orientation="vertical">  
6.   
7.     <android.support.design.widget.TabLayout  
8.         android:id="@+id/tab_FindFragment_title"  
9.         android:layout_width="match_parent"  
10.         android:layout_height="wrap_content"  
11.         android:background="@color/titleBlue"  
12.         app:tabIndicatorColor="@color/white"  
13.         app:tabSelectedTextColor="@color/gray"  
14.         app:tabTextColor="@color/white"  
15.         />  
16.   
17.   
18.     <android.support.v4.view.ViewPager  
19.         android:id="@+id/vp_FindFragment_pager"  
20.         android:layout_width="fill_parent"  
21.         android:layout_height="0dp"  
22.         android:layout_weight="1"  
23.         />  
24.   
25. </LinearLayout>  

26. <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

print?

1. app:tabIndicatorColor="@color/white"                 // 下方滚动的下划线颜色  
2. app:tabSelectedTextColor="@color/gray"               // tab被选中后，文字的颜色  
3. app:tabTextColor="@color/white"                      // tab默认的文字颜色  

        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

print?

1. package com.example.cg.myzhihu.Adapters;  
2.   
3.   
4. import android.support.v4.app.Fragment;  
5. import android.support.v4.app.FragmentManager;  
6. import android.support.v4.app.FragmentPagerAdapter;  
7.   
8. import java.util.List;  
9.   
10. /** 
11.  * Created by cg on 2015/9/26. 
12.  */  
13. public class Find_tab_Adapter extends FragmentPagerAdapter {  
14.   
15.     private List<Fragment> list_fragment;                         //fragment列表  
16.     private List<String> list_Title;                              //tab名的列表  
17.   
18.   
19.   
20.     public Find_tab_Adapter(FragmentManager fm,List<Fragment> list_fragment,List<String> list_Title) {  
21.         super(fm);  
22.         this.list_fragment = list_fragment;  
23.         this.list_Title = list_Title;  
24.     }  
25.   
26.     @Override  
27.     public Fragment getItem(int position) {  
28.         return list_fragment.get(position);  
29.     }  
30.   
31.     @Override  
32.     public int getCount() {  
33.         return list_Title.size();  
34.     }  
35.   
36.     //此方法用来显示tab上的名字  
37.     @Override  
38.     public CharSequence getPageTitle(int position) {  
39.   
40.         return list_Title.get(position % list_Title.size());  
41.     }  
42. }  

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

print?

1. package com.example.cg.myzhihu;  
2.   
3.   
4. import android.os.Bundle;  
5. import android.support.design.widget.TabLayout;  
6. import android.support.v4.app.Fragment;  
7. import android.support.v4.app.FragmentPagerAdapter;  
8. import android.support.v4.view.ViewPager;  
9. import android.view.LayoutInflater;  
10. import android.view.View;  
11. import android.view.ViewGroup;  
12.   
13. import com.example.cg.myzhihu.Adapters.Find_tab_Adapter;  
14.   
15. import java.util.ArrayList;  
16. import java.util.List;  
17.   
18.   
19. /** 
20.  * 发现页面 
21.  */  
22. public class FindFragment extends Fragment {  
23.   
24.     private TabLayout tab_FindFragment_title;                            //定义TabLayout  
25.     private ViewPager vp_FindFragment_pager;                             //定义viewPager  
26.     private FragmentPagerAdapter fAdapter;                               //定义adapter  
27.   
28.     private List<Fragment> list_fragment;                                //定义要装fragment的列表  
29.     private List<String> list_title;                                     //tab名称列表  
30.   
31.     private Find_hotRecommendFragment hotRecommendFragment;              //热门推荐fragment  
32.     private Find_hotCollectionFragment hotCollectionFragment;            //热门收藏fragment  
33.     private Find_hotMonthFragment hotMonthFragment;                      //本月热榜fragment  
34.     private Find_hotToday hotToday;                                      //今日热榜fragment  
35.   
36.     @Override  
37.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
38.                              Bundle savedInstanceState) {  
39.         View view = inflater.inflate(R.layout.fragment_find, container, false);  
40.   
41.         initControls(view);  
42.   
43.         return view;  
44.     }  
45.   
46.     /** 
47.      * 初始化各控件 
48.      * @param view 
49.      */  
50.     private void initControls(View view) {  
51.   
52.         tab_FindFragment_title = (TabLayout)view.findViewById(R.id.tab_FindFragment_title);  
53.         vp_FindFragment_pager = (ViewPager)view.findViewById(R.id.vp_FindFragment_pager);  
54.   
55.         //初始化各fragment  
56.         hotRecommendFragment = new Find_hotRecommendFragment();  
57.         hotCollectionFragment = new Find_hotCollectionFragment();  
58.         hotMonthFragment = new Find_hotMonthFragment();  
59.         hotToday = new Find_hotToday();  
60.   
61.         //将fragment装进列表中  
62.         list_fragment = new ArrayList<>();  
63.         list_fragment.add(hotRecommendFragment);  
64.         list_fragment.add(hotCollectionFragment);  
65.         list_fragment.add(hotMonthFragment);  
66.         list_fragment.add(hotToday);  
67.   
68.         //将名称加载tab名字列表，正常情况下，我们应该在values/arrays.xml中进行定义然后调用  
69.         list_title = new ArrayList<>();  
70.         list_title.add("热门推荐");  
71.         list_title.add("热门收藏");  
72.         list_title.add("本月热榜");  
73.         list_title.add("今日热榜");  
74.   
75.         //设置TabLayout的模式  
76.         tab_FindFragment_title.setTabMode(TabLayout.MODE_FIXED);  
77.         //为TabLayout添加tab名称  
78.         tab_FindFragment_title.addTab(tab_FindFragment_title.newTab().setText(list_title.get(0)));  
79.         tab_FindFragment_title.addTab(tab_FindFragment_title.newTab().setText(list_title.get(1)));  
80.         tab_FindFragment_title.addTab(tab_FindFragment_title.newTab().setText(list_title.get(2)));  
81.         tab_FindFragment_title.addTab(tab_FindFragment_title.newTab().setText(list_title.get(3)));  
82.   
83.         fAdapter = new Find_tab_Adapter(getActivity().getSupportFragmentManager(),list_fragment,list_title);  
84.   
85.         //viewpager加载adapter  
86.         vp_FindFragment_pager.setAdapter(fAdapter);  
87.         //tab_FindFragment_title.setViewPager(vp_FindFragment_pager);  
88.         //TabLayout加载viewpager  
89.         tab_FindFragment_title.setupWithViewPager(vp_FindFragment_pager);  
90.         //tab_FindFragment_title.set  
91.     }  
92.   
93.   
94. }