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:项目下载地址

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

Android 购物选择颜色(尺码)实现(一)相关推荐

仿天猫购物车（Android studio 仿天猫详情页面添加购物车选择颜色尺寸demo）
这是我第一次编写博客,有不好的地方请发邮件或留言告知. 注*请勿转载-转载需博主同意 1.首先就是设计页面了–先效果图 2.现在开始看代码,没有啥好说的这是布局文件 MainActivity 里面的 ...
android用sku算法仿淘宝选择颜色分类弹框。
当规格超出边界会自动换行,点击规格会根据算法判断关联规格,无则灰显,全部选中后则变化图片.代码是kotlin和java混合. 效果如下,当一行显示不下所有规格时,会自动换行.用的夜神模拟器,分辨率有点 ...
Android上一种用于选择颜色的控件（颜色选择器）
目录引言核心代码控件整体代码 demo 引言最近在做一个项目时其中有一个需求–自定义灯光颜色.要求通过手机端控制灯光颜色,手机端预设五种颜色及用户可自定义颜色.在百度上搜索找到一个开源的色环控 ...
爱上Android之选择您的开发工具
本文摘自人民邮电出版社异步社区<爱上Android> 京东地址:item.jd.com/12144527.ht- 试读地址:www.epubit.com.cn/book/detail- 第 ...
android double比较大小吗,Android双向选择控件DoubleSeekBar使用详解
本文实例为大家分享了Android双向选择控件DoubleSeekBar的使用方法,供大家参考,具体内容如下先看效果图 1.DoubleSlideSeekBar public class Doubl ...
android色温选择控件,ColorPicker
软件简介 ColorPicker 一款标准的Android颜色选择器,使用HSV和透明度选择颜色. Gradle dependencies { implementation 'com.github.d ...
Android 城市选择万能控件
Android 城市选择万能控件 Android 城市选择万能控件,选择城市,选择汽车品牌等等,支持按照a-z.# 排序等的选择控件,废话不多说直接上效果图: (开的Android模拟器录得gif,有 ...
服装盘点机在服装行业颜色尺码仓库条码高效管理中的应用
服装行业的商品管理的特点是需要管理颜色和尺码具体逻辑就是: 什么商品,什么颜色,什么尺码,入库多少个? 什么商品,什么颜色,什么尺码,出库多少个? 什么商品,什么颜色,什么尺码,还有库存多少个? 如 ...
java 选择颜色的控件_JavaFX颜色选择器(ColorPicker)
颜色选择器控件允许用户从可用的颜色范围中选择颜色,或通过指定RGB或HSB组合设置其他颜色.JavaFX ColorPicker控件具有颜色选择器,调色板和自定义颜色对话框窗口. 创建ColorPic ...

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

Android 购物选择颜色(尺码)实现(一)相关推荐

最新文章

热门文章