android TabLayout使用方法详解

概述Google在2015的IO大会上，给我们带来了更加详细的MaterialDesign设计规范，同时，也给我们带来了全新的AndroidDesignSupportLibrary，在这个support库里面，Google给我们提供了更加规范的MD设计风格的控件。最重要的

Google在2015的IO大会上，给我们带来了更加详细的Material Design设计规范，同时，也给我们带来了全新的AndroID Design Support library，在这个support库里面，Google给我们提供了更加规范的MD设计风格的控件。最重要的是，AndroID Design Support library的兼容性更广，直接可以向下兼容到AndroID 2.2。

这两天需要做一个仿京东详情的页面，上面的Tab切换，以前都是自己写VIEwpager+fragment，或者Indicator的深度定制，一直想尝试一下TabLayout，于是就有了下面的坑。

然后下面是我简单的实现效果（个人觉得很坑，还不如自己自定义的导航器）

添加引用库

dependencIEs {  compile filetree(dir: 'libs',include: ['*.jar'])  compile 'com.androID.support:appcompat-v7:24.2.0'  compile 'com.androID.support:design:24.2.0'  compile 'com.androID.support:recyclervIEw-v7:24.2.0'  compile 'com.androID.support:cardvIEw-v7:24.2.0'}

Toolbar与TabLayout

我们来看一下实现的布局：

<?xml version="1.0" enCoding="utf-8"?><linearLayout xmlns:androID="http://schemas.androID.com/apk/res/androID"  xmlns:app="http://schemas.androID.com/apk/res-auto"  androID:layout_wIDth="match_parent"  androID:layout_height="match_parent"  androID:orIEntation="vertical">  <androID.support.v7.Widget.Toolbar    androID:ID="@+ID/toolbar"    androID:layout_wIDth="match_parent"    androID:layout_height="48dp"    androID:gravity="center_vertical"    app:navigationIcon="@drawable/back_icon"   >    <linearLayout      androID:layout_wIDth="match_parent"      androID:layout_height="wrap_content"      androID:gravity="center"      androID:orIEntation="horizontal">      <androID.support.design.Widget.TabLayout        androID:ID="@+ID/tabLayout"        androID:layout_wIDth="match_parent"        androID:layout_height="match_parent"                />    </linearLayout>    <TextVIEw      androID:layout_wIDth="wrap_content"      androID:layout_height="wrap_content"      androID:layout_gravity="right"      androID:background="@drawable/more_icon" />  </androID.support.v7.Widget.Toolbar>  <VIEw  />  <androID.support.v4.vIEw.VIEwPager    androID:ID="@+ID/vIEwPager"    androID:layout_wIDth="match_parent"    androID:layout_height="match_parent" /></linearLayout>

这布局文件最关键的一点就是androID.support.design.Widget.TabLayout 标签中的app:tabMode=”scrollable”，他设置tab的模式为“可滑动的”。

其他的用法和Indicator的用法差不多，都需要设置适配器，然后通过数据实现页面的适配。直接上代码

Adapter

public class ProductDetailPagerAdapter extends FragmentPagerAdapter {  private List<String> mTitles;  public ProductDetailPagerAdapter(FragmentManager fm,List<String> mTitles) {    super(fm);    this.mTitles = mTitles;  }  @OverrIDe  public Fragment getItem(int position) {    if (position == 0) {      return new ProductFragment();    } else if (position == 1) {      return new ProductDetailFragment();    }    return new ProductFragment();  }  @OverrIDe  public int getCount() {    return mTitles.size();  }  @OverrIDe  public CharSequence getPageTitle(int position) {    return mTitles.get(position);  }}

主页面的相关逻辑，这里的Fragment就是简单的Fragment。

public class ProductDetailsActivity extends BaseActivity {  @BindVIEw(R.ID.vIEwPager)  VIEwPager vIEwPager;  @BindVIEw(R.ID.tabLayout)  TabLayout tabLayout;  @BindVIEw(R.ID.toolbar)  Toolbar toolbar;  private TextVIEw tabProduct;  private TextVIEw tabDetail;  private List<String> mTitles = null;  private ProductDetailPagerAdapter productPagerAdapter = null;  @OverrIDe  protected voID onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentVIEw(R.layout.activity_product_details);    ButterKnife.bind(this);    init();  }  private voID init() {    initToolbar();    initVIEwPager();  }  private voID initToolbar() {    setTitle("");    toolbar.setNavigationOnClickListener(new VIEw.OnClickListener() {      @OverrIDe      public voID onClick(VIEw vIEw) {        finish();      }    });    initTab();    initTabChange();  }  private voID initTabChange() {    tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {      @OverrIDe      public voID onTabSelected(TabLayout.Tab tab) {        vIEwPager.setCurrentItem(tab.getposition());        switch (tab.getposition()){          case 0:            tabProduct.setTextcolor(getResources().getcolor(R.color.c8));            tabProduct.setTextSize(18);            break;          case 1:            tabDetail.setTextcolor(getResources().getcolor(R.color.c8));            tabDetail.setTextSize(18);            break;        }      }      @OverrIDe      public voID onTabUnselected(TabLayout.Tab tab) {        tabProduct.setTextcolor(getResources().getcolor(R.color.c7));        tabDetail.setTextcolor(getResources().getcolor(R.color.c7));      }      @OverrIDe      public voID onTabReselected(TabLayout.Tab tab) {      }    });  }  private voID initTab() {    tabLayout.setSelectedTabIndicatorcolor(getResources().getcolor(R.color.c8));    tabLayout.setSelectedTabIndicatorHeight(UIUtils.dp2px(this,2));    tabLayout.setTabTextcolors(R.color.c7,R.color.c8);    tabLayout.addTab(tabLayout.newTab().setCustomVIEw(R.layout.item_detail_tab_product_layout));    tabProduct= (TextVIEw) findVIEwByID(R.ID.tab_product);    tabProduct.setTextcolor(getResources().getcolor(R.color.c8));    tabLayout.addTab(tabLayout.newTab().setCustomVIEw(R.layout.item_detail_tab_detail_layout));    tabDetail= (TextVIEw) findVIEwByID(R.ID.tab_detail);    tabProduct.setTextcolor(getResources().getcolor(R.color.c7));      }  private voID initVIEwPager() {    mTitles = new ArrayList<>();    mTitles.add("商品");    mTitles.add("详情");    productPagerAdapter = new ProductDetailPagerAdapter(getSupportFragmentManager(),mTitles);    vIEwPager.setAdapter(productPagerAdapter);    vIEwPager.addOnPagechangelistener(new VIEwPager.SimpleOnPagechangelistener() {      @OverrIDe      public voID onPageSelected(int position) {        tabLayout.getTabAt(position).select();      }    });  }  public static voID open(Context context) {    Intent intent = new Intent(context,ProductDetailsActivity.class);    context.startActivity(intent);  }}

我相信很多人看了上面的代码会觉得很麻烦，其实我也觉得，这种虽然可定制高，但是相对于以前的写法，代码丝毫没有减少，我还是建议使用自定义控件，之前有一篇AndroID万能的指示器，大家可以借鉴借鉴。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的android TabLayout使用方法详解全部内容，希望文章能够帮你解决android TabLayout使用方法详解所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。