web-dev-qa-db-ja.com

Android TabLayoutカスタムインジケーターの幅

インジケーターの幅を減らしたい-たとえば、タブの幅全体ではなく、タブの幅の1/2にする。
それが私がする必要があるすべてです、それで私はいくつかのカスタムライブラリをダウンロードして、これを行うことができる場所を検索したくありません。

これを行う方法ですか、それとも自分でそのような見解を書く必要がありますか？

androidandroid-viewpagerandroid-tablayout
11
Goltsev Eugene

これを試して。

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

その後

tab.post(new Runnable() {  
       @Override  
       public void run() {  
           setIndicator(tab,60,60);  
       }  
});


リフレクションなしの私の変更（カスタムビューを設定する必要があります！）

for (int i = 0; i < tabs.getTabCount(); i++) {
    TabLayout.Tab tab = tabs.getTabAt(i);
    if (tab != null) {
        View customView = tab.getCustomView();
        if (customView != null) {
            View targetViewToApplyMargin = (View) customView.getParent();
            ViewGroup.MarginLayoutParams layoutParams = (ViewGroup.MarginLayoutParams) targetViewToApplyMargin.getLayoutParams();

            layoutParams.rightMargin = totalTabMargin;
                    targetViewToApplyMargin.setLayoutParams(layoutParams);
        }
    }
}
3
KeLiuyue

この問題に終わる人のために、私はタブ幅インジケーターの〜90％にベクタードローアブルを使用した簡単な解決策を見つけました：

ic_tab_indicator_24dp：

<vector
Android:height="24dp"
Android:width="24dp"
Android:viewportHeight="24.0"
Android:viewportWidth="24.0"
xmlns:Android="http://schemas.Android.com/apk/res/Android">
<path
    Android:strokeWidth="4"
    Android:fillColor="@Android:color/white"
    Android:pathData="M2,0 L22,0 L22,24 L2,24 z"/>

次に、レイアウトにtabIndicatorを設定します。

app:tabIndicator="@drawable/ic_tab_indicator_24dp"

またはstyles.xmlで：

<item name="tabIndicator">@drawable/ic_tab_indicator_24dp</item>

Example

編集：私の解決策が注目されているので、pathData（ "M2,0 L22,0 L22,24 L2,24 z "）2および22の値を変更します。 2に追加された量は22から差し引かれます。つまり、「M4,0 L20,0 L20,24 L4,24 z」または「M6,0 L18,0 L18,24 L6,24 z」...

8
raul

これらのすべてのソリューションを試してみましたが、満足できませんでした。最後に自分で解決策を見つけました。SlidingTabIndicatorのindicatorLeftおよびindicatorRightファイルを変更し、必要に応じてtablayoutを拡張してsetIndicaotrWidth（）を呼び出すだけです。次に例を示します。

setIndicatorWidth(70);

コード全体：

import Android.content.Context;
import Android.content.res.Resources;
import Android.util.AttributeSet;
import Android.util.TypedValue;
import Android.view.LayoutInflater;
import Android.view.View;
import Android.view.ViewTreeObserver;
import Android.widget.LinearLayout;
import Android.widget.TextView;

import com.google.Android.material.tabs.TabLayout;

import Java.lang.reflect.Field;

import androidx.annotation.NonNull;

public class TabLayoutEx extends TabLayout {

    public TabLayoutEx(Context context) {
        this(context, null);
    }

    public TabLayoutEx(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public TabLayoutEx(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(attrs);
    }

    private void init(AttributeSet attrs) {
        setTabIndicatorFullWidth(false);
        setIndicatorWidth(70);
    }



    private class DefPreDrawListener implements ViewTreeObserver.OnPreDrawListener {

        private LinearLayout tabStrip = null;
        private int tabWidth;
        private Field fieldLeft;
        private Field fieldRight;

        public void setTabStrip(LinearLayout tabStrip, int width) {
            try {
                this.tabStrip = tabStrip;
                this.tabWidth = width;
                Class cls = tabStrip.getClass();
                fieldLeft = cls.getDeclaredField("indicatorLeft");
                fieldLeft.setAccessible(true);
                fieldRight = cls.getDeclaredField("indicatorRight");
                fieldRight.setAccessible(true);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }

        @Override
        public boolean onPreDraw() {
            try {
                if (tabWidth > 0) {
                    int left = fieldLeft.getInt(this.tabStrip);
                    int right = fieldRight.getInt(this.tabStrip);
                    //根据目标宽度及现在的宽度调整为合适的left和right
                    int diff = right - left - tabWidth;
                    left = left + diff / 2;
                    right = right - diff / 2;
                    fieldLeft.setInt(this.tabStrip, left);
                    fieldRight.setInt(this.tabStrip, right);
                }
            } catch (Exception e) {
                e.printStackTrace();
            }
            return true;
        }
    }

    private DefPreDrawListener defPreDrawListener = new DefPreDrawListener();

    public void setIndicatorWidth(int widthDp) {
        Class<?> tabLayout = TabLayout.class;
        Field tabStrip = null;
        try {
            tabStrip = tabLayout.getDeclaredField("slidingTabIndicator");
            tabStrip.setAccessible(true);
            LinearLayout tabIndicator = (LinearLayout) tabStrip.get(this);
            int width = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, widthDp, Resources.getSystem().getDisplayMetrics());
            //avoid add preDrawListener multi times
            tabIndicator.getViewTreeObserver().removeOnPreDrawListener(defPreDrawListener);
            tabIndicator.getViewTreeObserver().addOnPreDrawListener(defPreDrawListener);
            defPreDrawListener.setTabStrip(tabIndicator, width);
        } catch (Exception e) {
            e.printStackTrace();
        }

    }
}
2
Chenxi

tabLayoutをコピーして、インジケーターの幅を計算するロジックを変更できます。 updateIndicatorPosition（）およびanimateIndicatorToPosition（）を参照してください。簡単なデモ https://github.com/xybean/CustomTabLayout

1
Shayabean