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;
}}

用户配置文件选项卡布局

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>