一、需求
頁面頂部添加Tab條，類似微博首頁的關(guān)注和熱門兩個(gè)Tab，如下圖：
Screenshot_2017-11-02-21-47-09-751_com.sina.weibo.png
二、方案
三個(gè)實(shí)現(xiàn)要點(diǎn)：
- TabLayout+FrameLayout
- 兩個(gè)Tab對(duì)應(yīng)兩個(gè)Fragment，根據(jù)TabLayout.OnTabSelectedListener的回調(diào)切換Fragment
- 不使用ViewPager
三、問題
兩個(gè)下劃線樣式問題：
- 不支持自定義寬度
- 不支持導(dǎo)圓角
四、解決
有兩種方案，最終采用了第二種：
- 使用開源庫
MagicIndicator
FlycoTabLayout
NavigationTabStrip
上面三個(gè)開源庫均支持多種形式的Tab條，其中MagicIndicator支持在非ViewPager場(chǎng)景使用，另兩個(gè)庫目前不支持。 - 自定義下劃線
思路：給TabLayout的mTabStrip設(shè)置背景實(shí)現(xiàn)自定義下劃線
優(yōu)點(diǎn)：可以繪制任意樣式的下劃線，線條、三角等，只要你想得到
Step1：創(chuàng)建背景Drawable，在onDraw方法中完成自定義的下劃線繪制：
public class IndicatorDrawable extends Drawable {
private static final int INDICATOR_MARGIN = ScreenUtils.dp2px(24);
private static final int INDICATOR_HEIGHT = ScreenUtils.dp2px(3);
private static final int INDICATOR_RADIUS = ScreenUtils.dp2px(1.5f);
private View view;
private Paint paint;
public IndicatorDrawable(View view) {
this.view = view;
this.paint = new Paint();
paint.setColor(view.getContext().getResources().getColor(R.color.main_color));
}
@Override
public void draw(@NonNull Canvas canvas) {
int mIndicatorLeft = getIntValue("mIndicatorLeft");
int mIndicatorRight = getIntValue("mIndicatorRight");
int radius = INDICATOR_RADIUS;
if (mIndicatorLeft >= 0 && mIndicatorRight > mIndicatorLeft) {
canvas.drawRoundRect(new RectF(mIndicatorLeft + INDICATOR_MARGIN, view.getHeight() - INDICATOR_HEIGHT, mIndicatorRight - INDICATOR_MARGIN, view.getHeight()), radius, radius, paint);
}
}
private int getIntValue(String name) {
try {
Field f = view.getClass().getDeclaredField(name);
f.setAccessible(true);
Object obj = f.get(view);
return (Integer) obj;
} catch (Exception e) {
e.printStackTrace();
}
return 0;
}
@Override
public void setAlpha(@IntRange(from = 0, to = 255) int alpha) {
}
@Override
public void setColorFilter(@Nullable ColorFilter colorFilter) {
}
@Override
public int getOpacity() {
return PixelFormat.UNKNOWN;
}
}
Step2：xml中隱藏掉TabLayout原有的下劃線：
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
android:gravity="center"
android:visibility="gone"
app:tabBackground="@null"
app:tabGravity="center"
app:tabIndicatorColor="@color/main_color"
app:tabIndicatorHeight="0dp"http://隱藏原下劃線
app:tabMode="fixed"
app:tabPaddingEnd="24dp"
app:tabPaddingStart="24dp"
app:tabTextAppearance="@style/TabTextStyle"http://自定義Tab文本樣式
app:tabTextColor="@color/light_text_color" />
Step3：代碼里使用自定義下劃線，即給mStripView設(shè)置背景：
private void initTabLayout(FeedHotVideoConfig config) {
tabLayout.removeAllTabs();
tabLayout.clearOnTabSelectedListeners();
View view = LayoutInflater.from(getContext()).inflate(R.layout.feed_tab, null);
tvFollow = (TextView) view.findViewById(R.id.tv_tab);
noticeFollow = view.findViewById(R.id.view_notice);
tabLayout.addTab(tabLayout.newTab().setCustomView(view).setTag(TAG_FOLLOW));//自定義Tab樣式
tabLayout.addTab(tabLayout.newTab().setText(config.info.name).setTag(TAG_VIDEO));
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
//Tab點(diǎn)擊處理
int tag = (int) tab.getTag();
if (listener != null) {
listener.onTabSelected(tag);
}
refreshTab(tag);
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
View tabStripView = tabLayout.getChildAt(0);
tabStripView.setBackground(new IndicatorDrawable(tabStripView));//設(shè)置背景 添加自定義下劃線
tabLayout.setVisibility(VISIBLE);
}
五、遇到的問題
- java.lang.NoSuchFieldException: mIndicatorLeft | mIndicatorRight
問題：通過反射獲取SlidingTabStrip的兩個(gè)私有變量值，debug包正常運(yùn)行，release包報(bào)錯(cuò)找不到變量。
解決辦法：在混淆文檔中去掉對(duì)widget包的混淆，即加上
-keep class android.support.design.widget.** { *; }
