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列；

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

    可能有的朋友看完文章或者下载完代码后，发现和淘宝的效果完全不一样，是的，确实是这样的，这篇文章只是简单的介绍了思路以及实现了点击效果，但是没有做到颜色、尺码、库存联动，所以请看我的这篇文章， Android 购物选择颜色、尺码实现(二)！

   PS:项目下载地址

最近才开通了微信公众号，欢迎大家关注。