Android應用UI設計：WhatsApp喜歡Tabs

Question

如何更改TabLayout中單個Tab的寬度？ 設置應用程序：tabMode =「可滾動」在xml佈局中將更改所有選項卡項目的寬度。但是我想更改單個選項卡項目的寬度，或者更具體地說，第一個選項卡項目。

我想要做的一個很好的例子就是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使用自定義視圖和自定義tablayout做了這些。

如果有人知道一個更簡單的解決方案，那就太好了。

Answer 2

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