不同的TabLayout选项卡宽度

Question

我正在使用TabLayout和ViewPager。 我尝试改变选项卡的大小，就像WhatsApp（相机图标）一样。 三个选项卡的大小相等，但相机选项卡较小。 无论我怎么尝试，选项卡的大小始终保持不变（在所有选项卡中都相等）。 谢谢。

- Dor Natan

---

有4个ping图标，其中3个png具有相同的高度和宽度。一个不同，像相机图标。 - Muhammad Waleed

我试图改变大小，但是不可能。 它们总是以相等的尺寸出现。 - Dor Natan

Answer 1

你需要降低相应选项卡的LinearLayout权重。

LinearLayout layout = ((LinearLayout) ((LinearLayout) tabLayout.getChildAt(0)).getChildAt(YOUR_TAB_NUMBER));
LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) layout.getLayoutParams();
layoutParams.weight = YOUR_WEIGHT; // e.g. 0.5f
layout.setLayoutParams(layoutParams);

希望这有所帮助！

- digger

---

它运行得非常好。谢谢！但是，是否有设置选项将制表符宽度设置为wrap_content的方式？ - sembozdemir

我找到了。看看我的答案。 - sembozdemir

非常感谢。 - Trk

这个工作像冠军一样！但是在使用后遇到了背景颜色填充问题。和@sembozdemir一样。 - Ganesh Pokale

无法与Viewpager2一起使用（获取Nullpointer异常） - Squareoot

Answer 2

@digger的答案有效。但是，如果您希望仅具有图标的选项卡仅包含其内容，则可以将权重设置为0，宽度设置为LinearLayout.LayoutParams.WRAP_CONTENT。这对我有用。

fun TabLayout.setTabWidthAsWrapContent(tabPosition: Int) {
    val layout = (this.getChildAt(0) as LinearLayout).getChildAt(tabPosition) as LinearLayout
    val layoutParams = layout.layoutParams as LinearLayout.LayoutParams
    layoutParams.weight = 0f
    layoutParams.width = LinearLayout.LayoutParams.WRAP_CONTENT
    layout.layoutParams = layoutParams
}

- sembozdemir

Answer 3

在这里，我使用了5个选项卡，其中第一个选项卡的宽度为屏幕宽度的12％，其余4个选项卡共享剩余的宽度。在充气视图后延迟400毫秒后执行此操作。

DisplayMetrics displaymetrics = new DisplayMetrics();

getWindowManager().getDefaultDisplay().getMetrics（displaymetrics）;

    int width= displaymetrics.widthPixels;

    int widthOtherThanFirst= (int) ((float)width*(8.80f/10f));
    int allOther=widthOtherThanFirst/4;

    new Handler().postDelayed(new Runnable() {
        @Override
        public void run() {
            LinearLayout layout1 = ((LinearLayout) ((LinearLayout)tabLayout.getChildAt(0)).getChildAt(0));
            LinearLayout.LayoutParams layoutParams1 = (LinearLayout.LayoutParams) layout1.getLayoutParams();
            layoutParams1.width = width-widthOtherThanFirst; 
            layout1.setPadding(0,0,0,0);
            layout1.setLayoutParams(layoutParams1);

            LinearLayout layout2 = ((LinearLayout) ((LinearLayout)tabLayout.getChildAt(0)).getChildAt(1));
            LinearLayout.LayoutParams layoutParams2 = (LinearLayout.LayoutParams) layout2.getLayoutParams();
            layoutParams2.width = allOther; 
            layout2.setLayoutParams(layoutParams2);

            LinearLayout layout5 = ((LinearLayout) ((LinearLayout)tabLayout.getChildAt(0)).getChildAt(2));
            LinearLayout.LayoutParams layoutParams5 = (LinearLayout.LayoutParams) layout5.getLayoutParams();
            layoutParams5.width = allOther; 
            layout5.setLayoutParams(layoutParams5);

            LinearLayout layout3 = ((LinearLayout) ((LinearLayout)tabLayout.getChildAt(0)).getChildAt(3));
            LinearLayout.LayoutParams layoutParams3 = (LinearLayout.LayoutParams) layout3.getLayoutParams();
            layoutParams3.width = allOther;
            layout3.setLayoutParams(layoutParams3);

            LinearLayout layout4 = ((LinearLayout) ((LinearLayout)tabLayout.getChildAt(0)).getChildAt(4));
            LinearLayout.LayoutParams layoutParams4 = (LinearLayout.LayoutParams) layout4.getLayoutParams();
            layoutParams4.width = allOther; 
            layout4.setLayoutParams(layoutParams4);

            tabLayout.invalidate();

        }
    },400);

- Vikas Rathore

Answer 4

检查这个动态宽度，使用wrap_content背景

private fun setTabwidth(tabposition: Int, weight: Float) {
        val layout: LinearLayout = tabLayout?.getChildAt(0) as LinearLayout).getChildAt(tabpos) as LinearLayout
        val layoutParams: LinearLayout.LayoutParams = layout.getLayoutParams() as LinearLayout.LayoutParams
        layoutParams.weight = weight 
        layoutParams.width = LinearLayout.LayoutParams.WRAP_CONTENT
        layout.setLayoutParams(layoutParams)

        val tablayoutParams: ViewGroup.LayoutParams? = tabLayout?.layoutParams
        tablayoutParams?.width=ViewGroup.LayoutParams.WRAP_CONTENT
        tabLayout?.layoutParams=tablayoutParams
    }

使用方法：

setTabwidth(0,0.4f) // first tab 0.4 weight
setTabwidth(1,0.6f) // second tab 0.6 weight

- Ganesh Pokale