[置顶] Android 购物选择颜色、尺码实现(二)

    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 List<Bean> list;//数据源
private LayoutInflater mInflater;// 得到一个LayoutInfalter对象用来导入布局
public onItemClickListener itemClickListener;// 接口回调

public void setItemClickListener(onItemClickListener itemClickListener) {
this.itemClickListener = itemClickListener;
}

public SkuAdapter(List<Bean> 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 {

List<SkuItme> mList;// sku数据

List<Bean> mColorList;// 颜色列表
List<Bean> 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":
// 清空尺码
mSizeList=DataUtil.clearAdapterStates(mSizeList);
skuSizeAdapter.notifyDataSetChanged();
// 清空颜色
mColorList=DataUtil.clearAdapterStates(mColorList);
skuColorAdapter.notifyDataSetChanged();
color = "";
// 判断使用选中了尺码
if (!TextUtils.isEmpty(size)) {
// 选中尺码，计算库存
stock =DataUtil.getSizeAllStock(mList,size);
if (stock > 0) {
tvSkuStock.setText("库存：" + stock + "");
}
tvSkuName.setText("请选择尺码");
// 获取该尺码对应的颜色列表
List<String> list = DataUtil.getColorListBySize(mList,size);
if (list != null && list.size() > 0) {
// 更新颜色列表
mColorList = DataUtil.setSizeOrColorListStates(mColorList,list, color);
skuColorAdapter.notifyDataSetChanged();
}
mSizeList=DataUtil.setAdapterStates(mSizeList,size);
skuSizeAdapter.notifyDataSetChanged();
} else {
// 所有库存
stock = DataUtil.getAllStock(mList);
if (stock > 0) {
tvSkuStock.setText("库存：" + stock + "");
}
tvSkuName.setText("请选择尺码,颜色分类");
}
break;
case "1":
// 选中颜色
mColorList=DataUtil.updateAdapterStates(mColorList,"0", position);
skuColorAdapter.notifyDataSetChanged();
// 计算改颜色对应的尺码列表
List<String> 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":
// 清空尺码
mSizeList=DataUtil.clearAdapterStates(mSizeList);
skuSizeAdapter.notifyDataSetChanged();
// 清空颜色
mColorList=DataUtil.clearAdapterStates(mColorList);
skuColorAdapter.notifyDataSetChanged();
size = "";
if (!TextUtils.isEmpty(color)) {
// 计算改颜色对应的所有库存
stock = DataUtil.getColorAllStock(mList,color);
if (stock > 0) {
tvSkuStock.setText("库存：" + stock + "");
}
tvSkuName.setText("请选择尺码");
// 计算改颜色对应的尺码列表
List<String> list = DataUtil.getSizeListByColor(mList,color);
if (list != null && list.size() > 0) {
// 更新尺码列表
mSizeList = DataUtil.setSizeOrColorListStates(mSizeList,list, size);
skuSizeAdapter.notifyDataSetChanged();
}
mColorList=DataUtil.setAdapterStates(mColorList,color);
skuColorAdapter.notifyDataSetChanged();
} else {
// 获取所有库存
stock = DataUtil.getAllStock(mList);
if (stock > 0) {
tvSkuStock.setText("库存：" + stock + "");
}
tvSkuName.setText("请选择尺码,颜色分类");
}
break;
case "1":
// 选中尺码
mSizeList=DataUtil.updateAdapterStates(mSizeList, "0", position);
skuSizeAdapter.notifyDataSetChanged();
// 获取该尺码对应的颜色列表
List<String> 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 ArrayList<SkuItme>();
mColorList = new ArrayList<Bean>();
mSizeList = new ArrayList<Bean>();
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：代码下载