Android实现淘宝选中商品尺寸的按钮组实例

话不多说,先上个效果图:

现在我们就来说说里面的一些原理把!

一、原理:

1.其实这里我们用到的是一个ViewGroup控件组,把这些按钮加进去就有这种效果了!不过这里要继承ViewGroup(命名为:GoodsViewGroup)重写里面的一些方法。

2.主要的方法有:

GoodsViewGroup按钮组的控件大小

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)

里面的按钮每个的位置坐标

protected void onLayout(boolean changed, int l, int t, int r, int b) 

这两个方法的具体使用大家可以网上查阅资料,这里就不多说了!

二、代码:

/**
 * Created by ShaoLin on 2016/8/22.
 * 这里是类似淘宝中商品尺寸按钮组(这里做了支持button,textview)
 */
public class GoodsViewGroup<X extends TextView> extends ViewGroup {

 public static final String BTN_MODE = "BTNMODE"; //按钮模式
 public static final String TEV_MODE = "TEVMODE"; //文本模式

 private static final String TAG = "IViewGroup";
 private final int HorInterval = 10; //水平间隔
 private final int VerInterval = 10; //垂直间隔

 private int viewWidth; //控件的宽度
 private int viewHeight; //控件的高度

 private ArrayList<String> mTexts = new ArrayList<>();
 private Context mContext;
 private int textModePadding = 15;

 //正常样式
 private float itemTextSize = 18;
 private int itemBGResNor = R.drawable.goods_item_btn_normal;
 private int itemTextColorNor = Color.parseColor("#000000");

 //选中的样式
 private int itemBGResPre = R.drawable.goods_item_btn_selected;
 private int itemTextColorPre = Color.parseColor("#ffffff");

 public GoodsViewGroup(Context context) {
  this(context, null);
 }

 public GoodsViewGroup(Context context, AttributeSet attrs) {
  super(context, attrs);
  mContext = context;
 }

 /**
  * 计算控件的大小
  */
 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  viewWidth = measureWidth(widthMeasureSpec);
  viewHeight = measureHeight(heightMeasureSpec);
  Log.e(TAG, "onMeasure:" + viewWidth + ":" + viewHeight);
  // 计算自定义的ViewGroup中所有子控件的大小
  measureChildren(widthMeasureSpec, heightMeasureSpec);
  // 设置自定义的控件MyViewGroup的大小
  setMeasuredDimension(viewWidth, getViewHeight());
 }

 private int measureWidth(int pWidthMeasureSpec) {
  int result = 0;
  int widthMode = MeasureSpec.getMode(pWidthMeasureSpec);
  int widthSize = MeasureSpec.getSize(pWidthMeasureSpec);
  switch (widthMode) {
   /**
    * mode共有三种情况,取值分别为MeasureSpec.UNSPECIFIED, MeasureSpec.EXACTLY,
    * MeasureSpec.AT_MOST。
    *
    *
    * MeasureSpec.EXACTLY是精确尺寸,
    * 当我们将控件的layout_width或layout_height指定为具体数值时如andorid
    * :layout_width="50dip",或者为FILL_PARENT是,都是控件大小已经确定的情况,都是精确尺寸。
    *
    *
    * MeasureSpec.AT_MOST是最大尺寸,
    * 当控件的layout_width或layout_height指定为WRAP_CONTENT时
    * ,控件大小一般随着控件的子空间或内容进行变化,此时控件尺寸只要不超过父控件允许的最大尺寸即可
    * 。因此,此时的mode是AT_MOST,size给出了父控件允许的最大尺寸。
    *
    *
    * MeasureSpec.UNSPECIFIED是未指定尺寸,这种情况不多,一般都是父控件是AdapterView,
    * 通过measure方法传入的模式。
    */
   case MeasureSpec.AT_MOST:
   case MeasureSpec.EXACTLY:
    result = widthSize;
    break;
  }
  return result;
 }

 private int measureHeight(int pHeightMeasureSpec) {
  int result = 0;
  int heightMode = MeasureSpec.getMode(pHeightMeasureSpec);
  int heightSize = MeasureSpec.getSize(pHeightMeasureSpec);
  switch (heightMode) {
   case MeasureSpec.UNSPECIFIED:
    result = getSuggestedMinimumHeight();
    break;
   case MeasureSpec.AT_MOST:
   case MeasureSpec.EXACTLY:
    result = heightSize;
    break;
  }
  return result;
 }

 /**
  * 覆写onLayout,其目的是为了指定视图的显示位置,方法执行的前后顺序是在onMeasure之后,因为视图肯定是只有知道大小的情况下,
  * 才能确定怎么摆放
  */
 @Override
 protected void onLayout(boolean changed, int l, int t, int r, int b) {
  // 遍历所有子视图
  int posLeft = HorInterval;
  int posTop = VerInterval;
  int posRight;
  int posBottom;
  for (int i = 0; i < getChildCount(); i++) {
   View childView = getChildAt(i);
   // 获取在onMeasure中计算的视图尺寸
   int measureHeight = childView.getMeasuredHeight();
   int measuredWidth = childView.getMeasuredWidth();
   if (posLeft + getNextHorLastPos(i) > viewWidth) {
    posLeft = HorInterval;
    posTop += (measureHeight + VerInterval);
   }
   posRight = posLeft + measuredWidth;
   posBottom = posTop + measureHeight;
   childView.layout(posLeft, posTop, posRight, posBottom);
   posLeft += (measuredWidth + HorInterval);
  }
 }

 //获取控件的自适应高度
 private int getViewHeight() {
  int viewwidth = HorInterval;
  int viewheight = VerInterval;
  if (getChildCount() > 0) {
   viewheight = getChildAt(0).getMeasuredHeight() + VerInterval;
  }
  for (int i = 0; i < getChildCount(); i++) {
   View childView = getChildAt(i);
   // 获取在onMeasure中计算的视图尺寸
   int measureHeight = childView.getMeasuredHeight();
   int measuredWidth = childView.getMeasuredWidth();
   if (viewwidth + getNextHorLastPos(i) > viewWidth) {
    viewwidth = HorInterval;
    viewheight += (measureHeight + VerInterval);
   } else {
    viewwidth += (measuredWidth + HorInterval);
   }
  }
  return viewheight;
 }

 private int getNextHorLastPos(int i) {
  return getChildAt(i).getMeasuredWidth() + HorInterval;
 }

 private OnGroupItemClickListener onGroupItemClickListener;

 public void setGroupClickListener(OnGroupItemClickListener listener) {
  onGroupItemClickListener = listener;
  for (int i = 0; i < getChildCount(); i++) {
   final X childView = (X) getChildAt(i);
   final int itemPos = i;
   childView.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View view) {
     onGroupItemClickListener.onGroupItemClick(itemPos);
     chooseItemStyle(itemPos);
    }
   });
  }
 }

 //选中那个的样式
 public void chooseItemStyle(int pos) {
  clearItemsStyle();
  if (pos < getChildCount()) {
   X childView = (X) getChildAt(pos);
   childView.setBackgroundResource(itemBGResPre);
   childView.setTextColor(itemTextColorPre);
   setItemPadding(childView);
  }
 }

 private void setItemPadding(X view) {
  if (view instanceof Button) {
   view.setPadding(textModePadding, 0, textModePadding, 0);
  } else {
   view.setPadding(textModePadding, textModePadding, textModePadding, textModePadding);
  }
 }

 //清除Group所有的样式
 private void clearItemsStyle() {
  for (int i = 0; i < getChildCount(); i++) {
   X childView = (X) getChildAt(i);
   childView.setBackgroundResource(itemBGResNor);
   childView.setTextColor(itemTextColorNor);
   setItemPadding(childView);
  }
 }

 public void addItemViews(ArrayList<String> texts, String mode) {
  mTexts = texts;
  removeAllViews();
  for (String text : texts) {
   addItemView(text, mode);
  }
 }

 private void addItemView(String text, String mode) {
  X childView = null;
  switch (mode) {
   case BTN_MODE:
    childView = (X) new Button(mContext);
    break;
   case TEV_MODE:
    childView = (X) new TextView(mContext);
    break;
  }
  childView.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,
    LayoutParams.WRAP_CONTENT));
  childView.setTextSize(itemTextSize);
  childView.setBackgroundResource(itemBGResNor);
  setItemPadding(childView);
  childView.setTextColor(itemTextColorNor);
  childView.setText(text);
  this.addView(childView);
 }

 public String getChooseText(int itemID) {
  if (itemID >= 0) {
   return mTexts.get(itemID);
  }
  return null;
 }

 public void setItemTextSize(float itemTextSize) {
  this.itemTextSize = itemTextSize;
 }

 public void setItemBGResNor(int itemBGResNor) {
  this.itemBGResNor = itemBGResNor;
 }

 public void setItemTextColorNor(int itemTextColorNor) {
  this.itemTextColorNor = itemTextColorNor;
 }

 public void setItemBGResPre(int itemBGResPre) {
  this.itemBGResPre = itemBGResPre;
 }

 public void setItemTextColorPre(int itemTextColorPre) {
  this.itemTextColorPre = itemTextColorPre;
 }

 public interface OnGroupItemClickListener {
  void onGroupItemClick(int item);
 }
}

上面提供了可以设置按钮组的item的一些样式,还有这个GoodsViewGroup为什么要写成GoodsViewGroup<X extends TextView>这样呢?其实这里我是想做一个泛型,可以使用与ButtonTextView,而这里的Button本生就是继承TextView所以在代码中还要进行一个判断,可以看上面方法setItemPadding(X view) 。那到了这里,有些好友可能就会问,为什么要搞两个呢?

其实这里因为TextView的不会自动有设置padding的,而button是有自动设置padding。这个时候你就要看看你是先要那种效果!不过通过我的代码中如果是选择TextView的话,这里也设置了一个padding给他,不然会很难看!

两种模式的写法:

1.Button :

GoodsViewGroup<Button> mGroup;
mGroup.addItemViews(viewtexts, GoodsViewGroup.BTN_MODE);

2.TextView

GoodsViewGroup<TextView> mGroup;
mGroup.addItemViews(viewtexts, GoodsViewGroup.TEV_MODE);

三、Drawable文件:上面涉及到的按钮选中与正常的两个Drawable

1.goods_item_btn_normal.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
 <item>
  <shape>
   <solid android:color="#F5F5F5" />
   <corners android:radius="15.0dip" />
  </shape>
 </item>
</layer-list>

2.goods_item_btn_selected.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
 <item>
  <shape>
   <solid android:color="#FE4F00" />
   <corners android:radius="15.0dip" />
  </shape>
 </item>
</layer-list>

四、例子:

ButtonGroupActivity

/**
 * Created by ShaoLin on 2016/8/22.
 */
public class ButtonGroupActivity extends Activity implements GoodsViewGroup.OnGroupItemClickListener, View.OnClickListener {

 private GoodsViewGroup<TextView> mGroup;
 private Button mSubmitBtn;
 private ArrayList<String> viewtexts = new ArrayList<>();

 private int chooseID = -1;
 private String chooseText;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  setContentView(R.layout.activity_buttongroup);

  mGroup = (GoodsViewGroup) findViewById(R.id.viewGroup);
  mSubmitBtn = (Button) findViewById(R.id.submitBtn);

  String text;
  for (int i = 0; i < 10; i++) {
   text = "L" + i;
   viewtexts.add(text);
  }
  mGroup.addItemViews(viewtexts, GoodsViewGroup.TEV_MODE);
  mGroup.setGroupClickListener(this);
  mSubmitBtn.setOnClickListener(this);
  super.onCreate(savedInstanceState);
 }

 @Override
 public void onGroupItemClick(int item) {
  chooseID = item;
  chooseText = mGroup.getChooseText(item);
 }

 @Override
 public void onClick(View view) {
  if (chooseID >= 0) {
   showToast("ID:" + chooseID + ";text:" + chooseText);
  } else {
   showToast("请选择");
  }
 }

 private void showToast(String text) {
  Toast.makeText(ButtonGroupActivity.this, text, Toast.LENGTH_SHORT).show();
 }
}

activity_buttongroup.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/linear_ayout"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical">

 <com.example.jisuanqi.GoodsViewGroup
  android:id="@+id/viewGroup"
  android:layout_width="match_parent"
  android:layout_height="wrap_content">
 </com.example.jisuanqi.GoodsViewGroup>

 <Button
  android:id="@+id/submitBtn"
  android:text="确定"
  android:layout_width="match_parent"
  android:layout_height="wrap_content" />

</LinearLayout>

总结

以上就是关于Android实现淘宝选中商品不同尺寸的按钮组的全部内容了,如果本文有什么问题欢迎大家指出,大家共同进步!希望本文对大家的学习和工作能有所帮助哦~

时间: 2016-08-24

Android仿淘宝商品拖动查看详情及标题栏渐变功能

绪论 最近一直比较忙,也没抽出时间来写博客,也不得不说是自己犯了懒癌,人要是一懒就什么事都不想做了,如果不能坚持下来的话,那么估计就废了,��.最近自己攒了好多东西,接下来的时间我会慢慢都分享出来的.好了废话不多说了,下面我们开始正题: 今天要分享的是淘宝的详情页,之前在淘宝上买东西的时候看到淘宝的详情页效果比较不错,所以今天就来仿一下它的效果吧,可能没有淘宝的好,希望见谅啊. 先上效果图: 这是淘宝的: 我自己做的: 怎么样效果还差不多吧?GIF图效果看的不太清楚,见谅. 下面我们来看看怎么实

Android实现商品展示效果

一. 创建手机界面布局 创建一个activity_main.xml文件代码如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" androi

Android自定义商品购买数量加减控件

在购买商品时,大家可以自定义数字加减控件,来确定购买商品的实际数量,如何实现此控件,请参考下文: 1.自定义数字加减控件的要求 创建Module -NumberAddSubView A_输入的只能是数字,而且不能通过键盘输入 B_通过加减按钮操作数字 C_监听加减按钮 D_数组有最小值和最大值的限制 E_自定义属性 2.提供接口,让外界监听到数字的变化 1_设置接口 @Override public void onClick(View v) { if (v.getId() == R.id.btn

Android实现仿淘宝购物车增加和减少商品数量功能demo示例

本文实例讲述了Android实现仿淘宝购物车增加和减少商品数量功能.分享给大家供大家参考,具体如下: 在前面一篇<Android实现的仿淘宝购物车demo示例>中,小编简单的介绍了如何使用listview来实现购物车,但是仅仅是简单的实现了列表的功能,随之而来一个新的问题,买商品的时候,我们可能不止想买一件商品,想买多个,或许有因为某种原因点错了,本来想买一件来着,小手不小心抖了一下,把数量错点成了三个,这个时候就涉及到一个新的功能,那就是增加和减少商品的数量,今天这篇博文,小编就来和小伙伴们

Android 仿淘宝、京东商品详情页向上拖动查看图文详情控件DEMO详解

一.淘宝商品详情页效果 我们的效果 二.实现思路 使用两个scrollView,两个scrollView 竖直排列,通过自定义viewGroup来控制两个scrollView的竖直排列,以及滑动事件的处理.如下图 三.具体实现 1.继承viewGroup自定义布局View 重写onMeasure()和onLayout方法,在onLayout方法中完成对两个子ScrollView的竖直排列布局,代码如下: 布局文件: <RelativeLayout xmlns:android="http:/

安卓(android)仿电商app商品详情页按钮浮动效果

1.效果图如下: 这效果用户体验还是很酷炫,今天我们就来讲解如何实现这个效果. 2.分析 为了方便理解,作图分析 如图所示,整个页面分为四个部分: 1.悬浮内容,floatView 2.顶部内容,headView 3.中间内容,与悬浮内容相同,middleView 4.商品详情展示页面,detailView 因为页面内容高度会超出屏幕,所以用Scrollview实现滚动,悬浮view与scrollview同级,都在一个帧布局或者相对布局中. 当y方向的滚动距离小于中间的内容middleView到

Android 仿淘宝商品属性标签页

需求 1.动态加载属性,如尺码,颜色,款式等 由于每件商品的属性是不确定的,有的商品的属性是颜色和尺码,有的是口味,有的是大小,所以这些属性不能直接写死到页面上. 2.动态加载属性下的标签 每个属性下的标签个数也不是一定的,比如有的商品的尺码是是S,M,XL,有的是均码,也就是每种属性的具体的内容是不一定的. 技术点 自定义ViewGroup,使其中的TextView可以依据内容长短自动换行,如下图所示 实现 布局 通过ListView来显示商品所有属性,每种属性作为ListView的Item.

Android仿淘宝商品浏览界面图片滚动效果

用手机淘宝浏览商品详情时,商品图片是放在后面的,在第一个ScrollView滚动到最底下时会有提示,继续拖动才能浏览图片.仿照这个效果写一个出来并不难,只要定义一个Layout管理两个ScrollView就行了,当第一个ScrollView滑到底部时,再次向上滑动进入第二个ScrollView.效果如下: 需要注意的地方是: 1.如果是手动滑到底部需要再次按下才能继续往下滑,自动滚动到底部则不需要 2.在由上一个ScrollView滑动到下一个ScrollView的过程中多只手指相继拖动也不会导

Android把商品添加到购物车的动画效果(贝塞尔曲线)

当我们写商城类的项目的时候,一般都会有加入购物车的功能,加入购物车的时候会有一些抛物线动画,具体代码如下: 实现效果如图: 思路: 确定动画的起终点 在起终点之间使用二次贝塞尔曲线填充起终点之间的点的轨迹 设置属性动画,ValueAnimator插值器,获取中间点的坐标 将执行动画的控件的x.y坐标设为上面得到的中间点坐标 开启属性动画 当动画结束时的操作 难点: PathMeasure的使用 - getLength() - boolean getPosTan(float distance, f

Android仿美团下拉菜单(商品选购)实例代码

美团电商应用平台大家使用非常频繁,下面小编通过本文给大家介绍电商应用平台中常用的选择类别下拉列表的实现.先给大家展示下效果图: 一.下拉列表的实现 其实实现方法有很多,这时实现的也没有什么技术含量,只是总结下自己在项目中的做法,也提供一个思路. 首先是列表的数据,一般数据都是从后台读过来,这里因为没有后台,所以写死在客户端: private void initMenuData() { menuData = new ArrayList<map<string, string=""

React Native仿美团下拉菜单的实例代码

本文介绍了React Native仿美团下拉菜单的实例代码,最近也在学习React Native,顺便分享给大家 在很多产品中都会涉及到下拉菜单选择功能,用的最好的当属美团了,其效果如下: 要实现上面的效果,在原生中比较好做,直接使用PopWindow组件即可.如果使用React Native开发上面的效果,需要注意几个问题: 1. 在下拉的时候有动画过度效果: 2.下拉菜单出现后点击菜单项,菜单项可选择,并触发对应的事件: 3.下拉菜单中的项目可以配置: 要实现弹框效果,我们马上回想到使用Mo

微信小程序下拉菜单效果的实例代码

//wcss /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; float: left; /*hack*/ width: 33%; height: 38px; border-right: 1px solid #d2d2d2; border-bottom: 1px solid #d2d2d2; te

Layui tree 下拉菜单树的实例代码

1.效果: 2.html 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" cont

iOS使用自带的UIViewController实现qq加号下拉菜单的功能(实例代码)

创建PopViewControlller 在tableview中创建一个tableview用于显示菜单 //重置控制器的大小 -(CGSize)preferredContentSize{ if (self.popoverPresentationController != nil) { CGSize tempSize ; tempSize.height = self.view.frame.size.height; tempSize.width = 150; CGSize size = [_tabl

Android实现美团下拉功能

本文实例为大家分享了Android实现美团下拉功能的具体代码,供大家参考,具体内容如下 效果图 实现 布局文件: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" a

jquery 无限极下拉菜单的简单实例(精简浓缩版)

jquery 无限极下拉菜单的简单实例(精简浓缩版) <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>我们 www.jb51.net</title> <script type=&quo

jquery带下拉菜单和焦点图代码分享

jquery带下拉菜单和焦点图是一款顶部通栏带二级下拉菜单和banner导航菜单代码.感兴趣的朋友快来学习学习吧 运行效果图:                           ----------------------查看效果 下载源码----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery带下拉菜单和焦点图如下 <head> <meta http-equiv="Content-Type"

Android 仿今日头条简单的刷新效果实例代码

点击按钮,先自动进行下拉刷新,也可以手动刷新,刷新完后,最后就多一行数据.有四个选项卡. 前两天导师要求做一个给本科学生预定机房座位的app,出发点来自这里.做着做着遇到很多问题,都解决了.这个效果感觉还不错,整理一下. MainActivity package com.example.fragmentmytest; import android.content.DialogInterface; import android.graphics.Color; import android.os.B

Android界面上拉下拉的回弹效果实例代码

废话不多说,具体代码如下所示: public class MyScrollView extends ScrollView { private View childView; public MyScrollView(Context context) { super(context); } public MyScrollView(Context context, AttributeSet attrs) { super(context, attrs); } public MyScrollView(Co