浅谈TabLayout(ViewPager+Tab联动)-白红宇

google发布了的Android Support Design库中提供了TabLayout

通过TabLayout+ViewPager实现导航栏效果,点击Tab ，ViewPager跟随变化，滑动ViewPager，Tab跟随变化

看效果图：

通过一个Demo来了解TabLayout的简单使用（Android Studio开发）,代码中都有注释了，很简单

1、build.gradle文件中加入

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

2、写Xml文件，注意TabLayout的三个属性

app:tabIndicatorColor="#0f0"                每个tab下方的下划线的颜色    app:tabSelectedTextColor="#00f"             被选中的tab的文本颜色app:tabTextColor="#f00"                     未被选中的tab的文本颜色

activity_main.xml

3、创建4个fragment

这里只创建一个，其他三个类似

1 package com.xqx.com.tablayoutdemo; 2  3  4 import android.os.Bundle; 5 import android.support.v4.app.Fragment; 6 import android.view.LayoutInflater; 7 import android.view.View; 8 import android.view.ViewGroup; 9 10 11 /**12  * A simple {
     @link Fragment} subclass.13  */14 public class OneFragment extends Fragment {15 16 17     public OneFragment() {18         // Required empty public constructor19     }20 21 22     @Override23     public View onCreateView(LayoutInflater inflater, ViewGroup container,24                              Bundle savedInstanceState) {25         // Inflate the layout for this fragment26         return inflater.inflate(R.layout.fragment_one, container, false);27     }28 29 30 }

OneFragment

fragment_one

4、创建ViewPager的适配器

1 package com.xqx.com.tablayoutdemo; 2  3 import android.support.v4.app.Fragment; 4 import android.support.v4.app.FragmentManager; 5 import android.support.v4.app.FragmentPagerAdapter; 6  7 import java.util.List; 8  9 10 public class MyAdapter extends FragmentPagerAdapter{11 12     private List
      
        fragments;           //fragment集合13     private List
       
         titles;                //tab标题集合14 15     public MyAdapter(FragmentManager fm, List
        
          fragments, List
         
           titles) {16         super(fm);17         this.fragments = fragments;18         this.titles = titles;19     }20 21     @Override22     public Fragment getItem(int position) {23         return fragments.get(position);24     }25 26     @Override27     public int getCount() {28         int ret = 0;29         if (fragments!=null && fragments.size()!=0){30             ret = fragments.size();31         }32         return ret;33     }34 35     @Override36     public CharSequence getPageTitle(int position) {37         return titles.get(position);38     }39 40 41 }

MyAdapter.java

5、MainActivity.java

1 package com.xqx.com.tablayoutdemo; 2  3 import android.support.design.widget.TabLayout; 4  5 import android.support.v4.app.Fragment; 6 import android.support.v4.app.FragmentActivity; 7 import android.support.v4.view.ViewPager; 8 import android.os.Bundle; 9 10 import java.util.ArrayList;11 import java.util.List;12 13 public class MainActivity extends FragmentActivity {14 15     private TabLayout tabLayout;16     private ViewPager viewPager;17 18     //四个fragment19     private OneFragment oneFragment;20     private TwoFragment twoFragment;21     private ThreeFragment threeFragment;22     private FourFragment fourFragment;23 24     //适配器25     private MyAdapter adapter;26 27     private List
      
        fragments;           //fragment集合28     private List
       
         titles;                //tab标题集合29     @Override30     protected void onCreate(Bundle savedInstanceState) {31         super.onCreate(savedInstanceState);32         setContentView(R.layout.activity_main);33 34         tabLayout = (TabLayout) findViewById(R.id.tablayout);35         viewPager = (ViewPager) findViewById(R.id.viewpager);36 37         //创建四个Fragment对象38         oneFragment = new OneFragment();39         twoFragment = new TwoFragment();40         threeFragment = new ThreeFragment();41         fourFragment = new FourFragment();42 43         //将四个Fragment对象添加到集合中44         fragments = new ArrayList<>();45         fragments.add(oneFragment);46         fragments.add(twoFragment);47         fragments.add(threeFragment);48         fragments.add(fourFragment);49 50         //给Tab添加标题51         titles = new ArrayList<>();52         titles.add("one");53         titles.add("two");54         titles.add("three");55         titles.add("four");56 57         //创建适配器58         adapter = new MyAdapter(getSupportFragmentManager(),fragments,titles);59         //viewpager绑定适配器60         viewPager.setAdapter(adapter);61         //tabLayout绑定viewpager62         tabLayout.setupWithViewPager(viewPager);63 64     }65 66 }

MainActivity.java

-------------------------------------------------------------------------------------------------

其他相关：