Android 購(gòu)物選擇顏色(尺碼)實(shí)現(xiàn)(一)這篇文章只是簡(jiǎn)單的介紹以及實(shí)現(xiàn)了點(diǎn)擊效果還沒(méi)有實(shí)現(xiàn)顏色、尺碼、庫(kù)存等聯(lián)動(dòng)所以在閑暇時(shí)間就寫(xiě)了這篇文章實(shí)現(xiàn)這樣的效果。首先還是上幾張?zhí)詫毜男Ч麍D在選擇尺碼或者顏色分類(lèi)的時(shí)候顏色分類(lèi)、尺碼、庫(kù)存以及圖片都會(huì)有相應(yīng)變化。接下來(lái)我們 就看看如何實(shí)現(xiàn)這樣的效果。先看看我實(shí)現(xiàn)的效果圖一.分析要實(shí)現(xiàn)這樣的效果商品屬性就得有尺碼、顏色、庫(kù)存等我們簡(jiǎn)稱(chēng)為sku當(dāng)你選擇某一個(gè)尺碼的時(shí)候先查找該顏色對(duì)應(yīng)的尺碼列表是什么接著用這個(gè)尺碼列表和總的尺碼列表進(jìn)行對(duì)比要是有尺碼不在總尺碼列表中那么就標(biāo)記改尺碼是不可選的顏色也同理。只要你明白這道理那么就很好理解了。下來(lái)我們看看具體的代碼實(shí)現(xiàn)。二.實(shí)現(xiàn)1.新建項(xiàng)目2.打開(kāi)布局文件activity_main.xml該布局文件是主界面布局代碼就不羅列了具體代碼見(jiàn)代碼下載。3.在layou文件夾中新建布局gridview_item.xml文件該布局文件主要是設(shè)置GridView的item布局主要是一個(gè)TextView顯示商品屬性PS: 這一塊要是不了解的話可以先看看這篇文章Android 購(gòu)物選擇顏色(尺碼)實(shí)現(xiàn)(一)4.新建MyGridView類(lèi)繼承GridView解決滑動(dòng)沖突/** * 滑動(dòng)沖突 */ 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其中用到的接口回調(diào)public class SkuAdapter extends BaseAdapter { private ListBean list;//數(shù)據(jù)源 private LayoutInflater mInflater;// 得到一個(gè)LayoutInfalter對(duì)象用來(lái)導(dǎo)入布局 public onItemClickListener itemClickListener;// 接口回調(diào) 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); /** 得到各個(gè)控件的對(duì)象 */ holder.title (TextView) convertView.findViewById(R.id.ItemText); holder.layout (LinearLayout) convertView.findViewById(R.id.layout); convertView.setTag(holder);// 綁定ViewHolder對(duì)象 } else { holder (ViewHolder) convertView.getTag();// 取出ViewHolder對(duì)象 } 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; } /** 設(shè)置TextView顯示的內(nèi)容即我們存放在動(dòng)態(tài)數(shù)組中的數(shù)據(jù) */ 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 類(lèi)當(dāng)然你也可以自己在Activity中定義常量public class Constants { //顏色數(shù)組 public static final String[] colorArr{鐵藍(lán)灰,孔雀藍(lán),深藍(lán),中國(guó)紅,艷紫}; //尺碼數(shù)組 public static final String[] sizeArr{S,M,L,XL,XXL,XXXL}; }7.新建DataUtil用來(lái)數(shù)據(jù)處理代碼太長(zhǎng)就不講解了具體的代碼請(qǐng)下載代碼后查看8.最主要的類(lèi)MainActivity該類(lèi)包含了所有的實(shí)現(xiàn)代碼如下public class MainActivity extends Activity { ListSkuItme mList;// sku數(shù)據(jù) ListBean mColorList;// 顏色列表 ListBean mSizeList;// 尺碼列表 GridView gvColor;// 顏色 GridView gvSize;// 尺碼 SkuAdapter skuColorAdapter;// 顏色適配器 SkuAdapter skuSizeAdapter;// 尺碼適配器 String color;// String size;// TextView tvSkuName;// 顯示sku TextView tvSkuStock;// 顯示庫(kù)存 int stock 0;// 庫(kù)存 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(庫(kù)存 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)) { // 選中尺碼計(jì)算庫(kù)存 stock DataUtil.getSizeAllStock(mList,size); if (stock 0) { tvSkuStock.setText(庫(kù)存 stock ); } tvSkuName.setText(請(qǐng)選擇尺碼); // 獲取該尺碼對(duì)應(yīng)的顏色列表 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 { // 所有庫(kù)存 stock DataUtil.getAllStock(mList); if (stock 0) { tvSkuStock.setText(庫(kù)存 stock ); } tvSkuName.setText(請(qǐng)選擇尺碼,顏色分類(lèi)); } break; case 1: // 選中顏色 mColorListDataUtil.updateAdapterStates(mColorList,0, position); skuColorAdapter.notifyDataSetChanged(); // 計(jì)算改顏色對(duì)應(yīng)的尺碼列表 ListString list DataUtil.getSizeListByColor(mList,color); if (!TextUtils.isEmpty(size)) { // 計(jì)算改顏色與尺碼對(duì)應(yīng)的庫(kù)存 stock DataUtil.getStockByColorAndSize(mList,color, size); tvSkuName.setText(規(guī)格: color size); if (stock 0) { tvSkuStock.setText(庫(kù)存 stock ); } if (list ! null list.size() 0) { // 更新尺碼列表 mSizeList DataUtil.setSizeOrColorListStates(mSizeList,list, size); skuSizeAdapter.notifyDataSetChanged(); } } else { // 根據(jù)顏色計(jì)算庫(kù)存 stock DataUtil.getColorAllStock(mList,color); if (stock 0) { tvSkuStock.setText(庫(kù)存 stock ); } tvSkuName.setText(請(qǐng)選擇尺碼); 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)) { // 計(jì)算改顏色對(duì)應(yīng)的所有庫(kù)存 stock DataUtil.getColorAllStock(mList,color); if (stock 0) { tvSkuStock.setText(庫(kù)存 stock ); } tvSkuName.setText(請(qǐng)選擇尺碼); // 計(jì)算改顏色對(duì)應(yīng)的尺碼列表 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 { // 獲取所有庫(kù)存 stock DataUtil.getAllStock(mList); if (stock 0) { tvSkuStock.setText(庫(kù)存 stock ); } tvSkuName.setText(請(qǐng)選擇尺碼,顏色分類(lèi)); } break; case 1: // 選中尺碼 mSizeListDataUtil.updateAdapterStates(mSizeList, 0, position); skuSizeAdapter.notifyDataSetChanged(); // 獲取該尺碼對(duì)應(yīng)的顏色列表 ListString list DataUtil.getColorListBySize(mList,size); if (!TextUtils.isEmpty(color)) { // 計(jì)算改顏色與尺碼對(duì)應(yīng)的庫(kù)存 stock DataUtil.getStockByColorAndSize(mList,color, size); tvSkuName.setText(規(guī)格: color size); if (stock 0) { tvSkuStock.setText(庫(kù)存 stock ); } if (list ! null list.size() 0) { // 更新顏色列表 mColorList DataUtil.setSizeOrColorListStates(mColorList,list, color); skuColorAdapter.notifyDataSetChanged(); } } else { // 計(jì)算改尺碼的所有庫(kù)存 stock DataUtil.getSizeAllStock(mList,size); if (stock 0) { tvSkuStock.setText(庫(kù)存 stock ); } tvSkuName.setText(請(qǐng)選擇顏色分類(lèi)); if (list ! null list.size() 0) { mColorList DataUtil.setSizeOrColorListStates(mColorList,list, ); skuColorAdapter.notifyDataSetChanged(); } } break; default: break; } } }); } /** * 模擬數(shù)據(jù) */ 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); } }這樣我們就基本可以實(shí)現(xiàn)類(lèi)似淘寶選擇顏色尺碼的效果了。效果看著還不錯(cuò)O(∩_∩)O~三.我的項(xiàng)目分析說(shuō)明1. 首先來(lái)張項(xiàng)目結(jié)構(gòu)圖(1).Bean類(lèi)是適配器的數(shù)據(jù)實(shí)體它的屬性有private String name;//名稱(chēng) private String states;//狀態(tài) 3種 1 選中 2 未選中 3不可選name即具體的尺碼或者顏色states是用來(lái)標(biāo)識(shí)目前狀態(tài)是什么。(2).Constants 常量類(lèi)保存了數(shù)據(jù)源//顏色數(shù)組 public static final String[] colorArr{鐵藍(lán)灰,孔雀藍(lán),深藍(lán),中國(guó)紅,艷紫}; //尺碼數(shù)組 public static final String[] sizeArr{S,M,L,XL,XXL,XXXL};(3).SkuItme sku的數(shù)據(jù)實(shí)體類(lèi)private String id;//id private String skuSize;//尺碼 private String skuColor;//顏色 private int skuStock;//庫(kù)存 private String skuIamgeUrl;//圖片路徑(4).MyGridView 解決GridView和ScrollView滑動(dòng)沖突(5).SkuAdapter 適配器顯示尺碼或者顏色分類(lèi)(6).DataUtil 數(shù)據(jù)處理類(lèi)相信大家看完這篇文章就或許有思路實(shí)現(xiàn)類(lèi)似淘寶的選擇顏色、尺碼效果了本人水平有限有錯(cuò)誤的地方歡迎大家指出PS代碼下載