Android ViewPager在TabLayout顶部显示视图 [英] Android ViewPager displaying views on top of TabLayout
问题描述
我正在尝试在我的TabLayout中设置两个选项卡.第一个选项卡用于显示配置文件，第二个选项卡用于显示活动.我有TabLayout和ViewPager设置.我还创建了所需的适配器，将两个片段链接到tablayout中.当我在手机上运行此命令时，会显示两个屏幕和选项卡，但它们不会显示在选项卡区域内-它们掩盖了实际的选项卡.我正在使用设计支持库(v23.1.1)
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:
这是profile_fragment.xml文件(这是我希望进行制表符的位置):
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
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-此片段用于显示两个选项卡.
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
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;
}}
推荐答案
RelativeLayout允许其子级重叠. ViewPager是第二个子级，因此，如果它重叠，它将位于最上面.没有任何限制其高度的操作，因此它占用了整个屏幕的高度，因此覆盖了TabLayout.
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.
最简单的解决方法是将RelativeLayout更改为LinerLayout:
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>
如果您想继续使用RelativeLayout，可以改为:
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>
这篇关于Android ViewPager在TabLayout顶部显示视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
