Android 应用程序 UI 设计：像标签一样的 WhatsApp

Question

如何更改 TabLayout 中单个 Tab 的宽度？ 在 xml 布局中设置 app:tabMode="scrollable" 将改变所有标签项的宽度。但我想更改单个选项卡项的宽度，或者具体来说，第一个选项卡项。

我正在尝试做的一个很好的例子是 WhatsApp 主屏幕中的相机选项卡。该选项卡的宽度刚好足以显示图标。

我怎样才能达到同样的效果？

下面是我的布局 xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.example.myapplication.WolfApp">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/appbar_padding_top"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay">

        </android.support.v7.widget.Toolbar>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            app:tabMode="scrollable"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabIndicatorColor="#ffffff">

        </android.support.design.widget.TabLayout>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

Answer 1

不是您问题的答案，但是，我刚刚反编译了 WhatsApp apk，并找到了我认为是主屏幕的布局文件， 这里：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout android:id="@id/root_view" android:layout_width="fill_parent" android:layout_height="fill_parent"
  xmlns:android="http://schemas.android.com/apk/res/android" xmlns:whatsapp="http://schemas.android.com/apk/res-auto">
    <FrameLayout android:id="@id/camera_frame" android:layout_width="fill_parent" android:layout_height="fill_parent" />
    <LinearLayout android:orientation="vertical" android:fitsSystemWindows="true" android:layout_width="fill_parent" android:layout_height="fill_parent">
        <RelativeLayout android:id="@id/call_notification" android:background="@drawable/call_duration_bar_background" android:paddingLeft="16.0dip" android:paddingTop="8.0dip" android:paddingRight="16.0dip" android:paddingBottom="8.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content">
            <TextView android:textSize="17.0sp" android:textColor="@android:color/white" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/tap_to_return_to_call" android:layout_toLeftOf="@id/call_notification_timer" android:layout_alignParentLeft="true" />
            <TextView android:textSize="16.0sp" android:textColor="@android:color/white" android:gravity="center_vertical" android:id="@id/call_notification_timer" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:textAllCaps="true" />
        </RelativeLayout>
        <FrameLayout android:layout_width="fill_parent" android:layout_height="fill_parent">
            <FrameLayout android:id="@id/pager_holder" android:paddingTop="0.0dip" android:layout_width="fill_parent" android:layout_height="fill_parent">
                <view android:id="@id/pager" android:layout_width="fill_parent" android:layout_height="fill_parent" class="com.whatsapp.HomeActivity$TabsPager" />
            </FrameLayout>
            <LinearLayout android:orientation="vertical" android:id="@id/header" android:background="?colorPrimary" android:layout_width="fill_parent" android:layout_height="wrap_content">
                <include layout="@layout/toolbar" />
                <com.whatsapp.HomePagerSlidingTabStrip android:id="@id/tabs" android:background="@color/primary" android:layout_width="fill_parent" android:layout_height="@dimen/tab_height" whatsapp:pstsIndicatorColor="@color/tab_indicator" whatsapp:pstsDividerColor="@android:color/transparent" whatsapp:pstsIndicatorHeight="3.0dip" whatsapp:pstsUnderlineHeight="1.0dip" whatsapp:pstsTabPaddingLeftRight="8.0dip" whatsapp:pstsShouldExpand="true" />
            </LinearLayout>
            <FrameLayout android:id="@id/search_holder" android:visibility="invisible" android:layout_width="fill_parent" android:layout_height="@dimen/abc_action_bar_default_height_material" />
            <ImageView android:layout_gravity="bottom|center|right" android:id="@id/fab" android:background="@drawable/input_circle_green" android:layout_width="@dimen/submit_button_size" android:layout_height="@dimen/submit_button_size" android:layout_margin="16.0dip" android:scaleType="center" />
            <ImageView android:layout_gravity="bottom|center|right" android:id="@id/fab_aux" android:background="@drawable/input_circle_grey" android:visibility="gone" android:layout_width="46.0dip" android:layout_height="46.0dip" android:layout_marginRight="21.0dip" android:layout_marginBottom="88.0dip" android:scaleType="center" android:contentDescription="@string/menuitem_new_text_status" />
        </FrameLayout>
    </LinearLayout>
    <FrameLayout android:id="@id/preview_container" android:layout_width="fill_parent" android:layout_height="fill_parent" />
</FrameLayout>

我觉得行，

<com.whatsapp.HomePagerSlidingTabStrip android:id="@id/tabs" android:background="@color/primary" android:layout_width="fill_parent" android:layout_height="@dimen/tab_height" whatsapp:pstsIndicatorColor="@color/tab_indicator" whatsapp:pstsDividerColor="@android:color/transparent" whatsapp:pstsIndicatorHeight="3.0dip" whatsapp:pstsUnderlineHeight="1.0dip" whatsapp:pstsTabPaddingLeftRight="8.0dip" whatsapp:pstsShouldExpand="true" />

是您在问题中给出的选项卡布局。

还有另一个布局文件，其中包含选项卡标题的自定义视图。 whatsapp 中的标签标题有用于消息计数器、未接来电等的徽章

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout android:layout_width="fill_parent" android:layout_height="fill_parent"
  xmlns:android="http://schemas.android.com/apk/res/android">
    <LinearLayout android:gravity="center" android:layout_gravity="center" android:orientation="horizontal" android:layout_width="wrap_content" android:layout_height="48.0dip" android:animateLayoutChanges="true">
        <TextView android:textSize="14.0sp" android:textStyle="bold" android:textColor="@android:color/white" android:ellipsize="end" android:id="@id/tab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:singleLine="true" android:layout_weight="1.0" android:textAllCaps="true" />
        <TextView android:textSize="11.0sp" android:textStyle="bold" android:textColor="@color/primary" android:ellipsize="end" android:gravity="center" android:layout_gravity="center_vertical" android:id="@id/badge" android:background="@drawable/tab_badge_background_inactive" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="5.0dip" android:minWidth="16.0dip" android:singleLine="true" />
        <ImageView android:id="@id/icon" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content" />
    </LinearLayout>
</FrameLayout>

我的意思是，获得您想要的东西可能并不容易。 WhatsApp 使用自定义视图和自定义标签布局来做到这一点。

如果有人知道更简单的解决方案，那就太好了。

Answer 2

TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.getChildAt(0).getLayoutParams().width = 20;