锐客网

  1. 首页 > 睿知 > it技术 > >

Android Studio实现简单的购物商城界面

IT知识android

弓背霞明剑照霜，秋风走马出咸阳。这篇文章主要讲述Android Studio实现简单的购物商城界面相关的知识，希望能为你提供帮助。
项目目录

  • ??一、项目概述??
  • ??二、开发环境??
  • ??三、详细设计??
  • ??1、商品列表的搭建??
  • ??2、商品条目的搭建??
  • ??3、数据适配器的搭建??
  • ??3.1、常用数据适配器（Adapter）??
  • ??3.2、BaseAdapter的方法??
  • ??3.3、定义数据适配器??
  • ??3.4、优化数据适配器??
  • ??4、适配的数据和图片集合??
  • ??四、项目效果??
  • ??五、项目总结??
  • ??六、源码下载??
一、项目概述随着网络的发展、手机等电子产品的普及和电商的崛起，人们越来越倾向于足不出户的网上购物，网购已经成为一种趋势，在我们的日常消费模式当中已经占据了很大一部分，几乎生活当中能见到的东西在购物平台上都可以买到。
那么这些购物平台是如何显示这些商品列表的呢？当我们去浏览商品列表时这些信息是怎么添加上去的呢？带着这些疑问，本次项目就带大家来学习ListView的使用。

二、开发环境
三、详细设计1、商品列表的搭建首先搭建商品列表的layout文件，最外层采用的是LinearLayout（线性布局），orientation（方向）选择的是vertical（垂直），这样界面内的控件就是从上至下垂直排列了。
接下来放置一个TextView控件，width设为math_parent，即填充满父容器，宽度和父容器一样；高度设置的为45dp，文本内容text是"购物商城"，字体大小textSize设为18sp，字体颜色textColor设为白色，背景background设为橙色，gravity（文字位置）显示为center（水平居中）。
最后放置一个ListView控件，即列表，宽度填充满屏幕，高度自适应。预览效果如图：
【Android Studio实现简单的购物商城界面】
代码如下：
< ?xml version="1.0" encoding="utf-8"?>
< LinearLayout
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"
tools:context=".MainActivity"
android:orientation="vertical">

< TextView
android:layout_width="match_parent"
android:layout_height="45dp"
android:text="购物商城"
android:textSize="18sp"
android:textColor="#FFFFFF"
android:background="#FF8F03"
android:gravity="center"/>
< ListView
android:id="@+id/lv"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>

< /LinearLayout>

2、商品条目的搭建有ListView一定要有item，因为光有列表不行，还必须给列表添加内容，而item就是列表里面每一行显示的内容，两者相辅相成，共同组成列表。
商品条目界面的搭建只需要搭建第一行的item，其他item格式一样，只需要在主文件MainActivity中定义一个数组，写好商品内容，然后自动生成。所以先来搭建好第一行的item。
最外层布局选择的是RelativeLayout（相对布局），顶端放置了一个ImageView控件，用于显示商品的图片，宽度和高度自己设定，位置选择的是垂直居中。
接下来放置了一个子布局RelativeLayout，使用android:layout_toRightOf="@+id/iv"语句将子布局整个放置在刚刚图片的右侧，内容依旧是垂直居中。
在这个子布局中，先放置了一个TextView控件，用于显示商品名称。文本id 设为 title，宽度和高度都是设定为依据内容大小调整的，文本内容为“桌子”，文本大小为20sp，文本颜色选择的是黑色。
又放置了一个TextView，主要用于显示价格。id设为tv_price，宽和高自适应，文本内容为“价格”，使用android:layout_below="@+id/title" 语句将它放到商品名称的TextView下方。
最后放置了一个TextView，主要用于显示价格的数字。具体属性设定同上，使用android:layout_toRightOf="@+id/tv_price"语句将它放在价格的TextView右方，上边距设为10dp。
界面预览效果如图：

< ?xml version="1.0" encoding="utf-8"?>
< RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
< ImageView
android:id="@+id/iv"
android:layout_width="150dp"
android:layout_height="120dp"
android:layout_centerVertical="true"/>
< RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_toRightOf="@+id/iv"
android:layout_centerVertical="true">
< TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="桌子"
android:textSize="20sp"
android:textColor="#000000"/>
< TextView
android:id="@+id/tv_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="价格："
android:textSize="20sp"
android:layout_marginTop="10dp"
android:layout_below="@+id/title"
android:textColor="#FF8F03"/>
< TextView
android:id="@+id/price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1000"
android:textSize="20sp"
android:layout_below="@+id/title"
android:layout_toRightOf="@+id/tv_price"
android:textColor="#FF8F03"
android:layout_marginTop="10dp"/>
< /RelativeLayout>
< /RelativeLayout>

3、数据适配器的搭建3.1、常用数据适配器（Adapter）

3.2、BaseAdapter的方法

3.3、定义数据适配器
搭建完列表后，现在在MainActivity中要定义数据适配器，将数据转换为我们可以看到的视图。
先定义了MyBaseAdapter继承于BaseAdapter，包含四个方法：

（1）getCount方法获取item的总数，返回ListView Item条目代表的对象；

（2）getItem方法，参数为item的下标，返回item的数据对象；

（3）getItemId方法，参数为item的下标，返回item的id；

（4）View getView方法，为获取相应position对应的Item视图。position是当前Item的位置，convertView用于复用旧视图，parent用于加载XML布局。

定义一个ViewHolder类，声明三个成员变量。 紧接着将商品名称title、价格price和金额iv和相应的控件id进行绑定，若convertView为null,则找到控件并加载视图，不为空则直接显示商品信息。适配器MyBaseAdapter 的代码如下：
class MyBaseAdapter extends BaseAdapter

@Override
public int getCount()//得到item的总数
return titles.length; //返回ListView Item条目代表的对象


@Override
public Object getItem(int position)
return titles[position]; //返回item的数据对象

@Override
public long getItemId(int position)
return position;

    推荐阅读


    上一篇：Android实现智能聊天机器人

    下一篇：Python识别同构数