如何使 ToolBar 中的 4 个选项卡和 2 个 ImageView 的大小相等？

Question

我创建了以下 XML 布局。您可以在其中看到我有一个工具栏，其中包含一个带有 3 个视图的 LinearLayout：一个 TabLayout 和 2 个图像视图。我想将每个图像视图的宽度设置为结果 TabLayout 中每个选项卡的宽度，这样看起来就像我有 6 个大小相同的选项卡，但其中两个不应该是选项卡。

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- The main content view -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_alignParentTop="true"
        android:background="?attr/colorPrimary">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:weightSum="6" >

            <android.support.design.widget.TabLayout
                android:layout_weight="4"
                android:id="@+id/tabs"
                style="@style/tab_bar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize" />

            <ImageView
                android:layout_weight="1"
                android:id="@+id/ivSearch"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:src="@drawable/ic_tab1"/>

            <ImageView
                android:layout_weight="1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:src="@drawable/ic_tab1"/>
        </LinearLayout>
    </android.support.v7.widget.Toolbar>

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/toolbar"></android.support.v4.view.ViewPager>
</RelativeLayout>
<!-- The navigation drawer -->
<ListView
    android:id="@+id/left_drawer"
    android:layout_width="240dp"
    android:layout_height="match_parent"
    android:layout_gravity="end"
    android:background="#111"
    android:choiceMode="singleChoice"
    android:divider="@android:color/transparent"
    android:dividerHeight="0dp" />

我所做的： 现在，正如您在布局中看到的那样，我尝试在 LinearLayout 中使用权重来达到所需的结果。但结果并不令人满意。而且我不知道如何执行此操作。

问题：有没有人做过类似的事情并且可以就此事提供一些意见？

Answer 1

解决方法是按如下方式使用 TabLayout：

<LinearLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:orientation="horizontal"
android:background="?attr/colorPrimary">

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="0dp"
    android:layout_height="?attr/actionBarSize"
    android:layout_weight="4"/>

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:paddingStart="12dp"
    android:paddingEnd="12dp"
    android:orientation="vertical"
    android:gravity="center"
    android:layout_weight="1">

    <ImageView
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:src="@drawable/icon5"/>

</LinearLayout>

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:paddingStart="12dp"
    android:paddingEnd="12dp"
    android:orientation="vertical"
    android:gravity="center"
    android:layout_weight="1">

    <ImageView
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:src="@drawable/icon6"/>

</LinearLayout>

并使用以下代码填充它：

TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs); 
tabLayout.setupWithViewPager(mViewPager); 

tabLayout.getTabAt(0).setIcon(R.drawable.icon1); 
....  
tabLayout.getTabAt(4).setIcon(R.drawable.icon6);

完整的解决方案可以在这里找到：

如何使 ToolBar 中的 4 个选项卡和 2 个 ImageView 的大小相等？

How to make 4 Tabs and 2 ImageView's in ToolBar equal in size?

tabs

android

toolbar

android-tablayout