Android to achieve Taobao selected product Size button Group Instance _android

Say not much, the first effect chart:

Now let's talk about some of the principles inside!

First, the principle:

1. In fact here we use a ViewGroup control group, add these buttons to have this effect! But here ViewGroup 's the inheritance (named: GoodsViewGroup ) to rewrite some of the methods inside.

2. The main methods are:

Control size of the Goodsviewgroup button group

protected void onmeasure (int widthmeasurespec, int heightmeasurespec)

The buttons inside each position coordinates

The specific use of these two methods you can access the information online, here is not much to say!

Second, code:

/** * Created by Shaolin on 2016/8/22. * Here is similar to Taobao Product size button group (here do support Button,textview)/public class Goodsviewgroup<x extends textview> extends ViewGroup {p Ublic static final String Btn_mode = "Btnmode"; Button mode public static final String Tev_mode = "Tevmode";
 Text mode private static final String TAG = "Iviewgroup"; Private final int horinterval = 10; Horizontal interval private final int verinterval = 10; Vertical spacing private int viewwidth; The width of the control is private int viewheight;
 The height of the control is private arraylist<string> mtexts = new arraylist<> ();
 Private context Mcontext;

 private int textmodepadding = 15;
 Normal style private float itemtextsize = 18;
 private int itembgresnor = R.drawable.goods_item_btn_normal;

 private int itemtextcolornor = Color.parsecolor ("#000000");
 Selected style private int itembgrespre = r.drawable.goods_item_btn_selected;

 private int itemtextcolorpre = Color.parsecolor ("#ffffff");
 Public Goodsviewgroup {This (context, NULL); } public GOODSVIEWGROUP (context, AttributeSet attrs) {Super (context, attrs);
 Mcontext = context; /** * Calculate the size of the control * * @Override protected void onmeasure (int widthmeasurespec, int heightmeasurespec) {Super.onmea
  Sure (Widthmeasurespec, heightmeasurespec);
  Viewwidth = Measurewidth (Widthmeasurespec);
  Viewheight = Measureheight (Heightmeasurespec);
  LOG.E (TAG, "onmeasure:" + viewwidth + ":" + viewheight);
  Calculates the size of all child controls in a custom ViewGroup Measurechildren (Widthmeasurespec, Heightmeasurespec);
 Sets the size of the custom control 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 has a total of three cases, values are measurespec.unspecified, measurespec.exactly, * measurespec.at_most. * * * measurespec.exactly is the exact size, * when we specify the control's Layout_width or Layout_height as a specific value such as Andorid *: LAYout_width= "50dip", or fill_parent is, is the case that the control size has been determined, is the exact size. * * * Measurespec.at_most is the maximum size, * when the control's layout_width or layout_height is specified as Wrap_content *, the size of the control is generally changed with the control's subspace or content. The size of the control can be * only if it does not exceed the maximum size allowed by the parent control.
    Therefore, the mode at this point is at_most,size gives the maximum size allowed by the parent control.
    * * * * measurespec.unspecified is not specified size, this situation is not much, generally is the parent control is Adapterview, * through the measure method of the mode passed in.
    * * 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; The purpose of the/** * onlayout is to specify the display position of the view, and the method is executed after onmeasure, since the view must be known only in the case of size, * to determine how to place the/@OverrIDE protected void OnLayout (Boolean changed, int l, int t, int r, int b) {//traverse all child views int posleft = Horinterval;
  int postop = Verinterval;
  int posright;
  int posbottom;
   for (int i = 0; i < Getchildcount (); i++) {View Childview = Getchildat (i);
   Gets the view dimensions computed in 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);
  }//Get the adaptive height of the control 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);
   Gets the view dimensions computed in 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) {ONGROUPITEMCL
     Icklistener.ongroupitemclick (Itempos);
    Chooseitemstyle (Itempos);
  }
   }); }//Select the style of that 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, Textmo
  depadding, 0);
  else {view.setpadding (textmodepadding, textmodepadding, textmodepadding, textmodepadding); }//Clear group all styles 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) {XChildview = 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;
 The public void Setitembgresnor (int itembgresnor) {this.itembgresnor = Itembgresnor;
 The public void Setitemtextcolornor (int itemtextcolornor) {this.itemtextcolornor = Itemtextcolornor;
 The public void setitembgrespre (int itembgrespre) {this.itembgrespre = Itembgrespre; }

 public void Setitemtextcolorpre (int itemtextcolorpre) {this.itemtextcolorpre = Itemtextcolorpre;
 public interface Ongroupitemclicklistener {void Ongroupitemclick (int item); }
}

There are some styles for setting the item for the button group, and why do GoodsViewGroup you want to write this GoodsViewGroup<X extends TextView> ? In fact, here I want to do a generic, you can use and Button follow TextView , and here is the inheritance of the Button native TextView so in the code to make a judgment, you can see the above method setItemPadding(X view) . When you get here, some friends may ask, why do you have to do two?

In fact, because there TextView is no automatic setting padding , but button there is automatic settings padding . This time you have to see you are the first to that effect! But through my code if it is a choice TextView , here also set a padding to him, otherwise it will be difficult to see!

Two modes of writing:

1.Button:

Goodsviewgroup<button> Mgroup;
Mgroup.additemviews (viewtexts, Goodsviewgroup.btn_mode);

2.TextView

Goodsviewgroup<textview> Mgroup;
Mgroup.additemviews (viewtexts, Goodsviewgroup.tev_mode);

Third, drawable file: The above mentioned button selected with the normal two 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>

Iv. Examples:

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 < 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 ("please select");
 } 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= "OK"
  android:layout_width= "match_parent"
  android:layout_height= "Wrap_content"/>

</LinearLayout>

Summarize

The above is about the realization of the Android Taobao selected items of different sizes of the button group of all content, if this article has any questions to welcome everyone to point out, we common progress! I hope this article for everyone's study and work can be helpful oh ~