Android標籤頁佈局：將標籤頁標籤寬度與標籤標題相關聯

Question

是否有任何方式將標籤頁寬度與標籤標題相關聯？

Answer 1

是，這是可能的包裝標籤指示的標題設置填充到0

public void wrapTabIndicatorToTitle(TabLayout tabLayout, int externalMargin, int internalMargin) { 
     View tabStrip = tabLayout.getChildAt(0); 
     if (tabStrip instanceof ViewGroup) { 
      ViewGroup tabStripGroup = (ViewGroup) tabStrip; 
      int childCount = ((ViewGroup) tabStrip).getChildCount(); 
      for (int i = 0; i < childCount; i++) { 
       View tabView = tabStripGroup.getChildAt(i); 
       //set minimum width to 0 for instead for small texts, indicator is not wrapped as expected 
       tabView.setMinimumWidth(0); 
       // set padding to 0 for wrapping indicator as title 
       tabView.setPadding(0, tabView.getPaddingTop(), 0, tabView.getPaddingBottom()); 
       // setting custom margin between tabs 
       if (tabView.getLayoutParams() instanceof ViewGroup.MarginLayoutParams) { 
        ViewGroup.MarginLayoutParams layoutParams = (ViewGroup.MarginLayoutParams) tabView.getLayoutParams(); 
        if (i == 0) { 
         // left 
         setMargin(layoutParams, externalMargin, internalMargin); 
        } else if (i == childCount - 1) { 
         // right 
         setMargin(layoutParams, internalMargin, externalMargin); 
        } else { 
         // internal 
         setMargin(layoutParams, internalMargin, internalMargin); 
        } 
       } 
      } 

      tabLayout.requestLayout(); 
     } 
} 

private void settingMargin(ViewGroup.MarginLayoutParams layoutParams, int start, int end) { 
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) { 
     layoutParams.setMarginStart(start); 
     layoutParams.setMarginEnd(end); 
    } else { 
     layoutParams.leftMargin = start; 
     layoutParams.rightMargin = end; 
    } 
} 

Answer 2

簡短的回答是 「不」。這是解釋。

有繪製指標

@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); 
     } 
    } 

我相信mIndicatorLeft和mIndicatorRight是你所需要的內TabLayout私有類SlidingTabStrip。這些字段在同一個班級設置：

private void setIndicatorPosition(int left, int right) { 
     if (left != mIndicatorLeft || right != mIndicatorRight) { 
      // If the indicator's left/right has changed, invalidate 
      mIndicatorLeft = left; 
      mIndicatorRight = right; 
      ViewCompat.postInvalidateOnAnimation(this); 
     } 
    } 

，其中左，右參數計算在下一方法：

private void updateIndicatorPosition() { 
     final View selectedTitle = getChildAt(mSelectedPosition); 
     int left, right; 
     if (selectedTitle != null && selectedTitle.getWidth() > 0) { 
      left = selectedTitle.getLeft(); 
      right = selectedTitle.getRight(); 
      if (mSelectionOffset > 0f && mSelectedPosition < getChildCount() - 1) { 
       // Draw the selection partway between the tabs 
       View nextTitle = getChildAt(mSelectedPosition + 1); 
       left = (int) (mSelectionOffset * nextTitle.getLeft() + 
         (1.0f - mSelectionOffset) * left); 
       right = (int) (mSelectionOffset * nextTitle.getRight() + 
         (1.0f - mSelectionOffset) * right); 
      } 
     } else { 
      left = right = -1; 
     } 
     setIndicatorPosition(left, right); 
    } 

而最糟糕的事情是，在TabLayout SlidingTabStrip領域是私人和決賽。

private final SlidingTabStrip mTabStrip; 

我不明白如何在不創建全新的TabLayout的情況下實現您所需要的功能。

Answer 3

如果您不需要帶比文字更小，那麼這應該工作：

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(); 
    } 
} 

爲了增加積分，您可以檢查每個標題的文字大小。

Answer 4

我注意到肯定的SDK版本需要的，但你可以直接在做您的XML文件，使用應用程序名稱空間添加填充屬性。

只是讓你TabLayout看起來是這樣的：

 <android.support.design.widget.TabLayout 
      xmlns:app="http://schemas.android.com/apk/res-auto" 
      android:id="@+id/tab" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      ... 
      app:tabPaddingEnd="0dp" 
      app:tabPaddingStart="0dp" 
     </android.support.design.widget.TabLayout> 

爲你的父母也辣油你可以移動xmlns:app="http://schemas.android.com/apk/res-auto"，但你的選擇:)

感謝萊昂他的回答，導致我實現通過XML。

Answer 5

我試了2個小時的各種解決方案，但沒有一個有完美的效果。
問題在於tabView的填充 - 即使我將其填充設置爲全0，
不同的選項卡仍然具有不同的填充，因此TextView中的文本大小各不相同。

然後我發現這個庫完全解決了它。
https://github.com/H07000223/FlycoTabLayout
正如@Stas Melnychenko所說，除非我們重寫TabLayout，否則我們可能無法做到。而這個圖書館裏重新寫一個TabLayout ...

Answer 6

您可以使用樣式做。

在佈局XML：

<android.support.design.widget.TabLayout 
     android:id="@+id/tabs" 
     style="@style/AppTabLayout" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" /> 

在styles.xml：

<style name="AppTabLayout" parent="Widget.Design.TabLayout"> 
    <item name="android:layout_marginLeft">40dp</item> 
    <item name="android:layout_marginRight">40dp</item> 
</style>