Android TabLayout使用以及自定義TabLayout的item
阿新 • • 發佈:2019-01-01
前言
TabLayout是屬於Android Design Support Library中的一個控制元件,頂部或者底部水平的Tab佈局,滑動或者點選切換的功能,今天我們簡單講解TabLayout的使用,重點講解如何自定義TabLayout的item,也就是每一個tab。
首先看看GooglePlay的這個介面。
TabLayout使用
新增依賴
compile 'com.android.support:design:23.4.0'
佈局
<android.support.design.widget.TabLayout
android:layout_width ="match_parent"
android:layout_height="40dp"
android:id="@+id/tablayout">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/viewpager" >
通常我們都搭配ViewPager+Fragment使用。
頁面用Fragment,放了一個小圖示。
然後是ViewPager的介面卡:
public class FragmentAdapter extends FragmentPagerAdapter {
private String [] title = {"one","two","three","four"};
private List<Fragment> fragmentList;
public FragmentAdapter(FragmentManager fm,List<Fragment> fragmentList) {
super (fm);
this.fragmentList = fragmentList;
}
@Override
public Fragment getItem(int position) {
return fragmentList.get(position);
}
@Override
public int getCount() {
return fragmentList.size();
}
@Override
public CharSequence getPageTitle(int position) {
return title[position];
}
}
MainActivity:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
ContentFragment fragment1 = new ContentFragment();
ContentFragment fragment2 = new ContentFragment();
ContentFragment fragment3 = new ContentFragment();
ContentFragment fragment4 = new ContentFragment();
fragments.add(fragment1);
fragments.add(fragment2);
fragments.add(fragment3);
fragments.add(fragment4);
adapter = new FragmentAdapter(getSupportFragmentManager(),fragments);
viewpager.setAdapter(adapter);
tablayout.setupWithViewPager(viewpager);
}
看看效果:
完成了,大家注意最後一行程式碼,作用是將TabLayout與ViewPager連線起來,其實看原始碼也就知道是通ViewPager的OnPageChangeListener監聽連線起來的。
但是有一點要注意,setupWithViewPager這個方法會先將tab清除然後再根據ViewPager的adapter裡的count去取pagetitle,這也就是有些同學遇到用addTab方法新增tab不起作用的問題。
當然TabLayout還有很多api可以使用,來改變TabLayout的樣式,新增圖示,以及滾動模式等等。
自定義TabItem
當這些api都不能滿足你的要求的時候,我們想自己控制每一個tab怎麼顯示顯示什麼內容。
ok,我不想要TabLayout下面的那條橫線可以把它設定為0dp。
app:tabIndicatorHeight="0dp"
item佈局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="@+id/tab_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/tab_background"
android:padding="10dp"
android:textColor="@drawable/tab_text_color"
android:textSize="24sp" />
</LinearLayout>
我這裡寫的比較簡單,只有一個TextView。
MainActivity
先把adapter裡寫的title註釋掉。
//private String [] title = {"one","two","three","four"};
// @Override
// public CharSequence getPageTitle(int position) {
// return title[position];
// }
fragments.add(new ContentFragment());
fragments.add(new ContentFragment());
fragments.add(new ContentFragment());
fragments.add(new ContentFragment());
fragments.add(new ContentFragment());
fragments.add(new ContentFragment());
fragments.add(new ContentFragment());
fragments.add(new ContentFragment());
fragments.add(new ContentFragment());
adapter = new FragmentAdapter(getSupportFragmentManager(), fragments);
viewpager.setAdapter(adapter);
tablayout.setupWithViewPager(viewpager);
for (int i = 0; i < adapter.getCount(); i++) {
TabLayout.Tab tab = tablayout.getTabAt(i);//獲得每一個tab
tab.setCustomView(R.layout.tab_item);//給每一個tab設定view
if (i == 0) {
// 設定第一個tab的TextView是被選擇的樣式
tab.getCustomView().findViewById(R.id.tab_text).setSelected(true);//第一個tab被選中
}
TextView textView = (TextView) tab.getCustomView().findViewById(R.id.tab_text);
textView.setText(titles[i]);//設定tab上的文字
}
tablayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
tab.getCustomView().findViewById(R.id.tab_text).setSelected(true);
viewpager.setCurrentItem(tab.getPosition());
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
tab.getCustomView().findViewById(R.id.tab_text).setSelected(false);
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
ok,大功告成。看效果