效果圖：

點選規格根據返回的json數組裡面作比較，然後代理顏色變化 ，需求就是有代理資格的話，代理這顯示進貨按鈕，諮詢代理商顯示的是價格，沒代理資格的情況顯示代理，及諮詢代理商。這是個去年寫過的需求，去年的加入購物車選規格，類似天貓，今年需求變化，修改選取規格加入購物車類似京東。需求訂了，那就改唄

佈局還是一個RecycleView，item是flowlayout+textview

<?xml version="1.0" encoding="utf-8"?>
<com.zhy.autolayout.AutoRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <com.zhy.autolayout.AutoRelativeLayout
        android:id="@+id/relative"
        android:layout_width="match_parent"
        android:layout_height="885px"
        android:layout_alignParentBottom="true"
        android:background="@color/white">
        <!--headIcon-->
        <com.zhy.autolayout.AutoRelativeLayout
            android:id="@+id/relative_head_icon"
            android:layout_width="200px"
            android:layout_height="200px"
            android:layout_marginBottom="40px"
            android:layout_marginLeft="40px"
            android:padding="10px">

            <!--<ImageView-->
            <!--android:id="@+id/iv_user_header"-->
            <!--android:layout_width="200px"-->
            <!--android:layout_height="200px"-->
            <!--android:src="@drawable/default_head_icon"-->
            <!---->
            <!-- />-->
        </com.zhy.autolayout.AutoRelativeLayout>

        <TextView
            android:id="@+id/tv_price"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="40px"
            android:layout_marginTop="30px"
            android:layout_toRightOf="@+id/relative_head_icon"
            android:text="￥799"
            android:textColor="#ffe66363" />

        <ImageView
            android:id="@+id/iv_close"
            android:layout_width="40px"
            android:layout_height="40px"
            android:layout_alignParentRight="true"
            android:layout_gravity="center_horizontal"
            android:layout_marginRight="40px"
            android:layout_marginTop="15px"
            android:src="@drawable/close" />

        <TextView
            android:id="@+id/tv_goods_count"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/tv_price"
            android:layout_below="@+id/tv_price"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="10px"
            android:gravity="center"
            android:text=""
            android:textColor="#ff9b9b9b"
            android:textSize="10sp" />

        <TextView
            android:id="@+id/tv_select"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/tv_price"
            android:layout_below="@+id/tv_goods_count"
            android:layout_marginTop="10px"
            android:ellipsize="end"
            android:maxEms="18"
            android:singleLine="true"
            android:text="選擇 套餐型別 顏色分類"
            android:textColor="@color/black"
            android:textSize="26px" />

        <View
            android:id="@+id/view"
            android:layout_width="match_parent"
            android:layout_height="1px"
            android:layout_alignLeft="@+id/relative_head_icon"
            android:layout_below="@+id/relative_head_icon"
            android:background="#E2E2E2" />

        <ScrollView
            android:id="@+id/sc"
            android:layout_width="match_parent"
            android:layout_height="550px"
            android:layout_below="@+id/view"
            android:scrollbars="none">

            <com.zhy.autolayout.AutoLinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">


                <android.support.v7.widget.RecyclerView
                    android:id="@+id/gr_type"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignLeft="@+id/relative_head_icon"
                    android:layout_marginTop="20px" />

                <com.zhy.autolayout.AutoRelativeLayout
                    android:id="@+id/rl"
                    android:layout_width="match_parent"
                    android:layout_height="80px"
                    android:layout_above="@+id/view2"
                    android:layout_marginTop="15px"
                    android:background="@color/white">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerVertical="true"
                        android:layout_marginLeft="40px"
                        android:text="數量"
                        android:textColor="#4a4a4a" />

                    <TextView
                        android:id="@+id/tv_add"
                        android:layout_width="50px"
                        android:layout_height="50px"
                        android:layout_alignParentRight="true"
                        android:layout_centerVertical="true"
                        android:layout_marginRight="36px"
                        android:background="@drawable/tv_add_bg"
                        android:gravity="center"
                        android:text="+"
                        android:textSize="46px" />

                    <EditText
                        android:id="@+id/et_gp_num"
                        android:layout_width="50px"
                        android:layout_height="50px"
                        android:layout_centerVertical="true"
                        android:layout_marginRight="20px"
                        android:layout_toLeftOf="@+id/tv_add"
                        android:background="@drawable/tv_add_bg"
                        android:cursorVisible="false"
                        android:gravity="center"
                        android:inputType="number"
                        android:text="1"
                        android:textSize="32px" />


                    <TextView
                        android:id="@+id/tv_jian"
                        android:layout_width="50px"
                        android:layout_height="50px"
                        android:layout_centerVertical="true"
                        android:layout_marginRight="20px"
                        android:layout_toLeftOf="@+id/et_gp_num"
                        android:background="@drawable/tv_add_bg"
                        android:gravity="center"
                        android:text="-"
                        android:textSize="46px" />

                </com.zhy.autolayout.AutoRelativeLayout>
            </com.zhy.autolayout.AutoLinearLayout>
        </ScrollView>

        <View
            android:id="@+id/view1"
            android:layout_width="match_parent"
            android:layout_height="1px"
            android:layout_alignLeft="@+id/relative_head_icon"
            android:layout_below="@+id/sc"
            android:background="#E2E2E2" />


        <View
            android:id="@+id/view2"
            android:layout_width="match_parent"
            android:layout_height="1px"
            android:layout_above="@+id/ll"
            android:background="#E2E2E2" />

        <com.zhy.autolayout.AutoLinearLayout
            android:id="@+id/ll"
            android:layout_width="match_parent"
            android:layout_height="90px"
            android:layout_alignParentBottom="true"
            android:orientation="horizontal">

            <com.zhy.autolayout.AutoRelativeLayout
                android:id="@+id/rl_cart"
                android:layout_width="200px"
                android:layout_height="match_parent"
                android:padding="5px">

                <ImageView
                    android:id="@+id/mall_purche"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:layout_marginTop="8px"
                    android:src="@drawable/mall_cart_gray" />

                <TextView
                    android:id="@+id/iv_red_count"
                    android:layout_width="28px"
                    android:layout_height="28px"
                    android:layout_toRightOf="@+id/mall_purche"
                    android:background="@drawable/shape_hint_bg"
                    android:gravity="center"
                    android:padding="2px"
                    android:text="99"
                    android:textColor="@color/white"
                    android:textSize="8sp"
                    android:visibility="gone" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/mall_purche"
                    android:layout_centerHorizontal="true"
                    android:layout_marginTop="5px"
                    android:text="購物車"
                    android:textColor="#ff4a4a4a"
                    android:textSize="10sp" />
            </com.zhy.autolayout.AutoRelativeLayout>

            <TextView
                android:id="@+id/tv_pay"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="#ffe66363"
                android:gravity="center"
                android:text="諮詢購買"
                android:textColor="@color/white"
                android:textSize="16sp" />


            <View
                android:layout_width="1px"
                android:layout_height="match_parent"
                android:background="#E2E2E2" />

            <TextView
                android:id="@+id/tv_add_cart"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="#FDD223"
                android:gravity="center"
                android:text="代理"
                android:textColor="@color/white"
                android:textSize="16sp" />

        </com.zhy.autolayout.AutoLinearLayout>
    </com.zhy.autolayout.AutoRelativeLayout>

    <ImageView
        android:id="@+id/iv_user_header"
        android:layout_width="200px"
        android:layout_height="200px"
        android:layout_above="@id/relative"
        android:layout_marginBottom="-150px"
        android:layout_marginLeft="40px"
        android:src="@drawable/accountdefault" />
</com.zhy.autolayout.AutoRelativeLayout>
 

佈局檔案已經貼上。請自行檢視。

下面稍微複雜的就是選取規格，並進行拼接，比較，下面控制元件顏色顯示

下面貼一下實現程式碼：程式碼看起來稍微複雜一些，後面再優化：

 try {
                final ViewHolder viewHolder = (ViewHolder) holder;
                viewHolder.mTvTopic.setText(strKey.get(position));
                if (strName.size() != 0) {
                    strName.clear();
                }

                listModel = new ArrayList<>();
                for (int i = 0; i < mallProBean.getJSONArray(strKey.get(position)).length(); i++) {
                    listModel.add(mallProBean.getJSONArray(strKey.get(position)).get(i).toString());
                }

                for(int i=0;i<array.length();i++){
                    JSONObject object = array.getJSONObject(i);
                    strAll = "";
                    for(int j=0;j<strKey.size();j++){
                        if (strAll.equals("")) {
                            strAll = object.getString(strKey.get(j)) + "_";
                        } else {
                            strAll = strAll  + object.getString(strKey.get(j))+"_";
                        }
                        mapAll.put(strAll,object.getString("skuId"));
                    }
                }

                for (int i = 0; i < listModel.size(); i++) {
                    final TextView textView = new TextView(context);
                    textView.setText(listModel.get(i));

                    if (listModel.get(i).equals(mapSelected.get(strKey.get(position)).toString())) {
                        textView.setTextColor(Color.WHITE);
                        textView.setBackgroundResource(R.drawable.round_rectangle_bg1);
                        textView.setTag(true);
                         strName.put(strKey.get(position), listModel.get(i));

                    } else {
                        textView.setTextColor(Color.parseColor("#4A4A4A"));
                        textView.setBackgroundResource(R.drawable.round_rectangle_bg2);
                        textView.setTag(false);
                    }
                    mapId.put(textView, (Boolean) textView.getTag());
                        for(int j=0;j<strKey.size();j++){
                            for(String key:mapSelected.keySet()){
                            if(strKey.get(j).equals(key)){
                                Model_Value.put(key, mapSelected.get(key));
                            }
                        }
                    }

                    for (String key : Model_Value.keySet()) {
                        value = Model_Value.get(key);
                        if (!TextUtils.isEmpty(value)) {
                            if (type.equals("")) {
                                type = value + "_";
                            } else {
                                type = type + value + "_";
                            }
                        }
                    }

                    for(String key :mapAll.keySet()) {
                        if (key.equals(type)) {
                            Log.e("JSONArray12", mapAll.get(key));
                            proId = mapAll.get(key);                 
                        } else {
                        }
                    }
                    ViewGroup.MarginLayoutParams marginLayoutParams = new ViewGroup.MarginLayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
                    marginLayoutParams.topMargin = 20;
                    marginLayoutParams.rightMargin = 20;
                    textView.setLayoutParams(marginLayoutParams);
                    textView.setTextSize(10);
                    textView.setPadding(25, 15, 25, 15);
                    attributeListMap.put(listModel.get(i), textView);


                    textView.setOnClickListener(new View.OnClickListener() {
                        @Override
                        public void onClick(View v) {
                            int finalI = 0;
                            boolean flag1 = (boolean) textView.getTag();
                            for (String key : mapStyle.keySet()) {
                                JSONArray array1 = null;
                                try {
                                    array1 = mapStyle.get(key).getJSONArray(key);

                                    if(strKey.get(position).equals(key)){
                                        listModel.clear();
                                        for (int i = 0; i < array1.length(); i++) {
                                            listModel.add(array1.get(i).toString());
                                        }
                                    }
                                } catch (JSONException e) {
                                    e.printStackTrace();
                                }
                            }
                            Log.e("flag1", flag1 + "");

                            if (flag1) {
                                textView.setTag(false);
                                textView.setTextColor(Color.parseColor("#4A4A4A"));
                                textView.setBackgroundResource(R.drawable.round_rectangle_bg2);
                                Model_Value.put(strKey.get(position), "");
                                strName.put(strKey.get(position), "");
                                mapSelected.put(strKey.get(position), "");
                                mapId.put(textView,flag1);

                            } else {
                                boolean flag = (boolean) textView.getTag();
                                textView.setTag(!flag);
                                if (!flag) {
                                    for (int i = 0; i < listModel.size(); i++) {
//                                        Log.e("JSONArray8", listModel.get(i));
                                        for(TextView str : mapId.keySet()){
                                            if(listModel.get(i).equals(str.getText().toString())){
                                                if(mapId.get(str)){
                                                    str.setTag(false);
                                                    str.setTextColor(Color.parseColor("#4A4A4A"));
                                                    str.setBackgroundResource(R.drawable.round_rectangle_bg2);
                                                    mapId.put(str,false);
                                                }
                                            }
                                        }
                                    }
                                    Log.e("flag1??", flag1 + "");
                                    textView.setTextColor(Color.WHITE);
                                    textView.setBackgroundResource(R.drawable.round_rectangle_bg1);
                                    mapSelected.put(strKey.get(position), textView.getText().toString());
                                    mapId.put(textView, !flag);
                                    strName.put(strKey.get(position), textView.getText().toString());
                                    Model_Value.put(strKey.get(position), textView.getText().toString());
                                } else {
                                    textView.setTextColor(Color.parseColor("#4A4A4A"));
                                    textView.setBackgroundResource(R.drawable.round_rectangle_bg2);
                                }
                            }

                            type = "";
                            typeName = "";
                            str = "";
                            for (String key : Model_Value.keySet()) {
                                value = Model_Value.get(key);
                                if (!TextUtils.isEmpty(value)) {
                                    if (type.equals("")) {
                                        type = value + "_";
                                    } else {
                                        type = type + value + "_";
                                    }
                                }
                            }
                            for (String key : strName.keySet()) {
                                typeName = strName.get(key);
                                if (str.equals("")) {
                                    str = typeName + "";
                                } else {
                                    str = str + " " + typeName;
                                }


                            }
                            mTvSelect.setText("選擇 " + str);
                            Log.e("TAGresponse=", str + "  type " + type);
                            try {

                                for(String key :mapAll.keySet()){
                                    if(key.equals(type)){
                                         proId = mapAll.get(key);
                                        getGoodPrice( mFromMember_ID, Pro_InfoId, shopInfoId);

                                    }else{
                                        mTvAddCart.setBackgroundColor(Color.parseColor("#9B9B9B"));
                                    }
                                }
                            } catch (Exception e) {
                                e.printStackTrace();
                            }


                        }
                    });
                    viewHolder.flowLayout.addView(textView);
                }

            } catch (JSONException e) {
                e.printStackTrace();
            }
 

 主要是recycleview裡面實現的程式碼邏輯，後續會有一個小demo供參考，未完待續。。。。