TabLayout 的不同选项卡宽度答案

【问题标题】：Different tab width for TabLayoutTabLayout 的不同选项卡宽度
【发布时间】：2017-04-30 17:56:01
【问题描述】：

我正在使用 TabLayout 和 ViewPager。我正在尝试更改选项卡的大小，例如 Whatsapp（相机图标）。三个Tab的大小相等，但相机的Tab更小。在每次尝试中，我都使选项卡的大小保持不变（在所有选项卡中相等）。谢谢。

【问题讨论】：

有 4 个 ping 图标，3 个 png 具有相同的高度和宽度。一个和相机图标不同。
我尝试更改尺寸，但这是不可能的。它们总是以相同的大小出现

标签： android android-layout android-fragments android-viewpager android-tablayout

【解决方案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);

希望有帮助！

【讨论】：

它就像一个魅力。谢谢！但是，有没有办法将标签宽度设置为 wrap_content？
我找到了。看我的回答。
非常感谢
这项工作就像冠军！.. 但是在使用这个面临的背景颜色填充问题之后。与@sembozdemir 相同

【解决方案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
}

【讨论】：

【解决方案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);

【讨论】：

【解决方案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

【讨论】：