Android 小说阅读页面及目录UI设计

思路分析

需要一个滑动的组件放正文，需要左侧滑出目录，点击出现设置阅读相关内容。因此考虑用recycleview来放正文，同时将recycleview放在SmartRefreshLayout中方便章节刷新。考虑左侧滑出目录用抽屉布局DrawerLayout，而阅读相关设置则考虑用自定义view展示。

实现效果

实现阅读内容的UI代码

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:id="@+id/dl_read_activity"
    tools:context=".ui.activity.BookInfoActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <com.scwang.smartrefresh.layout.SmartRefreshLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/srl_content">
            <androidx.recyclerview.widget.RecyclerView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/rv_content"
                android:divider="@color/nothing"
                android:overScrollMode="never"
                android:dividerHeight="30dp"
                android:fadingEdge="none"
                android:listSelector="@color/nothing">
            </androidx.recyclerview.widget.RecyclerView>
        </com.scwang.smartrefresh.layout.SmartRefreshLayout>

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

    <LinearLayout
        android:id="@+id/ll_chapter_list_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_gravity="start">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="center"
            android:layout_marginBottom="10dp">

            <TextView
                android:id="@+id/tv_book_list"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="@string/content"
                android:textSize="20sp"
                android:padding="15dp"
                android:textColor="@color/sys_protect_eye_word"/>

            <TextView
                android:id="@+id/tv_chapter_sort"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/daoxu"
                android:textSize="15sp"
                android:padding="15dp"
                android:textColor="@color/sys_protect_eye_word"/>

        </LinearLayout>

        <ListView
            android:id="@+id/lv_chapter_list"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scrollbars="none"
            android:divider="@color/nothing"
            android:overScrollMode="never"
            android:fadingEdge="none"
            android:listSelector="@color/nothing">
        </ListView>

    </LinearLayout>

</androidx.drawerlayout.widget.DrawerLayout>

正文章节item的UI代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="vertical"
    android:padding="10dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/nothing"
            android:cursorVisible="false"
            android:inputType="none"
            android:lineSpacingMultiplier="1.5"
            android:textColor="@color/sys_protect_eye_word"
            android:textSize="22sp"
            android:textStyle="bold"
            tools:ignore="TextViewEdits" />
        <TextView
            android:id="@+id/tv_content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="50dp"
            android:background="@color/nothing"
            android:cursorVisible="false"
            android:inputType="none"
            android:lineSpacingMultiplier="1.5"
            android:textColor="@color/sys_protect_eye_word"
            android:textSize="20sp"
            tools:ignore="TextViewEdits" />
  
    </LinearLayout>

    <TextView
        android:id="@+id/tv_loading_error_tips"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:text="@string/refresh_again"
        android:visibility="gone" />

</RelativeLayout>

目录item的UI代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="15dp">

    <TextView
        android:id="@+id/tv_chapter_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/sys_protect_eye_word"
        android:text="@string/chapter" />

</LinearLayout>

阅读设置UI代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center_vertical" >

    <RelativeLayout
        android:id="@+id/rl_title_view"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:background="@color/sys_dialog_setting_bg">

        <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="20dp"
                android:layout_height="20dp"
                android:layout_gravity="center"
                android:layout_margin="5dip"
                android:src="@drawable/ic_baseline_arrow_back_ios_24"
                tools:ignore="ContentDescription" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_alignParentRight="true"
            android:gravity="center"
            android:orientation="horizontal"
            android:paddingRight="10dp"
            android:layout_alignParentEnd="true"
            android:paddingEnd="10dp"
            tools:ignore="RelativeOverlap,RtlSymmetry">

            <TextView
                android:id="@+id/tv_add_book"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/add_book"
                android:textColor="@color/white"
                android:textSize="18sp" />
        </LinearLayout>
    </RelativeLayout>

    <LinearLayout
        android:id="@+id/ll_bottom_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true"
        android:background="@color/sys_dialog_setting_bg"
        android:orientation="vertical"
        android:layout_alignParentLeft="true">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:paddingBottom="30dp"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:paddingTop="30dp">

            <TextView
                android:id="@+id/tv_last_chapter"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/shangyizhang"
                android:textColor="@color/white"
                android:textSize="15sp" />

            <SeekBar
                android:id="@+id/sb_read_chapter_progress"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_weight="1"
                android:maxHeight="1dp"
                android:minHeight="1dp"
                android:progressDrawable="@drawable/seekbar_bg"
                android:thumb="@mipmap/thumb"/>

            <TextView
                android:id="@+id/tv_next_chapter"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/xiayizhang"
                android:textColor="@color/white"
                android:textSize="15sp"/>

        </LinearLayout>

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingBottom="10dp"
            android:paddingTop="10dp"
            android:gravity="center"
            tools:ignore="DisableBaselineAlignment">

            <LinearLayout
                android:id="@+id/ll_chapter_list"
                android:layout_width="match_parent"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:gravity="center"
                tools:ignore="UseCompoundDrawables">

                <ImageView
                    android:layout_width="40dp"
                    android:layout_height="25dp"
                    android:src="@mipmap/t3"
                    tools:ignore="ContentDescription" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="5dp"
                    android:text="@string/mulu"
                    android:textColor="@color/white" />

            </LinearLayout>

            <LinearLayout
                android:id="@+id/ll_download_cache"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:orientation="vertical"
                android:gravity="center"
                tools:ignore="UseCompoundDrawables">

                <ImageView
                    android:layout_width="40dp"
                    android:layout_height="25dp"
                    android:src="@mipmap/download"
                    tools:ignore="ContentDescription" />

                <TextView
                    android:id="@+id/tv_download_progress"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="5dp"
                    android:text="@string/huancun"
                    android:textColor="@color/white" />

            </LinearLayout>

            <LinearLayout
                android:id="@+id/ll_night_and_day"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical"
                tools:ignore="UseCompoundDrawables">

                <ImageView
                    android:id="@+id/iv_night_and_day"
                    android:layout_width="40dp"
                    android:layout_height="25dp"
                    android:src="@mipmap/ao"
                    tools:ignore="ContentDescription" />

                <TextView
                    android:id="@+id/tv_night_and_day"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="5dp"
                    android:text="@string/yejian"
                    android:textColor="@color/white" />

            </LinearLayout>

            <LinearLayout
                android:id="@+id/ll_setting"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:orientation="vertical"
                android:gravity="center"
                tools:ignore="UseCompoundDrawables">

                <ImageView
                    android:layout_width="40dp"
                    android:layout_height="25dp"
                    android:src="@mipmap/t6"
                    tools:ignore="ContentDescription" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="5dp"
                    android:text="@string/setting"
                    android:textColor="@color/white" />
            </LinearLayout>

        </LinearLayout>

    </LinearLayout>

</RelativeLayout>
```
#### 阅读详细设置UI代码
```xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:layout_gravity="center_vertical">

    <LinearLayout
        android:id="@+id/ll_bottom_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/sys_dialog_setting_bg"
        android:orientation="vertical"
        android:padding="10dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        tools:ignore="UselessParent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:gravity="center">

            <ImageView
               android:layout_marginLeft="5dp"
                android:layout_width="25dp"
                android:layout_height="25dp"
                android:src="@mipmap/r6"
                android:layout_marginStart="5dp"
                tools:ignore="ContentDescription" />

            <SeekBar
                android:id="@+id/sb_brightness_progress"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="5dp"
                android:layout_weight="1"
                android:maxHeight="1dp"
                android:minHeight="1dp"
                android:progress="50"
                android:progressDrawable="@drawable/seekbar_bg"
                android:thumb="@mipmap/thumb" />

            <ImageView
                android:layout_width="25dp"
                android:layout_height="25dp"
                android:src="@mipmap/r4"
                tools:ignore="ContentDescription" />

            <TextView
                android:id="@+id/tv_system_brightness"
                android:layout_marginLeft="20dp"
                android:layout_width="50dp"
                android:layout_height="40dp"
                android:gravity="center"
                android:text="@string/xitong"
                android:textSize="15sp"
                android:background="@drawable/setting_btn_bg"
                android:textColor="@drawable/setting_btn_bg_color"
                android:layout_marginStart="20dp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:gravity="center">

            <TextView
                android:id="@+id/tv_reduce_text_size"
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:gravity="center"
                android:background="@drawable/setting_btn_bg2"
                android:layout_weight="1"
                android:text="@string/Ajian"
                android:textColor="@color/sys_dialog_setting_word_bright"/>

            <TextView
                android:id="@+id/tv_text_size"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/_20"
                android:paddingLeft="15dp"
                android:paddingRight="15dp"
                android:textColor="@color/sys_dialog_setting_word_bright"/>

            <TextView
                android:id="@+id/tv_increase_text_size"
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:gravity="center"
                android:layout_weight="1"
                android:background="@drawable/setting_btn_bg2"
                android:textSize="18sp"
                android:text="@string/Ajia"
                android:textColor="@color/sys_dialog_setting_word_bright"/>

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:gravity="center|left"
            tools:ignore="RtlHardcoded">
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1">

                <ImageView
                    android:id="@+id/iv_common_style"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:background="@drawable/setting_common_style_btn_bg"
                    tools:ignore="ContentDescription" />

            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1">

                <ImageView
                    android:id="@+id/iv_leather_style"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:background="@drawable/setting_leather_style_btn_bg"
                    tools:ignore="ContentDescription" />

            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1">

                <ImageView
                    android:id="@+id/iv_protect_eye_style"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:background="@drawable/setting_protect_eye_style_btn_bg"
                    tools:ignore="ContentDescription" />

            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1">

                <ImageView
                    android:id="@+id/iv_breen_style"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:background="@drawable/setting_breen_style_btn_bg"
                    tools:ignore="ContentDescription" />

            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1">

                <ImageView
                    android:id="@+id/iv_blue_deep_style"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:background="@drawable/setting_blue_deep_style_btn_bg"
                    tools:ignore="ContentDescription" />

            </LinearLayout>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:gravity="center|left"
            tools:ignore="RtlHardcoded">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@color/sys_dialog_setting_word_bright"
                android:text="@string/slow"/>

            <SeekBar
                android:id="@+id/sb_auto_scroll_progress"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:progress="50"
                android:layout_weight="1"
                android:maxHeight="1dp"
                android:minHeight="1dp"
                android:progressDrawable="@drawable/seekbar_bg"
                android:thumb="@mipmap/thumb"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@color/sys_dialog_setting_word_bright"
                android:text="@string/quick"/>

            <TextView
                android:id="@+id/tv_auto_scroll"
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:layout_marginLeft="10dp"
                android:gravity="center"
                android:background="@drawable/setting_btn_bg2"
                android:layout_weight="2.3"
                android:text="@string/zidonggunping"
                android:textColor="@color/sys_dialog_setting_word_bright"/>

        </LinearLayout>
    </LinearLayout>
</RelativeLayout>
```