android TabLayout使用方法詳解_Android

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萬能的指標，大家可以借鑒借鑒。

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。