最近碰到一個需求，因為是我比較感興趣的TabLayout的，所以記錄一下吧。

創(chuàng)新互聯(lián)建站基于10多年網(wǎng)站建設(shè)行業(yè)經(jīng)驗，一直致力于為中小型企業(yè)提供信息化解決方案，創(chuàng)新互聯(lián)建站做到開放、開源，讓企業(yè)所有核心數(shù)據(jù)掌握到企業(yè)手里，打破行業(yè)亂象，讓企業(yè)被網(wǎng)絡(luò)公司掌控的局面不再發(fā)生；美工設(shè)計部，產(chǎn)品/程序研發(fā)部，營銷策劃部，售后客服部。一切服務(wù)為企業(yè)量身定制，專注為您！

1. 產(chǎn)品需求：希望上部導航欄中的指示器寬度略大于文字寬度；
2. 技術(shù)方案：TabLayout配合ViewPager；
3. 問題分析： 原生TabLayout的指示器寬度等于每個tab的寬度，遠大于 tab內(nèi)文字標題的寬度。

原因分析：

TabLayout（TL）繼承自HorizontalScrollView，其只能添加一個子控件，這個子控件便是TL內(nèi)部私有類–SlidingTabStrip，其繼承自LinearLayout。指示器怎么加上的呢？便是在該類的onDraw方法中：

 @Override
public void draw(Canvas canvas) {
 super.draw(canvas);
 // Thick colored underline below the current selection
 if (mIndicatorLeft >= 0 && 
 mIndicatorRight > mIndicatorLeft) {
  canvas.drawRect(mIndicatorLeft, 
 mIndicatorRight, getHeight(), 
 mSelectedIndicatorPaint);
 }
}

即指示器是與這個SlidingTabStrip容器伴生存在，其寬度，由mIndicatorLeft和mIndicatorRight確定，而這二者，由tab的寬度決定，因為本文不會詳細描述TL的源碼，所以這里直接報出結(jié)論：這個指示器的寬度設(shè)置由tab寬度決定，而tab在mode=fix情況下，是符合linearLayout中weight控制的，因此，也沒法通過tab的寬度來影響指示器的寬度，比較囧的是，源碼中也沒給tab設(shè)置個Margin什么的，另外，源碼中也沒有暴露set等方法來改變指示器寬度，否則也不會有此問題了。

解決方案1：

百度的方案基本集中在反射，使用麻煩，有時還不好用。

這個的思路來自stackoverflow，大致過程是 由TL拿到其唯一的子類，即SlidingTabStrip，然后遍歷再拿到其各子View，然后為每個子View設(shè)置Margin，這就相當于給每個tab設(shè)置margin，那么指示器的寬度自然也就跟著改變了。show code：

public static void reduceMarginsInTabs(TabLayout tabLayout, int marginOffset) {
  View tabStrip = tabLayout.getChildAt(0);
  if (tabStrip instanceof ViewGroup) {
   ViewGroup tabStripGroup = (ViewGroup) tabStrip;
   for (int i = 0; i < ((ViewGroup) tabStrip).getChildCount(); i++) {
    View tabView = tabStripGroup.getChildAt(i);
    if (tabView.getLayoutParams() instanceof ViewGroup.MarginLayoutParams) {
     ((ViewGroup.MarginLayoutParams) tabView.getLayoutParams()).leftMargin = marginOffset;
     ((ViewGroup.MarginLayoutParams) tabView.getLayoutParams()).rightMargin = marginOffset;
    }
   }
  tabLayout.requestLayout();
  }
 }

這種方式的限制是：最多只能讓指示器與tab等寬，無法繼續(xù)減小指示器的寬度。

解決方案2：

本方案屬于自定制指示器顯示，相對比較靈活，能解決方案1的tab等寬問題，但是其缺點是不能保留指示器的動畫。具體過程：

TL中tab可以設(shè)置自定義view，方法是setCustomView(@Nullable View view) ，也就是說，完全可以不用TL中那套，直接自定義布局即可。在tab源碼的update方法中有這么一句：

 mCustomTextView = (TextView) custom.findViewById(android.R.id.text1);
 if (mCustomTextView != null) {
  mDefaultMaxLines = TextViewCompat.getMaxLines(mCustomTextView);
 }
 mCustomIconView = (ImageView) custom.findViewById(android.R.id.icon);

里面的android.R.id.text1和android.R.id.icon就是TL中tab能跟隨滑動改變狀態(tài)的兩個view的id，我們自定義的時候可以讓對應(yīng)的view也這么設(shè)置id即可。而指示器，大可屏蔽原生TL的，直接在自定義布局的合適位置，加個view就行。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

名稱欄目：androidTabLayout的指示器寬度問題
轉(zhuǎn)載源于：http://jinyejixie.com/article32/gpshpc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標簽優(yōu)化、商城網(wǎng)站、全網(wǎng)營銷推廣、靜態(tài)網(wǎng)站、品牌網(wǎng)站設(shè)計、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)