背景

微博的圓角邊框的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);

最後在修改程式碼後的基礎上再次執行專案，效果圖示如下：

這樣就跟微博效果一樣了。希望這篇文章能幫到各位同學們，分享快樂！

A little bit of progress every day!Come on!