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>