工具栏中的自定义视图，如 Airbnb 探索屏幕

Question

我想在应用程序（工具栏）的顶部栏区域添加多个输入字段，以便搜索我的应用程序。我看到 Airbnb 做到了最好！我尝试了在 CoordinatorLayout 中使用 AppBarLayout 的各种场景，但都失败了。是否有可能获得相同或相似的效果？如果是，我们该怎么做？

这是我向下滑动顶部栏时的屏幕截图：

Answer 1

是的，可以使用 appbar 布局创建，我已经尝试过相同的任务，最后我以这种方式想通了，我想下面的代码对你有帮助

  <?xml version="1.0" encoding="utf-8"?>
   <layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <!--your toolbar-->
        <include
            android:id="@+id/toolbar_wrapper"
            layout="@layout/common_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <android.support.design.widget.CoordinatorLayout
            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:background="@color/color_fafafa"
                android:orientation="vertical">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/color_ffffff"
                    android:orientation="vertical"
                    app:layout_scrollFlags="scroll">

                    <!--your scrolling layout, in your case it will be edit texts and search fields-->
                </LinearLayout>
            </android.support.design.widget.AppBarLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                app:layout_behavior="@string/appbar_scrolling_view_behavior">

                <android.support.design.widget.TabLayout
                    android:id="@+id/tab_layout"
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/dp_49"
                    android:background="@color/color_ffffff"
                    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                    app:tabIndicatorColor="@color/colorAccent"
                    app:tabSelectedTextColor="@color/color_727272"
                    app:tabTextColor="@color/color_b6b6b6" />

                <View
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/dp_1"
                    android:background="@color/color_d9d9d9" />
                <!--your main layout-->
                <android.support.v4.view.ViewPager
                    android:id="@+id/detail_pager"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:nestedScrollingEnabled="true" />
            </LinearLayout>

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

Answer 2

如果您仍在寻找答案，我尝试做类似的事情。我的布局是

<android.support.design.widget.CoordinatorLayout 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:ignore="RtlHardcoded">

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/main.collapsing"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:visibility="invisible"
                app:contentInsetEnd="0dp"
                app:contentInsetStart="0dp">

                <LinearLayout
                    android:id="@+id/summarized_search_layout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="top|center_horizontal"
                    android:layout_marginEnd="12dp"
                    android:layout_marginStart="12dp"
                    android:background="@drawable/background_blue_light_rounded"
                    android:orientation="horizontal"
                    android:padding="12dp"
                    app:layout_collapseMode="none">

                    <ImageView
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:layout_gravity="center_vertical"
                        android:src="@drawable/menu_search" />

                    <TextView
                        android:id="@+id/summarized_search_text"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_gravity="center_vertical"
                        android:layout_marginStart="12dp" />

                </LinearLayout>

            </android.support.v7.widget.Toolbar>

            <LinearLayout
                android:id="@+id/extended_search_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|center_horizontal"
                android:layout_marginTop="6dp"
                android:orientation="vertical"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="1">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginEnd="12dp"
                    android:layout_marginStart="12dp"
                    android:background="@drawable/background_blue_light_rounded"
                    android:orientation="horizontal"
                    android:padding="12dp">

                    <ImageView
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:layout_gravity="center_vertical"
                        android:src="@drawable/menu_profile" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical"
                        android:layout_marginStart="12dp" />

                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginEnd="12dp"
                    android:layout_marginStart="12dp"
                    android:layout_marginTop="12dp"
                    android:background="@drawable/background_blue_light_rounded"
                    android:orientation="horizontal"
                    android:padding="12dp">

                    <ImageView
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:layout_gravity="center_vertical"
                        android:src="@drawable/menu_calendar" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical"
                        android:layout_marginStart="12dp" />

                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginEnd="12dp"
                    android:layout_marginStart="12dp"
                    android:layout_marginTop="12dp"
                    android:background="@drawable/background_blue_light_rounded"
                    android:orientation="horizontal"
                    android:padding="12dp">

                    <ImageView
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:layout_gravity="center_vertical"
                        android:src="@drawable/menu_poi" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical"
                        android:layout_marginStart="12dp" />

                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginEnd="12dp"
                    android:layout_marginStart="12dp"
                    android:layout_marginTop="12dp"
                    android:background="@drawable/background_blue_light_rounded"
                    android:orientation="horizontal"
                    android:padding="12dp">

                    <ImageView
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:layout_gravity="center_vertical"
                        android:src="@drawable/menu_poi" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical"
                        android:layout_marginStart="12dp" />

                </LinearLayout>

                <Button
                    android:id="@+id/validation_button"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="end"
                    android:layout_marginEnd="12dp"
                    android:layout_marginTop="12dp"
                    android:text="GO" />

            </LinearLayout>

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.design.widget.TabLayout
            android:id="@+id/tablayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabGravity="fill"
            app:tabMode="fixed">

            <android.support.design.widget.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Search" />

            <android.support.design.widget.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Popular" />

            <android.support.design.widget.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Favorites" />

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

        <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scrollbars="none">

            <android.support.v7.widget.CardView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="8dp"
                app:cardElevation="8dp"
                app:contentPadding="16dp">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:lineSpacingExtra="8dp"
                    android:text="@string/lorem"
                    android:textSize="18sp" />
            </android.support.v7.widget.CardView>


        </android.support.v4.widget.NestedScrollView>

    </LinearLayout>


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

您可以看到我使用Toolbar 和visibility = invisible 来强制我的布局保持部分可见。我对这个技巧并不感到自豪，但我没有找到其他解决方案。

一旦你有了你的布局，它只是一个取决于偏移进度的动画问题。

如果你成功了，我会很高兴看到你的代码，因为我对我的代码不是很满意。

希望对你有帮助。