Question

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

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

是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片段时我的屏幕的样子：

Answer 1

将此行添加到TabLayout：

android:layout_centerInParent="true"

Answer 2

对我有用。您可以更改为LinearLayout和gravity：center或使用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>

Answer 3

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

如果您将 TabLayout 嵌套在另一个容器（如 LinearLayout）中，该选项卡可能会显示，但它可以为空并且无法滑动。

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

将TabLayout放在屏幕中间

3 个答案: