【Android開發—電商系列】(二):仿淘寶商品屬性標籤頁
阿新 • • 發佈:2019-02-07
一睹為快
需求
1.動態載入屬性,如尺碼,顏色,款式等
由於每件商品的屬性是不確定的,有的商品的屬性是顏色和尺碼,有的是口味,有的是大小,所以這些屬性不能直接寫死到頁面上。
2.動態載入屬性下的標籤
每個屬性下的標籤個數也不是一定的,比如有的商品的尺碼是是S,M,XL,有的是均碼,也就是每種屬性的具體的內容是不一定的。
技術點
自定義ViewGroup,使其中的TextView可以依據內容長短自動換行,如下圖所示
實現
佈局
通過ListView來顯示商品所有屬性,每種屬性作為ListView的Item。
<!-- 商品規格列表 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFFFF"
>
<ListView
android:id="@+id/lv_property"
android:layout_width ="fill_parent"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:divider="#C0C0C0"
android:dividerHeight="0.5px"
android:listSelector="#00000000">
</ListView>
</LinearLayout>
自定義ViewGroup
普通的LinearLayout只能橫向和縱向顯示控制元件,但是當一行顯示不夠時,無法自動換行,需要我們自定義佈局容器。
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();
int height = child.getMeasuredHeight();
if(i == 0){
lengthX+=width+VIEW_MARGIN;//第一個的時候不需要加
}else{
lengthX+=width+VIEW_MARGIN +jiange;//按鈕之間的間隔
}
lengthY=row*(height+VIEW_MARGIN)+VIEW_MARGIN+height+arg2;
//if it can't drawing on a same line , skip to next line
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);
}
}
}
ListView的Adapter
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, TextView[]>();
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++){
textViews[j].setTag(textViews);
textViews[j].setOnClickListener(new LableClickListener(type));
}
//把控制元件存起來
// mapView.put(type, textViews);
// mViewList.add(mapView);
}
/**判斷之前是否已選中標籤*/
if(selectProMap.get(type)!=null){
for(int h=0;h<holder.vgPropContents.getChildCount();h++){
TextView v=(TextView) holder.vgPropContents.getChildAt(h);
if(selectProMap.get(type).equals(v.getText().toString())){
v.setBackgroundColor(Color.parseColor("#EE5500"));
v.setTextColor(Color.parseColor("#FFFFFF"));
selectProMap.put(type, v.getText().toString());
}
}
}
}
return convertView;
}
/*定義item物件*/
public class ViewHolder {
TextView tvPropName;
LinearLayout llPropContents;
MyViewGroup vgPropContents;
TableLayout tlPropContents;
}
class LableClickListener implements OnClickListener{
private String type;
public LableClickListener(String type){
this.type=type;
}
@Override
public void onClick(View v) {
TextView[] textViews=(TextView[])v.getTag();
TextView tv=(TextView)v;
for(int i=0;i<textViews.length;i++){
//讓點選的標籤背景變成橙色,字型顏色變為白色
if(tv.equals(textViews[i])){
textViews[i].setBackgroundColor(Color.parseColor("#EE5500"));
textViews[i].setTextColor(Color.parseColor("#FFFFFF"));
selectProMap.put(type, textViews[i].getText().toString());
}else{
//其他標籤背景變成白色,字型顏色為黑色
//textViews[i].setBackgroundDrawable(drawableNormal);
textViews[i].setBackgroundResource(R.drawable.tv_property_label);
textViews[i].setTextColor(Color.parseColor("#000000"));
}
}
}
}
}
總結
這裡關鍵就是實現自定義的ViewGroup,重寫onMeasure和onLayout方法,判斷新新增的控制元件有沒有超出螢幕的寬度來決定是否要換行。