TabLayout之自定義樣式
阿新 • • 發佈：2019-01-26
TabLayout的預設樣式:
app:theme="@style/Widget.Design.TabLayout"從系統定義的該樣式繼續深入:
<style name="Widget.Design.TabLayout" parent="Base.Widget.Design.TabLayout">
<item name="tabGravity">fill</item>
<item name="tabMode">fixed</item>
</style>
<style 接著,看看系統定義Tab文字的樣式(注意textAllcaps這個屬性):
<style name="TextAppearance.Design.Tab" parent="TextAppearance.AppCompat.Button">
<item name="android:textSize">14dp</item>
<item name="android:textColor">?android:textColorSecondary</item>
<item name="textAllCaps">true</item>
</style>從系統定義TabLayout的預設樣式可以看出,我們可以改變TabLayout對應的系統樣式的屬性值來適配我們自己的需求.
TabLayout的基本用法
TabLayout獨立使用使用時,可以xml佈局中靜態新增tab個數及其樣式,也可以動態新增Tab的個數及其樣式,如:
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:background="@color/colorPrimary"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TabItem
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Android"/>
<android.support.design.widget.TabItem
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:icon="@mipmap/ic_launcher"/>
</android.support.design.widget.TabLayout>
或者:
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:background="@color/colorPrimary"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
private int[] images = new int[]{
R.drawable.ic_account_balance_wallet_black,
R.drawable.ic_android_black,
R.drawable.ic_account_box_black};
private String[] tabs = new String[]{"小說", "電影", "相聲"};
TabLayout tabLayout = (TabLayout) findViewById(R.id.tablayout);
tabLayout.addTab(tabLayout.newTab().setIcon(images[0]).setText(tabs[0]),true);
tabLayout.addTab(tabLayout.newTab().setIcon(images[1]).setText(tabs[1]),false);
tabLayout.addTab(tabLayout.newTab().setIcon(images[2]).setText(tabs[2]),false);
TabLayout在實際開發中最多的是與ViewPager聯合使用,實現TabLayout與ViewPager的聯動:
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
app:tabGravity="fill"
app:tabIndicatorColor="@android:color/holo_orange_dark"
app:tabIndicatorHeight="2dp"
app:tabMode="fixed"
app:tabSelectedTextColor="@android:color/holo_orange_dark"
app:tabTextAppearance="@style/CustomTabTextAppearanceStyle"
app:tabTextColor="@android:color/white"
app:theme="@style/Widget.Design.TabLayout"/>
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
TabLayout tabLayout = (TabLayout) findViewById(R.id.tablayout);
ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
viewPager.setAdapter(new TabPagerAdapter(getSupportFragmentManager()));
tabLayout.setupWithViewPager(viewPager);
值得注意的是:
在TabPagerAdapter中需要實現getPagerTitle()否則,TabLayout的Tab將不顯示,先看TabLayout#setupWithPager()原始碼,發現Tab的新增是在populateFromPagerAdapter()中實現,實現原始碼如下,可以看出該方法呼叫了PagerAdpater#getPagerTitle()為Tab設定文字資訊,如果我們自定義的Adapter沒有實現getPagerTitle()將會導致Tab不顯示文字資訊.
void populateFromPagerAdapter() {
removeAllTabs();
if (mPagerAdapter != null) {
final int adapterCount = mPagerAdapter.getCount();
for (int i = 0; i < adapterCount; i++) {
addTab(newTab().setText(mPagerAdapter.getPageTitle(i)), false);
}
// Make sure we reflect the currently set ViewPager item
if (mViewPager != null && adapterCount > 0) {
final int curItem = mViewPager.getCurrentItem();
if (curItem != getSelectedTabPosition() && curItem < getTabCount()) {
selectTab(getTabAt(curItem));
}
}
}
}
另外, 我們發現getPagerTitle()方法的返回值CharSequence而不是String,那麼Tab的文字資訊的設定將變得更加靈活,比如設定一個SpanableString,將圖片和文字設定Tab的文字.
@Override
public CharSequence getPageTitle(int position) {
Drawable image = TablayoutActivity.this.getResources().getDrawable(images[position]);
image.setBounds(0, 0, image.getIntrinsicWidth()/2, image.getIntrinsicHeight()/2);
ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
SpannableString ss = new SpannableString(" "+tabs[position]);
ss.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
return ss;
}
但是Tab卻沒有將Image顯示出來,從上面提到的TabLayout的系統預設樣式中我們發現: <item name="textAllCaps">true</item>,這會阻止ImageSpan渲染出來,我們只需要將textAllCaps改為false即可,如下定義,再次執行,成功顯示
<style name="CustomTabTextAppearanceStyle" parent="TextAppearance.Design.Tab">
<item name="textAllCaps">false</item>
</style>
修改Indicator的長度:
從TabLayout的原始碼可以看出Indicator的繪製,是在其內部類SlidingTabStrip中繪製,而SlingTabStrip類繼承LinearLayout,原始碼如下:
@Override
public void draw(Canvas canvas) {
super.draw(canvas);
// Thick colored underline below the current selection
if (mIndicatorLeft >= 0 && mIndicatorRight > mIndicatorLeft) {
canvas.drawRect(mIndicatorLeft, getHeight() - mSelectedIndicatorHeight,
mIndicatorRight, getHeight(), mSelectedIndicatorPaint);
}
}在onDraw()中主要是就繪製一個Rect,並且寬度是根據mIndicatorLeft和mIndicatorRight設定的,而mIndicatorLeft等的寬度來自SlidingTabStrip的child,而Child就相當於一個Tab,這樣我們就通過修改Child的margin來設定mIndicatorLeft的值.
public void setIndicator(TabLayout tabs, int leftDip, int rightDip) {
Class<?> tabLayout = tabs.getClass();
Field tabStrip = null;
try {
tabStrip = tabLayout.getDeclaredField("mTabStrip");
} catch (NoSuchFieldException e) {
e.printStackTrace();
}
tabStrip.setAccessible(true);
LinearLayout llTab = null;
try {
llTab = (LinearLayout) tabStrip.get(tabs);
} catch (IllegalAccessException e) {
e.printStackTrace();
}
int left = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, leftDip, Resources.getSystem().getDisplayMetrics());
int right = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, rightDip, Resources.getSystem().getDisplayMetrics());
for (int i = 0; i < llTab.getChildCount(); i++) {
View child = llTab.getChildAt(i);
child.setPadding(0, 0, 0, 0);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.MATCH_PARENT, 1);
params.leftMargin = left;
params.rightMargin = right;
child.setLayoutParams(params);
child.invalidate();
}
}
然後在程式碼中呼叫即可,但是要注意,必須要在Tablayout渲染出來後呼叫,我們可以選擇view.post()方法來實現:
tabLayout.post(new Runnable() {
@Override
public void run() {
setIndicator(tabLayout, 20, 20);
}
});最後得到效果圖如下:
自定義TabLayout的TabItem及TabItem的點選事件
在TabLayout的Api是沒有提供TabItem點選事件的方法,如果我們想實現如下效果圖,怎麼辦?
先自定義一個TabItem:
<?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="horizontal">
<TextView
android:id="@+id/txt_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="14sp" />
<ImageView
android:id="@+id/img_title"
android:src="@drawable/indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp" />
</LinearLayout>
在自定義的Adapter中可以定義一個getTabView的方法:
public View getTabView(int position){
View view = LayoutInflater.from(context).inflate(R.layout.tab_item, null);
TextView tv= (TextView) view.findViewById(R.id.textView);
tv.setText(tabTitles[position]);
ImageView img = (ImageView) view.findViewById(R.id.imageView);
img.setImageResource(imageResId[position]);
return view;
}
重新設定點選事件:
viewPager.setAdapter(pagerAdapter);
tabLayout.setupWithViewPager(viewPager);
for (int i = 0; i < tabLayout.getTabCount(); i++) {
TabLayout.Tab tab = tabLayout.getTabAt(i);
if (tab != null) {
tab.setCustomView(pagerAdapter.getTabView(i));
if (tab.getCustomView() != null) {
View tabView = (View) tab.getCustomView().getParent();
tabView.setTag(i);
tabView.setOnClickListener(mTabOnClickListener);
}
}
}
viewPager.setCurrentItem(1);