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

Question

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

这是我向上滑动顶部栏时的屏幕截图:

Answer 1

是的，可以使用应用程序栏布局进行创建，我尝试过相同的任务，最后我以这种方式弄清楚了，我想下面的代码对您有帮助

  <?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>