Android 底部弹出自定义Dialog(支付宝微信选择)

前言

Android 底部弹出自定义Dialog(支付宝微信选择)
之前做过很多 一直没有总结过 这次做一个总结 加深一下记忆
为别人留下一个可参考的方案
不多说 直接上gif效果图

UI希望の效果

实际の实现效果Gif

代码总结

首先写一个dialogDemo继承Dialog
需要实现构造方法 选择2参的即可 传一个上下文和一个dialog主题
剩下的就按照流程写

/**
 * @author lyudony
 * @date 2020/8/4.
 * description：支付方式dialog
 */
public class PayTypesDialog extends Dialog {

    private Unbinder mUnbinder;
    @BindView(R.id.iv_pay_type_weixin)
    ImageView mIvWeiChatPay;
    @BindView(R.id.iv_pay_type_zhifubao)
    ImageView mIvZhiFuBaoPay;

    //dialog构造方法 实现时需要传上下文和一个dialog主题
    public PayTypesDialog(@NonNull Context context, int themeResId) {
        super(context, themeResId);
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.dialog_pay);
        mUnbinder = ButterKnife.bind(this);
        //设置基本属性
        Window dialogWindow = getWindow();
        //设置在底部显示
        dialogWindow.setGravity(Gravity.BOTTOM);
        WindowManager.LayoutParams lp = dialogWindow.getAttributes();
        //设置宽度和手机持平
        lp.width = AbsListView.LayoutParams.MATCH_PARENT;
        lp.y = 0;//设置Dialog距离底部的距离
        dialogWindow.setAttributes(lp);
    }

    @OnClick({R.id.iv_pay_type_weixin, R.id.iv_pay_type_zhifubao,
     R.id.tv_zhifubao, R.id.tv_weixin, R.id.btn_confirm})
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.tv_weixin://选择微信
            case R.id.iv_pay_type_weixin:
                mIvWeiChatPay.setSelected(true);
                mIvZhiFuBaoPay.setSelected(false);
                break;
            case R.id.tv_zhifubao://选择支付宝
            case R.id.iv_pay_type_zhifubao:
                mIvZhiFuBaoPay.setSelected(true);
                mIvWeiChatPay.setSelected(false);
                break;
            case R.id.btn_confirm:
                //选择提现方式
                if (mIvZhiFuBaoPay.isSelected()) {
                    ToastUtils.showShort(getContext(), "选择了支付宝");
                } else if (mIvWeiChatPay.isSelected()) {
                    if (!StringUtils.isWxAppInstalledAndSupported(getContext())) {
                        ToastUtils.showShort(getContext(), "请先安装微信");
                    } else {
                        ToastUtils.showShort(getContext(), "选择了微信 ");
                    }
                }
                break;
        }
    }

}

XML布局参考

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <View
        android:id="@+id/view_bg"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@drawable/pay_type_bg"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="360:212"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_pay_type"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="提现方式"
        android:textColor="@color/user_setting_font_color"
        android:textSize="16sp"
        app:layout_constraintLeft_toLeftOf="@id/view_bg"
        app:layout_constraintRight_toRightOf="@id/view_bg"
        app:layout_constraintTop_toTopOf="@id/view_bg" />


    <TextView
        android:id="@+id/tv_zhifubao"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:drawableStart="@drawable/zhifubao_touxaing"
        android:drawableLeft="@drawable/zhifubao_touxaing"
        android:drawablePadding="11dp"
        android:gravity="center"
        android:text="@string/ali_pay"
        android:textColor="@color/user_setting_font_color"
        android:textSize="13sp"
        app:layout_constraintBottom_toTopOf="@id/tv_weixin"
        app:layout_constraintLeft_toLeftOf="@id/view_bg"
        app:layout_constraintTop_toBottomOf="@id/tv_pay_type" />

    <TextView
        android:id="@+id/tv_weixin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:drawableStart="@drawable/weixing_touxiagn"
        android:drawableLeft="@drawable/weixing_touxiagn"
        android:drawablePadding="11dp"
        android:gravity="center"
        android:text="@string/we_chat"
        android:textColor="@color/user_setting_font_color"
        android:textSize="13sp"
        app:layout_constraintBottom_toTopOf="@id/btn_confirm"
        app:layout_constraintLeft_toLeftOf="@id/view_bg"
        app:layout_constraintTop_toBottomOf="@id/tv_zhifubao" />

    <ImageView
        android:id="@+id/iv_pay_type_weixin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:foreground="?android:selectableItemBackground"
        android:padding="10dp"
        android:src="@drawable/shopping_cart_selector"
        app:layout_constraintBottom_toBottomOf="@id/tv_weixin"
        app:layout_constraintRight_toRightOf="@id/view_bg"
        app:layout_constraintTop_toTopOf="@id/tv_weixin"
        tools:ignore="ContentDescription,UnusedAttribute" />

    <ImageView
        android:id="@+id/iv_pay_type_zhifubao"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:foreground="?android:selectableItemBackground"
        android:padding="10dp"
        android:src="@drawable/shopping_cart_selector"
        app:layout_constraintBottom_toBottomOf="@id/tv_zhifubao"
        app:layout_constraintRight_toRightOf="@id/view_bg"
        app:layout_constraintTop_toTopOf="@id/tv_zhifubao"
        tools:ignore="ContentDescription,UnusedAttribute" />

    <Button
        android:id="@+id/btn_confirm"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginBottom="@dimen/dp_10"
        android:background="@drawable/withdraw_button_bj"
        android:text="@string/confirm"
        android:textColor="@color/whiteColor"
        android:textSize="@dimen/sp_14"
        app:layout_constraintBottom_toBottomOf="@id/view_bg"
        app:layout_constraintDimensionRatio="340:40"
        app:layout_constraintLeft_toLeftOf="@id/view_bg"
        app:layout_constraintRight_toRightOf="@id/view_bg" />

</androidx.constraintlayout.widget.ConstraintLayout>

设置主题style

如果不设置这一步 dialog显示出来就不是和父窗体持平的效果
也不会在父窗体的最下面 我之前就没有设置这个属性 导致一直不是自己想要的效果！

 <style name="pay_type_dialog" parent="android:style/Theme.Dialog">
        <item name="android:windowBackground">@color/whiteColor</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowIsFloating">true</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:scrollHorizontally">true</item>
    </style>

使用方法

so easy!!!

  //点击弹出支付方式
  PayTypesDialog payTypesDialog = new PayTypesDialog(this,R.style.pay_type_dialog);
  payTypesDialog.show();

有问题，望多指教！

共勉

我要一步一步往上爬
在最高点乘着叶片往前飞
任风吹干流过的泪和汗
我要一步一步往上爬
等待阳光静静看着它的脸
小小的天有大大的梦想
我有属于我的天
任风吹干流过的泪和汗
总有一天我有属于我的天