Android實(shí)現(xiàn)的仿淘寶購物車demo示例

更新時(shí)間：2016年07月09日 09:18:33 作者：丁國華

這篇文章主要介紹了Android實(shí)現(xiàn)的仿淘寶購物車demo示例,結(jié)合實(shí)例形式分析了Android購物車的功能、布局及邏輯實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了Android實(shí)現(xiàn)的仿淘寶購物車。分享給大家供大家參考，具體如下：

夏的熱情漸漸退去，秋如期而至，豐收的季節(jié)，小編繼續(xù)著實(shí)習(xí)之路，走著走著，就走到了購物車，逛過淘寶或者是京東的小伙伴都知道購物車?yán)锩娴膶氊惪刹恢挂患?，對于愛購物的姑娘來說，購物車?yán)锩娴纳唐房峙率潜瑵M，添加不進(jìn)去了，以前逛淘寶的時(shí)候，小編沒有想過要怎么樣實(shí)現(xiàn)購物車，就知道在哪兒一個(gè)勁兒的逛，但是現(xiàn)在不一樣了，小編做為一個(gè)開發(fā)者，想的就是該如何實(shí)現(xiàn)，搗鼓了兩天的時(shí)間，用listview來實(shí)現(xiàn)，已經(jīng)有模有樣了，現(xiàn)在小編就來簡單的總結(jié)一下實(shí)現(xiàn)購物車的心路歷程，幫助有需要的小伙伴，歡迎小伙伴們留言交流。

首先，小編簡單的介紹一下listview，ListView 控件可使用四種不同視圖顯示項(xiàng)目。通過此控件，可將項(xiàng)目組成帶有或不帶有列標(biāo)頭的列，并顯示伴隨的圖標(biāo)和文本。可使用 ListView 控件將稱作 ListItem 對象的列表?xiàng)l目組織成下列四種不同的視圖之一：1.大（標(biāo)準(zhǔn)）圖標(biāo)2.小圖標(biāo)3.列表4.報(bào)表 View 屬性決定在列表中控件使用何種視圖顯示項(xiàng)目。還可用 LabelWrap 屬性控制列表中與項(xiàng)目關(guān)聯(lián)的標(biāo)簽是否可換行顯示。另外，還可管理列表中項(xiàng)目的排序方法和選定項(xiàng)目的外觀。今天小編主要和小伙伴們分享一下，如何使用listview實(shí)現(xiàn)購物的功能。做過Android的小伙伴都知道一個(gè)xml對應(yīng)一個(gè)Java類，但是購物車有點(diǎn)不一樣，因?yàn)樗锩娴纳唐酚锌赡懿恢灰患?，所以我們需要有兩個(gè)xml，兩個(gè)java類，相對應(yīng)的還需要一個(gè)適配器adapter，一個(gè)model，下面小編來詳細(xì)的介紹一下實(shí)現(xiàn)購物車的過程。

第一步，寫model層，類似我們之前寫過的實(shí)體層，具體代碼如下所示：

/***
 * 說明：購物車的相關(guān)信息
 * 作者：丁國華
 * 時(shí)間：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里面的文件，需要編寫兩個(gè)xml文件，首先我們來編寫activity_shoppingcart.xml的文件，代碼如下所示：

<?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，購物車?yán)锩娴臇|西有可能比較多，需要用listview來進(jìn)行顯示 -->
  <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="全選"/>
     <!-- 合計(jì)的布局 -->
     <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="合計(jì):￥88"/>
     <!-- 去結(jié)算的布局 -->
    <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="結(jié)算"/>
  </LinearLayout>
</LinearLayout >

我們來看一下xml布局的效果，如下圖所示：

接著我們來布局第二個(gè)xml，activity_shoppingcart_item.xml，代碼如下所示：

<?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"/>
     <!-- 商品名稱和價(jià)格的布局 -->
     <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="連衣裙女夏季"
         />
       <!-- 價(jià)格的布局 -->
       <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，具體代碼如下所示：

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;
  public ShoppingCartAdapter(Context mContext,List<shoppingCart> mList) {
    super();
    this.mContext = mContext;
    this.mList = mList;
    }
  @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;
 }
}

第四步，編寫java類里面的代碼，我們先來編寫ShoppingCartItemActivity.java中的內(nèi)容，具體代碼如下所示：

package jczb.shoping.ui;
import android.app.Activity;
import android.os.Bundle;
public class ShoppingCartItemActivity extends Activity {
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_shoppingcart_item);
 }
}

第五步，編寫ShoppingCartActivity.java里面的內(nèi)容，如下所示：

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{
  TextView jiesuan,proName,shopPrice,proCount;
  ListView aListView;
  private LayoutInflater layoutInflater;
  private TextView name;
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_shoppingcart);
    findViewByID();
    /*開始線程*/
    new Thread(new myThread()).start();{
  }
   /*根據(jù)ID找到控件*/
   public void findViewByID(){
     aListView=(ListView) findViewById(R.id.cart_shopping_listview);
    }
  //開辟線程
    public class myThread implements Runnable {
      public void run() {
        Message msg = new Message();
        try {
          Map<String, String> parmas = new HashMap<String, String>();
          parmas.put("username", "1");
          parmas.put("password", "2");
    String url = "http://192.168.1.110:8080/SchoolShopJson/ShoppingCart.txt";
          // 要發(fā)送的數(shù)據(jù)和訪問的地址
          String result = AgentApi.dopost(parmas, url);
 // 如果返回的為空或者初始化時(shí)輸入的ip地址無效(會返回下面的字符串)，說明服務(wù)器連接失?。?
          if (result == null) {
            // 使用-1代表服務(wù)器連接失敗
            msg.what = -1;
          } else {
            msg.what=1;
            msg.obj=result;
          }
        } catch (Exception e) {
          e.printStackTrace();
          // 使用-1代表程序異常
          msg.what = -2;
          msg.obj = e;
        }
        mHandler.sendMessage(msg);
      }
    }
    protected void initView() {
      // TODO Auto-generated method stub
    }
     /*子線程-解析數(shù)據(jù)*/
     private Handler mHandler = new Handler(){
      public void handleMessage(Message msg) {
        switch (msg.what) {
        case -1:
          Toast.makeText(ShoppingCartActivity.this, "服務(wù)器連接失敗!",
              Toast.LENGTH_SHORT).show();
          break;
        case -2:
          Toast.makeText(ShoppingCartActivity.this, "哎呀，出錯啦...",
              Toast.LENGTH_SHORT).show();
          break;
        case 1:
          String temp = (String)msg.obj;
          //將拿到的json轉(zhuǎn)換為數(shù)組
      List<shoppingCart> ShoppingcartInfo = JSON.parseArray(temp,shoppingCart.class);
    ListView.setAdapter(new ShoppingCartAdapter(ShoppingCartActivity.this, ShoppingcartInfo));
          break;
        default:
          break;
        }
      }
    };
}

我們來看一下運(yùn)行的效果，如下所示：