如何在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);