使用support.design.widget.TabLayout和ViewPager组合成滑动标签组件

使用support.design.widget.TabLayout和ViewPager组合成滑动标签组件

1. 引入

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

2. 布局文件

   <android.support.design.widget.TabLayout
           android:id="@+id/tabLayout"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           app:tabGravity="center"
           app:tabIndicatorColor="#FFFF0000"
           app:tabMode="scrollable"
           app:tabSelectedTextColor="#FF0000FF"
           app:tabTextColor="#FF987898">
   </android.support.design.widget.TabLayout>
   
       <android.support.v4.view.ViewPager
           android:id="@+id/viewpager"
           android:layout_width="match_parent"
           android:layout_height="match_parent" />
   

3. 找到该控件

    private void initView() {
           TabLayout tabLayout = (TabLayout) findViewById(R.id.tabLayout);
           ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
       } 
   

4. 准备要填充的Fragment和Titles

   private void initData() {
   
       for (int i = 0; i < 7; i++) {
           mTitle[i] = "title" + i;
       }
   
       MyFragment f1 = new MyFragment(getApplicationContext(), "A");
       MyFragment f2 = new MyFragment(getApplicationContext(), "B");
       MyFragment f3 = new MyFragment(getApplicationContext(), "C");
       MyFragment f4 = new MyFragment(getApplicationContext(), "D");
       MyFragment f5 = new MyFragment(getApplicationContext(), "E");
       MyFragment f6 = new MyFragment(getApplicationContext(), "F");
       MyFragment f7 = new MyFragment(getApplicationContext(), "G");
       list.add(f1);
       list.add(f2);
       list.add(f3);
       list.add(f4);
       list.add(f5);
       list.add(f6);
       list.add(f7);
    }
   

   补充： MyFragment继承自Fragment（一定要使用V4包）

   @SuppressLint("ValidFragment")//提示保措时，添加这句话即可
   public class MyFragment extends Fragment {
       private Context context;
       private  String str;
   
       public MyFragment(Context context,String str) {
           this.context = context;
           this.str=str;
       }
   
       @Nullable
       @Override
       public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
   
           TextView tv = new TextView(context);
           tv.setText(str);
           tv.setTextSize(90);
           return tv;
       }
   }
   

5. new FragmentPagerAdapter

   • 重写默认的两个方法，绑定Fragment个数和Fragment（注意这里的Fragment使用V4包的）

   • 手动引入重写getPageTitle方法，绑定tabLayout的标题组

      FragmentPagerAdapter adapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
                 @Override
                 public int getCount() {
                     return list.size();
                 }
     
                 @Override
                 public Fragment getItem(int position) {
                     return list.get(position);
                 }
     
                 @Override
                 public CharSequence getPageTitle(int position) {
                     return mTitle[position];
                 }
             };
     

6. 后续设置：

   • ★从adapte的getPageTitle方法中得到tabLayout的标题，
   • 给viewPager设置适配器

   • 互相绑定tablayout和viewpager，使其联动。

     tabLayout.setTabsFromPagerAdapter(adapter);//从adapte的getPageTitle方法中得到tabLayout的标题
     
     viewPager.setAdapter(adapter);//略
     
     /*
     (互相绑定tablayout和viewpager)这个方法是addOnPageChangeListener和setOnTabSelectedListener的封装。
     ★但是需要注意一下，setupWithViePager必须在ViewPager.setAdapter()之后调用！
     */
     
     tabLayout.setupWithViewPager(viewPager);