将 TabLayout 放在屏幕中间答案

【问题标题】：Placing TabLayout in the middle of screen将 TabLayout 放在屏幕中间
【发布时间】：2016-07-11 09:45:51
【问题描述】：

我想将标签布局放在屏幕中间，类似于此图像的显示方式：

这正是我想要的，但我似乎遇到了麻烦。以下是我的尝试：

profile.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:fresco="http://schemas.android.com/tools"
    android:id="@+id/profile_layout"
    android:layout_height="match_parent">

    <com.facebook.drawee.view.SimpleDraweeView
        android:layout_marginTop="32dp"
        android:id="@+id/profile_picture"
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:layout_marginLeft="16dp"
        fresco:roundingBorderColor="@color/white"
        fresco:roundingBorderWidth="10dp"
        fresco:placeholderImageScaleType="centerCrop"
        fresco:placeholderImage="@mipmap/blank_prof_pic"
        fresco:roundAsCircle="true"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="32dp"
        android:layout_toRightOf="@id/profile_picture"
        android:textStyle="bold"
        android:id="@+id/profile_name"/>

    <Button
        android:stateListAnimator="@null"
        android:layout_marginLeft="64dp"
        android:layout_below="@id/profile_picture"
        android:text="@string/followers"
        android:background="?android:attr/selectableItemBackground"
        android:id="@+id/followers_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <Button
        android:stateListAnimator="@null"
        android:layout_marginLeft="72dp"
        android:layout_below="@id/profile_picture"
        android:text="@string/following"
        android:background="?android:attr/selectableItemBackground"
        android:layout_toRightOf="@+id/followers_button"
        android:id="@+id/following_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />


    <com.cengalabs.flatui.views.FlatButton
        android:id="@+id/follow_button"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="16dp"
        android:fontFamily="sans-serif-medium"
        android:textSize="12sp"
        android:layout_width="wrap_content"
        android:layout_height="36dp"
        android:paddingLeft="24dp"
        android:paddingRight="24dp"
        android:visibility="gone"
        android:textColor="@color/white"
        android:layout_toRightOf="@id/profile_picture"
        android:layout_below="@id/profile_name"
        android:layout_marginBottom="16dp"/>

    <android.support.design.widget.TabLayout
        android:id="@+id/comments_post_tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_below="@+id/app_bar"
        android:background="?attr/colorPrimary"
        android:elevation="6dp"
        app:tabIndicatorColor="#00BCD4"
        android:minHeight="60dp"
        app:tabGravity="fill"
        app:tabMode="fixed"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/comments_posts_pager"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:layout_below="@id/tab_layout"/>

</RelativeLayout>

Profile.java：

public class ProfileTab extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    fragmentView = inflater.inflate(R.layout.profile, container, false);
    setupPostsAndCommentsTabLayout(fragmentView);
    ...
    }
    private void setupPostsAndCommentsTabLayout(View fragmentView) {
        tabLayout = (TabLayout) fragmentView.findViewById(R.id.comments_post_tab_layout);
        tabLayout.addTab(tabLayout.newTab().setText("Posts"));
        tabLayout.addTab(tabLayout.newTab().setText("Comments"));
        tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

        final ViewPager viewPager = (ViewPager) fragmentView.findViewById(R.id.comments_posts_pager);
        viewPager.setOffscreenPageLimit(2);
        final PagerAdapter adapter = new PagerAdapter
            (getFragmentManager(), tabLayout.getTabCount());
        viewPager.setAdapter(adapter);
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
        tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                viewPager.setCurrentItem(tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
    }
}

但是我尝试的问题是TabLayout 被放置在布局的顶部而不是中间，即使我尝试在布局中设置android:gravity=center。此外，似乎出现了 4 个选项卡，而不仅仅是 2 个，我也很困惑，因为我看不到在哪里或如何创建超过 2 个。最后，由于某种原因，布局最终变得非常非常滞后，一段时间后我的应用程序突然崩溃。有什么想法我可能会出错吗？谢谢！当我导航到Profile 片段时，我的屏幕如下所示：

【问题讨论】：

标签： android android-layout android-tabs android-tablayout

【解决方案1】：

将此行添加到您的 TabLayout：

android:layout_centerInParent="true"

【讨论】：

【解决方案2】：

这对我有用。您可以更改为 LinearLayout 和重力：中心或使用 marginTop/Bottom 进行其他调整。祝你好运！

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/gradient_background"
    android:orientation="vertical">

    <!-- don't display any text views or image views here, this is only for swipe bar -->
    <!-- if you do, they will be displayed in all fragments of this activity -->
    <!-- to add them, do this in each fragment -->

    <android.support.design.widget.AppBarLayout
        android:id="@+id/swipe_app_bar"
        android:layout_width="match_parent"
        android:layout_centerVertical="true"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.TabLayout
            android:id="@+id/swipe_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabGravity="fill"
            app:tabMode="fixed"
            app:tabSelectedTextColor="@color/darkOrange"
            app:tabTextColor="#000" />
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/swipe_elements"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:layout_below="@+id/swipe_app_bar" />
</RelativeLayout>

【讨论】：

【解决方案3】：

使用TabLayout 时，请确保TabLayout 控件的父控件是该屏幕布局上的最外层控件。

如果您将TabLayout 嵌套在另一个容器（如LinearLayout）中，标签可能会显示，但它可能是空的，并且滑动将不起作用。

请记住，TabLayout 上方可以有其他控件，只是不能将其包含在另一个容器中，除非它是最顶部的。

【讨论】：