android TabLayout使用方法详解

2019-12-12 05:29:08

字体：大中小

来源：转载

供稿：网友

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"        style="@style/style_c7_s20"        />    </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 style="@style/horizontal_line" />  <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 webp编解码详解

下一篇：Convert WebP to PNG using java