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

概述一、项目概述随着网络的发展、手机等电子产品的普及和电商的崛起，人们越来越倾向于足不出户的网上购物，网购已经成为一种趋势，在我们的日常消费模式当中已经占据了很大一部分，几乎生活当中能见到的东西在购物平台上都可以买到。那么这些购物平台是如何显示这些商品列表的呢？当我们去浏览商品列表时这些信息是怎么添加上去的呢？带着这些疑问，本次项目就带大家来学习ListView的使用。

项目目录一、项目概述二、开发环境三、详细设计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控件，即列表，宽度填充满屏幕，高度自适应。预览效果如图：

代码如下：

<?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的方法

@[email protected]、定义数据适配器

搭建完列表后，现在在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;         //返回item的ID        }        @OverrIDe        public VIEw getVIEw(int position, VIEw convertVIEw, VIEwGroup parent){//获取item中的VIEw视图           VIEwHolder holder;           if(convertVIEw==null){               convertVIEw=VIEw.inflate(MainActivity.this,R.layout.List_item, null);               holder=new VIEwHolder();               holder.Title=convertVIEw.findVIEwByID(R.ID.Title);               holder.price=convertVIEw.findVIEwByID(R.ID.price);               holder.iv=convertVIEw.findVIEwByID(R.ID.iv);               convertVIEw.setTag(holder);           }else{               holder=(VIEwHolder)convertVIEw.getTag();           }           holder.Title.setText(Titles[position]);           holder.price.setText(prices[position]);           holder.iv.setimageResource(icons[position]);           return convertVIEw;        }    }

3.4、优化数据适配器

刚刚的代码是使用使用VIEwHolder类和复用convertVIEw优化过的代码，不仅减少了耗时 *** 作，而且防止了数据量过大导致内存溢出的问题，一举两得。

class VIEwHolder{        TextVIEw Title;        TextVIEw price;        ImageVIEw iv;    }

4、适配的数据和图片集合

在MainActivity类中定义了三个数组，分别是Titles数组，用于显示商品列表；prices数组，用于显示金额单价；icons集合，用于显示drawable里面导入的商品图片。然后使用onCreate方法初始化控件，创建并设置了Adapter，代码如下：

public class MainActivity extends AppCompatActivity {    //需要适配的数据    private String[] Titles={"桌子","苹果","蛋糕","线衣","猕猴桃","围巾"};    private String[] prices={"1800元","10元/kg","300元","350元","280元"};    //图片集合    private  int[] icons={R.drawable.table,R.drawable.apple,R.drawable.cake,            R.drawable.wearclothes,R.drawable.kiwifruit,R.drawable.scarf};    @OverrIDe    protected voID onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentVIEw(R.layout.activity_main);        //初始化ListVIEw控件       ListVIEw ListVIEw=findVIEwByID(R.ID.lv);        //创建一个Adapter的实例        MyBaseAdapter mAdapter=new MyBaseAdapter();        //设置Adapter        ListVIEw.setAdapter(mAdapter);    }