android - TabLayout 标题未正确显示

Question

我创建了一个只有 2 个选项卡的 SlidingTabs，但是布局未正确显示。 Image 1 是我总是得到的输出，Image 2 是我期望实现的输出

输出

预期输出

布局.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/pager_wrapper"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorPrimary">

        <android.support.v4.view.ViewPager
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/white" />
    </FrameLayout>

    <test.com.example.view.SlidingTabLayout
        android:id="@+id/sliding_tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:paddingTop="?attr/actionBarSize" />

</FrameLayout>

Answer 1

您可以使用设计支持库中提供的TabLayout

<android.support.design.widget.TabLayout
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/my_tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:elevation="6dp"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:tabGravity="fill"
        app:tabIndicatorColor="@android:color/white"
        app:tabMaxWidth="0dp"
        app:tabMode="fixed"
        app:tabPaddingBottom="-1dp"
        app:tabPaddingEnd="-1dp"
        app:tabPaddingStart="-1dp"
        app:tabPaddingTop="-1dp" />

在您的应用程序 gradle 文件中，在依赖项中添加以下行:

 compile 'com.android.support:design:24.2.1'

Java 代码如下:

TabLayout myTabLayout = (TabLayout) findViewById(R.id.my_tab_layout);
TabLayout.Tab tab1 = myTabLayout.newTab().setText("Details");
TabLayout.Tab tab2 = myTabLayout.newTab().setText("Cast");
myTabLayout.addTab(tab1);
myTabLayout.addTab(tab2);

希望这对您有帮助。