如何通过搜索实现这种类型的toobar

时间:2017-04-28 12:17:35

标签: android android-coordinatorlayout

我正在创建一个应用程序,其中搜索框位于Toolbar下方,工具栏可滚动。当Toolbar未向上滚动EditText时,边距区域将是原色,当向上滚动时,边距区域将是透明的。

我正在使用此代码..

<android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/myAppBar"
        app:elevation="0dp"
        android:theme="@style/AppTheme.AppBarOverlay">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:contentInsetStart="0dp"
            app:popupTheme="@style/AppTheme.PopupOverlay">
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:gravity="center_vertical">
                <TextView
                    android:id="@+id/text"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="#FFFFFF"
                    android:layout_marginTop="2dp"
                    android:textSize="10sp"
                    android:gravity="bottom"
                    android:text="Current location"/>
                <TextView
                    android:id="@+id/current_location"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="#FFFFFF"
                    android:textSize="13sp"
                    android:gravity="top"
                    android:text="Fetching \nCurrent Location"/>
            </LinearLayout>
        </android.support.v7.widget.Toolbar>
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:background="@color/white"
            android:hint="Search Places"
            android:textColorHint="@color/textColorSecondary"
            android:drawablePadding="10dp"
            android:drawableLeft="@drawable/search_black_24dp"
            android:drawableStart="@drawable/search_black_24dp"
            android:layout_margin="8dp"/>
</android.support.design.widget.AppBarLayout>
  

预期结果

  

实际结果

1 个答案:

答案 0 :(得分:0)

请使用CollapsingToolbarLayout,如下例所示:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/appbar"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:titleEnabled="false"
            app:layout_scrollFlags="scroll">


            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:contentInsetLeft="0dp"
                app:contentInsetStart="0dp"
                app:contentInsetStartWithNavigation="0dp"
                app:popupTheme="@style/AppTheme.PopupOverlay" />
        </android.support.design.widget.CollapsingToolbarLayout>

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

    <include layout="@layout/content_main" />


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