Android 小说搜索页面UI

设计思路

在搜索页面上肯定要有搜索框进行搜索，同时要有推荐书目以及搜索的历史纪录，最后考虑将搜索后的结果返回到搜索框下面显示。

实现效果

搜索界面代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:fitsSystemWindows="true"
    tools:context=".ui.activity.SearchBookActivity"
    >


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

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="45dp"
            android:background="@color/gray">

            <LinearLayout
                android:id="@+id/ll_title_back"
                android:layout_width="50dp"
                android:layout_height="match_parent"
                android:orientation="horizontal"
                android:paddingLeft="10dp"
                android:paddingStart="10dp"
                tools:ignore="RtlSymmetry">

                <ImageView
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_gravity="center"
                    android:layout_margin="5dip"
                    android:onClick="onback"
                    android:src="@drawable/ic_baseline_arrow_back_ios_24"
                    tools:ignore="ContentDescription,UsingOnClickInXml" />
            </LinearLayout>

            <TextView
                android:id="@+id/tv_title_text"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_centerHorizontal="true"
                android:layout_marginLeft="100dp"
                android:gravity="center"
                android:singleLine="true"
                android:text="@string/search"
                android:textColor="@color/white"
                android:textSize="19sp"
                android:layout_marginStart="100dp" />

        </RelativeLayout>

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="1px"
            android:src="@color/sys_line"
            tools:ignore="ContentDescription" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:gravity="center"
            android:orientation="horizontal"
            android:background="@color/gray"
            android:paddingBottom="10dp"
            android:paddingLeft="15dp"
            android:paddingRight="15dp"
            android:paddingTop="10dp">

            <EditText
                android:id="@+id/et_search_key"
                android:layout_width="match_parent"
                android:layout_height="35dp"
                android:layout_weight="2"
                android:inputType="text"
                android:imeOptions="actionSearch"
                android:background="@drawable/search_et_backcolor"
                android:hint="@string/search_hint"
                tools:ignore="Autofill" />

            <TextView
                android:id="@+id/tv_search_conform"
                android:layout_width="match_parent"
                android:layout_height="35dp"
                android:layout_weight="8"
                android:background="@drawable/search_btn_backcolor"
                android:gravity="center"
                android:text="@string/search"
                android:textColor="@color/white"
                android:textSize="18sp" />


        </LinearLayout>



        <LinearLayout
            android:id="@+id/ll_suggest_books_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/white"
            android:gravity="center"
            android:orientation="vertical"
            android:padding="10dp">


            <me.gujun.android.taggroup.TagGroup
                android:id="@+id/tg_suggest_book"
                style="@style/TagGroup"
                android:layout_marginTop="10dp"
                app:atg_borderColor="@color/sys_suggest_line"
                app:atg_horizontalPadding="10dp"
                app:atg_textColor="@color/black"
                app:atg_textSize="14sp"
                app:atg_verticalSpacing="10dp" />

            <LinearLayout
                android:id="@+id/ll_refresh_suggest_books"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:gravity="center"
                android:orientation="horizontal"
                tools:ignore="UseCompoundDrawables">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_baseline_refresh_24"
                    android:onClick="imagechange"
                    android:focusable="true"
                    android:focusableInTouchMode="false"
                    android:clickable="true"
                    tools:ignore="ContentDescription,UsingOnClickInXml" />

                <TextView
                    android:id="@+id/textchange"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/change"
                    android:textColor="@color/black"
                    android:focusable="true"
                    android:focusableInTouchMode="false"
                    android:clickable="true"
                    android:onClick="imagechange"
                    android:textSize="14sp"
                    tools:ignore="UsingOnClickInXml" />
            </LinearLayout>
        </LinearLayout>


        <LinearLayout
            android:id="@+id/ll_history_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/white"
            android:gravity="center"
            android:orientation="vertical"
            android:padding="10dp">

            <ListView
                android:id="@+id/lv_history_list"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:divider="@color/nothing"
                android:fadingEdge="none"
                android:overScrollMode="never"
                android:scrollbars="none">

            </ListView>

            <LinearLayout
                android:id="@+id/ll_clear_history"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:orientation="horizontal"
                tools:ignore="UseCompoundDrawables">

                <ImageView
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:src="@drawable/ic_delete"
                    tools:ignore="ContentDescription" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/clear_history"
                    android:textColor="@color/black"
                    android:textSize="14sp" />

            </LinearLayout>

	</LinearLayout>
            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/lv_search_books_list"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:visibility="gone">
            </androidx.recyclerview.widget.RecyclerView>
    </LinearLayout>

    <ProgressBar
        android:id="@+id/pb_loading"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:visibility="gone" />

</RelativeLayout>

搜索返回结果示例效果

搜索返回结果recycleview自定义item代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:background="@color/white"
    android:id="@+id/book_item"
    android:padding="5dp">

    <ImageView
        android:id="@+id/tv_book_img"
        android:layout_width="80dp"
        android:layout_height="110dp"
        android:scaleType="fitXY"
        android:src="@mipmap/no_image"
        tools:ignore="ContentDescription" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="10dp"
        android:layout_marginStart="10dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                >
            <TextView
                android:id="@+id/tv_book_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/书名"
                android:ellipsize="end"
                android:textSize="16sp"
                android:maxLines="1"
                android:textColor="@color/black"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true" />
            <TextView
                android:id="@+id/tv_book_source"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/book_souce"
                android:textSize="12sp"
                android:layout_alignParentRight="true"
                android:layout_alignParentEnd="true"
                tools:ignore="RelativeOverlap" />
            </RelativeLayout>

            <TextView
                android:id="@+id/tv_book_newchapter"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/newchapter"
                android:textSize="12sp"
                android:maxLines="1"
                />

            <TextView
                android:id="@+id/tv_book_desc"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:maxLines="2"
                android:layout_marginTop="5dp"
                android:paddingBottom="5dp"
                android:text="@string/简介"
                android:ellipsize="end"
                android:textSize="12sp" />


        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_alignParentBottom="true"
            android:paddingTop="5dp"
            android:paddingBottom="5dp">
            <TextView
                android:id="@+id/tv_book_author"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="@string/作者"
                android:textSize="12sp"/>
            <TextView
                android:id="@+id/tv_book_type"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/类型"
                android:textSize="12sp"/>

        </LinearLayout>

    </RelativeLayout>
    
</LinearLayout>

历史记录列表示例效果

历史记录列表listview的自定义item

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center|left"
    android:orientation="horizontal"
    android:padding="10dp"
    tools:ignore="RtlHardcoded,UseCompoundDrawables">

    <ImageView
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:src="@drawable/ic_baseline_history_24"
        tools:ignore="ContentDescription" />

    <TextView
        android:id="@+id/tv_history_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:text="@string/history"
        android:textColor="@color/sys_protect_eye_word"
        android:textSize="16sp" />

</LinearLayout>

项目需要添加依赖

 implementation 'me.gujun.android.taggroup:library:1.4@aar'