小说阅读软件阅读界面设计

1、引言

        我把我的小说软件中的阅读界面解析规则和相关内容进行了更新，目前已经支持上一章和下一章的切换，并且能通过目录直接跳转到指定章节，当前被展示的章节目录中对应的章节名会有明显的变色效果，目前这个加载的数据只能识别来自于搜索界面的传递的内容，感兴趣的朋友可以参考我上一篇关于小说解析的文章。

2、代码实现

2.1、主界面布局

"1.0" encoding="utf-8"?>
"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=".ui.ReadActivity">
    
        android:id="@+id/wv_read"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    
        android:id="@+id/ll_wv_src"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:visibility="gone"
        android:background="#44404040"/>
    
        android:id="@+id/ll_lv_back"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_marginRight="100dp"
        android:visibility="gone"
        android:background="#f7e7c5">
        
            android:id="@+id/lv_list"
            android:layout_marginTop="20dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginRight="10dp"
            android:divider="#00000000"/>
    
    
        android:id="@+id/ll_add"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/shape_shelf"
        android:gravity="center"
        android:layout_alignParentRight="true"
        android:layout_marginTop="100dp"
        android:visibility="gone"
        android:orientation="horizontal">
        
            android:id="@+id/tv_read_add"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="加入书架"
            android:textSize="15sp"
            android:textColor="#ffffff"
            android:layout_marginHorizontal="20dp"
            android:layout_marginVertical="10dp"
            android:visibility="visible"/>
    
    
    
        android:id="@+id/wv_load"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone"/>

2.2、目录界面布局

"1.0" encoding="utf-8"?>
"http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
    
        android:id="@+id/tv_read_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:layout_marginLeft="10dp"
        android:textColor="#cabea4"
        android:layout_marginVertical="10dp"
        android:text="书名"/>

2.3、真正阅读界面布局

        真正的阅读界面我是使用一个本地网页来展示的。

"zh_CN">
    "Content-Type" content="text/html" charset="UTF-8">
    "viewport" content="width=device-width, initial-scale=1.0">
    
    
    
"body">

    
"h1_title">
"div_read">


    "span_last" class="span_bottom" onclick="window.Android.lastChapter()">
    "span_list" class="span_bottom" onclick="window.Android.showList()">
    "span_next" class="span_bottom" onclick="window.Android.nextChapter()">

2.4、实现代码

        目前实现代码中包含的添加历史阅读记录和添加书架数据的部分功能暂时没有修改，因此这一部分内容请忽略，待我全部修改完成后会将完整的代码提交到我的网站提供下载。

package xyz.dritrtj.read.ui;
 
import android.annotation.SuppressLint;
import android.content.ContentValues;
import android.content.Intent;
import android.content.pm.ActivityInfo;
import android.database.Cursor;
import android.database.sqlite.SQLiteDatabase;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.graphics.drawable.GradientDrawable;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.View;
import android.view.ViewGroup;
import android.webkit.JavascriptInterface;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.BaseAdapter;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.TextView;
 
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import xyz.dritrtj.read.R;
import xyz.dritrtj.read.data.Title;
import xyz.dritrtj.read.fragment.BookShelfFragment;
import xyz.dritrtj.read.interfaces.Init;
import xyz.dritrtj.read.utils.DBHelper;
import xyz.dritrtj.read.utils.SetUiSize;
 
import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;
 
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.URL;
import java.util.ArrayList;
import java.util.List;
/**
 * 本界面不需要适配，后面为目录添加一个水平进出的动画效果更好,然后进一步添加水平方向翻页的效果
 */
public class ReadActivity extends AppCompatActivity implements View.OnClickListener, Init {
    private LinearLayout ll_lv_back;//目录的布局
    private ListView lv_list;
    private WebView wv_read;
    private String path;//路径
    private String originPath;//初始路径路径
    private String data;//数据
    private int page;//章节索引
    private LinearLayout ll_wv_src;//webView的遮挡布局
    private String name;//书名
    private String author;//作者
    private int code;//表示跳转来源
    private Intent intent;//用于判断跳转来源
    private LinearLayout ll_add;
    private String imagePath;//图片路径
    private TextView tv_read_add;
    private WebView wv_load;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_read);
        initView();
        setViewSize();
        setData();
    }
    private boolean isShow=true;
    @SuppressLint("NonConstantResourceId")
    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.ll_wv_src:
                ll_lv_back.setVisibility(View.GONE);
                ll_wv_src.setVisibility(View.GONE);
                isShow=true;
                break;
            case R.id.ll_add:
                add();
                break;
        }
    }
 
    @SuppressLint("SetJavaScriptEnabled")
    @Override
    public void initView() {
        View decorView=getWindow().getDecorView();//获取当前界面的DecorView
        int option=View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR;//更改文字颜色为深黑色
        decorView.setSystemUiVisibility(option);//设置系统UI元素的可见性
        getWindow().setNavigationBarColor(Color.TRANSPARENT);
        getWindow().setStatusBarColor(Color.parseColor("#ffffff"));//将状态栏设置为白色
        getSupportActionBar().hide();
 
        wv_read = findViewById(R.id.wv_read);
        lv_list = findViewById(R.id.lv_list);
        ll_lv_back = findViewById(R.id.ll_lv_back);
        ll_wv_src = findViewById(R.id.ll_wv_src);
        ll_wv_src.setOnClickListener(this);
        lv_list.setOnItemClickListener((parent, view, position, id) -> {
            if (page!=position){
                page=position;
                ll_lv_back.setVisibility(View.GONE);
                ll_wv_src.setVisibility(View.GONE);
                isShow=true;
                handler.sendEmptyMessage(3);
            }
        });
        ll_add = findViewById(R.id.ll_add);
        ll_add.setOnClickListener(this);
        tv_read_add = findViewById(R.id.tv_read_add);
        intent = getIntent();
        path=intent.getStringExtra("url");
        originPath=path;
        name=intent.getStringExtra("name");
        author=intent.getStringExtra("author");
        imagePath=intent.getStringExtra("imagePath");
        code=Integer.parseInt(intent.getStringExtra("code"));
        WebSettings webSettings = wv_read.getSettings();
        //设置支持javaScript脚步语言
        webSettings.setJavaScriptEnabled(true);
        //设置js调用java支持
        wv_read.addJavascriptInterface(new JavaAndJs(),"Android");
        //设置客户端-不跳转到默认浏览器中
        wv_read.setWebViewClient(new WebViewClient());
        wv_read.loadUrl("file:///android_asset/read.html");
 
        wv_load = findViewById(R.id.wv_load);
        WebSettings settings = wv_load.getSettings();
        settings.setCacheMode(WebSettings.LOAD_NO_CACHE);//设置回退
        settings.setSupportZoom(true);//支持缩放
        settings.setBuiltInZoomControls(true);//出现缩放工具
        settings.setJavaScriptEnabled(true);// 表示webview可以执行服务器端的js代码
        settings.setUserAgentString("Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 " +
                "(KHTML, like Gecko) Chrome/43.0.2357.134 Safari/537.36");
        //自适应屏幕
        settings.setUseWideViewPort(true);
        settings.setLoadWithOverviewMode(true);
        //自动缩放
        settings.setBuiltInZoomControls(true);
        settings.setSupportZoom(true);
        //支持获取手势焦点
        wv_load.requestFocusFromTouch();
        settings.setJavaScriptCanOpenWindowsAutomatically(true);//允许js弹出窗口
        wv_load.addJavascriptInterface(new AndroidAndJs(), "Android");
        wv_load.setWebViewClient(new WebViewClient(){
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                if (url.startsWith("http")){
                    if (flag==0){//加载目录
                        jsFunction="javascript:function getDirectory() {\n" +
                                "                var list=document.getElementById('list');\n" +
                                "                var dds=list.getElementsByTagName('dd');\n" +
                                "                if(dds.length>12){\n" +
                                "                    var dd;\n" +
                                "                    var url;\n" +
                                "                    var now_name;\n" +
                                "                    var as;\n" +
                                "                    var a;\n" +
                                "                    for (var i = 12; i < dds.length; i++) {\n" +
                                "                        dd=dds[i];\n" +
                                "                        as=dd.getElementsByTagName('a');\n" +
                                "                        a=as[0];\n" +
                                "                        url=a.href;\n" +
                                "                        now_name=a.innerHTML;\n" +
                                "                        window.Android.setDirectory(url,now_name);\n" +
                                "                    }\n" +
                                "                    window.Android.setContent();\n" +
                                "                }\n" +
                                "            }";
                        view.loadUrl(jsFunction);
                        //调用 js函数
                        view.loadUrl("javascript:getDirectory();");
                    }
                    if (flag==1){
                        jsFunction="javascript:function getData() {\n" +
                                "                var div=document.getElementById('content');\n" +
                                "                var data=div.innerHTML;\n" +
                                "                window.Android.setData(data);\n" +
                                "            }";
                        wv_load.loadUrl(jsFunction);
                        //调用 js函数
                        wv_load.loadUrl("javascript:getData();");
                    }
                }
            }
        });
        wv_load.loadUrl(path);//加载章节目录
    }
    private int flag;//操作标志0代表读取目录
    private String jsFunction;//js函数
    @Override
    public void setViewSize() {
        SetUiSize.setMarginRightRelative(ll_lv_back,100);
        SetUiSize.setMarginTopLinear(lv_list,20);
        SetUiSize.setMarginRightLinear(lv_list,10);
        SetUiSize.setMarginTopRelative(ll_add,100);
        int size= (int) (20/SetUiSize.displayWidthDp*SetUiSize.displayWidth);
        GradientDrawable drawable = (GradientDrawable) ll_add.getBackground();
        drawable.setCornerRadii(new float[]{size,size,0,0,0,0,size,size});
        SetUiSize.setMarginTopLinear(tv_read_add,15);
        SetUiSize.setMarginHorizontalLinear(tv_read_add,20);
        SetUiSize.setMarginVerticalLinear(tv_read_add,10);
 
    }
 
    @Override
    public void setData() {
//        loadContent();
    }
 
    class JavaAndJs{
        @JavascriptInterface
        public void showList(){
            if (isShow){
                handler.sendEmptyMessage(2);
            }
        }
        //上一章
        @JavascriptInterface
        public void lastChapter(){
            if ((page-1)>=0){
                page--;
                handler.sendEmptyMessage(3);
            }
        }
        //下一章
        @JavascriptInterface
        public void nextChapter(){
            if ((page+1)<=list.size()-1){
                page++;
                handler.sendEmptyMessage(3);
            }
        }
    }
    private List