是一个典型的电商商品详情页面布局,包含了商品展示、信息描述、评论系统和底部操作栏等完整功能
1. 整体布局
用RelativeLayout作为根布局,主要分为三个部分:
- 顶部工具栏
- 中间滚动内容区
- 底部操作栏
2. 具体结构分析
顶部区域
<androidx.appcompat.widget.Toolbar>
<!-- 包含返回按钮和标题 -->
</androidx.appcompat.widget.Toolbar>
中间内容区(NestedScrollView)
<androidx.core.widget.NestedScrollView>
<!-- 主要内容区域,包含: -->
1. 商品图片展示区
- 大图展示
- 页码指示器(1/1)
2. 商品信息区
- 价格展示
- 服务保障(店铺发货、货到付款、七天退货)
- 商品标题
- 商品详情描述
3. 评论区
- "全部评论"标题
- RecyclerView评论列表
- 空状态显示
</androidx.core.widget.NestedScrollView>
底部操作栏
<RelativeLayout>
<!-- 左侧按钮区 -->
<LinearLayoutCompat>
- 收藏按钮(CheckBox)
- 购物车按钮(CheckBox)
</LinearLayoutCompat>
<!-- 右侧按钮 -->
- "加入购物车"按钮
</RelativeLayout>
3. 特点
- 使用NestedScrollView实现整页滚动
- 商品图片使用RelativeLayout布局,支持页码显示
- 底部操作栏固定,不随页面滚动
- 使用CheckBox实现收藏和购物车的状态切换
- 评论列表支持空状态显示
4. 关键控件
Toolbar
: 顶部导航栏NestedScrollView
: 支持嵌套滚动的容器RecyclerView
: 评论列表CheckBox
: 收藏和购物车按钮ImageView
: 商品图片展示TextView
: 文本展示
5. 代码实现
<?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">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/my_light_primary"
app:navigationIcon="@drawable/baseline_arrow_back_24"
app:title="详情"
app:titleTextColor="@color/white" />
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@id/rel"
android:layout_below="@id/toolbar">
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="240dp">
<ImageView
android:id="@+id/product_img"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@mipmap/book_1" />
<TextView
android:id="@+id/show_page"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="10dp"
android:background="@drawable/circle_text_background"
android:gravity="center"
android:text="1/1"
android:textColor="@color/white"
android:textSize="14sp" />
</RelativeLayout>
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:orientation="vertical">
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginBottom="5dp"
android:src="@drawable/baseline_currency_yen_24" />
<TextView
android:id="@+id/product_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="198"
android:textColor="@color/red"
android:textSize="24sp" />
</androidx.appcompat.widget.LinearLayoutCompat>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:drawableLeft="@mipmap/mr_ensure"
android:gravity="center"
android:text="店铺发货&售后"
android:textSize="14sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:drawableLeft="@mipmap/mr_ensure"
android:gravity="center"
android:text="货到付款"
android:textSize="14sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="@mipmap/mr_ensure"
android:gravity="center"
android:text="七天退货"
android:textSize="14sp" />
</LinearLayout>
<TextView
android:id="@+id/product_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="国际大奖儿童文学小说全套中国经典名著"
android:textColor="#222222" />
<TextView
android:id="@+id/product_details"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:lineSpacingExtra="6dp"
android:text="国际大奖儿童文学小说全套中国经典名著少儿读物小学生课外阅读书籍3-6年级4小学三四五六年级课外书必读畅销书目正版孩子适合看的"
android:textColor="#999999" />
<TextView
android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="全部评论"
android:textColor="#333333"
android:textSize="17sp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/title">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
tools:listitem="@layout/comments_list_item" />
<androidx.appcompat.widget.LinearLayoutCompat
android:id="@+id/ll_empty"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:visibility="gone">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/img_empty" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="空空如也~~"
android:textColor="#999999" />
</androidx.appcompat.widget.LinearLayoutCompat>
</RelativeLayout>
</androidx.appcompat.widget.LinearLayoutCompat>
</androidx.appcompat.widget.LinearLayoutCompat>
</androidx.core.widget.NestedScrollView>
<RelativeLayout
android:id="@+id/rel"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:background="#f5f5f5">
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toLeftOf="@id/addCar"
android:paddingTop="5dp">
<!-- android:drawableTop="@drawable/check_selector"-->
<CheckBox
android:id="@+id/focus_on"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/mr_focus_on01"
android:gravity="center"
android:text="收藏"
android:textSize="14sp" />
<CheckBox
android:id="@+id/shopping_cart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/mr_shopping_cart"
android:gravity="center"
android:text="购物车"
android:textSize="14sp" />
</androidx.appcompat.widget.LinearLayoutCompat>
<TextView
android:id="@+id/addCar"
android:layout_width="200dp"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:background="@drawable/add_thing_btn_selector"
android:gravity="center"
android:text="加入购物车"
android:textColor="@color/white"
android:textSize="16sp" />
</RelativeLayout>
</RelativeLayout>