使用搜索栏折叠工具栏布局

Question

我在折叠工具栏上创建搜索栏之类的东西时遇到了问题。

问题来了：

首先，我创建一个折叠工具栏

<android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="240dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleTextAppearance="@android:color/transparent"
        android:fitsSystemWindows="true"> 
    ... 
</android.support.design.widget.CollapsingToolbarLayout>

在 CollapsingToolbarLayout 中，我添加了一些分层图像、后退按钮和标题。 它看起来像这样：

<!-- Background on Verified Store -->
<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="240dp"
        android:background="@drawable/verifiedkosong"
        app:layout_collapseMode="parallax"
        android:scaleType="centerCrop">

    <!-- Back arrow -->
    <ImageView
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:src="@drawable/arrow_back_white"
            android:layout_margin="16dp"
            android:id="@+id/close" />

    <!-- Activity title on center -->
    <LinearLayout
            android:gravity="center_horizontal|left"
            android:layout_marginEnd="-23dp"
            android:layout_marginTop="-15dp"
            android:id="@+id/viewtext"
            android:layout_below="@+id/close"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

        <!-- Text image -->
        <ImageView
                android:layout_marginTop="20dp"
                android:id="@+id/imgVerifIcon"
                android:layout_width="match_parent"
                android:layout_height="32dp"
                android:src="@drawable/textshadow"
                android:layout_gravity="bottom" />

    </LinearLayout>

    <!-- Layered image for background -->
    <ImageView
            android:layout_marginTop="110dp"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:src="@drawable/detail_verified"
            android:layout_gravity="bottom"
            android:layout_marginLeft="8dp"/>

</RelativeLayout>

然后，我添加了一个搜索栏。我让它作为一个按钮工作。如果它被点击，它将转到另一个活动（搜索活动以获取样本）

<RelativeLayout
        android:layout_marginTop="185dp"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@drawable/backallborderradiusstore">

    <!-- SearchBar LinearLayout -->
    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
        My SearchBar is here
    </LinearLayout>
</RelativeLayout>

之后，我添加了一个工具栏。我仍然不知道如何在此工具栏上添加我的搜索栏。这是我的工具栏：

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:title="Verified Store"
        app:layout_collapseMode="pin"/>

Answer 1

试试下面这个对我有用的代码

 <?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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"
    android:background="@android:color/white"
    android:fitsSystemWindows="true"
    tools:context=".fragments.HomeFragment">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/home_appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="110dp" (here you can adjust your height as your desire)
            android:animateLayoutChanges="true"
            android:background="@color/blue"
            android:fitsSystemWindows="true"
            app:contentInsetLeft="0dp"
            app:contentInsetStart="0dp"
            app:contentInsetStartWithNavigation="0dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
            app:titleEnabled="true">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:orientation="horizontal">

                ----you have to setOnclicklistner as backbutton from java------

                <ImageView
                    android:id="@+id/hamburger_icon"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="10dp"
                    android:layout_marginLeft="10dp"
                    android:layout_marginTop="10dp"
                    android:src="@drawable/back_icon" />

               <ImageView
                here ImageView
                ......./>

            </LinearLayout>


            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar_home"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:layout_gravity="bottom"
                android:layout_marginBottom="3dp"
                android:background="@color/blue"
                app:contentInsetLeft="0dp"
                app:contentInsetStart="0dp"
                app:contentInsetStartWithNavigation="0dp">

                ----custom search view-----


                 <LinearLayout
                     android:layout_width="match_parent"
                     android:layout_height="40dp"
                     android:layout_marginStart="10dp"
                     android:layout_marginEnd="10dp"
                     android:background="@drawable/background_btn_profile"
                     android:gravity="center_vertical"
                     android:orientation="horizontal"
                     android:layout_marginLeft="10dp">

                     <ImageView
                         android:layout_width="wrap_content"
                         android:layout_height="wrap_content"
                         android:background="@android:color/white"
                         android:padding="8dp"
                         android:src="@drawable/ic_search_black_24dp" />

                     <EditText
                         android:layout_width="0dp"
                         android:layout_height="wrap_content"
                         android:padding="8dp"
                         android:layout_weight="1"
                         android:background="#ffffff"
                         android:gravity="center_vertical" />

                     <ImageView
                         android:layout_width="wrap_content"
                         android:layout_height="wrap_content"
                         android:background="@android:color/white"
                         android:padding="8dp"
                         android:src="@drawable/ic_mic_black_24dp" />
                 </LinearLayout>

                 -------------end here------------
            </androidx.appcompat.widget.Toolbar>


        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>


    <androidx.core.widget.NestedScrollView
        android:id="@+id/nested_scroll"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="15dp"
            android:orientation="vertical">


            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/location_based_places"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginStart="2dp"
                android:layout_marginTop="10dp"
                android:layout_marginEnd="2dp"
                android:background="@color/white" />



            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/exclusive_deals_recycle_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginStart="2dp"
                android:layout_marginTop="10dp"
                android:layout_marginEnd="2dp"
                android:background="@color/white" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:layout_marginLeft="5dp"
                android:layout_marginTop="10dp"
                android:drawableStart="@drawable/ic_recommended"
                android:drawableLeft="@drawable/ic_recommended"
                android:drawablePadding="5dp"
                android:gravity="center"
                android:text="Recommended for you"
                android:textColor="@color/blue"
                android:textSize="18sp"
                android:textStyle="bold" />

            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/recommend_recycle_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginStart="2dp"
                android:layout_marginTop="10dp"
                android:layout_marginEnd="2dp"
                android:background="@color/white" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:layout_marginLeft="5dp"
                android:layout_marginTop="10dp"
                android:drawableStart="@drawable/ic_hot_air_balloon"
                android:drawableLeft="@drawable/ic_hot_air_balloon"
                android:drawablePadding="5dp"
                android:gravity="center"
                android:text="Explore"
                android:textColor="@color/blue"
                android:textSize="18sp"
                android:textStyle="bold" />

            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/explore_recycle_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginStart="2dp"
                android:layout_marginTop="10dp"
                android:layout_marginEnd="2dp"
                android:background="@color/white" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:layout_marginLeft="5dp"
                android:layout_marginTop="10dp"
                android:drawableStart="@drawable/ic_discount"
                android:drawableLeft="@drawable/ic_discount"
                android:drawablePadding="5dp"
                android:gravity="center"
                android:text="Special Offers"
                android:textColor="@color/blue"
                android:textSize="18sp"
                android:textStyle="bold" />

            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/specials_recycle_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginStart="2dp"
                android:layout_marginTop="10dp"
                android:layout_marginEnd="2dp"
                android:background="@color/white" />

        </LinearLayout>

    </androidx.core.widget.NestedScrollView>


</androidx.coordinatorlayout.widget.CoordinatorLayout>

Answer 2

不完全是您要查找的内容，但使用此代码可以在滚动时隐藏工具栏并仅显示搜索视图。要实现类似的效果，只需将此代码粘贴到您的 XML 布局中：

      <androidx.coordinatorlayout.widget.CoordinatorLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <com.google.android.material.appbar.AppBarLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fitsSystemWindows="true">

                <com.google.android.material.appbar.MaterialToolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:layout_scrollFlags="scroll|enterAlways" />

                <androidx.appcompat.widget.LinearLayoutCompat
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginHorizontal="10dp"
                    android:background="@color/white"
                    android:orientation="horizontal">

                    <androidx.appcompat.widget.AppCompatEditText
                        android:id="@+id/etSearch"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:background="@null"
                        android:drawableStart="@drawable/ic_toolbar_search"
                        android:drawablePadding="@dimen/margin_6"
                        android:hint="@string/search_hint"
                        android:imeOptions="actionSearch"
                        android:inputType="text"
                        android:maxLines="1"
                        android:padding="5dp"
                        android:textColor="@color/black"
                        android:textColorHint="@color/text_hint"
                        android:textSize="@dimen/text_size_13sp" />

                    <androidx.appcompat.widget.AppCompatImageView
                        android:id="@+id/ivCLear"
                        android:layout_width="@dimen/xlarge_margin"
                        android:layout_height="@dimen/xlarge_margin"
                        android:layout_gravity="center_vertical"
                        android:layout_marginEnd="@dimen/margin_6"
                        android:src="@drawable/ic_close"
                        android:visibility="gone" />
                </androidx.appcompat.widget.LinearLayoutCompat>
            </com.google.android.material.appbar.AppBarLayout>
        </androidx.coordinatorlayout.widget.CoordinatorLayout>