当前位置： 移动技术网 > 移动技术>移动开发>Android > Android 仿淘宝商品属性标签页

Android 仿淘宝商品属性标签页

2019年07月24日  | 移动技术网移动技术  | 我要评论

这里写图片描述

需求

1.动态加载属性，如尺码，颜色，款式等

　　由于每件商品的属性是不确定的，有的商品的属性是颜色和尺码，有的是口味，有的是大小，所以这些属性不能直接写死到页面上。

2.动态加载属性下的标签

　　每个属性下的标签个数也不是一定的，比如有的商品的尺码是是s,m,xl，有的是均码，也就是每种属性的具体的内容是不一定的。

技术点

自定义viewgroup，使其中的textview可以依据内容长短自动换行，如下图所示

这里写图片描述

实现

布局

通过listview来显示商品所有属性，每种属性作为listview的item。

<span style="font-family: arial, verdana, sans-serif;">自定义viewgroup</span>

普通的linearlayout只能横向和纵向显示控件，但是当一行显示不够时，无法自动换行，需要我们自定义布局容器。

<code class="hljs java">package jczb.shoping.common;
import android.content.context;
import android.util.attributeset;
import android.util.log;
import android.view.view;
import android.view.viewgroup;
public class myviewgroup extends viewgroup {
  private final static int view_margin=15;
  public myviewgroup(context context, attributeset attrs){
   super(context, attrs);
  }
  public myviewgroup(context context) {
   super(context);
  }
  @override
  protected void onmeasure(int widthmeasurespec, int heightmeasurespec) {
  int stages = 1;
  int stageheight = 0;
  int stagewidth = 0;
  int wholewidth = measurespec.getsize(widthmeasurespec);
  for (int i = 0; i < getchildcount(); i++) {
   final view child = getchildat(i);
   // measure
   measurechild(child, widthmeasurespec, heightmeasurespec);
   stagewidth += (child.getmeasuredwidth() + view_margin);
   stageheight = child.getmeasuredheight();
   if (stagewidth >= wholewidth) {
    stages++;
    //reset stagewidth
    stagewidth = child.getmeasuredwidth();
   }
  }
  int wholeheight = (stageheight + view_margin) * stages;
  // report this final dimension
  setmeasureddimension(resolvesize(wholewidth, widthmeasurespec),
    resolvesize(wholeheight, heightmeasurespec));
  }
  private int jiange = 10;//按钮之间的间隔
  @override
  protected void onlayout(boolean arg0, int arg1, int arg2, int arg3, int arg4) {
   final int count = getchildcount();
   int row=0;// which row lay you view relative to parent
   int lengthx=arg1 ; // right position of child relative to parent
   int lengthy=arg2; // bottom position of child relative to parent
   for(int i=0;i<count;i++){ final="" view="" child="this.getchildat(i);" int="" width="child.getmeasuredwidth();" height="child.getmeasuredheight();" if(i="=" 0){="" lengthx+="width+view_margin;//第一个的时候不需要加" }else{="" +jiange;="" 按钮之间的间隔="" }="" lengthy="row*(height+view_margin)+view_margin+height+arg2;" if="" it="" can't="" drawing="" on="" a="" same="" line="" ,="" skip="" to="" next="" if(lengthx="">arg3){
     lengthx=width+view_margin+arg1;
     row++;
     lengthy=row*(height+view_margin)+view_margin+height+arg2;
    }
    child.layout(lengthx-width, lengthy-height, lengthx, lengthy);
   }
  }
}
</code>

listview的adapter

<code class="hljs java">package jczb.shoping.adapter;
import java.util.arraylist;
import java.util.hashmap;
import jczb.shoping.common.myviewgroup;
import jczb.shoping.ui.r;
import android.content.context;
import android.graphics.color;
import android.graphics.drawable.drawable;
import android.os.handler;
import android.view.layoutinflater;
import android.view.view;
import android.view.view.onclicklistener;
import android.view.viewgroup;
import android.widget.baseadapter;
import android.widget.button;
import android.widget.linearlayout;
import android.widget.linearlayout.layoutparams;
import android.widget.tablelayout;
import android.widget.textview;
public class propertyadapter extends baseadapter {
 private context mcontext;
 private arraylist<hashmap<string,object>> mlist;
 private arraylist<hashmap<string,textview[]>> mviewlist;
 private drawable drawablenormal ;
 private drawable drawablepressed;
 private handler mhandler;
 //用于保存用户的属性集合
 private hashmap<string,string> selectpromap=new hashmap<string, string="">();
 /**
  * 返回选中的属性
  * @return
  */
 public hashmap<string, string=""> getselectpromap() {
  return selectpromap;
 }
 public void setselectpromap(hashmap<string, string=""> selectpromap) {
  this.selectpromap = selectpromap;
 }
 public propertyadapter(handler handler,context context,arraylist<hashmap<string,object>> list){
  super();
  this.mhandler=handler;
  this.mcontext=context;
  this.mlist=list;
  mviewlist=new arraylist<hashmap<string,textview[]>>();
  drawablenormal=mcontext.getresources().getdrawable(r.drawable.tv_property_label);
 }
 @override
 public int getcount() {
  // todo auto-generated method stub
  return mlist.size();
 }
 @override
 public object getitem(int position) {
  // todo auto-generated method stub
  return mlist.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) {
  viewholder holder = null;
  if (convertview == null) {
   // 获取list_item布局文件的视图
   convertview = layoutinflater.from(this.mcontext).inflate(r.layout.lv_property_item, null,true);
   holder = new viewholder();
   // 获取控件对象
   holder.tvpropname= (textview) convertview
     .findviewbyid(r.id.tv_property_name);
   //holder.llpropcontents=(linearlayout)convertview.findviewbyid(r.id.ll_property_content);
   //holder.tlpropcontents=(tablelayout)convertview.findviewbyid(r.id.ll_property_content);
   // 设置控件集到convertview
   holder.vgpropcontents= (myviewgroup) convertview.findviewbyid(r.id.myviewgroup);
   convertview.settag(holder);
  } else {
   holder = (viewholder) convertview.gettag();
  }
  if (this.mlist != null) {
   //hashmap<string,textview[]> mapview=new hashmap<string,>();
   arraylist<string> lables = (arraylist<string>) this.mlist.get(position).get("lable");
   string type = (string) this.mlist.get(position).get(
     "type");
   holder.tvpropname.settext(type);//规格名称
   //动态加载标签
   //判断布局中的子控件是否为0，如果不为0，就不添加了，防止listview滚动时重复添加
   if(holder.vgpropcontents.getchildcount()==0){
    textview[] textviews = new textview[lables.size()];
    //设置每个标签的文本和布局
    //tablerow tr=new tablerow(mcontext);
     for (int i = 0; i < lables.size(); i++) {
      textview textview = new textview(mcontext);      textview.setgravity(17);
      textview.setpadding(25,15,25,15);    
      textviews[i] = textview;
      textviews[i].setbackgroundresource(r.drawable.tv_property_label);
      textviews[i].settext(lables.get(i));
      textviews[i].settag(i);
      //textviews[i].setbackgroundcolor(color.parsecolor("#ee5500"));
      //tr.addview(textviews[i]);
     // holder.llpropcontents.addview(textviews[i]);
      holder.vgpropcontents.addview(textviews[i]);
     }
     //holder.tlpropcontents.addview(tr);
     //绑定标签的click事件
     for(int j=0;j<textviews.length;j++){ string="" void="" viewholder="" view="" v="(textview)" tv="(textview)v;" this.type="type;" textviews="(textview[])v.gettag();" textview="" tablelayout="" return="" public="" private="" override="" new="" myviewgroup="" linearlayout="" lableclicklistener="" int="" implements="" i="0;i<textviews.length;i++){" h="0;h<holder.vgpropcontents.getchildcount();h++){" code=""></textviews.length;j++){></string></string></string,></string,textview[]></hashmap<string,textview[]></hashmap<string,object></string,></string,></string,></string,string></hashmap<string,textview[]></hashmap<string,object></code>

总结

　　这里关键就是实现自定义的viewgroup，重写onmeasure和onlayout方法，判断新添加的控件有没有超出屏幕的宽度来决定是否要换行。

以上所述是小编给大家介绍的android 仿淘宝商品属性标签页，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网