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 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,textModepadding,0);  } else {   vIEw.setpadding(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>这样呢？其实这里我是想做一个泛型，可以使用与button跟TextVIEw，而这里的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"?><@R_585_3419@ xmlns:androID="http://schemas.androID.com/apk/res/androID"> <item>  <shape>   <solID androID:color="#F5F5F5" />   <corners androID:radius="15.0dip" />  </shape> </item></@R_585_3419@>

2.goods_item_btn_selected.xml

<?xml version="1.0" enCoding="utf-8"?><@R_585_3419@ xmlns:androID="http://schemas.androID.com/apk/res/androID"> <item>  <shape>   <solID androID:color="#FE4F00" />   <corners androID:radius="15.0dip" />  </shape> </item></@R_585_3419@>

四、例子：

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实现淘宝选中商品不同尺寸的按钮组的全部内容了，如果本文有什么问题欢迎大家指出，大家共同进步！希望本文对大家的学习和工作能有所帮助哦~

总结

以上是内存溢出为你收集整理的Android实现淘宝选中商品尺寸的按钮组实例全部内容，希望文章能够帮你解决Android实现淘宝选中商品尺寸的按钮组实例所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。