android

Android购物车demo

首先，小编简单的介绍一下listview，ListView 控件可使用四种不同视图显示项目。通过此控件，可将项目组成带有或不带有列标头的列，并显示伴随的图标和文本。 可使用 ListView 控件将称作 ListItem 对象的列表条目组织成下列四种不同的视图之一：1.大（标准）图标2.小图标3.列表4.报表 View 属性决定在列表中控件使用何种视图显示项目。还可用 LabelWrap 属性控制列表中与项目关联的标签是否可换行显示。另外，还可管理列表中项目的排序方法和选定项目的外观。今天小编主要和小伙伴们分享一下，如何使用listview实现购物的功能。做过Android的小伙伴都知道一个xml对应一个java类，但是购物车有点不一样，因为她里面的商品有可能不只一件，所以我们需要有两个xml，两个java类，相对应的还需要一个适配器adapter，一个model，下面小编来详细的介绍一下实现购物车的过程。

第一步，写model层，类似我们之前写过的实体层，具体代码如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
/*** 
 * 说明：购物车的相关信息 
 * 作者：丁国华 
 * 时间：2015年8月10日 09:41:18 
 */  
package jczb.shoping.model;  
  
import java.io.Serializable;  
import java.util.ArrayList;  
import java.util.List;  
  
import android.R.string;  
  
public class shoppingCart implements Serializable {  
      
        private String proImg;  
        private String ProName;   
        private String shopPrice;   
        private String markPrice;   
        private String proCount;  
        public String getProImg() {  
            return proImg;  
        }  
        public void setProImg(String proImg) {  
            this.proImg = proImg;  
        }  
        public String getProName() {  
            return ProName;  
        }  
        public void setProName(String proName) {  
            ProName = proName;  
        }  
        public String getShopPrice() {  
            return shopPrice;  
        }  
        public void setShopPrice(String shopPrice) {  
            this.shopPrice = shopPrice;  
        }  
        public String getMarkPrice() {  
            return markPrice;  
        }  
        public void setMarkPrice(String markPrice) {  
            this.markPrice = markPrice;  
        }  
        public String getProCount() {  
            return proCount;  
        }  
        public void setProCount(String proCount) {  
            this.proCount = proCount;  
        }  
          
      }

第二步，我们编写xml里面的文件，需要编写两个xml文件，首先我们来编写activity_shoppingcart.xml的文件，代码如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:orientation="vertical" >  
      
    <LinearLayout   
          android:layout_width="match_parent"  
          android:layout_height="50dp"  
          android:background="#438FCB"  
          android:orientation="horizontal">  
            
          <!-- 尖括号的布局 -->  
          <ImageView   
               android:layout_width="0dp"  
               android:layout_height="match_parent"  
               android:layout_weight="1"  
               android:padding="8dp"  
               android:src="@drawable/tb_icon_actionbar_back" />  
         <!-- 购物车的布局 -->  
         <TextView  
             android:layout_width="0dp"  
             android:layout_height="match_parent"  
             android:layout_weight="5.49"  
             android:gravity="center"  
             android:text="购物车"  
             android:textColor="#FFFFFF"  
             android:textSize="20sp"/>  
         <!-- 编辑的布局 -->  
         <TextView   
             android:layout_width="0dp"  
             android:layout_height="match_parent"  
             android:layout_weight="3.18"  
             android:gravity="center"  
             android:text="编辑"  
             android:textColor="#FFFFFF"  
             android:textSize="20sp" />  
    </LinearLayout>  
    <!-- listview，购物车里面的东西有可能比较多，需要用listview来进行显示 -->  
    <LinearLayout  
                android:layout_width="fill_parent"  
                android:layout_height="wrap_content"  
                android:layout_weight="1"   
                android:orientation="vertical"  
                android:layout_marginTop="0dp">  
           
        <ListView   
             android:id="@+id/cart_shopping_listview"  
             android:layout_width="wrap_content"  
             android:layout_height="wrap_content"  
             android:divider="#808080"  
             android:dividerHeight="0.5dp">  
        </ListView>  
           
    </LinearLayout>  
   
    <LinearLayout  
       android:layout_width="match_parent"  
       android:layout_height="50dp"  
       android:layout_alignParentBottom="true"  
       android:orientation="horizontal">  
         <!-- 全选的布局 -->  
         <CheckBox   
             android:layout_width="wrap_content"  
             android:layout_height="wrap_content"  
             android:layout_marginLeft="10dp"  
             android:text="全选"/>  
         <!-- 合计的布局 -->  
         <TextView  
             android:layout_width="0dp"  
             android:layout_height="wrap_content"  
             android:layout_weight="1"  
             android:gravity="right"  
             android:paddingRight="10dp"  
             android:textColor="#F63A19"  
             android:text="合计:￥88"/>  
         <!-- 去结算的布局 -->  
           
        <TextView  
             android:id="@+id/jiesuan_button"  
             android:layout_width="80dp"  
             android:layout_height="wrap_content"  
             android:layout_marginRight="10dp"  
             android:background="@drawable/android_login_color"  
             android:gravity="center"  
             android:padding="10dp"  
             android:text="结算"/>  
   </LinearLayout>  
      
</LinearLayout >

我们来看一下xml布局的效果，如下图所示：

接着我们来布局第二个xml，activity_shoppingcart_item.xml，代码如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:orientation="vertical" >  
    <LinearLayout   
       android:layout_width="match_parent"  
       android:layout_height="wrap_content"  
       android:orientation="horizontal">  
         <!-- 小对勾的布局 -->  
  
       <CheckBox  
           android:id="@+id/pro_checkbox"  
           android:layout_width="wrap_content"  
           android:layout_height="wrap_content"  
           android:focusable="false"  
           android:focusableInTouchMode="false" />  
  
         <!-- 图片布局 -->  
         <ImageView   
             android:id="@+id/pro_image"  
             android:layout_width="80dp"   
             android:layout_height="80dp"  
             android:layout_margin="5dp"  
             android:scaleType="centerCrop"  
             android:src="@drawable/detail_show_1"/>  
         <!-- 商品名称和价格的布局 -->  
         <LinearLayout   
             android:layout_width="fill_parent"   
             android:layout_height="wrap_content"  
             android:orientation="vertical">  
             <!-- 商品名称的布局 -->  
             <TextView   
                 android:id="@+id/pro_name"  
                 android:layout_width="wrap_content"  
                 android:layout_height="wrap_content"  
                 android:layout_marginTop="10dp"  
                 android:text="连衣裙女夏季"  
                 />  
             <!-- 价格的布局 -->  
  
             <LinearLayout  
                 android:layout_width="match_parent"  
                 android:layout_height="33dp"  
                 android:orientation="horizontal" >  
                    
        <TextView  
             android:id="@+id/pro_shopPrice"  
                     android:layout_width="wrap_content"  
                     android:layout_height="wrap_content"  
                     android:layout_gravity="bottom"  
                     android:layout_marginTop="10dp"  
                     android:text="￥88"  
                     android:textSize="16sp"/>  
                    
            <!-- <TextView  
             android:id="@+id/pro_markPrice"  
                     android:layout_width="wrap_content"  
                     android:layout_height="wrap_content"  
                     android:layout_gravity="bottom"  
                     android:layout_marginTop="10dp"  
                     android:text="￥66"  
                     android:textSize="16sp"/> -->  
                </LinearLayout>  
               
             <LinearLayout  
                 android:layout_width="150dp"  
                 android:layout_height="33dp"  
                 android:orientation="horizontal" >  
                   <!-- 加号 -->  
                  <Button  
                      android:id="@+id/pro_add"  
                      android:layout_width="wrap_content"  
                      android:layout_height="34dp"  
                      android:text="+" />  
                    
                  <TextView  
                     android:id="@+id/pro_count"  
                     android:layout_width="wrap_content"  
                     android:layout_height="wrap_content"  
                     android:layout_gravity="bottom"  
                     android:layout_marginTop="10dp"  
                     android:text="88"  
                     android:textSize="13sp"/>  
                    
  
                     <!-- 减号-->  
                    <Button  
                      android:id="@+id/pro_reduce"  
                      android:layout_width="wrap_content"  
                      android:layout_height="34dp"  
                      android:layout_marginRight="0dp"  
                      android:text="-" />  
                   
                 </LinearLayout>  
          </LinearLayout>  
 </LinearLayout>  
  
</LinearLayout>

布局效果如下所示：

第三步、我们来编写适配器adapter中的代码，即ShoppingCartAdapter，具体代码如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
package jczb.shoping.adapter;  
  
import java.util.List;  
  
import cn.jpush.android.data.r;  
  
import jczb.shoping.adapter.productsListAdapter.ViewHolder;  
import jczb.shoping.adapter.productsListAdapter.searchList;  
import jczb.shoping.model.productSonSorting_cate;  
import jczb.shoping.model.shoppingCart;  
import jczb.shoping.model.sonSortigns;  
import jczb.shoping.ui.R;  
import jczb.shoping.ui.ShoppingCartActivity;  
import android.content.Context;  
import android.content.Intent;  
import android.content.DialogInterface.OnClickListener;  
import android.os.Bundle;  
import android.view.LayoutInflater;  
import android.view.View;  
import android.view.ViewGroup;  
import android.widget.BaseAdapter;  
import android.widget.Button;  
import android.widget.CheckBox;  
import android.widget.ImageView;  
import android.widget.LinearLayout;  
import android.widget.TextView;  
  
public class ShoppingCartAdapter extends BaseAdapter {  
  
    private Context mContext;   
    private List<shoppingCart> mList;  
    private Handler handler;
      
    public ShoppingCartAdapter(Context mContext, List<ShoppingCart> mList, Handler handler) {
        super();
        this.mContext = mContext;
        this.mList = mList;
        this.handler = handler;
    }  
      
    @Override  
    public int getCount() {  
        // TODO Auto-generated method stub  
        if (mList==null) {  
            return 0;  
        }else {  
            return this.mList.size();  
        }  
    }  
  
    @Override  
    public Object getItem(int position) {  
        // TODO Auto-generated method stub  
        if (mList == null) {   
            return null;   
        } else {   
            return this.mList.get(position);   
        }   
    }  
  
    @Override  
    public long getItemId(int position) {  
        // TODO Auto-generated method stub  
        return position;  
    }  
  
    @Override  
    public View getView(int position, View convertView, ViewGroup parent) {  
        // TODO Auto-generated method stub  
        ViewHolder holder = null;   
        if (convertView == null) {   
            holder = new ViewHolder();   
            convertView = LayoutInflater.from(this.mContext).inflate(R.layout.activity_shoppingcart_item, null,true);  
            holder.image=(ImageView) convertView.findViewById(R.id.pro_image);  
            holder.chose=(CheckBox) convertView.findViewById(R.id.pro_checkbox);  
            holder.proName=(TextView) convertView.findViewById(R.id.pro_name);  
            holder.proPrice=(TextView)convertView.findViewById(R.id.pro_shopPrice);  
            holder.proCount=(TextView) convertView.findViewById(R.id.pro_count);  
            convertView.setTag(holder);   
              
        } else {   
            holder = (ViewHolder) convertView.getTag();   
        }   
          
        if (this.mList != null) {   
            shoppingCart shoppingList=this.mList.get(position);  
            holder.proName.setText(shoppingList.getProName().toString());  
            holder.proPrice.setText(shoppingList.getShopPrice().toString());  
            holder.proCount.setText(shoppingList.getProCount().toString());  
             
        }   
        return convertView;   
    }  
  
    /*定义item对象*/  
    public class ViewHolder {  
        ImageView image;  
        TextView proName;  
        CheckBox chose;  
        TextView proPrice;  
        TextView proCount;  
    }  
      
}

第四步，编写ShoppingCartActivity.java里面的内容，如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
package jczb.shoping.ui;  
  
import java.util.HashMap;  
import java.util.List;  
import java.util.Map;  
  
import jczb.shoping.adapter.ShoppingCartAdapter;  
import jczb.shoping.common.AgentApi;  
import jczb.shoping.model.shoppingCart;  
import jczb.shoping.ui.SearchActivity.ViewHolder;  
import jczb.shoping.ui.ShoppingcartActivity2.myThread;  
  
import com.alibaba.fastjson.JSON;  
  
import android.R.string;  
import android.app.Activity;  
import android.content.Intent;  
import android.os.Bundle;  
import android.os.Handler;  
import android.os.Message;  
import android.view.LayoutInflater;  
import android.view.View;  
import android.view.ViewGroup;  
import android.widget.BaseAdapter;  
import android.widget.CheckBox;  
import android.widget.ImageView;  
import android.widget.ListView;  
import android.widget.TextView;  
import android.widget.Toast;  
  
public class ShoppingCartActivity extends Activity{  
      
    private ListView aListView;
    private ShoppingCart sc;

    private ArrayList<ShoppingCart> arrayList = new ArrayList<ShoppingCart>();
    private ShoppingCartAdapter adapter;
    
    public Handler handler = new Handler() {
        public void handleMessage(Message msg) {
            switch (msg.what) {
                case 1://listview中商品数量加1
                    sc = arrayList.get(msg.arg1);
                    sc.setProCount(sc.getProCount() + 1);
                    arrayList.set(msg.arg1, sc);
                    adapter.notifyDataSetChanged();
                    break;
                case 2://listview中商品数量减1
                    sc = arrayList.get(msg.arg1);
                    sc.setProCount(sc.getProCount() - 1);
                    arrayList.set(msg.arg1, sc);
                    adapter.notifyDataSetChanged();
                    break;
            }
            super.handleMessage(msg);
        }
    };

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_shoppingcart);

        aListView = (ListView) findViewById(R.id.cart_shopping_listview);
        initDate();
        adapter = new ShoppingCartAdapter(ShoppingCartActivity.this, arrayList, handler);
        aListView.setAdapter(adapter);

    }

    private void initDate() {
        arrayList.clear();
        for (int i = 0; i < 4; i++) {
            sc = new ShoppingCart();
            sc.setProName("name" + i);
            sc.setShopPrice(10.0 + i);
            sc.setProCount(2 + i);
            arrayList.add(sc);
        }
    }
          
}

我们来看一下运行的效果，如下所示：

小编寄语：该博文，小编主要简单的介绍了如何实现购物车，使用listview显示多件商品，总的实现思路就是先写model，接着写xml里面，写完xml写adapter适配器里面的内容，最后写java里面的代码。