背景

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

微博中图示为：

在这里插入图片描述

实现思路

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

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

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

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

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

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

在这里插入图片描述

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

    <TextView
        android:padding="10dp"
        android:text="收藏"
        android:textSize="16sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <View
        android:background="@android:color/darker_gray"
        android:layout_width="match_parent"
        android:layout_height="1px"/>

    <TextView
        android:padding="10dp"
        android:text="帮上头条"
        android:textSize="16sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <View
        android:background="@android:color/darker_gray"
        android:layout_width="match_parent"
        android:layout_height="1px"/>

    <TextView
        android:padding="10dp"
        android:text="取消关注"
        android:textSize="16sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <View
        android:background="@android:color/darker_gray"
        android:layout_width="match_parent"
        android:layout_height="1px"/>

    <TextView
        android:padding="10dp"
        android:text="屏蔽"
        android:textSize="16sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <View
        android:background="@android:color/darker_gray"
        android:layout_width="match_parent"
        android:layout_height="1px"/>

    <TextView
        android:padding="10dp"
        android:text="举报"
        android:textSize="16sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

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

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

drawable_round_edge.xml代码如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <!--描边设置-->
    <stroke android:color="@android:color/darker_gray"
        android:width="1px"
        />

    <!--填充设置-->
    <solid android:color="@android:color/white"/>

    <!--圆角设置-->
    <corners android:radius="20dp"/>

</shape>

实现代码

下面在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);

在这里插入图片描述