Question

我的应用中有一个TabLayout，它包含自定义视图：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:orientation="horizontal">

        <com.myproject.app.utils.commons.IconImageView
            android:id="@android:id/icon"
            android:layout_width="wrap_content"
            android:layout_height="20dp"
            android:layout_marginRight="14dp"
            android:layout_marginEnd="14dp"
            app:iconStateListColor="@color/color_order_tab"/>

        <TextView
            android:id="@android:id/text1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/color_order_tab"
            android:textSize="14sp"
            android:fontFamily="sans-serif-medium"/>

    </LinearLayout>

</RelativeLayout>

我想在选项卡上显示文本，只有选中 - 已经完成 - 并动态调整这些选项卡的大小，有没有办法做到这一点？如果我使用app:tabMode="fixed"标签不调整大小，如果我使用app:tabMode="scrollable"，我的标签总是位于屏幕的左侧。如果我android:layout_width="wrap_content"和android:layout_gravity="center_horizontal" - TabLayout没有填满屏幕.. 所以我需要：

文本显示或消失时调整标签大小;
任何情况下，标签都应填满整个屏幕。

Answer 1

首先，您无法使用fixed模式获得所有所需功能。与fixed模式一样，您无法调整标签大小。您需要使用scrollable模式来调整选项卡的大小。

如果我做android：layout_width =＆＃34; wrap_content＆＃34;和机器人：layout_gravity =＆＃34; CENTER_HORIZONTAL＆＃34; - TabLayout无法填写屏幕

您可以设置父容器并设置背景，以便您感觉到具有完整设备宽度的选项卡布局。

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/holo_orange_light">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        app:tabGravity="center"
        app:tabMode="scrollable" />
</FrameLayout>

然后，您可以在标签布局中添加标签，即自定义标签，之后，您可以添加addOnTabSelectedListener以获得所需的结果：

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mBinding = DataBindingUtil.setContentView(this, R.layout.activity_main);

        View view = getLayoutInflater().inflate(R.layout.custom_tab, null);
        ((TextView) view.findViewById(R.id.text)).setText("large text one");

        View view1 = getLayoutInflater().inflate(R.layout.custom_tab, null);
        ((TextView) view1.findViewById(R.id.text)).setText("1");

        View view2 = getLayoutInflater().inflate(R.layout.custom_tab, null);
        ((TextView) view2.findViewById(R.id.text)).setText("Large Text Text Text");

        View view3 = getLayoutInflater().inflate(R.layout.custom_tab, null);
        ((TextView) view3.findViewById(R.id.text)).setText("One");


        View view4 = getLayoutInflater().inflate(R.layout.custom_tab, null);
        ((TextView) view4.findViewById(R.id.text)).setText("Another large text");

        mBinding.tabs.addTab(mBinding.tabs.newTab().setCustomView(view));
        mBinding.tabs.addTab(mBinding.tabs.newTab().setCustomView(view1));
        mBinding.tabs.addTab(mBinding.tabs.newTab().setCustomView(view2));
        mBinding.tabs.addTab(mBinding.tabs.newTab().setCustomView(view3));
        mBinding.tabs.addTab(mBinding.tabs.newTab().setCustomView(view4));

        mBinding.tabs.getTabAt(0).getCustomView().findViewById(R.id.text).setVisibility(View.VISIBLE);

        mBinding.tabs.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                tab.getCustomView().findViewById(R.id.text).setVisibility(View.VISIBLE);
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                tab.getCustomView().findViewById(R.id.text).setVisibility(View.GONE);
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

    }

如您所见，标签现在可以调整大小，只显示所选标签上的文字。希望有所帮助

Answer 2

<com.google.android.material.tabs.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="@android:color/white"
        app:tabTextAppearance="?attr/tabTextAppearance"
        app:tabMode="scrollable" />

android - TabLayout动态调整大小

2 个答案: