如何在android中创建不同宽度的标签？ （WhatsApp之类的标签）

Question

WhatsApp 标签：

我的 Tab 的当前实现：

我想将第一个选项卡的选项卡宽度减小到 warp_content ，并将剩余空间平均分配给其他 3 个选项卡。 （就像在 WhatsApp 中一样）

我曾参考过类似问题的 SO 帖子，但找不到任何有用的解决方案。

注意：我正在使用自定义标签。

代码：

TabLayout

<com.google.android.material.tabs.TabLayout
    android:id="@+id/main_activity_tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/toolbar"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    app:elevation="0dp"
    app:tabIndicatorColor="@color/tabIndicator"
    app:tabIndicatorHeight="3dp"
    app:tabMode="fixed"
    app:tabSelectedTextColor="@color/tabSelectedText"
    app:tabTextColor="@color/tabText" />

与 ViewPager 连接：

// Setup view pager
private void setupViewPager() {
    ViewPager viewPager = mainActivityBinding.mainActivityViewPager;
    MyPagerAdapter myPagerAdapter =
            new MyPagerAdapter(getSupportFragmentManager(), MainActivity.this);
    mainActivityBinding.mainActivityViewPager.setAdapter(myPagerAdapter);

    // Give the TabLayout the ViewPager
    mainActivityBinding.mainActivityTabLayout.setupWithViewPager(viewPager);

    // Iterate over all tabs and set the custom view
    for (int i = 0; i < mainActivityBinding.mainActivityTabLayout.getTabCount(); i++) {
        TabLayout.Tab tab = mainActivityBinding.mainActivityTabLayout.getTabAt(i);
        tab.setCustomView(myPagerAdapter.getTabView(i));
    }
}

MyPagerAdapter.java

public class MyPagerAdapter extends FragmentPagerAdapter {

    // Data
    private String[] tabTitles = new String[]{"", "CHATS", "STATUS", "CALLS"};
    private Context context;

    // Constructor
    public MyPagerAdapter(FragmentManager fragmentManager, Context context) {
        super(fragmentManager);
        this.context = context;
    }

    @Override
    public int getCount() {
        return tabTitles.length;
    }

    @Override
    public Fragment getItem(int position) {
        switch (position) {
            case 0:
                return ChatsFragment.newInstance();
            case 1:
                return ChatsFragment.newInstance();
            case 2:
                return StatusFragment.newInstance();
            case 3:
                return CallsFragment.newInstance();
        }
        return null;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        // Generate title based on item position
        return tabTitles[position];
    }

    public View getTabView(int position) {
        CustomTabBinding customTabBinding = CustomTabBinding.inflate(LayoutInflater.from(context));
        customTabBinding.customTabTitleTextView.setText(tabTitles[position]);
        if (tabTitles[position].isEmpty()) {  
            customTabBinding.customTabImageView.setVisibility(View.VISIBLE);
        }
        return customTabBinding.getRoot();
    }
}

custom_tab.xml：

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

    <data>
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/custom_tab_image_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:tint="@color/tabText"
            android:visibility="invisible"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/ic_camera_alt_black_24dp"
            tools:ignore="ContentDescription" />

        <TextView
            android:id="@+id/custom_tab_title_text_view"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="?attr/selectableItemBackground"
            android:gravity="center"
            android:singleLine="true"
            android:textColor="@color/tabText"
            android:textSize="14sp"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:text="First"
            tools:textColor="@android:color/black" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

Answer 1

如果您只想更改第一个选项卡，请尝试以下操作：

LinearLayout layout = (LinearLayout)tabLayout.getTabAt(0).view; // 0 => first tab
LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams)layout.getLayoutParams();
lp.weight = 0f;
lp.width = LinearLayout.LayoutParams.WRAP_CONTENT;
layout.setLayoutParams(lp);