Android ViewPager在TabLayout上顯示視圖

Question

我想在我的TabLayout中設置兩個選項卡。第一個選項卡用於顯示配置文件，第二個選項卡用於顯示活動。我有TabLayout和ViewPager設置。我還創建了將兩個片段鏈接到Tablayout所需的適配器。當我在手機上執行此操作時，會顯示兩個屏幕和標籤，但它們不顯示在標籤區域內 - 它們隱藏了實際的標籤頁。我正在使用設計支持庫（v23.1.1）

我有一個帶有片段區域的主要活動文件，它根據用戶想要執行的操作更改視圖。

我能做些什麼來讓標籤內容顯示在標籤內而不是在標籤的頂部？這裏是我的代碼：

編輯：這裏是profile_fragment.xml文件（這是我想要的標籤發生）：

<RelativeLayout 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:layout_width="match_parent" 
     android:layout_height="match_parent" 
     tools:context="Fragments.ProfileFragment"> 

<!-- TODO: Update blank fragment layout --> 
<android.support.design.widget.TabLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:id = "@+id/ProfileTabLayout" 
    android:background="@color/colorPrimary" 
    app:tabGravity="fill" 
    app:tabMode="fixed" 
    app:tabTextColor="@color/colorIcons" 
    > 
</android.support.design.widget.TabLayout> 
<android.support.v4.view.ViewPager 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:id = "@+id/ProfilePager" 
    ></android.support.v4.view.ViewPager> 

user_profile_tab_layout.xml

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content"> 
    <android.support.v7.widget.CardView 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:background="@color/colorPrimaryLight" 
     android:layout_alignParentTop="true"> 
     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:orientation="vertical"> 
      <ImageView 
       android:layout_width="100dp" 
       android:layout_height="100dp" 
       android:layout_gravity="center" 
       android:src="@drawable/person_profile" 
       android:layout_margin="5dp"/> 
      <TextView 
       style="@style/TextViewStyle" 
       android:id = "@+id/userTitleTextView" 
       android:textSize="24sp" 
       android:textStyle="bold" 
       android:text = "@string/sample_profile_nameSurname" 
       /> 

      <TextView 
       style="@style/TextViewStyle" 
       android:id = "@+id/UserTypeTextView" 
       android:text="@string/sample_user_type" 
       android:textStyle="bold|italic" 
       android:textSize="18dp"/> 
      <TextView 
       style="@style/EditTexStyle" 
       android:id = "@+id/profileDeatilsHead" 
       android:background="@color/colorPrimaryDark" 
       android:text="@string/sample_profile_details" 
       android:textColor="@color/colorIcons" 
       /> 
      <RelativeLayout 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content"> 
       <TextView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="@string/club_reg_string" 
        android:id = "@+id/clubNameLabel" 
        android:layout_alignParentLeft="true" 
        android:layout_margin="5dp"/> 
       <TextView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="@string/sample_club_string" 
        android:id = "@+id/clubNameText" 
        android:layout_toRightOf="@id/clubNameLabel" 
        android:layout_alignBaseline="@id/clubNameLabel" 
        android:layout_alignParentRight="true" 
        android:layout_margin="5dp"/> 
      </RelativeLayout> 
     </LinearLayout> 

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

</RelativeLayout> 

ProfileFragment - 此片段用於顯示兩個選項卡。

public class ProfileFragment extends Fragment { 

private TabLayout profileTabLayout; 
private ViewPager profileViewPager; 
private ProfileViewPageAdapter profileViewPageAdapter; 
public ProfileFragment() { 
    // Required empty public constructor 
} 


@Override 
public View onCreateView(LayoutInflater inflater, ViewGroup container, 
         Bundle savedInstanceState) { 
    // Inflate the layout for this fragment 
    View myView = inflater.inflate(R.layout.fragment_profile, container, false); 
    profileTabLayout = (TabLayout) myView.findViewById(R.id.ProfileTabLayout); 
    profileViewPager = (ViewPager) myView.findViewById(R.id.ProfilePager); 
    profileViewPageAdapter = new ProfileViewPageAdapter(getFragmentManager()); 
    profileViewPageAdapter.addFragmentWithTitle(new UserProfileTabFragment(), "My Profile"); 
    profileViewPageAdapter.addFragmentWithTitle(new UserActivityTabFragment(), "My Activity"); 
    profileViewPager.setAdapter(profileViewPageAdapter); 
    profileTabLayout.setupWithViewPager(profileViewPager); 

    return myView; 
}} 

UserProfileTabLayout

public class UserProfileTabFragment extends Fragment { 

public UserProfileTabFragment() 
{ 

} 
@Override 
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { 
    View myView = inflater.inflate(R.layout.user_profile_tab_layout, container, false); 
    return myView; 
}} 

Answer 1

的RelativeLayout允許其子女重疊。 ViewPager是第二個孩子，所以如果它重疊的話，它將處於頂端。沒有什麼限制它的高度，所以它佔據了整個屏幕高度，因此它覆蓋了TabLayout。

最簡單的解決方法是將RelativeLayout的更改爲LinerLayout：

<LinearLayout 
    android:orientation="vertical" 
    ... > 

    <TabLayout 
     android:layout_height="wrap_content" 
     ... /> 

    <ViewPager 
     android:layout_height="0dp" 
     android:layout_weight="1" 
     ... /> 

</LinearLayout> 

如果你想使用RelativeLayout的保持，你可以這樣做，而不是：

<RelativeLayout ... > 

    <TabLayout 
     android:id="@+id/ProfileTabLayout" 
     android:layout_height="wrap_content" 
     ... /> 

    <ViewPager 
     android:layout_height="0dp" 
     android:layout_alignParentBottom="true" 
     android:layout_below="@+id/ProfileTabLayout" 
     ... /> 

</RelativeLayout>