Android Material Design-TabLayout的使用

TabLayout 位於 android.support.design.widget.TabLayout。

一般與 ViewPager 結合在一起使用。以前有開源庫 viewpagerindicator 也可以實現，不過 TabLayout 是官方提供的。

以下使用 ViewPager + TabLayout 實現點擊 tab 切換頁面的效果。其中 ViewPager 中使用的是 TextView 來顯示一個詞，可以把 TextView 更換為 Fragment 等實現更加復雜的內容。

布局文件 activity_main.xml：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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.support.v7.widget.Toolbar
      android:id="@+id/toolbar"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="@color/colorPrimary"
      android:minHeight="?attr/actionBarSize"
      android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
      app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
  <android.support.design.widget.TabLayout
      android:id="@+id/tablayout"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_below="@+id/toolbar"/>
  <android.support.v4.view.ViewPager
      android:id="@+id/viewpager"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_below="@+id/tablayout"/>
</RelativeLayout>

 

ViewPagerAdapter.java

import android.content.Context;
import android.graphics.Color;
import android.support.v4.view.PagerAdapter;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class ViewPagerAdapter extends PagerAdapter {
  private static final String TAG = "ViewPagerAdapter";
  private String[] tabTitles = { "全部", "視頻", "聲音", "圖片", "段子", "廣告", "劇情" };
  private Context mContext;

  public ViewPagerAdapter(Context context) {
    mContext = context;
  }

  @Override public int getCount() {
    return tabTitles.length;
  }

  @Override public boolean isViewFromObject(View view, Object object) {
    return view == object;
  }

  @Override public Object instantiateItem(ViewGroup container, int position) {
    TextView view = new TextView(mContext);
    view.setText(tabTitles[position]);
    view.setTextColor(Color.BLACK);
    view.setTextSize(20);
    view.setGravity(Gravity.CENTER);
    container.addView(view);
    return view;
  }

  @Override public void destroyItem(ViewGroup container, int position, Object object) {
    container.removeView((TextView) object);
  }

  @Override public CharSequence getPageTitle(int position) {
    return tabTitles[position];
  }
}

 

MainActivity.java

public class MainActivity extends AppCompatActivity {

  @Override protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    TabLayout tabLayout = (TabLayout) findViewById(R.id.tablayout);
    ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
    ViewPagerAdapter adapter = new ViewPagerAdapter(MainActivity.this);
    viewPager.setAdapter(adapter);
    tabLayout.setupWithViewPager(viewPager);
  }
}

實現效果圖：

TabLayout 樣式
app:tabSelectedTextColor：Tab被選中字體的顏色
app:tabTextColor：Tab未被選中字體的顏色
app:tabIndicatorColor：Tab指示器下標的顏色

app:tabIndicatorHeight="2dp"
app:tabPaddingStart="12dp"
app:tabPaddingEnd="12dp"
app:tabPaddingTop="12dp"
app:tabPaddingBottom="12dp"
app:tabPadding="12dp"
app:tabBackground="@android:color/darker_gray"
app:tabTextAppearance=""

app:tabMode：可選scrollable和fixed，默認為fixed。scrollable 適合多個 tab 的情況

當 tab 的數量不足以鋪滿全屏的時候，且 tabMode 為 scrollable 的時候，會出現以下情況：只需要把 tabMode 設置為 fixed 即可或者去掉這個屬性，因為默認為 fixed。

參考：http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0731/3247.html