在上一篇博客中,为大家展示了最终完成效果图,并且分析了界面之间的关系,以及每个界面布局结构中包含的控件信息,对于总体功能数据源进行了封装和介绍。并且重点说明了第一个界面商品分类界面的实现方法。在本篇博客中我们继续操作,完成具体分类的商品信息列表界面的展示。效果图如下:
需求分析:
此界面的布局结构为上中下结构,可使用线性布局进行排列,上半部分为标题栏,左右两个图标都具备点击功能,左边点击后可退出当前界面,返回上一级界面,右面购物车图片点击后跳转到购物车界面操作。中间部分为可输入框EditText和搜索文本,下面为展示商品信息的ListView列表。故布局代码如下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FF0000">
<TextView
android:text="調料乾貨"
android:textSize="22sp"
android:textColor="#FFFFFF"
android:padding="15dp"
android:textStyle="bold"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:id="@+id/detail_daily_title_tv"
android:layout_height="wrap_content" />
<ImageView
android:id="@+id/detail_daily_back"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:src="@mipmap/icon_back"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"/>
<ImageView
android:id="@+id/detail_daily_shop"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:src="@mipmap/icon_gwc"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="20dp"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#DCDCDC"
>
<TextView
android:id="@+id/detail_daily_search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="搜索"
android:padding="10dp"
android:layout_alignParentRight="true"
android:textS