Android实现的仿淘宝购物车demo示例

本文实例讲述了Android实现的仿淘宝购物车。分享给大家供大家参考,具体如下:

夏的热情渐渐退去,秋如期而至,丰收的季节,小编继续着实习之路,走着走着,就走到了购物车,逛过淘宝或者是京东的小伙伴都知道购物车里面的宝贝可不止一件,对于爱购物的姑娘来说,购物车里面的商品恐怕是爆满,添加不进去了,以前逛淘宝的时候,小编没有想过要怎么样实现购物车,就知道在哪儿一个劲儿的逛,但是现在不一样了,小编做为一个开发者,想的就是该如何实现,捣鼓了两天的时间,用listview来实现,已经有模有样了,现在小编就来简单的总结一下实现购物车的心路历程,帮助有需要的小伙伴,欢迎小伙伴们留言交流。

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

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

/***
 * 说明:购物车的相关信息
 * 作者:丁国华
 * 时间: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的文件,代码如下所示:

<?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,代码如下所示:

<?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,具体代码如下所示:

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中的内容,具体代码如下所示:

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里面的内容,如下所示:

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();{
  }
   /*根据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";
          // 要发送的数据和访问的地址
          String result = AgentApi.dopost(parmas, url);
 // 如果返回的为空或者初始化时输入的ip地址无效(会返回下面的字符串),说明服务器连接失败!
          if (result == null) {
            // 使用-1代表服务器连接失败
            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
    }
     /*子线程-解析数据*/
     private Handler mHandler = new Handler(){
      public void handleMessage(Message msg) {
        switch (msg.what) {
        case -1:
          Toast.makeText(ShoppingCartActivity.this, "服务器连接失败!",
              Toast.LENGTH_SHORT).show();
          break;
        case -2:
          Toast.makeText(ShoppingCartActivity.this, "哎呀,出错啦...",
              Toast.LENGTH_SHORT).show();
          break;
        case 1:
          String temp = (String)msg.obj;
          //将拿到的json转换为数组
      List<shoppingCart> ShoppingcartInfo = JSON.parseArray(temp,shoppingCart.class);
    ListView.setAdapter(new ShoppingCartAdapter(ShoppingCartActivity.this, ShoppingcartInfo));
          break;
        default:
          break;
        }
      }
    };
}

我们来看一下运行的效果,如下所示:

更多关于Android相关内容感兴趣的读者可查看本站专题:《Android布局layout技巧总结》、《Android视图View技巧总结》、《Android编程之activity操作技巧总结》、《Android操作SQLite数据库技巧总结》、《Android操作json格式数据技巧总结》、《Android数据库操作技巧总结》、《Android文件操作技巧汇总》、《Android编程开发之SD卡操作方法汇总》、《Android开发入门与进阶教程》、《Android资源操作技巧汇总》及《Android控件用法总结》

希望本文所述对大家Android程序设计有所帮助。

(0)

相关推荐

  • Android实现二级列表购物车功能

    本文实例为大家分享了Android实现二级列表购物车功能的具体代码,供大家参考,具体内容如下 MainActivity: package com.baway.twoshopcar; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.widget.CheckBox; import android.widget.Expa

  • Android仿外卖购物车功能

    先看看效果图: 知识点分析 效果图来看不复杂内容并没多少,值得介绍一下的知识点也就下面几个吧 - 列表标题悬停 - 左右列表滑动时联动 - 添加商品时的抛物线动画 - 底部弹出购物车清单 - 数据的同步 另外就是实现效果的时候可能会遇到的几个坑... 布局很简单直接进入代码 1:列表标题悬停 现在做项目列表什么的基本抛弃了ListView改用RecyclerView,上篇博客中的标题悬停也是使用了一个RecyclerView的开源项目sticky-headers-recyclerview,不过写

  • Android仿饿了么加入购物车旋转控件自带闪转腾挪动画的按钮效果(实例详解)

    概述 在上文,酷炫Path动画已经预告了,今天给大家带来的是利用 纯自定义View,实现的仿饿了么加入购物车控件,自带闪转腾挪动画的按钮. 效果图如下: 图1 项目中使用的效果,考虑到了View的回收复用, 并且可以看到在RecyclerView中使用,切换LayoutManager也是没有问题的, 图2 Demo效果,测试各种属性值 注意,本控件非继承自ViewGroup,而是纯自定义View实现.理由如下: 1 减少布局层级,从而提高性能 2 文字和图形纯draw,用到什么draw什么,没有

  • Android实现购物车添加物品的动画效果

    前言:当我们写商城类的项目的时候,一般都会有加入购物车的功能,加入购物车的时候会有一些抛物线动画,最近做到这个功能,借助别人的demo写了一个. 效果: 开发环境:AndroidStudio2.1.2+gradle-2.10 涉及知识:1.沉浸式状态栏,2.单位精度计算(价格),3.List之Iterator. 部分代码: public class MainActivity extends AppCompatActivity implements FoodAdapter.FoodActionCa

  • Android把商品添加到购物车的动画效果(贝塞尔曲线)

    当我们写商城类的项目的时候,一般都会有加入购物车的功能,加入购物车的时候会有一些抛物线动画,具体代码如下: 实现效果如图: 思路: 确定动画的起终点 在起终点之间使用二次贝塞尔曲线填充起终点之间的点的轨迹 设置属性动画,ValueAnimator插值器,获取中间点的坐标 将执行动画的控件的x.y坐标设为上面得到的中间点坐标 开启属性动画 当动画结束时的操作 难点: PathMeasure的使用 - getLength() - boolean getPosTan(float distance, f

  • Android实现购物车功能

    最近看了一些淘宝购物车的demo,于是也写了一个. 效果图如下: 主要代码如下: actvity中的代码: public class ShoppingCartActivity extends BaseActivity { private List<Test> data; private ListView mListView; private ShoppingCartAdapter adapter; private RelativeLayout rlRefresh; private TextVi

  • Android实现购物车及其他功能的角标

    1.先来张效果图 2.自定义一个角标工具类BottomBarView . ** * Created by Administrator on 2016/12/27. * 角标工具类 */ public class BottomBarView extends RelativeLayout { private Context context; private TextView bar_num; private int count = 0; public BottomBarView(Context co

  • Android中实现淘宝购物车RecyclerView或LIstView的嵌套选择的逻辑

    使用了RecyclerView嵌套RecyclerView的方案. 购物车的第一个界面为RecyclerView,每个Item里面包含一个店铺.在Item中使用RecyclerView包含店铺和店铺的多个商品. 实现思路: 使用接口回调将第二个adapter的商品选择的监听事件回调给第一个adapter后再在第一个adapter中回调给MainActivity. 使用接口回调将第一个adapter的商品选择的监听事件回调给MainActivity. 在MainActivity中处理第一个adap

  • Android实现仿淘宝购物车增加和减少商品数量功能demo示例

    本文实例讲述了Android实现仿淘宝购物车增加和减少商品数量功能.分享给大家供大家参考,具体如下: 在前面一篇<Android实现的仿淘宝购物车demo示例>中,小编简单的介绍了如何使用listview来实现购物车,但是仅仅是简单的实现了列表的功能,随之而来一个新的问题,买商品的时候,我们可能不止想买一件商品,想买多个,或许有因为某种原因点错了,本来想买一件来着,小手不小心抖了一下,把数量错点成了三个,这个时候就涉及到一个新的功能,那就是增加和减少商品的数量,今天这篇博文,小编就来和小伙伴们

  • Android制作简单的普通购物车

    本文实例为大家分享了Android普通购物车制作过程,供大家参考,具体内容如下 1.最新项目新增了类似购物车功能,如下图所示: 当时刚看到此页面的时候,第一反应是利用 ListView嵌套Listview,经过一番操作最终也实现了此功能.当时也没有考虑性能问题,只考虑能写出来.后来嵌套数据,当数据量较大时,滑动Listview可以明显感觉到卡顿,这对用户来说是很难忍受的,所以才有了找到替代方案的想法,看到网上主流的是用ExpandableListView来实现此功能,所以我也用此方案来写一下.

随机推荐