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

2019-12-12 06:03:20

字體：大中小

供稿：網(wǎng)友

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

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

首先，小編簡(jiǎn)單的介紹一下listview，ListView 控件可使用四種不同視圖顯示項(xiàng)目。通過(guò)此控件，可將項(xiàng)目組成帶有或不帶有列標(biāo)頭的列，并顯示伴隨的圖標(biāo)和文本。可使用 ListView 控件將稱(chēng)作 ListItem 對(duì)象的列表?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)購(gòu)物的功能。做過(guò)Android的小伙伴都知道一個(gè)xml對(duì)應(yīng)一個(gè)Java類(lèi)，但是購(gòu)物車(chē)有點(diǎn)不一樣，因?yàn)樗锩娴纳唐酚锌赡懿恢灰患晕覀冃枰袃蓚€(gè)xml，兩個(gè)java類(lèi)，相對(duì)應(yīng)的還需要一個(gè)適配器adapter，一個(gè)model，下面小編來(lái)詳細(xì)的介紹一下實(shí)現(xiàn)購(gòu)物車(chē)的過(guò)程。

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

/*** * 說(shuō)明：購(gòu)物車(chē)的相關(guān)信息 * 作者：丁國(guó)華 * 時(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;    }}

第二步，我們編寫(xiě)xml里面的文件，需要編寫(xiě)兩個(gè)xml文件，首先我們來(lái)編寫(xiě)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">     <!-- 尖括號(hào)的布局 -->     <ImageView        android:layout_width="0dp"        android:layout_height="match_parent"        android:layout_weight="1"        android:padding="8dp"        android:src="@drawable/tb_icon_actionbar_back" />     <!-- 購(gòu)物車(chē)的布局 -->     <TextView       android:layout_width="0dp"       android:layout_height="match_parent"       android:layout_weight="5.49"       android:gravity="center"       android:text="購(gòu)物車(chē)"       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，購(gòu)物車(chē)?yán)锩娴臇|西有可能比較多，需要用listview來(lái)進(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 >

我們來(lái)看一下xml布局的效果，如下圖所示：

接著我們來(lái)布局第二個(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">     <!-- 小對(duì)勾的布局 -->    <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"/>     <!-- 商品名稱(chēng)和價(jià)格的布局 -->     <LinearLayout       android:layout_width="fill_parent"       android:layout_height="wrap_content"       android:orientation="vertical">       <!-- 商品名稱(chēng)的布局 -->       <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" >          <!-- 加號(hào) -->         <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"/>           <!-- 減號(hào)-->          <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>

布局效果如下所示：

第三步、我們來(lái)編寫(xiě)適配器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對(duì)象*/  public class ViewHolder {    ImageView image;    TextView proName;    CheckBox chose;    TextView proPrice;    TextView proCount; }}

第四步，編寫(xiě)java類(lèi)里面的代碼，我們先來(lái)編寫(xiě)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); }}

第五步，編寫(xiě)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();    /*開(kāi)始線程*/    new Thread(new myThread()).start();{  }   /*根據(jù)ID找到控件*/   public void findViewByID(){     aListView=(ListView) findViewById(R.id.cart_shopping_listview);    }  //開(kāi)辟線程    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ù)和訪問(wèn)的地址          String result = AgentApi.dopost(parmas, url); // 如果返回的為空或者初始化時(shí)輸入的ip地址無(wú)效(會(huì)返回下面的字符串)，說(shuō)明服務(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, "哎呀，出錯(cuò)啦...",              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;        }      }    };}

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