一、首先看一下實現(xiàn)效果

商品規(guī)格popupwindow

二、實現(xiàn)步驟

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="請選擇規(guī)格"
                    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="購買數(shù)量"
                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);

//        // 設置按鈕監(jiān)聽
        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); //直接設置一個字符串數(shù)組就可以了。
//        ======================================================
        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); //直接設置一個字符串數(shù)組就可以了。

        // 設置外部可點擊
        this.setOutsideTouchable(true);
        // mMenuView添加OnTouchListener監(jiān)聽判斷獲取觸屏位置如果在選擇框外面則銷毀彈出框
        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關閉監(jiān)聽，當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;
            }
        }
    };

百度云下載源碼

2561587206401_.pic.jpg