Android 购物选择颜色(尺码)实现

好久都没写博客了，一直忙于公司的项目，这几天有时间所以写点东西，和大家相互学习一下！写的不好的话，还望见谅！

在公司做的项目一直是有关手机购物方面的，所以就会碰到购买东西时，需要选择商品的颜色、尺码、类型等等属性，所以有时间就研究了一下淘宝的实现。首先看看淘宝的效果图，如下图





大概看了一下淘宝的效果，发现一行显示的个数（列数）会跟着商品属性的文字（选择框里面的内容）长度变化而变化，简单来说就是列数是个变化值，不是固定值，并且发现最多显示的5列，最少显示2列（我自己的观察，可能会有出入）这样的规律。淘宝的效果已经看见了，那么我就自己研究了一下，想用一种简单的方法去实现这样效果，（这样的效果肯定有好多种实现方式），首先看看我做的效果图（暂时还不会做gif,所以目前就是静态图，望大家见谅），效果图如下所示：





现在我们直接进入主题，看看具体现实吧！
1.新建Android项目。



2.打开布局文件activity_main.xml，该布局文件是主界面布局。实现这样的效果，我选择了一种比较简单的方法（其他比较复杂的方法，暂时没实现O(∩_∩)O~），就用GridView组件。

<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical">

    <textview android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="请选择尺码" android:padding="10dp" android:textsize="15sp">

        <gridview android:id="@+id/my_gridview" android:layout_width="match_parent" android:layout_height="wrap_content" android:cachecolorhint="#00000000" android:horizontalspacing="10dp" android:listselector="#00000000" android:numcolumns="auto_fit" android:padding="5dp" android:scrollbars="none" android:verticalspacing="10dp">

</gridview></textview></linearlayout>

3.在layou文件夹中新建布局gridview_item.xml文件，该布局文件主要是设置GridView的item布局，主要是一个TextView显示商品属性，

<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:padding="0dp">

    <linearlayout android:id="@+id/layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@xml/shape1" android:gravity="center">

        <textview android:id="@+id/ItemText" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView01" android:textsize="15sp">
        </textview>
    </linearlayout>

</linearlayout>

该布局中用到了shape1.xml文件 ,该xml文件是选择框的效果布局，同样还有另一个shape2.xml文件，一个默认的效果，一个选中的效果。这两个xml,此处暂不列出，后面的源码会有实现。
3.新建一个Bean类，用来封装加载显示的数据。该商品属性类用3个属性，代码中会详细讲解为何这样建bean.

private String name;//商品属性名称<br/>
	private int nameLength;//商品属性名称的长度<br/>
	private boolean nameIsSelect;//商品属性是否选中<br/>

4.最主要的类，MainActivity，该类包含了所有的实现，代码如下。

package com.example.selectsku;

import java.util.ArrayList;
import java.util.HashMap;

import com.example.selectsku.R.layout;

import android.app.Activity;
import android.content.Context;
import android.graphics.Color;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends Activity {
	private int length = 5;
	private int maxLength = 0;
	MyAdapter adapter;
	
	ArrayList<sizebean> listItem = new ArrayList<sizebean>();

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		GridView gridview = (GridView) findViewById(R.id.my_gridview);
		setData();
		setDataLenth();
		maxLength=findMaxLength();
		if(maxLength<4){
			length=5;
		}else if(maxLength<5){
			length=4;
		}else if(maxLength<6){
			length=3;
		}else {
			length=2;
		}
		gridview.setNumColumns(length);
		adapter = new MyAdapter(listItem, MainActivity.this);
		gridview.setAdapter(adapter);
		// 添加消息处理
		gridview.setOnItemClickListener(new ItemClickListener());
	}

	/**
	 * 设置数据
	 */
	private void setData() {
		SizeBean sizeBean1 = new SizeBean();
		sizeBean1.setName("230");
		sizeBean1.setNameIsSelect(false);
		listItem.add(sizeBean1);
		SizeBean sizeBean2 = new SizeBean();
		sizeBean2.setName("240");
		sizeBean2.setNameIsSelect(false);
		listItem.add(sizeBean2);
		SizeBean sizeBean3 = new SizeBean();
		sizeBean3.setName("245");
		sizeBean3.setNameIsSelect(false);
		listItem.add(sizeBean3);
		SizeBean sizeBean4 = new SizeBean();
		sizeBean4.setName("2500");
		sizeBean4.setNameIsSelect(false);
		listItem.add(sizeBean4);
		SizeBean sizeBean5 = new SizeBean();
		sizeBean5.setName("255");
		sizeBean5.setNameIsSelect(false);
		listItem.add(sizeBean5);
		SizeBean sizeBean6 = new SizeBean();
		sizeBean6.setName("260");
		sizeBean6.setNameIsSelect(false);
		listItem.add(sizeBean6);
	}

	/**
	 * 设置数据的长度
	 */
	private void setDataLenth() {
		for (int i = 0; i < listItem.size(); i++) {
			SizeBean bean = listItem.get(i);
			bean.setNameLength(bean.getName().length());
		}
	}
	/**
	 * 找到数据最大长度
	 */
	private int findMaxLength() {
		int maxLength=0;
		for (int i = 0; i < listItem.size(); i++) {
			SizeBean bean = listItem.get(i);
			if(maxLength<=bean.getNameLength()){
				maxLength=bean.getNameLength();
			}
		}
		return maxLength;
	}

	// 当AdapterView被单击(触摸屏或者键盘)，则返回的Item单击事件
	class ItemClickListener implements OnItemClickListener {
		public void onItemClick(AdapterView<?> arg0,// The AdapterView where the
													// click happened
				View arg1,// The view within the AdapterView that was clicked
				int arg2,// The position of the view in the adapter
				long arg3// The row id of the item that was clicked
		) {
			SizeBean item = (SizeBean) arg0.getItemAtPosition(arg2);
			item.setNameIsSelect(!item.getNameIsSelect());
			for (int i = 0; i < listItem.size(); i++) {
				if (i != arg2) {
					SizeBean bean = listItem.get(i);
					bean.setNameIsSelect(false);
				}
			}
			adapter.notifyDataSetChanged();
		}
	}

	/**
	 * 适配器
	 */
	private class MyAdapter extends BaseAdapter {
		private Context context;
		ArrayList<sizebean> list;
		private LayoutInflater mInflater;// 得到一个LayoutInfalter对象用来导入布局

		public MyAdapter(ArrayList<sizebean> list, Context context) {
			super();
			this.mInflater = LayoutInflater.from(context);
			this.context = 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(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对象
			}
			/** 设置TextView显示的内容，即我们存放在动态数组中的数据 */
			holder.title.setText(list.get(position).getName());
			// 点击改变选中listItem的背景色
			if (list.get(position).getNameIsSelect()) {
				holder.layout.setBackgroundResource(R.xml.shape2);
			} else {
				holder.layout.setBackgroundResource(R.xml.shape1);
			}
			return convertView;
		}

		public final class ViewHolder {
			public TextView title;
			public LinearLayout layout;
		}
	}
}

代码实现比较简单，并且还有注释。需要解释的地方，有一处findMaxLength（），该方法是计算商品属性名称的最大长度，目的是为了设置GridView显示的列数，我自己摸索的规则是这样的（大家可以自己去随意改）:
（1）.商品属性名称最大的长度小于4时，显示5列；
（2）.商品属性名称最大的长度等于4时，显示4列；

（3）.商品属性名称最大的长度等于5时，显示3列；

（4）.商品属性名称最大的长度大于5时，显示2列；


这样基本上已经完成了效果。要是还有什么问题，可以给我留言！

PS:项目下载地址