Android 购物选择颜色(尺码)实现(一)这篇文章只是简单的介绍以及实现了点击效果还没有实现颜色、尺码、库存等联动所以在闲暇时间就写了这篇文章实现这样的效果。首先还是上几张淘宝的效果图在选择尺码或者颜色分类的时候颜色分类、尺码、库存以及图片都会有相应变化。接下来我们 就看看如何实现这样的效果。先看看我实现的效果图一.分析要实现这样的效果商品属性就得有尺码、颜色、库存等我们简称为sku当你选择某一个尺码的时候先查找该颜色对应的尺码列表是什么接着用这个尺码列表和总的尺码列表进行对比要是有尺码不在总尺码列表中那么就标记改尺码是不可选的颜色也同理。只要你明白这道理那么就很好理解了。下来我们看看具体的代码实现。二.实现1.新建项目2.打开布局文件activity_main.xml该布局文件是主界面布局代码就不罗列了具体代码见代码下载。3.在layou文件夹中新建布局gridview_item.xml文件该布局文件主要是设置GridView的item布局主要是一个TextView显示商品属性PS: 这一块要是不了解的话可以先看看这篇文章Android 购物选择颜色(尺码)实现(一)4.新建MyGridView类继承GridView解决滑动冲突/** * 滑动冲突 */ public class MyGridView extends GridView { public MyGridView(Context context) { super(context); } public MyGridView(Context context, AttributeSet attrs) { super(context, attrs); } public MyGridView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } Override public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int expandSpec MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE 2, MeasureSpec.AT_MOST); super.onMeasure(widthMeasureSpec, expandSpec); } Override public boolean dispatchTouchEvent(MotionEvent ev) { if (ev.getAction() MotionEvent.ACTION_MOVE) { return true; } return super.dispatchTouchEvent(ev); } }5.新建SkuAdapter 继承BaseAdapter其中用到的接口回调public class SkuAdapter extends BaseAdapter { private ListBean list;//数据源 private LayoutInflater mInflater;// 得到一个LayoutInfalter对象用来导入布局 public onItemClickListener itemClickListener;// 接口回调 public void setItemClickListener(onItemClickListener itemClickListener) { this.itemClickListener itemClickListener; } public SkuAdapter(ListBean list, Context context) { super(); this.mInflater LayoutInflater.from(context); this.list list; } Override public int getCount() { // TODO Auto-generated method stub return list.size(); } Override public Object getItem(int position) { // TODO Auto-generated method stub return list.get(position); } Override public long getItemId(int position) { // TODO Auto-generated method stub return position; } Override public View getView(final int position, View convertView, ViewGroup parent) { // TODO Auto-generated method stub ViewHolder holder; if (convertView null) { holder new ViewHolder(); convertView mInflater.inflate(R.layout.gridview_item, null); /** 得到各个控件的对象 */ holder.title (TextView) convertView.findViewById(R.id.ItemText); holder.layout (LinearLayout) convertView.findViewById(R.id.layout); convertView.setTag(holder);// 绑定ViewHolder对象 } else { holder (ViewHolder) convertView.getTag();// 取出ViewHolder对象 } final Bean bean list.get(position); switch (bean.getStates()) { // 选中 case 0: holder.layout.setBackgroundResource(R.xml.shape2); holder.title.setTextColor(Color.WHITE); break; // 未选中 case 1: holder.layout.setBackgroundResource(R.xml.shape1); holder.title.setTextColor(Color.BLACK); break; // 不可选 case 2: holder.layout.setBackgroundResource(R.xml.shape1); holder.title.setTextColor(Color.parseColor(#999999)); break; default: break; } /** 设置TextView显示的内容即我们存放在动态数组中的数据 */ holder.title.setText(bean.getName()); holder.layout.setOnClickListener(new OnClickListener() { Override public void onClick(View v) { // TODO Auto-generated method stub if (itemClickListener ! null) { if(!bean.getStates().equals(2)){ itemClickListener.onItemClick(bean, position); } } } }); return convertView; } public final class ViewHolder { public TextView title; public LinearLayout layout; } public interface onItemClickListener { public void onItemClick(Bean bean, int position); } }6.新建Constants 类当然你也可以自己在Activity中定义常量public class Constants { //颜色数组 public static final String[] colorArr{铁蓝灰,孔雀蓝,深蓝,中国红,艳紫}; //尺码数组 public static final String[] sizeArr{S,M,L,XL,XXL,XXXL}; }7.新建DataUtil用来数据处理代码太长就不讲解了具体的代码请下载代码后查看8.最主要的类MainActivity该类包含了所有的实现代码如下public class MainActivity extends Activity { ListSkuItme mList;// sku数据 ListBean mColorList;// 颜色列表 ListBean mSizeList;// 尺码列表 GridView gvColor;// 颜色 GridView gvSize;// 尺码 SkuAdapter skuColorAdapter;// 颜色适配器 SkuAdapter skuSizeAdapter;// 尺码适配器 String color;// String size;// TextView tvSkuName;// 显示sku TextView tvSkuStock;// 显示库存 int stock 0;// 库存 Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); gvSize (GridView) findViewById(R.id.gv_size); gvColor (GridView) findViewById(R.id.gv_color); tvSkuName (TextView) findViewById(R.id.tv_sku); tvSkuStock (TextView) findViewById(R.id.tv_sku_stock); addData(); stock DataUtil.getAllStock(mList); if (stock 0) { tvSkuStock.setText(库存 stock ); } skuColorAdapter new SkuAdapter(mColorList, this); gvColor.setAdapter(skuColorAdapter); skuColorAdapter.setItemClickListener(new onItemClickListener() { Override public void onItemClick(Bean bean, int position) { // TODO Auto-generated method stub color bean.getName(); switch (bean.getStates()) { case 0: // 清空尺码 mSizeListDataUtil.clearAdapterStates(mSizeList); skuSizeAdapter.notifyDataSetChanged(); // 清空颜色 mColorListDataUtil.clearAdapterStates(mColorList); skuColorAdapter.notifyDataSetChanged(); color ; // 判断使用选中了尺码 if (!TextUtils.isEmpty(size)) { // 选中尺码计算库存 stock DataUtil.getSizeAllStock(mList,size); if (stock 0) { tvSkuStock.setText(库存 stock ); } tvSkuName.setText(请选择尺码); // 获取该尺码对应的颜色列表 ListString list DataUtil.getColorListBySize(mList,size); if (list ! null list.size() 0) { // 更新颜色列表 mColorList DataUtil.setSizeOrColorListStates(mColorList,list, color); skuColorAdapter.notifyDataSetChanged(); } mSizeListDataUtil.setAdapterStates(mSizeList,size); skuSizeAdapter.notifyDataSetChanged(); } else { // 所有库存 stock DataUtil.getAllStock(mList); if (stock 0) { tvSkuStock.setText(库存 stock ); } tvSkuName.setText(请选择尺码,颜色分类); } break; case 1: // 选中颜色 mColorListDataUtil.updateAdapterStates(mColorList,0, position); skuColorAdapter.notifyDataSetChanged(); // 计算改颜色对应的尺码列表 ListString list DataUtil.getSizeListByColor(mList,color); if (!TextUtils.isEmpty(size)) { // 计算改颜色与尺码对应的库存 stock DataUtil.getStockByColorAndSize(mList,color, size); tvSkuName.setText(规格: color size); if (stock 0) { tvSkuStock.setText(库存 stock ); } if (list ! null list.size() 0) { // 更新尺码列表 mSizeList DataUtil.setSizeOrColorListStates(mSizeList,list, size); skuSizeAdapter.notifyDataSetChanged(); } } else { // 根据颜色计算库存 stock DataUtil.getColorAllStock(mList,color); if (stock 0) { tvSkuStock.setText(库存 stock ); } tvSkuName.setText(请选择尺码); if (list ! null list.size() 0) { // 更新尺码列表 mSizeList DataUtil.setSizeOrColorListStates(mSizeList,list, ); skuSizeAdapter.notifyDataSetChanged(); } } break; default: break; } } }); skuSizeAdapter new SkuAdapter(mSizeList, this); gvSize.setAdapter(skuSizeAdapter); skuSizeAdapter.setItemClickListener(new onItemClickListener() { Override public void onItemClick(Bean bean, int position) { // TODO Auto-generated method stub size bean.getName(); switch (bean.getStates()) { case 0: // 清空尺码 mSizeListDataUtil.clearAdapterStates(mSizeList); skuSizeAdapter.notifyDataSetChanged(); // 清空颜色 mColorListDataUtil.clearAdapterStates(mColorList); skuColorAdapter.notifyDataSetChanged(); size ; if (!TextUtils.isEmpty(color)) { // 计算改颜色对应的所有库存 stock DataUtil.getColorAllStock(mList,color); if (stock 0) { tvSkuStock.setText(库存 stock ); } tvSkuName.setText(请选择尺码); // 计算改颜色对应的尺码列表 ListString list DataUtil.getSizeListByColor(mList,color); if (list ! null list.size() 0) { // 更新尺码列表 mSizeList DataUtil.setSizeOrColorListStates(mSizeList,list, size); skuSizeAdapter.notifyDataSetChanged(); } mColorListDataUtil.setAdapterStates(mColorList,color); skuColorAdapter.notifyDataSetChanged(); } else { // 获取所有库存 stock DataUtil.getAllStock(mList); if (stock 0) { tvSkuStock.setText(库存 stock ); } tvSkuName.setText(请选择尺码,颜色分类); } break; case 1: // 选中尺码 mSizeListDataUtil.updateAdapterStates(mSizeList, 0, position); skuSizeAdapter.notifyDataSetChanged(); // 获取该尺码对应的颜色列表 ListString list DataUtil.getColorListBySize(mList,size); if (!TextUtils.isEmpty(color)) { // 计算改颜色与尺码对应的库存 stock DataUtil.getStockByColorAndSize(mList,color, size); tvSkuName.setText(规格: color size); if (stock 0) { tvSkuStock.setText(库存 stock ); } if (list ! null list.size() 0) { // 更新颜色列表 mColorList DataUtil.setSizeOrColorListStates(mColorList,list, color); skuColorAdapter.notifyDataSetChanged(); } } else { // 计算改尺码的所有库存 stock DataUtil.getSizeAllStock(mList,size); if (stock 0) { tvSkuStock.setText(库存 stock ); } tvSkuName.setText(请选择颜色分类); if (list ! null list.size() 0) { mColorList DataUtil.setSizeOrColorListStates(mColorList,list, ); skuColorAdapter.notifyDataSetChanged(); } } break; default: break; } } }); } /** * 模拟数据 */ private void addData() { mList new ArrayListSkuItme(); mColorList new ArrayListBean(); mSizeList new ArrayListBean(); String[] colorArr Constants.colorArr; String[] sizeArr Constants.sizeArr; int color colorArr.length; int size sizeArr.length; for (int i 0; i color; i) { Bean bean new Bean(); bean.setName(colorArr[i]); bean.setStates(1); mColorList.add(bean); } for (int i 0; i size; i) { Bean bean new Bean(); bean.setName(sizeArr[i]); bean.setStates(1); mSizeList.add(bean); } String color0 colorArr[0]; String size0 sizeArr[0]; String color1 colorArr[1]; String size1 sizeArr[1]; String color2 colorArr[2]; String size2 sizeArr[2]; String color3 colorArr[3]; String size3 sizeArr[3]; String color4 colorArr[4]; String size4 sizeArr[4]; String size5 sizeArr[5]; SkuItme item0 new SkuItme(); item0.setId(1); item0.setSkuColor(color0); item0.setSkuSize(size0); item0.setSkuStock(10); mList.add(item0); SkuItme item1 new SkuItme(); item1.setId(2); item1.setSkuColor(color0); item1.setSkuSize(size1); item1.setSkuStock(1); mList.add(item1); SkuItme item2 new SkuItme(); item2.setId(3); item2.setSkuColor(color1); item2.setSkuSize(size0); item2.setSkuStock(12); mList.add(item2); SkuItme item3 new SkuItme(); item3.setId(4); item3.setSkuColor(color1); item3.setSkuSize(size2); item3.setSkuStock(123); mList.add(item3); SkuItme item4 new SkuItme(); item4.setId(5); item4.setSkuColor(color1); item4.setSkuSize(size1); item4.setSkuStock(53); mList.add(item4); SkuItme item5 new SkuItme(); item5.setId(6); item5.setSkuColor(color2); item5.setSkuSize(size1); item5.setSkuStock(13); mList.add(item5); SkuItme item6 new SkuItme(); item6.setId(7); item6.setSkuColor(color0); item6.setSkuSize(size3); item6.setSkuStock(18); mList.add(item6); SkuItme item7 new SkuItme(); item7.setId(8); item7.setSkuColor(color2); item7.setSkuSize(size3); item7.setSkuStock(14); mList.add(item7); SkuItme item8 new SkuItme(); item8.setId(9); item8.setSkuColor(color1); item8.setSkuSize(size3); item8.setSkuStock(22); mList.add(item8); SkuItme item9 new SkuItme(); item9.setId(10); item9.setSkuColor(color0); item9.setSkuSize(size4); item9.setSkuStock(29); mList.add(item9); SkuItme item10 new SkuItme(); item10.setId(11); item10.setSkuColor(color2); item10.setSkuSize(size5); item10.setSkuStock(64); mList.add(item10); SkuItme item11 new SkuItme(); item11.setId(12); item11.setSkuColor(color3); item11.setSkuSize(size2); item11.setSkuStock(70); mList.add(item11); SkuItme item12 new SkuItme(); item12.setId(13); item12.setSkuColor(color4); item12.setSkuSize(size0); item12.setSkuStock(80); mList.add(item12); SkuItme item13 new SkuItme(); item13.setId(14); item13.setSkuColor(color3); item13.setSkuSize(size4); item13.setSkuStock(35); mList.add(item13); SkuItme item14 new SkuItme(); item14.setId(15); item14.setSkuColor(color4); item14.setSkuSize(size1); item14.setSkuStock(62); mList.add(item14); SkuItme item15 new SkuItme(); item15.setId(16); item15.setSkuColor(color3); item15.setSkuSize(size5); item15.setSkuStock(41); mList.add(item15); SkuItme item16 new SkuItme(); item16.setId(17); item16.setSkuColor(color1); item16.setSkuSize(size5); item16.setSkuStock(39); mList.add(item16); SkuItme item17 new SkuItme(); item17.setId(18); item17.setSkuColor(color4); item17.setSkuSize(size5); item17.setSkuStock(37); mList.add(item17); SkuItme item18 new SkuItme(); item18.setId(19); item18.setSkuColor(color4); item18.setSkuSize(size2); item18.setSkuStock(44); mList.add(item18); SkuItme item19 new SkuItme(); item19.setId(20); item19.setSkuColor(color4); item19.setSkuSize(size3); item19.setSkuStock(61); mList.add(item19); } }这样我们就基本可以实现类似淘宝选择颜色尺码的效果了。效果看着还不错O(∩_∩)O~三.我的项目分析说明1. 首先来张项目结构图(1).Bean类是适配器的数据实体它的属性有private String name;//名称 private String states;//状态 3种 1 选中 2 未选中 3不可选name即具体的尺码或者颜色states是用来标识目前状态是什么。(2).Constants 常量类保存了数据源//颜色数组 public static final String[] colorArr{铁蓝灰,孔雀蓝,深蓝,中国红,艳紫}; //尺码数组 public static final String[] sizeArr{S,M,L,XL,XXL,XXXL};(3).SkuItme sku的数据实体类private String id;//id private String skuSize;//尺码 private String skuColor;//颜色 private int skuStock;//库存 private String skuIamgeUrl;//图片路径(4).MyGridView 解决GridView和ScrollView滑动冲突(5).SkuAdapter 适配器显示尺码或者颜色分类(6).DataUtil 数据处理类相信大家看完这篇文章就或许有思路实现类似淘宝的选择颜色、尺码效果了本人水平有限有错误的地方欢迎大家指出PS代码下载