TabLayout ViewPager快速实现滑动切换页面及对应标签

TabLayout ViewPager快速实现滑动切换页面及对应标签_第1张图片

前言:


本章节要对 ViewPager 以及 PagerAdapter 有所了解,该章节部分代码沿用我的这个帖子 :使用ViewPager与ActionBar.Tab 。TabLayout 是Android官方在 support design library 库中带来的新控件,让 Tab 不再依赖 ActionBar 来创建,也封装了 Tab 和 ViewPager 的交互代码,切换 Pages 的动画效果更加自然美观。接下来让我们来学习怎么用。

导入 Android support design library :


因为 TabLayout 是在支持库里的控件,在我们应用 build.gradle 中的 dependencies{},加入
compile 'com.android.support:design:25.0.0',后面的 25.0.0是当前支持库的版本号,然后 点击上方提示的 sync now

TabLayout ViewPager快速实现滑动切换页面及对应标签_第2张图片

添加 ViewPager 以及设置 PageAdapter :


这里沿用 使用ViewPager与ActionBar.Tab 里的 MyFragment 和 MyFragmentAdapter,就不再赘述了,把 ViewPager 添加进布局,设置 ViewPager 的适配器为 MyFragmentAdapter,ViewPager 就能够使用了

public class MainActivity extends AppCompatActivity {    
    private ViewPager viewPager;    
    @Override    
    protected void onCreate(Bundle savedInstanceState) {       
          super.onCreate(savedInstanceState);        
          setContentView(R.layout.activity_main);                      
          viewPager = (ViewPager) findViewById(R.id.pager);        
          MyFragmentAdapter adapter = new MyFragmentAdapter(getSupportFragmentManager());
          viewPager.setAdapter(adapter);   
    }
}




    

    



使用 TabLayout :


添加 TabLayout 布局:




  • tabMode属性有两种取值 fixed 以及 scrollable
  • tabGravity属性有两种取值 center 以及 fill
    这两个属性都和控制 Tab 在界面上显示大小,居中,可伸缩有关系

接下来是添加相应的 Tab ,添加 TabLayout 布局后有两种方式添加 Tab

  • 通过 XML 代码添加,使用 TabItem 标签,例如(这里添加了两个 Tab):
TabLayout ViewPager快速实现滑动切换页面及对应标签_第3张图片
  • 另一种是用 JAVA 代码添加:
TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout_id);
 tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
 tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
 tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));

注意:如果设置 TabItem 后与 ViewPager 关联,这些设置的 TabItem 将全部被移除,取而代之的是 MyFragmentAdapter 提供的 Tab 标签内容 ,一般使用 MyFragmentAdapter 提供的Tab内容可不必设置 TabItem.

TabLayout 与 ViewPager建立关联:


TabLayout 与 ViewPager 建立关联的方式有两种:

  • 通过 tabLayout.setupWithViewPager() 方法
TabLayout ViewPager快速实现滑动切换页面及对应标签_第4张图片
  • 第二种是把 TabLayout 放进 ViewPager 控件中,相当于把两者绑定,系统会自动回调 setupWithViewPager() 方法
   

        

        

    

设置后 TabLayout 将自动检索 ViewPager 设置适配器里的 getCount() 数量来新建 Tab 个数,getPageTitle()方法设置 Tab 的 text 属性,且把 Tab 的点击事件与ViewPager的 Item建立关联,这比起 ActionBar.Tab里方便得多,因为 TabLayout 把这一切都封装好了。

总结:


TabLayout 的简单使用就介绍结束了,如果对你有帮助,请点击 喜欢 按钮。
Demo地址:https://github.com/RunHuaOil/AndroidPractice/tree/master/TabLayoutTest

你可能感兴趣的:(TabLayout ViewPager快速实现滑动切换页面及对应标签)