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"