Android仿淘宝添加商品时属性规格popupwindow

作者: 可以再长高10cm | 来源:发表于2017-08-23 13:45 被阅读1004次

Android仿淘宝添加商品时属性规格popupwindow
仿淘宝商品属性选择Android
JavaScript笛卡尔积超简单实现算法示例
质数在商品规格选择中的应用
做商城开发时一些收藏
商品规格（注：商品规格可添加多个或不添加）
AndroidView
Android 拍照或相册剪裁后取头像
商城中开发商品sku及其他汇总
ecshop商品属性仿淘宝选择功能

一、首先看一下实现效果

商品规格popupwindow

二、实现步骤

1、自定义标签。（详情请参照android自定义标签）

添加依赖：

在project的build.gradle添加以下代码：

 repositories {

               ...

               maven { url 'https://jitpack.io' }

               }

在module的build.gradle添加以下代码：

dependencies {

              compile 'com.github.donkingliang:LabelsView:1.2.0'

            }

2、Popupwindow的布局文件:popupwindow_goods_rule.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tag="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:id="@+id/pop_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <LinearLayout
            android:layout_marginTop="11dp"
            android:id="@+id/goodsRule_msgLinear"
            android:background="@color/backgroundWhite"
            android:paddingBottom="@dimen/toolbar_padLeft"
            android:paddingLeft="@dimen/toolbar_padLeft"
            android:paddingRight="@dimen/toolbar_padLeft"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_vertical">
            <ImageView
                android:visibility="invisible"
                android:layout_width="100dp"
                android:layout_height="100dp"/>

            <LinearLayout
                android:paddingLeft="@dimen/toolbar_padLeft"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="￥32"
                    android:textColor="@color/mainColor"
                    android:textSize="14sp"
                    android:textStyle="bold"/>
                <TextView
                    android:layout_marginTop="@dimen/toolbar_padLeft"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="库存 34"
                    android:textColor="@color/textColor06"
                    android:textSize="14sp"/>
                <TextView
                    android:layout_marginTop="@dimen/toolbar_padLeft"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="请选择规格"
                    android:textColor="@color/textColorBlack"
                    android:textSize="14sp"/>
            </LinearLayout>
        </LinearLayout>
        <RelativeLayout
            android:id="@+id/goodsRule_imgId"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
            <ImageView
                android:layout_marginLeft="@dimen/toolbar_padLeft"
                android:layout_width="100dp"
                android:layout_height="110dp"
                android:src="@mipmap/find_tuijian_ad"
                android:scaleType="centerCrop"/>
        </RelativeLayout>
    </RelativeLayout>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:background="@color/divide"/>
    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <LinearLayout
            android:background="@color/backgroundWhite"
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <TextView
                android:padding="@dimen/toolbar_padLeft"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="颜色"
                android:textSize="14.5sp"
                android:textColor="@color/textColor09"/>
            <com.donkingliang.labels.LabelsView
                android:id="@+id/labels"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingLeft="@dimen/toolbar_padLeft"
                android:paddingRight="@dimen/toolbar_padLeft"
                android:paddingBottom="@dimen/toolbar_padLeft"
                tag:labelBackground="@drawable/label_bg"
                tag:labelTextColor="@drawable/label_text_color"
                tag:labelTextSize="11.5sp"
                tag:labelTextPaddingBottom="4.5dp"
                tag:labelTextPaddingLeft="10dp"
                tag:labelTextPaddingRight="10dp"
                tag:labelTextPaddingTop="4.5dp"
                tag:lineMargin="10dp"
                tag:wordMargin="10dp"
                tag:selectType="SINGLE"
                tag:maxSelect="30" />
            <TextView
                android:padding="@dimen/toolbar_padLeft"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="尺寸"
                android:textSize="14.5sp"
                android:textColor="@color/textColor09"/>
            <com.donkingliang.labels.LabelsView
                android:id="@+id/labels2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingLeft="@dimen/toolbar_padLeft"
                android:paddingRight="@dimen/toolbar_padLeft"
                android:paddingBottom="@dimen/toolbar_padLeft"
                tag:labelBackground="@drawable/label_bg"
                tag:labelTextColor="@drawable/label_text_color"
                tag:labelTextSize="11.5sp"
                tag:labelTextPaddingBottom="4.5dp"
                tag:labelTextPaddingLeft="10dp"
                tag:labelTextPaddingRight="10dp"
                tag:labelTextPaddingTop="4.5dp"
                tag:lineMargin="10dp"
                tag:wordMargin="10dp"
                tag:selectType="SINGLE"
                tag:maxSelect="30" />
            <TextView
                android:padding="@dimen/toolbar_padLeft"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="购买数量"
                android:textSize="14.5sp"
                android:textColor="@color/textColor09"/>
            <LinearLayout
                android:layout_marginLeft="@dimen/toolbar_padLeft"
                android:layout_marginBottom="@dimen/toolbar_padLeft"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:gravity="center_vertical"
                android:background="@drawable/good_size_buy_num">
                <RelativeLayout
                    android:id="@+id/goodsRule_minusRelative"
                    android:paddingRight="14px"
                    android:paddingLeft="15px"
                    android:paddingBottom="16px"
                    android:paddingTop="16px"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">
                    <ImageView
                        android:layout_width="12dp"
                        android:layout_height="12dp"
                        android:src="@mipmap/shopping_cart_minus"/>
                </RelativeLayout>

                <TextView
                    android:id="@+id/goodsRule_numTv"
                    android:text="1"
                    android:textSize="14sp"
                    android:paddingLeft="@dimen/toolbar_padLeft"
                    android:paddingRight="@dimen/toolbar_padLeft"
                    android:textColor="@color/textColor09"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />
                <RelativeLayout
                    android:id="@+id/goodsRule_addRelative"
                    android:paddingRight="15px"
                    android:paddingLeft="14px"
                    android:paddingBottom="16px"
                    android:paddingTop="16px"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">
                    <ImageView
                        android:layout_width="12dp"
                        android:layout_height="12dp"
                        android:src="@mipmap/shopping_cart_add"/>
                </RelativeLayout>

            </LinearLayout>

        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:background="@color/divide"/>
    <LinearLayout
        android:background="@color/backgroundWhite"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:gravity="center"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:paddingTop="@dimen/padding_top"
            android:paddingBottom="@dimen/padding_top"
            android:text="加入购物车"
            android:textSize="32px"
            android:textColor="@color/textColorBlack"/>
        <TextView
            android:gravity="center"
            android:background="@color/mainColor"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:paddingTop="@dimen/padding_top"
            android:paddingBottom="@dimen/padding_top"
            android:text="立即购买"
            android:textSize="32px"
            android:textColor="@color/textColorWhite"/>
    </LinearLayout>

</LinearLayout>

3、自定义GoodSizePopupwindow继承至PopupWindow

public class GoodSizePopupwindow extends PopupWindow{

    private final LabelsView labelsView;
    private final LabelsView labelsView2;
    private final View minusView;
    private final View addView;
    private Context mContext;
    private View view;

    public GoodSizePopupwindow(Context mContext, View.OnClickListener itemsOnClick) {
        this.view = LayoutInflater.from(mContext).inflate(R.layout.popupwindow_goods_rule, null);
        minusView = view.findViewById(R.id.goodsRule_minusRelative);
        addView = view.findViewById(R.id.goodsRule_addRelative);
        labelsView = (LabelsView) view.findViewById(R.id.labels);

//        // 设置按钮监听
        minusView.setOnClickListener(itemsOnClick);
        addView.setOnClickListener(itemsOnClick);

        ArrayList<String> label = new ArrayList<>();
        label.add("白色");
        label.add("黑色");
        label.add("图片色");
        label.add("藕粉色");
        label.add("卡其色");
        label.add("浅蓝色(比图片较深，介意勿拍)");
        label.add("粉色");
        labelsView.setLabels(label); //直接设置一个字符串数组就可以了。
//        ======================================================
        labelsView2 = (LabelsView) view.findViewById(R.id.labels2);
        ArrayList<String> label2 = new ArrayList<>();
        label2.add("34");
        label2.add("35");
        label2.add("36(尺码偏小,请拍小一号)");
        label2.add("37");
        label2.add("38");
        label2.add("39");
        label2.add("40");
        label2.add("41");
        label2.add("42");
        labelsView2.setLabels(label2); //直接设置一个字符串数组就可以了。

        // 设置外部可点击
        this.setOutsideTouchable(true);
        // mMenuView添加OnTouchListener监听判断获取触屏位置如果在选择框外面则销毁弹出框
        this.view.setOnTouchListener(new View.OnTouchListener() {

            public boolean onTouch(View v, MotionEvent event) {

                int height = view.findViewById(R.id.pop_layout).getTop();

                int y = (int) event.getY();
                if (event.getAction() == MotionEvent.ACTION_UP) {
                    if (y < height) {
                        dismiss();
                    }
                }
                return true;
            }
        });


    /* 设置弹出窗口特征 */
        // 设置视图
        this.setContentView(this.view);
        // 设置弹出窗体的宽和高
        this.setHeight(RelativeLayout.LayoutParams.WRAP_CONTENT);
        this.setWidth(RelativeLayout.LayoutParams.MATCH_PARENT);

        // 设置弹出窗体可点击
        this.setFocusable(true);
        this.setBackgroundDrawable(new BitmapDrawable());

        // 设置弹出窗体显示时的动画，从底部向上弹出
        this.setAnimationStyle(R.style.take_photo_anim);

    }

}

4、PopupWindow的使用

private void showPopupwindow() {
        GoodSizePopupwindow sizePopWin = new GoodSizePopupwindow(this, onClickListener);
        View contentView = sizePopWin.getContentView();
        addCartNumTv = ((TextView) contentView.findViewById(R.id.goodsRule_numTv));
        //设置Popupwindow显示位置（从底部弹出）
        sizePopWin.showAtLocation(mainLayout, Gravity.BOTTOM|Gravity.CENTER_HORIZONTAL, 0, 0);
        //当弹出Popupwindow时，背景变半透明
        darkenBackgroud(0.4f);
        //设置Popupwindow关闭监听，当Popupwindow关闭，背景恢复1f
        sizePopWin.setOnDismissListener(new PopupWindow.OnDismissListener() {
            @Override
            public void onDismiss() {
                darkenBackgroud(1f);
            }
        });
    }

5、popupWindow中的点击事件

private View.OnClickListener onClickListener = new View.OnClickListener() {
        @Override
        public void onClick(View v) {

            switch (v.getId()) {
                case R.id.goodsRule_minusRelative:
                    int count = Integer.valueOf((String)addCartNumTv.getText());
                    if(count==1){
                        Toast.makeText(MainActivity.this,"不能再减了哦",Toast.LENGTH_SHORT).show();
                    }else{
                        count--;
                        addCartNumTv.setText((count)+"");
                    }
                    break;
                case R.id.goodsRule_addRelative:
                    int count2 = Integer.valueOf((String)addCartNumTv.getText());
                    count2++;
                    addCartNumTv.setText(count2+"");
                    break;
            }
        }
    };

Android仿淘宝添加商品时属性规格popupwindow
一、首先看一下实现效果二、实现步骤 1、自定义标签。（详情请参照android自定义标签）添加依赖：在pro...
仿淘宝商品属性选择Android
快速利用RecyclerView的LayoutManager搭建流式布局根据以上代码做了更改，默认选中第一个，点...
JavaScript笛卡尔积超简单实现算法示例
附： vue 添加商品规格时的实现
质数在商品规格选择中的应用
向淘宝京东商品选择的时候，会有规格选择，多种规格联动，如下三个截图淘宝的商品规格选择，在有的规格下没有商品或没货需...
做商城开发时一些收藏
Android开发之仿淘宝商品详情页 - AnalyzeSystem的博客 - CSDN博客 GitHub - l...
商品规格（注：商品规格可添加多个或不添加）
如大杯、小份、半份等。添加规格前，需到规格库添加商品规格，具体操作：规格库→点击“添加规格”→输入规格名称、用料倍...
AndroidView
Android 沉浸式 (透明) 状态栏适配 Android 沉浸式状态栏仿淘宝、京东拖拽商品详情(可嵌套View...
Android 拍照或相册剪裁后取头像
引用 1、Android7.0 头像拍照、照片裁剪2、联合使用：Android 仿IOS的PopupWindow...
商城中开发商品sku及其他汇总
1: sku商品,点击商品进去并不是商品的ID而是sku的id 基本表, 规格表 , 规格属性表商品sku表 ...
ecshop商品属性仿淘宝选择功能
根据模板不同，大家参考着修改模板，为避免出错，修改时请务必备份模板以涉及到被修改的文件！首先演示下效果：实现原...