使用tabLayout实现viewPager+Fragment

使用tabLayout实现viewPager+Fragment

一.TabLayout的布局设置

<android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        <!-- 下方滚动的下划线颜色  -->
        app:tabIndicatorColor="#33aa22"
        <!-- 下方指示条的高度  -->
        app:tabIndicatorHeight="5dp"
        <!-- tab被选中后，文字的颜色  -->
        app:tabSelectedTextColor="#33aa22"
        <!--可以改变tab中的字体的大小-->
        app:tabTextAppearance="@style/App_Theme"
        <!-- tab中字体的颜色  -->
        app:tabTextColor="#33aa22"
 <!-- tab中设置横向scroll  -->
 app:tabMode="scrollable"
/>

二.初始化数据（标题+fragment）

三.添加tab选项

1	mTabLayout.addTab(mTabLayout.newTab().setText(“标题字符串”);

 四.设置适配器（适配器中必须重写这一步，不然标题不会显示出来）

1 2 3 4 5

//ViewPager与TabLayout绑定后，这里获取到PageTitle就是Tab的Text @Override public CharSequence getPageTitle(int position) {     return listTitles.get(position); }

五.将TabLayout和ViewPager关联起来

1	mTabLayout.setupWithViewPager(mViewPager);

六.给Tabs设置适配器

1	mTabLayout.setTabsFromPagerAdapter(mAdapter);

 

实例代码如下：

 MainActivity：

 1 package activity.lijintao.bawei.com.tablayouttest;
 2 
 3 import android.os.Build;
 4 import android.os.Bundle;
 5 import android.support.annotation.RequiresApi;
 6 import android.support.design.widget.TabLayout;
 7 import android.support.v4.app.Fragment;
 8 import android.support.v4.app.FragmentPagerAdapter;
 9 import android.support.v4.view.ViewPager;
10 import android.support.v7.app.AppCompatActivity;
11 import android.view.LayoutInflater;
12 import android.view.View;
13 import android.widget.TextView;
14 
15 import java.util.ArrayList;
16 import java.util.List;
17 
18 public class MainActivity extends AppCompatActivity {
19 
20     private TabLayout mTabLayout;
21     private ViewPager mViewPager;
22 
23     private LayoutInflater mInflater;
24     private List<String> mTitleList = new ArrayList<>();//页卡标题集合
25     private View view1, view2, view3, view4, view5;//页卡视图
26     private List<View> mViewList = new ArrayList<>();//页卡视图集合
27     private List<String> listTitles;
28     private List<Fragment> fragments;
29     private List<TextView> listTextViews;
30 
31     @RequiresApi(api = Build.VERSION_CODES.GINGERBREAD)
32     @Override
33     protected void onCreate(Bundle savedInstanceState) {
34         super.onCreate(savedInstanceState);
35         setContentView(R.layout.activity_main);
36         mViewPager = (ViewPager) findViewById(R.id.vp_view);
37         mTabLayout = (TabLayout) findViewById(R.id.tabs);
38 
39         initData();
40 
41 
42 
43     }
44     private void initData() {
45         listTitles = new ArrayList<>();
46         fragments = new ArrayList<>();
47         listTextViews = new ArrayList<>();
48 
49         listTitles.add("推荐");
50         listTitles.add("热点");
51         listTitles.add("视频");
52         listTitles.add("北京");
53         listTitles.add("社会");
54         listTitles.add("娱乐");
55         listTitles.add("问答");
56         listTitles.add("图片");
57         listTitles.add("科技");
58         listTitles.add("汽车");
59         listTitles.add("体育");
60         listTitles.add("财经");
61         listTitles.add("军事");
62         listTitles.add("国际");
63         for (int i = 0; i < listTitles.size(); i++) {
64             ContentFragment fragment = ContentFragment.newInstance(listTitles.get(i));
65             fragments.add(fragment);
66 
67         }
68         //mTabLayout.setTabMode(TabLayout.SCROLL_AXIS_HORIZONTAL);//设置tab模式，当前为系统默认模式
69         for (int i=0;i<listTitles.size();i++){
70             mTabLayout.addTab(mTabLayout.newTab().setText(listTitles.get(i)));//添加tab选项
71         }
72 
73         FragmentPagerAdapter mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
74             @Override
75             public Fragment getItem(int position) {
76                 return fragments.get(position);
77             }
78 
79             @Override
80             public int getCount() {
81                 return fragments.size();
82             }
83             //ViewPager与TabLayout绑定后，这里获取到PageTitle就是Tab的Text
84             @Override
85             public CharSequence getPageTitle(int position) {
86                 return listTitles.get(position);
87             }
88         };
89         mViewPager.setAdapter(mAdapter);
90 
91         mTabLayout.setupWithViewPager(mViewPager);//将TabLayout和ViewPager关联起来。
92         mTabLayout.setTabsFromPagerAdapter(mAdapter);//给Tabs设置适配器
93 
94     }
95 }

Fragment代码：

 1 package activity.lijintao.bawei.com.tablayouttest;
 2 
 3 import android.graphics.Color;
 4 import android.os.Bundle;
 5 import android.support.annotation.Nullable;
 6 import android.support.v4.app.Fragment;
 7 import android.view.LayoutInflater;
 8 import android.view.View;
 9 import android.view.ViewGroup;
10 import android.widget.TextView;
11 
12 /**
13  * 
14  * date:2017/6/7
15  */
16 
17 
18 public class ContentFragment extends Fragment {
19     private View view;
20     private static final String KEY = "title";
21     private TextView tvContent;
22 
23     @Nullable
24     @Override
25     public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
26 
27         view = inflater.inflate(R.layout.contentfragment,container,false);
28         tvContent = (TextView) view.findViewById(R.id.tv_content);
29         String string = getArguments().getString(KEY);
30         tvContent.setText(string);
31         tvContent.setTextColor(Color.BLUE);
32         tvContent.setTextSize(30);
33         return view;
34     }
35 
36     /**
37      * fragment静态传值
38      */
39     public static ContentFragment newInstance(String str){
40         ContentFragment fragment = new ContentFragment();
41         Bundle bundle = new Bundle();
42         bundle.putString(KEY,str);
43         fragment.setArguments(bundle);
44 
45         return fragment;
46     }
47 }

xml代码：

activity_main.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:app="http://schemas.android.com/apk/res-auto"
 4     android:layout_width="match_parent"
 5     android:layout_height="match_parent"
 6     android:orientation="vertical">
 7 
 8 
 9     <android.support.design.widget.TabLayout
10         android:id="@+id/tabs"
11         android:layout_width="match_parent"
12         android:layout_height="wrap_content"
13         app:tabIndicatorColor="#F00"
14         app:tabSelectedTextColor="#F00"
15         app:tabTextColor="#1d1c1d"
16         android:background="#f0F"
17         app:tabMode="scrollable"
18 
19         >
20 
21         </android.support.design.widget.TabLayout>
22 
23 
24 
25     <!--可滑动的布局内容-->
26     <android.support.v4.view.ViewPager
27         android:id="@+id/vp_view"
28         android:layout_width="match_parent"
29         android:layout_height="wrap_content"/>
30 

31 </LinearLayout>

contentfragment.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent">
 5 
 6     <TextView
 7         android:id="@+id/tv_content"
 8         android:layout_width="match_parent"
 9         android:layout_height="match_parent"
10         android:gravity="center"
11         />
12 </LinearLayout>

就这么些了，希望对你有所帮助！