Android實(shí)現(xiàn)多維商品屬性SKU選擇
前言:
最近又做到這一塊的需求,以前也做過(guò)類(lèi)似仿淘寶的屬性選擇,當(dāng)時(shí)在網(wǎng)上下載的demo參考,最多也支持兩組商品屬性,用的兩個(gè)gridview結(jié)合,擴(kuò)展性很差,這次不打算用之前的代碼,所以重新自己寫(xiě)了一個(gè)demo**(文末附上項(xiàng)目地址)**

如圖所示,界面UI這一塊肯定不用gridview,那樣太過(guò)繁瑣,所以采用recyclerview,item里面渲染ViewGroup,根據(jù)數(shù)據(jù)源的數(shù)量,往ViewGroup里面添加Textview。這樣就可以解決它的每個(gè)屬性按鈕寬高自適應(yīng)。
這里重點(diǎn)是重寫(xiě)ViewGroup里面的onMeasure和onLayout方法:
/**
* 測(cè)量子view大小 根據(jù)子控件設(shè)置寬和高
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
// 獲得它的父容器為它設(shè)置的測(cè)量模式和大小
int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
int modeWidth = MeasureSpec.getMode(widthMeasureSpec);
int modeHeight = MeasureSpec.getMode(heightMeasureSpec);
// 如果是warp_content情況下,記錄寬和高
int width = 0;
int height = 0;
/**
* 記錄每一行的寬度,width不斷取最大寬度
*/
int lineWidth = 0;
/**
* 每一行的高度,累加至height
*/
int lineHeight = 0;
int cCount = getChildCount();
// 遍歷每個(gè)子元素
for (int i = 0; i < cCount; i++)
{
View child = getChildAt(i);
// 測(cè)量每一個(gè)child的寬和高
measureChild(child, widthMeasureSpec, heightMeasureSpec);
// 得到child的布局管理器
MarginLayoutParams lp = (MarginLayoutParams) child
.getLayoutParams();
// 當(dāng)前子空間實(shí)際占據(jù)的寬度
int childWidth = child.getMeasuredWidth() + lp.leftMargin
+ lp.rightMargin;
// 當(dāng)前子空間實(shí)際占據(jù)的高度
int childHeight = child.getMeasuredHeight() + lp.topMargin
+ lp.bottomMargin;
/**
* 如果加入當(dāng)前child,則超出最大寬度,則的到目前最大寬度給width,類(lèi)加height 然后開(kāi)啟新行
*/
if (lineWidth + childWidth > sizeWidth)
{
width = Math.max(lineWidth, childWidth);// 取最大的
lineWidth = childWidth; // 重新開(kāi)啟新行,開(kāi)始記錄
// 疊加當(dāng)前高度,
height += lineHeight;
// 開(kāi)啟記錄下一行的高度
lineHeight = childHeight;
} else
// 否則累加值lineWidth,lineHeight取最大高度
{
lineWidth += childWidth;
lineHeight = Math.max(lineHeight, childHeight);
}
// 如果是最后一個(gè),則將當(dāng)前記錄的最大寬度和當(dāng)前l(fā)ineWidth做比較
if (i == cCount - 1)
{
width = Math.max(width, lineWidth);
height += lineHeight;
}
}
setMeasuredDimension((modeWidth == MeasureSpec.EXACTLY) ? sizeWidth
: width, (modeHeight == MeasureSpec.EXACTLY) ? sizeHeight
: height);
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b)
{
mAllViews.clear();
mLineHeight.clear();
int width = getWidth();
int lineWidth = 0;
int lineHeight = 0;
// 存儲(chǔ)每一行所有的childView
List<View> lineViews = new ArrayList<>();
int cCount = getChildCount();
// 遍歷所有的孩子
for (int i = 0; i < cCount; i++)
{
View child = getChildAt(i);
MarginLayoutParams lp = (MarginLayoutParams) child
.getLayoutParams();
int childWidth = child.getMeasuredWidth();
int childHeight = child.getMeasuredHeight();
// 如果已經(jīng)需要換行
if (childWidth + lp.leftMargin + lp.rightMargin + lineWidth > width)
{
// 記錄這一行所有的View以及最大高度
mLineHeight.add(lineHeight);
// 將當(dāng)前行的childView保存,然后開(kāi)啟新的ArrayList保存下一行的childView
mAllViews.add(lineViews);
lineWidth = 0;// 重置行寬
lineViews = new ArrayList<>();
}
/**
* 如果不需要換行,則累加
*/
lineWidth += childWidth + lp.leftMargin + lp.rightMargin;
lineHeight = Math.max(lineHeight, childHeight + lp.topMargin
+ lp.bottomMargin);
lineViews.add(child);
}
// 記錄最后一行
mLineHeight.add(lineHeight);
mAllViews.add(lineViews);
int left = 0;
int top = 0;
// 得到總行數(shù)
int lineNums = mAllViews.size();
for (int i = 0; i < lineNums; i++)
{
// 每一行的所有的views
lineViews = mAllViews.get(i);
// 當(dāng)前行的最大高度
lineHeight = mLineHeight.get(i);
// 遍歷當(dāng)前行所有的View
for (int j = 0; j < lineViews.size(); j++)
{
View child = lineViews.get(j);
if (child.getVisibility() == View.GONE)
{
continue;
}
MarginLayoutParams lp = (MarginLayoutParams) child
.getLayoutParams();
//計(jì)算childView的Marginleft,top,right,bottom
int lc = left + lp.leftMargin;
int tc = top + lp.topMargin;
int rc =lc + child.getMeasuredWidth();
int bc = tc + child.getMeasuredHeight();
child.layout(lc, tc, rc, bc);
left += child.getMeasuredWidth() + lp.rightMargin
+ lp.leftMargin;
}
left = 0;
top += lineHeight;
}
}
接下來(lái)是SKU的算法,因?yàn)楸救说膶W(xué)生時(shí)期數(shù)學(xué)沒(méi)有好好學(xué)習(xí),冪集什么的,都不是很懂。所以在這里用了另外一種方法,把選項(xiàng)狀態(tài)(三種:不能選擇,可以選擇,已選中)依次對(duì)屬性按鈕做出修改,這里雖然做了一些不必要的循環(huán)判斷,但勝在功能的實(shí)現(xiàn),如果大家有更好的想法,望不吝賜教。
貼上adapter代碼(重點(diǎn)initOptions、canClickOptions和getSelected三個(gè)方法)
/**
* Created by 胡逸楓 on 2017/1/16.
*/
public class GoodsAttrsAdapter extends BaseRecyclerAdapter<GoodsAttrsBean.AttributesBean> {
private SKUInterface myInterface;
private SimpleArrayMap<Integer, String> saveClick;
private List<GoodsAttrsBean.StockGoodsBean> stockGoodsList;//商品數(shù)據(jù)集合
private String[] selectedValue; //選中的屬性
private TextView[][] childrenViews; //二維 裝所有屬性
private final int SELECTED = 0x100;
private final int CANCEL = 0x101;
public GoodsAttrsAdapter(Context ctx, List<GoodsAttrsBean.AttributesBean> list, List<GoodsAttrsBean.StockGoodsBean> stockGoodsList) {
super(ctx, list);
this.stockGoodsList = stockGoodsList;
saveClick = new SimpleArrayMap<>();
childrenViews = new TextView[list.size()][0];
selectedValue = new String[list.size()];
for (int i = 0; i < list.size(); i++) {
selectedValue[i] = "";
}
}
public void setSKUInterface(SKUInterface myInterface) {
this.myInterface = myInterface;
}
@Override
public int getItemLayoutId(int viewType) {
return R.layout.item_skuattrs;
}
@Override
public void bindData(RecyclerViewHolder holder, int position, GoodsAttrsBean.AttributesBean item) {
TextView tv_ItemName = holder.getTextView(R.id.tv_ItemName);
SKUViewGroup vg_skuItem = (SKUViewGroup) holder.getView(R.id.vg_skuItem);
tv_ItemName.setText(item.getTabName());
List<String> childrens = item.getAttributesItem();
int childrenSize = childrens.size();
TextView[] textViews = new TextView[childrenSize];
for (int i = 0; i < childrenSize; i++) {
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
params.setMargins(5, 5, 5, 0);
TextView textView = new TextView(mContext);
textView.setGravity(Gravity.CENTER);
textView.setPadding(15, 5, 15, 5);
textView.setLayoutParams(params);
textView.setBackgroundColor(ContextCompat.getColor(mContext, R.color.saddlebrown));
textView.setText(childrens.get(i));
textView.setTextColor(ContextCompat.getColor(mContext, R.color.white));
textViews[i] = textView;
vg_skuItem.addView(textViews[i]);
}
childrenViews[position] = textViews;
initOptions();
canClickOptions();
getSelected();
}
private int focusPositionG, focusPositionC;
private class MyOnClickListener implements View.OnClickListener {
//點(diǎn)擊操作 選中SELECTED 取消CANCEL
private int operation;
private int positionG;
private int positionC;
public MyOnClickListener(int operation, int positionG, int positionC) {
this.operation = operation;
this.positionG = positionG;
this.positionC = positionC;
}
@Override
public void onClick(View v) {
focusPositionG = positionG;
focusPositionC = positionC;
String value = childrenViews[positionG][positionC].getText().toString();
switch (operation) {
case SELECTED:
saveClick.put(positionG, positionC + "");
selectedValue[positionG] = value;
myInterface.selectedAttribute(selectedValue);
break;
case CANCEL:
saveClick.put(positionG, "");
for (int l = 0; l < selectedValue.length; l++) {
if (selectedValue[l].equals(value)) {
selectedValue[l] = "";
break;
}
}
myInterface.uncheckAttribute(selectedValue);
break;
}
initOptions();
canClickOptions();
getSelected();
}
}
class MyOnFocusChangeListener implements View.OnFocusChangeListener {
private int positionG;
private int positionC;
public MyOnFocusChangeListener(int positionG, int positionC) {
this.positionG = positionG;
this.positionC = positionC;
}
@Override
public void onFocusChange(View v, boolean hasFocus) {
String clickpositionC = saveClick.get(positionG);
if (hasFocus) {
v.setBackgroundColor(ContextCompat.getColor(mContext, R.color.pink));
if (TextUtils.isEmpty(clickpositionC)) {
((TextView) v).setTextColor(ContextCompat.getColor(mContext, R.color.dodgerblue));
} else if (clickpositionC.equals(positionC + "")) {
} else {
((TextView) v).setTextColor(ContextCompat.getColor(mContext, R.color.dodgerblue));
}
} else {
v.setBackgroundColor(ContextCompat.getColor(mContext, R.color.saddlebrown));
if (TextUtils.isEmpty(clickpositionC)) {
((TextView) v).setTextColor(ContextCompat.getColor(mContext, R.color.white));
} else if (clickpositionC.equals(positionC + "")) {
} else {
((TextView) v).setTextColor(ContextCompat.getColor(mContext, R.color.white));
}
}
}
}
/**
* 初始化選項(xiàng)(不可點(diǎn)擊,焦點(diǎn)消失)
*/
private void initOptions() {
for (int y = 0; y < childrenViews.length; y++) {
for (int z = 0; z < childrenViews[y].length; z++) {//循環(huán)所有屬性
TextView textView = childrenViews[y][z];
textView.setEnabled(false);
textView.setFocusable(false);
textView.setTextColor(ContextCompat.getColor(mContext, R.color.gray));//變灰
}
}
}
/**
* 找到符合條件的選項(xiàng)變?yōu)榭蛇x
*/
private void canClickOptions() {
for (int i = 0; i < childrenViews.length; i++) {
for (int j = 0; j < stockGoodsList.size(); j++) {
boolean filter = false;
List<GoodsAttrsBean.StockGoodsBean.GoodsInfoBean> goodsInfo = stockGoodsList.get(j).getGoodsInfo();
for (int k = 0; k < selectedValue.length; k++) {
if (i == k || TextUtils.isEmpty(selectedValue[k])) {
continue;
}
if (!selectedValue[k].equals(goodsInfo
.get(k).getTabValue())) {
filter = true;
break;
}
}
if (!filter) {
for (int n = 0; n < childrenViews[i].length; n++) {
TextView textView = childrenViews[i][n];//拿到所有屬性TextView
String name = textView.getText().toString();
//拿到屬性名稱(chēng)
if (goodsInfo.get(i).getTabValue().equals(name)) {
textView.setEnabled(true);//符合就變成可點(diǎn)擊
textView.setFocusable(true); //設(shè)置可以獲取焦點(diǎn)
//不要讓焦點(diǎn)亂跑
if (focusPositionG == i && focusPositionC == n) {
textView.setTextColor(ContextCompat.getColor(mContext, R.color.dodgerblue));
textView.requestFocus();
} else {
textView.setTextColor(ContextCompat.getColor(mContext, R.color.white));
}
textView.setOnClickListener(new MyOnClickListener(SELECTED, i, n) {
});
textView.setOnFocusChangeListener(new MyOnFocusChangeListener(i, n) {
});
}
}
}
}
}
}
/**
* 找到已經(jīng)選中的選項(xiàng),讓其變紅
*/
private void getSelected() {
for (int i = 0; i < childrenViews.length; i++) {
for (int j = 0; j < childrenViews[i].length; j++) {//拿到每行屬性Item
TextView textView = childrenViews[i][j];//拿到所有屬性TextView
String value = textView.getText().toString();
for (int m = 0; m < selectedValue.length; m++) {
if (selectedValue[m].equals(value)) {
textView.setTextColor(ContextCompat.getColor(mContext, R.color.red));
textView.setOnClickListener(new MyOnClickListener(CANCEL, i, j) {
});
}
}
}
}
}
}
下載鏈接:
GitHub:地址
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Flutter改變狀態(tài)變量是否必須寫(xiě)在setState回調(diào)詳解
這篇文章主要為大家介紹了Flutter改變狀態(tài)變量是否必須寫(xiě)在setState回調(diào)里的原理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11
Android自定義View圓形和拖動(dòng)圓跟隨手指拖動(dòng)
這篇文章主要介紹了Android自定義View圓形和拖動(dòng)圓跟隨手指拖動(dòng),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11
Android實(shí)現(xiàn)瘋狂連連看游戲之開(kāi)發(fā)游戲界面(二)
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)瘋狂連連看游戲之開(kāi)發(fā)游戲界面,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03
Flutter中顯示條件Widget的實(shí)現(xiàn)方式
在 Flutter 日常開(kāi)發(fā)中經(jīng)常會(huì)遇見(jiàn)這樣的需求,如: 只有用戶是 VIP 時(shí),才能展示某個(gè)入口或者某個(gè)模塊,這樣的需求在開(kāi)發(fā)業(yè)務(wù)需求中多如牛毛,那你是如何來(lái)優(yōu)雅的實(shí)現(xiàn)的呢,本文將給大家介紹Flutter中顯示條件Widget的實(shí)現(xiàn)方式,需要的朋友可以參考下2024-04-04
Android通過(guò)滑動(dòng)實(shí)現(xiàn)Activity跳轉(zhuǎn)(手勢(shì)識(shí)別器應(yīng)用)
這篇文章主要為大家詳細(xì)介紹了Android通過(guò)滑動(dòng)實(shí)現(xiàn)Activity跳轉(zhuǎn),,講解手勢(shì)識(shí)別器應(yīng)用,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05
淺談Android Activity與Service的交互方式
下面小編就為大家?guī)?lái)一篇淺談Android Activity與Service的交互方式。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
基于Flutter實(shí)現(xiàn)手勢(shì)密碼加密與解鎖功能
這篇文章主要介紹了如何利用Flutter實(shí)現(xiàn)手勢(shì)密碼的加密與解鎖,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04
從零開(kāi)始學(xué)android實(shí)現(xiàn)計(jì)算器功能示例分享(計(jì)算器源碼)
這篇文章主要介紹了android實(shí)現(xiàn)的計(jì)算器功能示例,可以加減乘除;可以倒退,可以清空文本,大家參考使用吧2014-02-02

