Material Design系列之TabLayout詳解
TabLayout位于design包下懦胞,使用時導入design包坊萝。
compile 'com.android.support:design:26.0.0-alpha1'
一般這個控件是結合viewpager和fragment使用奕坟。TabLayout官方API文檔
[圖片上傳失敗...(image-8c4335-1529490626094)]
使用方式一
代碼動態(tài)添加tab項
布局如下:
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
public class TabLayoutActivity extends AppCompatActivity {
private TabLayout tablayout;
private ViewPager viewPager;
private String[] tabTitles = {"頭條","資訊","體育","娛樂","經(jīng)濟","科技","軍事","熱點","社會","國際","國內(nèi)"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tab_layout);
initViews();
}
private void initViews() {
tablayout = (TabLayout) findViewById(R.id.tablayout);
viewPager = (ViewPager) findViewById(R.id.viewpager);
MyPagerAdapter pagerAdapter = new MyPagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(pagerAdapter);
tablayout.setupWithViewPager(viewPager);//必須在 viewPager.setAdapter()之后使用
tablayout.setTabMode(TabLayout.MODE_SCROLLABLE);
// tablayout.addTab(tablayout.newTab().setText("新增標簽"));//代碼添加標簽
}
class MyPagerAdapter extends FragmentPagerAdapter{
public MyPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return TabLayoutFragment.newInstance(tabTitles[position]);
}
@Override
public int getCount() {
return tabTitles.length;
}
@Override
public CharSequence getPageTitle(int position) {
return tabTitles[position];
}
}
}
使用方式二
直接在布局中使用TabItem定死tab項
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="標簽1"/>
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="標簽2"
android:icon="@mipmap/ic_launcher"/>
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout="@layout/tab_custom_layout"/>
</android.support.design.widget.TabLayout>
重要屬性詳解
- app:tabSelectedTextColor:選中字體的顏色
- app:tabTextColor:未選中字體的顏色
- app:tabIndicatorColor:指示器下標的顏色
- app:tabIndicatorHeight:指示器下標的高度
- app:tabGravity:tab中布局位置戴已,有兩種模式center和fill
- app:tabTextAppearance:字體大小
- app:tabBackground:設置背景
- app:tabMode:設置tablayout的排列模式固额,有兩種scrollable和fixed头谜;默認是fixed狐蜕。fixed是固定的宠纯,適用于標簽較少,scrollable是可滾動的层释,適用于標簽較多的情況下
自定義標簽布局
示例:
for (int i = 0; i < tabTitles.length; i++){
TabLayout.Tab itemTab = tablayout.getTabAt(i);
if (itemTab!=null){
itemTab.setCustomView(R.layout.tab_custom_layout);
TextView itemTv = (TextView) itemTab.getCustomView().findViewById(R.id.tv_custom);
itemTv.setText("自定義標簽"+i);
}
}
注意
tablayout.setupWithViewPager(viewPager);//必須在 viewPager.setAdapter()之后使用
當結合viewpager使用時婆瓜,viewpager會有一個預加載機制,可以通過viewpager的setOffscreenPageLimit方法設置數(shù)目贡羔。若不想頁面在不可見的情況下加載數(shù)據(jù)廉白,需
自己在fragment中自行處理數(shù)據(jù)加載問題。
還有一個就是fragment重新創(chuàng)建問題乖寒,可以在viewpager的適配器中的重寫destroyItem方法猴蹂,去掉super方法調(diào)用,進行自己的操作
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
//super.destroyItem(container, position, object);
}