问题
I am trying to set up two tabs in my TabLayout. The first tab is to display the profile, and the second tab is to display activity. I have the TabLayout and ViewPager setup. I also created the needed adapter to link the two fragments into the tablayout. When I run this on my phone, the two screens and tabs do display, but they do not display within the tab area - they cover up the actual tabs. I am using the design support library (v23.1.1)
I have a main activity file with a fragment area which changes the view depending on what the user wants to do.
What can I do to get the tab content to display inside the tabs and not on top of the tabs? Here is my code:
EDIT: Here is the profile_fragment.xml file (this is where I want the tabs to happen):
<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 - this fragment is used to display the two tabs.
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;
}}
回答1:
RelativeLayout allows its children to overlap. The ViewPager is the second child, so it will be on top if it overlaps. There is nothing constraining its height, so it is taking the entire screen height and thus it covers the TabLayout.
The simplest fix is to change the RelativeLayout to a LinerLayout:
<LinearLayout
android:orientation="vertical"
... >
<TabLayout
android:layout_height="wrap_content"
... />
<ViewPager
android:layout_height="0dp"
android:layout_weight="1"
... />
</LinearLayout>
If you want to keep using RelativeLayout, you can do this instead:
<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>
来源：https://stackoverflow.com/questions/36366706/android-viewpager-displaying-views-on-top-of-tablayout