Dialog弹出对话框使用


前言

自定义对话框


一、对话框

1、自定义dialog样式

在这里插入图片描述

1、dialog_delect.xml

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/transparent"
        android:orientation="vertical">

        <Button
            android:id="@+id/tv_delect"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:background="@drawable/shape_dialog"
            android:text="delete files"
            android:textColor="#ff0000" />

        <Button
            android:id="@+id/tv_cancel"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/shape_dialog"  //边框样式
            android:gravity="center"
            android:text="cancel"
            android:textStyle="bold" />  //字体加粗
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

2、shape_dialog.xml

<!-- rectangle:	矩形、圆角矩形、弧形等
       oval:		圆、椭圆
       line:		线、实线、虚线
       ring:		环形 -->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="12dp"/>
<solid android:color="@android:color/white"/>
</shape>

3、styles.xml

	<!--对话框样式-->
    <style name="DelectDialog" parent="Theme.AppCompat.Dialog">
        <!--宽度与屏幕比例-->
        <item name="windowMinWidthMinor">90%</item>
        <!--背景颜色为透明,默认白色-->
        <item name="android:colorBackground">@color/transparent</item>
        <!--浮现在activity之上-->
        <item name="android:windowIsFloating">true</item>
        <!--设定背景透明-->
        <item name="android:windowIsTranslucent">true</item>
        <!-- 是否有覆盖 -->
        <item name="android:windowContentOverlay">@null</item>

    </style>

2、使用显示对话框的方法

	private void showDialog(){
		// 底部弹出的列表组件
        AlertDialog.Builder builder = new AlertDialog.Builder(getContext(), R.style.DelectDialog);
        // 创建弹出的界面组件
        View inflate = LayoutInflater.from(getContext()).inflate(R.layout.dialog_delect,null,false);
        builder.setView(inflate);
        final AlertDialog dialog = builder.create();
        // 显示
        dialog.show();
        // 设置自身在底部弹出
        Window window = dialog.getWindow();
        window.setGravity(Gravity.BOTTOM);
        // 设置view的宽度
        WindowManager.LayoutParams params = window.getAttributes();
        params.width = WindowManager.LayoutParams.MATCH_PARENT;
        window.setAttributes(params);

		//---------------------------------------------------
		// 自定义点击事件
		// 获取删除按钮
        Button deleBtn = inflate.findViewById(R.id.tv_delect);
        // 获取取消按钮
        Button cancelBtn = inflate.findViewById(R.id.tv_cancel);

        // 删除按钮点击事件
        deleBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {... }
        });

        // 取消按钮点击事件
        cancelBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) { ... }
        });
	}

总结

1、知道自定义样式 2、实现自定义样式 3、new AlertDialog.Builder(获取样式) --->LayoutInflater.from(添加自定义对话框) --->builder.setView(将自定义对话框设置给builder) --->create() --->show()
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以使用Vue.js框架中的Element UI组件库来实现弹出对话框。具体步骤如下: 1. 安装Element UI组件库 可以通过npm安装Element UI组件库: ``` npm install element-ui --save ``` 2. 在Vue组件中引入Element UI组件 可以在需要使用弹出对话框的Vue组件中按如下方式引入Element UI组件: ``` import { Dialog } from 'element-ui'; ``` 3. 使用Dialog组件 可以在需要弹出对话框的代码中按如下方式使用Dialog组件: ``` <template> <div> <el-button @click="showDialog">点击弹出对话框</el-button> <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"> <span>{{ dialogContent }}</span> <div slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="dialogVisible = false">确 定</el-button> </div> </el-dialog> </div> </template> <script> import { Dialog } from 'element-ui'; export default { data() { return { dialogTitle: '弹出对话框标题', dialogContent: '弹出对话框内容', dialogVisible: false }; }, methods: { showDialog() { this.dialogVisible = true; }, handleClose(done) { // 关闭对话框前的处理逻辑 done(); } } }; </script> ``` 其中,`el-button`是Element UI中的按钮组件,`el-dialog`是弹出对话框组件。`dialogTitle`、`dialogContent`和`dialogVisible`分别为对话框的标题、内容和是否可见。`@click="showDialog"`表示点击按钮时弹出对话框,`:before-close="handleClose"`表示在关闭对话框时调用`handleClose`方法进行处理逻辑。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值