Android中AlertDialog实现圆角边框效果

背景

微博的圆角边框的Dialog用户体验很好，让我们一起来实现这个功能，然后应用到自己的项目中去。

微博中图示为：

---

实现思路

新建一个AlertDialog对象并显示，然后获取这个dialog的Window对象，给这个Window对象设置自定义view显示视图内容即可。

这里view视图中的内容展示一般常用两种方式：

• 在xml布局中固定写好需要展示的内容
• 在代码中利用listView或者recyclerView控件来呈现数据进行内容的展示

这里为了展示方便，我用了写成固定内容的展示方式来实现。

---

创建自定义视图的布局文件

要用自定义view展示内容，就需要创建一个xml布局文件，我这里命名为view_dialog.xml，如下：

view_dialog.xml布局文件中用了一个线性布局，里面排列方式为竖直，然后添加需要展示的内容控件显示即可。

• 上面的xml布局文件中，我在根布局中设置了background属性为@drawable/drawable_round_edge，目的是为了让dialog显示圆角边框。

drawable_round_edge.xml代码如下：

---

实现代码

下面在MainActivity.java中给出对话框提示的实现代码，如下：

package com.example.administrator.roundedgedialog;

import android.annotation.TargetApi;
import android.app.Activity;
import android.app.AlertDialog;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.os.Build;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.view.WindowManager;

public class MainActivity extends Activity {

    private AlertDialog dialog = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        showDialog();// 对话框提示
    }


    /**
     * 对话框提示
     */
    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    private void showDialog() {

        // 构建dialog显示的view布局
        View view_dialog = getLayoutInflater().from(this).inflate(R.layout.view_dialog, null);

        if (dialog == null){
            // 创建AlertDialog对象
            dialog = new AlertDialog.Builder(this)
                    .create();
            dialog.show();
            // 设置点击可取消
            dialog.setCancelable(true);

            // 获取Window对象
            Window window = dialog.getWindow();
            // 设置显示视图内容
            window.setContentView(view_dialog);
        }else {
            dialog.show();
        }


    }

}

代码很简单：创建AlertDialog对象，然后获取dialog的Window对象，为Window对象设置这个View视图显示内容即可。注释也写得很明白，大家仔细理解。

---

简单运行效果图

现行运行上面的代码，在手机上显示的效果如下：

可以看到圆角对话框提示已经成功的显示了。

---

改变dialog的宽度

虽然我们看到圆角边框的AlertDialog对话框已经显示了，但是可以发现跟微博的效果图示有点区别，就是微博的对话框提示的宽度会稍微的距离左右的边距大一点（其实也就是对话框的宽度要小很多）。

关键就是改变对话框的大小即可。在原来代码的基础上添加下面代码即可：

	        WindowManager.LayoutParams lp = dialog.getWindow().getAttributes();
            lp.width = 500;// 调整该值可以设置对话框显示的宽度
            lp.height = ViewGroup.LayoutParams.WRAP_CONTENT;
            window.setAttributes(lp);

最后在修改代码后的基础上再次运行项目，效果图示如下：

这样就跟微博效果一样了。希望这篇文章能帮到各位同学们，分享快乐！

---

A little bit of progress every day!Come on!