自定义工具栏设计

时间:2017-01-09 12:29:47

标签: android android-toolbar

我正在为搜索活动构建自定义工具栏,它适用于某些设备,不适合其他屏幕。 我在我的设备720 * 1280上试过它,没关系。但是,当我在genymotion设备768 * 1280上打开应用程序时,它就像是这样。 enter image description here

search_toolbar.xml

 <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="wrap_content"
 android:fitsSystemWindows="true">

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

    <android.support.v7.widget.Toolbar
        android:id="@+id/search_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@drawable/search_bar_bg"
        app:popupTheme="@style/AppTheme.PopupOverlay">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <ImageButton
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_marginBottom="2dp"
                android:layout_weight=".1"
                android:background="#fff"
                android:clickable="true"
                android:onClick="back"
                android:src="@drawable/ic_arrow_back_black" />

            <EditText
                android:id="@+id/searchText"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_gravity="center_vertical"
                android:layout_marginLeft="5dp"
                android:layout_weight=".99"
                android:hint="@string/search"
                android:padding="3dp"
                android:textColor="#000"
                android:textColorHint="#FFCEC9C9"
                android:textSize="15sp"
                android:textStyle="bold" />

        </LinearLayout>
    </android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

Search.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<include
    layout="@layout/search_page_toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

<android.support.v7.widget.RecyclerView
    android:id="@+id/search_recycler"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="8dp" />
</LinearLayout>

2 个答案:

答案 0 :(得分:1)

您应该像这样修改Search.xml(请记住在您的recyclerview中添加app:layout_behavior="@string/appbar_scrolling_view_behavior"):

<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="wrap_content"
 android:fitsSystemWindows="true">

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

    <android.support.v7.widget.Toolbar
        android:id="@+id/search_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@drawable/search_bar_bg"
        app:popupTheme="@style/AppTheme.PopupOverlay">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <ImageButton
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_marginBottom="2dp"
                android:layout_weight=".1"
                android:background="#fff"
                android:clickable="true"
                android:onClick="back"
                android:src="@drawable/ic_arrow_back_black" />

            <EditText
                android:id="@+id/searchText"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_gravity="center_vertical"
                android:layout_marginLeft="5dp"
                android:layout_weight=".99"
                android:hint="@string/search"
                android:padding="3dp"
                android:textColor="#000"
                android:textColorHint="#FFCEC9C9"
                android:textSize="15sp"
                android:textStyle="bold" />

        </LinearLayout>
    </android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>

<android.support.v7.widget.RecyclerView
    android:id="@+id/search_recycler"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="8dp" 
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

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

答案 1 :(得分:0)

android:theme="@style/ThemeOverlay.AppCompat.ActionBar"中尝试AppBarLayout