TabLayout標題顯示不正確

Question

我創建了只有2個標籤的SlidingTabs，但是佈局未正確顯示。 Image 1是輸出，我總是和Image 2是我輸出期望達到

輸出

預計輸出

layout.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

可以在設計支持庫

<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" /> 

使用TabLayout可以在你的應用程序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); 

我希望這會幫助你。