(三) 小说相关UI界面

ゝ一世哀愁。 2024-03-30 10:21 167阅读 0赞

一.  
效果图：  
![在这里插入图片描述][820c2e2e2dbe46f79df0fab982318df1.png]

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="260dp"
        android:layout_height="185dp"
        android:background="@drawable/bg_search"
        android:gravity="center_horizontal"
        android:orientation="vertical"
        android:paddingBottom="16.5dp"
        android:paddingLeft="10.5dp"
        android:paddingRight="10.5dp"
        android:paddingTop="3.5dp"
        android:clickable="true">
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:orientation="vertical"
            android:paddingBottom="10dp"
            android:paddingTop="15dp">
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:text="离线章节"
                android:textColor="@color/tv_btn_black"
                android:textSize="16sp" />
    
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="horizontal">
                <View
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:layout_weight="1" />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:layout_marginRight="5dp"
                    android:text="第"
                    android:textColor="@color/tv_btn_black"
                    android:textSize="16sp" />
    
                <EditText
                    android:id="@+id/edt_start"
                    android:layout_width="50dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:background="@drawable/bg_edit"
                    android:lines="1"
                    android:maxLength="4"
                    android:textCursorDrawable="@drawable/shape_text_cursor"
                    android:paddingBottom="4dp"
                    android:paddingLeft="5dp"
                    android:paddingRight="5dp"
                    android:paddingTop="4dp"
                    android:numeric="integer"
                    android:inputType="number"
                    android:textSize="14sp"
                    android:textColor="@color/tv_btn_black" />
    
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:layout_marginLeft="5dp"
                    android:layout_marginRight="5dp"
                    android:text="章 至 第"
                    android:textColor="@color/tv_btn_black"
                    android:textSize="16sp" />
    
                <EditText
                    android:id="@+id/edt_end"
                    android:layout_width="50dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:background="@drawable/bg_edit"
                    android:lines="1"
                    android:textCursorDrawable="@drawable/shape_text_cursor"
                    android:maxLength="4"
                    android:paddingBottom="4dp"
                    android:paddingLeft="5dp"
                    android:paddingRight="5dp"
                    android:paddingTop="4dp"
                    android:numeric="integer"
                    android:inputType="number"
                    android:textSize="14sp"
                    android:textColor="@color/tv_btn_black" />
    
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:layout_marginLeft="5dp"
                    android:text="章"
                    android:textColor="@color/tv_btn_black"
                    android:textSize="16sp" />
    
                <View
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:layout_weight="1" />
            </LinearLayout>
        </LinearLayout>
    
        <View
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:background="#c1c1c1" />
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:orientation="horizontal">
    
            <TextView
                android:id="@+id/tv_cancel"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@drawable/selector_book_detail_shelf_bg"
                android:clickable="true"
                android:gravity="center"
                android:text="取消"
                android:textColor="#767676"
                android:textSize="15sp" />
    
            <TextView
                android:id="@+id/tv_download"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@drawable/selector_book_detail_read_bg"
                android:clickable="true"
                android:gravity="center"
                android:text="下载"
                android:textColor="#ffffff"
                android:textSize="15sp" />
        </LinearLayout>
    </LinearLayout>

二.  
效果图：  
![在这里插入图片描述][34a78193dc4e452db82d47d03a57adcc.png]

<?xml version="1.0" encoding="utf-8"?>
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ffffff">
    
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/bg_ib_pre2"
            android:clickable="true"
            android:paddingLeft="10dp"
            android:id="@+id/fl_content">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="80dp"
                android:layout_marginBottom="10dp"
                android:layout_marginTop="10dp"
                android:orientation="horizontal">
    
                <ImageView
                    android:id="@+id/iv_cover"
                    android:layout_width="60dp"
                    android:layout_height="match_parent"
                    android:scaleType="fitCenter"
                    android:src="@drawable/doupo"
                    android:transitionName="img_cover" />
    
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical">
    
                    <TextView
                        android:id="@+id/tv_name"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="10dp"
                        android:layout_marginRight="10dp"
                        android:ellipsize="end"
                        android:lines="1"
                        android:text="斗破苍穹"
                        android:textColor="#767676"
                        android:textSize="16sp"
                        android:layout_marginBottom="3dp"/>
    
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:orientation="horizontal">
    
                        <LinearLayout
                            android:layout_width="0dp"
                            android:layout_height="match_parent"
                            android:layout_marginLeft="10dp"
                            android:layout_weight="1"
                            android:orientation="vertical">
                            <View
                                android:layout_width="0dp"
                                android:layout_height="0dp"
                                android:layout_weight="1"/>
                            <LinearLayout
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:orientation="horizontal"
                                android:layout_marginBottom="3dp">
    
                                <TextView
                                    android:id="@+id/tv_author"
                                    android:layout_width="wrap_content"
                                    android:maxWidth="90dp"
                                    android:layout_height="wrap_content"
                                    android:layout_gravity="center_vertical"
                                    android:lines="1"
                                    android:ellipsize="end"
                                    android:text="柳下惠"
                                    android:textColor="#aaaaaa"
                                    android:textSize="12sp" />
                                <TextView
                                    android:id="@+id/tv_origin"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_gravity="center_vertical"
                                    android:layout_marginLeft="5dp"
                                    android:lines="1"
                                    android:ellipsize="end"
                                    android:textColor="#aaaaaa"
                                    android:textSize="10sp" />
                            </LinearLayout>
                            <View
                                android:layout_width="0dp"
                                android:layout_height="0dp"
                                android:layout_weight="1"/>
                            <LinearLayout
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:orientation="horizontal">
                                <TextView
                                    android:id="@+id/tv_state"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_gravity="center_vertical"
                                    android:background="@drawable/shape_search_history_roundrect"
                                    android:paddingBottom="0.4dp"
                                    android:layout_marginRight="5dp"
                                    android:paddingLeft="2dp"
                                    android:paddingRight="2dp"
                                    android:paddingTop="0.4dp"
                                    android:text="连载"
                                    android:textColor="#ffffff"
                                    android:textSize="12sp" />
                                <TextView
                                    android:id="@+id/tv_kind"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_gravity="center_vertical"
                                    android:layout_marginRight="5dp"
                                    android:background="@drawable/shape_search_history_roundrect"
                                    android:lines="1"
                                    android:paddingBottom="0.4dp"
                                    android:paddingLeft="2dp"
                                    android:paddingRight="2dp"
                                    android:paddingTop="0.4dp"
                                    android:text="现代都市"
                                    android:textColor="#ffffff"
                                    android:textSize="12sp" />
                                <TextView
                                    android:id="@+id/tv_words"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_gravity="center_vertical"
                                    android:background="@drawable/shape_search_history_roundrect"
                                    android:lines="1"
                                    android:paddingBottom="0.4dp"
                                    android:paddingLeft="2dp"
                                    android:paddingRight="2dp"
                                    android:paddingTop="0.4dp"
                                    android:text="1.2万字"
                                    android:textColor="#ffffff"
                                    android:textSize="12sp" />
                            </LinearLayout>
                            <View
                                android:layout_width="0dp"
                                android:layout_height="0dp"
                                android:layout_weight="1"/>
                            <TextView
                                android:id="@+id/tv_lastest"
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:ellipsize="end"
                                android:lines="1"
                                android:text="最新章节:121章 成神"
                                android:textColor="#767676"
                                android:textSize="14sp" />
                        </LinearLayout>
                        <TextView
                            android:id="@+id/tv_addshelf"
                            android:layout_width="60dp"
                            android:layout_height="30dp"
                            android:layout_gravity="top"
                            android:layout_marginLeft="10dp"
                            android:layout_marginRight="10dp"
                            android:background="@drawable/selector_tv_addshelf"
                            android:gravity="center"
                            android:lines="1"
                            android:text="+书架"
                            android:textColor="@drawable/selector_tv_addshelf_text"
                            android:textSize="14sp" />
                    </LinearLayout>
                </LinearLayout>
            </LinearLayout>
            <View
                android:layout_width="match_parent"
                android:layout_height="0.5dp"
                android:layout_gravity="bottom"
                android:background="#c1c1c1" />
        </FrameLayout>
    
    </FrameLayout>

三.  
效果图：  
![在这里插入图片描述][38e294cf34f745ab969ee54dfca0e897.png]

四.  
效果图：  
![在这里插入图片描述][093721b0b0554bed879ac3b7924c51db.png]

<?xml version="1.0" encoding="utf-8"?>
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:paddingBottom="16.5dp"
            android:paddingTop="3.5dp"
            android:paddingLeft="9.5dp"
            android:paddingRight="10.5dp"
            android:background="@drawable/bg_search">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="horizontal"
                android:layout_gravity="center_vertical"
                android:paddingRight="10dp">
                <LinearLayout
                    android:id="@+id/ll_download"
                    android:layout_width="0dp"
                    android:layout_weight="999"
                    android:layout_height="match_parent"
                    android:orientation="horizontal"
                    android:layout_gravity="center_vertical">
                    <ImageView
                        android:id="@+id/iv_cover"
                        android:layout_width="45dp"
                        android:layout_gravity="center"
                        android:layout_height="match_parent"
                        android:src="@drawable/doupo"/>
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:orientation="vertical"
                        android:paddingLeft="10dp"
                        android:paddingRight="10dp">
                        <View
                            android:layout_width="0dp"
                            android:layout_height="7dp"/>
                        <TextView
                            android:id="@+id/tv_name"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:textColor="@color/tv_btn_black"
                            android:textSize="13sp"
                            android:text="《斗破苍穹》"
                            android:singleLine="true"
                            android:ellipsize="end"/>
                        <View
                            android:layout_width="0dp"
                            android:layout_height="0dp"
                            android:layout_weight="2"/>
                        <TextView
                            android:id="@+id/tv_chapter_name"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:textColor="@color/tv_btn_normal_black"
                            android:textSize="11sp"
                            android:text="十分燃，想看热血小说请进"
                            android:ellipsize="end"
                            android:maxLines="2"/>
                        <View
                            android:layout_width="0dp"
                            android:layout_height="0dp"
                            android:layout_weight="3"/>
                    </LinearLayout>
                </LinearLayout>
                <View
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:layout_weight="1"/>
                <TextView
                    android:id="@+id/tv_download"
                    android:layout_width="70dp"
                    android:layout_height="30dp"
                    android:text="开始下载"
                    android:layout_gravity="center_vertical"
                    android:gravity="center"
                    android:textColor="#ffffff"
                    android:clickable="true"
                    android:textSize="12sp"
                    android:background="@drawable/selector_bg_download"/>
                <View
                    android:layout_width="5dp"
                    android:layout_height="0dp"/>
                <TextView
                    android:id="@+id/tv_cancel"
                    android:layout_width="70dp"
                    android:layout_height="30dp"
                    android:textColor="#767676"
                    android:text="取消下载"
                    android:layout_gravity="center_vertical"
                    android:gravity="center"
                    android:textSize="12sp"
                    android:clickable="true"
                    android:background="@drawable/selector_bg_download_cancel"/>
    
                <View
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:layout_weight="1"/>
            </LinearLayout>
            <TextView
                android:id="@+id/tv_none"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:clickable="true"
                android:text="暂无任务"
                android:gravity="center"
                android:textColor="@color/tv_btn_black"
                android:textSize="14sp"
                android:visibility="gone"
                android:background="#ffffff"/>
            <View
                android:layout_width="match_parent"
                android:layout_height="0.7dp"
                android:background="#c1c1c1"
                android:layout_gravity="bottom"/>
        </FrameLayout>
    </FrameLayout>

五.  
效果图：  
![在这里插入图片描述][dd2638618bc84454b24b42b9aea0683d.png]

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:orientation="vertical">
        <View
            android:layout_width="match_parent"
            android:layout_height="20dp"
            android:background="@drawable/bg_shadow2" />
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:background="#ffffff"
            android:paddingTop="15dp"
            android:paddingBottom="15dp">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="35dp"
                android:orientation="horizontal"
                android:layout_gravity="center">
                <TextView
                    android:layout_width="80dp"
                    android:layout_height="match_parent"
                    android:textSize="14sp"
                    android:textColor="#adadad"
                    android:gravity="center"
                    android:text="字号"
                    android:layout_gravity="center_vertical"/>
                <FrameLayout
                    android:id="@+id/fl_smaller"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/selector_pop_font_bg">
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="-"
                        android:layout_gravity="center"
                        android:textColor="#767676"
                        android:textSize="22sp"/>
                </FrameLayout>
                <TextView
                    android:id="@+id/tv_dur_textsize"
                    android:layout_width="50dp"
                    android:layout_height="match_parent"
                    android:textSize="14sp"
                    android:textColor="#767676"
                    android:text="18"
                    android:gravity="center"
                    android:singleLine="true"
                    android:layout_gravity="center" />
                <FrameLayout
                    android:id="@+id/fl_bigger"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/selector_pop_font_bg">
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="+"
                        android:layout_gravity="center"
                        android:textColor="#767676"
                        android:textSize="22sp"/>
                </FrameLayout>
                <TextView
                    android:id="@+id/tv_textsize_default"
                    android:layout_width="70dp"
                    android:layout_height="match_parent"
                    android:textSize="14sp"
                    android:textColor="@drawable/selector_pop_font_color"
                    android:gravity="center"
                    android:text="默认"
                    android:layout_gravity="center_vertical"/>
            </LinearLayout>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="45dp"
                android:orientation="horizontal"
                android:layout_gravity="center"
                android:layout_marginTop="15dp">
                <TextView
                    android:layout_width="80dp"
                    android:layout_height="match_parent"
                    android:textSize="14sp"
                    android:textColor="#adadad"
                    android:gravity="center"
                    android:text="背景"
                    android:layout_gravity="center_vertical"
                    android:paddingLeft="20dp"
                    android:paddingRight="20dp"/>
    
                <de.hdodenhof.circleimageview.CircleImageView
                    android:id="@+id/civ_bg_white"
                    android:layout_width="45dp"
                    android:layout_height="45dp"
                    android:src="@drawable/icon_readbook_white"
                    app:civ_border_width="1dp"
                    app:civ_border_color="#00000000"/>
    
                <View
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:layout_weight="1"/>
                <de.hdodenhof.circleimageview.CircleImageView
                    android:id="@+id/civ_bg_yellow"
                    android:layout_width="45dp"
                    android:layout_height="45dp"
                    android:src="@drawable/icon_readbook_yellow"
                    app:civ_border_width="1dp"
                    app:civ_border_color="#F3B63F"/>
                <View
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:layout_weight="1"/>
                <de.hdodenhof.circleimageview.CircleImageView
                    android:id="@+id/civ_bg_green"
                    android:layout_width="45dp"
                    android:layout_height="45dp"
                    android:src="@drawable/icon_readbook_green"
                    app:civ_border_width="1dp"
                    app:civ_border_color="#00000000"/>
                <View
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:layout_weight="1"/>
                <de.hdodenhof.circleimageview.CircleImageView
                    android:id="@+id/civ_bg_black"
                    android:layout_width="45dp"
                    android:layout_height="45dp"
                    android:src="@drawable/icon_readbook_black"
                    app:civ_border_width="1dp"
                    app:civ_border_color="#00000000"/>
                <View
                    android:layout_width="50dp"
                    android:layout_height="0dp"/>
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>

“@drawable/selector\_pop\_font\_bg”：

<?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/shape_pop_font_bg_nor" android:state_pressed="false" android:state_enabled="true"/>
        <item android:drawable="@drawable/shape_pop_font_bg_pre" android:state_pressed="true" android:state_enabled="true"/>
        <item android:drawable="@drawable/shape_pop_font_bg_pre" android:state_enabled="false"/>
    </selector>

[820c2e2e2dbe46f79df0fab982318df1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/586b32aa239f478ea645e60f6b77c8ed.png
[34a78193dc4e452db82d47d03a57adcc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/da928676a0a94db4ba78c5e8635e6cc1.png
[38e294cf34f745ab969ee54dfca0e897.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/6fffcbe494354cd58c2fb6861d282bf8.png
[093721b0b0554bed879ac3b7924c51db.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/6f850750c8764db59c71bd365c3cd69c.png
[dd2638618bc84454b24b42b9aea0683d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/7fe21ccc59ab4831a5d20c9d98a57f1d.png