将布局放在 AppBar 下（就像在 Messenger 中一样）

Question

下午好，

我正在尝试在 AppBar 下方和 ViewPager 上方放置一个（相对？线性？框架？）布局，就像在 Facebook Messenger 应用程序中一样。

喜欢下图中的"TOUS, MESSENGER, SMS":

这是我试过的代码，但它不起作用，应用栏下没有显示布局。

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_scrollFlags="scroll|enterAlways|snap" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            app:tabIndicatorColor="@color/fullWhite"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </android.support.design.widget.AppBarLayout>

    <!-- This is the part I need to put between the AppBar and the content (ViewPager), but it is not shown -->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/content_frame">
        <include layout="@layout/tous_messenger_sms"/>
    </FrameLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:background="@color/separator_color"/>
</android.support.design.widget.CoordinatorLayout>

这是我的 "tous_messenger_sms" 布局文件（问题可能不在于此）：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center_horizontal"
        android:layout_marginLeft="16sp"
        android:layout_marginRight="16sp">

    <Button
        style="?android:textAppearanceSmall"
        android:layout_width="wrap_content"
        android:layout_height="28sp"
        android:id="@+id/tous_btn"
        android:text="TOUS"
        android:textColor="@color/colorPrimary"
        android:layout_weight="1"
        android:background="@drawable/button_shape_tous"
        android:stateListAnimator="@null" />

    <Button
        style="?android:textAppearanceSmall"
        android:layout_width="wrap_content"
        android:layout_height="28sp"
        android:id="@+id/messenger_btn"
        android:text="MESSENGER"
        android:textColor="@color/colorPrimary"
        android:layout_weight="1"
        android:background="@drawable/button_shape_messenger"
        android:stateListAnimator="@null" />

    <Button
        style="?android:textAppearanceSmall"
        android:layout_width="wrap_content"
        android:layout_height="28sp"
        android:id="@+id/sms_btn"
        android:text="SMS"
        android:textColor="@color/colorPrimary"
        android:layout_weight="1"
        android:background="@drawable/button_shape_sms"
        android:stateListAnimator="@null" />
</LinearLayout>

Answer 1

试试这个布局

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_scrollFlags="scroll|enterAlways|snap" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            app:tabIndicatorColor="@color/fullWhite"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </android.support.design.widget.AppBarLayout>

    <!-- This is the part I need to put between the AppBar and the content (ViewPager), but it is not shown -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/content_frame">
            <include layout="@layout/tous_messenger_sms"/>
        </FrameLayout>

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/separator_color" />

    </LinearLayout>

</android.support.design.widget.CoordinatorLayout>

将布局放在 AppBar 下（就像在 Messenger 中一样）

Place Layout under the AppBar (like in Messenger)

xml

android

android-linearlayout

android-appbarlayout

android-framelayout