Android开发,经典商品详情页布局UI实现

是一个典型的电商商品详情页面布局,包含了商品展示、信息描述、评论系统和底部操作栏等完整功能

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. 特点

  1. 使用NestedScrollView实现整页滚动
  2. 商品图片使用RelativeLayout布局,支持页码显示
  3. 底部操作栏固定,不随页面滚动
  4. 使用CheckBox实现收藏和购物车的状态切换
  5. 评论列表支持空状态显示

4. 关键控件

  1. Toolbar: 顶部导航栏
  2. NestedScrollView: 支持嵌套滚动的容器
  3. RecyclerView: 评论列表
  4. CheckBox: 收藏和购物车按钮
  5. ImageView: 商品图片展示
  6. 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="店铺发货&amp;售后"
                        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>

6. 效果图

在这里插入图片描述