仿支付宝、美团支付弹窗

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

选择某个支付方式的时候会其后面会出现一个小对勾，效果图如下：

//布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#fff"
    >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:orientation="vertical"
        android:background="#fff"
        >
        
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="45dp"
            >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="请选择支付方式"
                android:textColor="#000"
                android:textSize="15sp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                />
            
            <ImageView
                android:id="@+id/close"
                android:layout_width="45dp"
                android:layout_height="match_parent"
                android:layout_marginLeft="5dp"
                android:src="@mipmap/edit_mima"
                android:layout_alignParentRight="true"
                android:padding="15dp"
                />

            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_alignParentBottom="true"
                android:background="#DDE2F0"
                />

        </RelativeLayout>
        
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="45dp"
            >

            <ImageView
                android:layout_width="15dp"
                android:layout_height="14dp"
                android:src="@mipmap/edit_mima"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                />
            <TextView
                android:id="@+id/wallet"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="钱包零钱"
                android:textColor="#000"
                android:textSize="12sp"
                android:gravity="center_vertical"
                android:layout_marginLeft="45dp"
                />

            <ImageView
                android:id="@+id/iv_wallet"
                android:layout_width="18dp"
                android:layout_height="12dp"
                android:src="@mipmap/edit_mima"
                android:layout_alignParentRight="true"
                android:layout_marginRight="20dp"
                android:layout_centerVertical="true"
                android:visibility="gone"
                />

            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_alignParentBottom="true"
                android:background="#DDE2F0"
                />

        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="45dp"
            >

            <ImageView
                android:layout_width="15dp"
                android:layout_height="14dp"
                android:src="@mipmap/edit_mima"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                />
            <TextView
                android:id="@+id/wechat"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="微信"
                android:textColor="#000"
                android:textSize="12sp"
                android:gravity="center_vertical"
                android:layout_marginLeft="45dp"
                />

            <ImageView
                android:id="@+id/iv_wechat"
                android:layout_width="18dp"
                android:layout_height="12dp"
                android:src="@mipmap/edit_mima"
                android:layout_alignParentRight="true"
                android:layout_marginRight="20dp"
                android:layout_centerVertical="true"
                android:visibility="gone"
                />

            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_alignParentBottom="true"
                android:background="#DDE2F0"
                />

        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="45dp"
            >

            <ImageView
                android:layout_width="15dp"
                android:layout_height="14dp"
                android:src="@mipmap/edit_mima"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                />
            <TextView
                android:id="@+id/alipay"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="支付宝"
                android:textColor="#000"
                android:textSize="12sp"
                android:gravity="center_vertical"
                android:layout_marginLeft="45dp"
                />

            <ImageView
                android:id="@+id/iv_alipay"
                android:layout_width="18dp"
                android:layout_height="12dp"
                android:src="@mipmap/edit_mima"
                android:layout_alignParentRight="true"
                android:layout_marginRight="20dp"
                android:layout_centerVertical="true"
                android:visibility="gone"
                />

            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_alignParentBottom="true"
                android:background="#DDE2F0"
                />

        </RelativeLayout>

        <Button
            android:id="@+id/btn_sure"
            android:layout_width="232dp"
            android:layout_height="36dp"
            android:background="@drawable/btn_5dp_corner"
            android:text="确定"
            android:textColor="@color/white"
            android:textSize="15sp"
            android:layout_marginTop="17dp"
            android:gravity="center"
            android:layout_gravity="center_horizontal"
            android:layout_marginBottom="17dp"
            />
    </LinearLayout>


</LinearLayout>

//支付弹窗

public class PayDialog extends Dialog {
    private Context mContext;
    private TextView wallet;
    private TextView wechat;
    private TextView alipay;
    private Button btn_sure;
    private ImageView close;
    private ImageView iv_wallet;
    private ImageView iv_wechat;
    private ImageView iv_alipay;


    public PayDialog(@NonNull Context context) {
        super(context);
        mContext = context;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.pay_dialog);
        getWindow().setBackgroundDrawable(new BitmapDrawable());
        wallet = (TextView) findViewById(R.id.wallet);
        wechat = (TextView) findViewById(R.id.wechat);
        alipay = findViewById(R.id.alipay);
        btn_sure = findViewById(R.id.btn_sure);
        close = findViewById(R.id.close);
        iv_wallet =  findViewById(R.id.iv_wallet);
        iv_wechat = findViewById(R.id.iv_wechat);
        iv_alipay = findViewById(R.id.iv_alipay);

        Window window = getWindow();
        WindowManager.LayoutParams lp = window.getAttributes();
        int width = new ScreenUtil().getWidth(mContext);
        lp.width = width;
        window.setAttributes(lp);


        wallet.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View pView) {
                iv_wallet.setSelected(true);
                iv_alipay.setSelected(false);
                iv_wechat.setSelected(false);
                iv_wallet.setVisibility(View.VISIBLE);
                iv_wechat.setVisibility(View.GONE);
                iv_alipay.setVisibility(View.GONE);
            }
        });

        wechat.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View pView) {
                iv_wallet.setSelected(false);
                iv_alipay.setSelected(false);
                iv_wechat.setSelected(true);
                iv_wallet.setVisibility(View.GONE);
                iv_wechat.setVisibility(View.VISIBLE);
                iv_alipay.setVisibility(View.GONE);
            }
        });

        alipay.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View pView) {
                iv_wallet.setSelected(false);
                iv_alipay.setSelected(true);
                iv_wechat.setSelected(false);
                iv_wallet.setVisibility(View.GONE);
                iv_wechat.setVisibility(View.GONE);
                iv_alipay.setVisibility(View.VISIBLE);
            }
        });

        btn_sure.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(iv_wallet.isSelected()){
                    Toast.makeText(mContext, "wallet", Toast.LENGTH_SHORT).show();
                    dismiss();
                }else if(iv_wechat.isSelected()){
                    Toast.makeText(mContext, "wechat", Toast.LENGTH_SHORT).show();
                    dismiss();
                }else if(iv_alipay.isSelected()){
                    Toast.makeText(mContext, "alipay", Toast.LENGTH_SHORT).show();
                    dismiss();
                }else {
                    Toast.makeText(mContext, "请选择支付方式", Toast.LENGTH_SHORT).show();
                }
            }
        });
    }

    PayType mClick;

    public void setPayType(PayType pClick) {
        mClick = pClick;
    }

    public interface PayType {
        void clickWallet();

        void clickWeChat();

        void clickAlipay();

        void clickSure();
    }
}