android

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 模式才能调整选项卡的大小。

If I do android:layout_width="wrap_content" and android:layout_gravity="center_horizontal" - TabLayout doesn't fill the screen

您可以设置父容器并设置背景，这样您就可以感受到全设备宽度的选项卡布局。

<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 动态调整大小

android - TabLayout dynamically resize

android-tablayout