Android之UI--打造万能自定义Dialog

转载请标明出处：
http://blog.csdn.net/android_it/article/details/51161038
本文出自:【老甩哥的CSDN博客】

在我们开发app的时候，很多地方需要弹出一个对话框，我们要不就直接用系统的Dialog或者就是AlertDialog,但是美工给我们的效果图片很多都是无法去实现的。接下来我们来看下自定义Dialog的使用方法：首先我给大家展示2个图片：

上面的2组图片使我们开发app经常需要的弹窗展示，四周是圆角，ios几乎都是这个效果，里面的文字信息，颜色都可以改变。接下来我们逐一的进行讲解怎么去自定义Dialog做出这样子的效果：
一：首先我们要在values文件styles下，来写dialog的风格：

 <!-- dialog样式 -->
    <style name="dialog_custom" parent="@android:style/Theme.Dialog">
        <item name="android:windowIsFloating">true</item>    <!--是否浮在界面上-->
        <item name="android:windowIsTranslucent">true</item> <!--是否半透明-->
        <item name="android:windowNoTitle">false</item>       <!--是否有标题-->
        <item name="android:windowBackground">@android:color/transparent</item> <!--窗口背景色透明-->
        <item name="android:backgroundDimEnabled">false</item> <!--背景是否模糊显示-->
    </style>

<!-- dialog底部弹出菜单动画 -->
    <style name="bottom_menu_animation" parent="android:Animation">
        <item name="@android:windowEnterAnimation">@anim/bottom_menu_enter</item>
        <item name="@android:windowExitAnimation">@anim/bottom_menu_exit</item>
    </style>

大家可以看到我在styles里面还加了一个动画效果风格，这个在后面自定义Dialog的时候会用到。@anim/bottom_menu_enter和@anim/bottom_menu_exit 分别是在res下建一个anim包添加了2个文件bottom_menu_enter和bottom_menu_exit ：
在bottom_menu_enter下：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="400"
        android:fromYDelta="100%p" />
</set>

在bottom_menu_exit 下：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="600"
        android:toYDelta="100%p" />
</set>

上面的动画我就不在阐述了，继续朝下说：
首先我们先想下，自定义一个Dialog,首先要继承Dialog,然后就是要有构造方法，然后重写里面的某些方法，其实就是这样子。如果我们在某个Activity或者Fragment里面想要这个自定义Dialog的话，那么我们就要new这个自定义的Dialog。
那么我们就很自然的想到我们需要一个Context上下文，一个布局文件，如果我们还要操作布局里面的文件的话，那我们还要布局文件里面的id和监听事件；
说到这里：我们就开始一步一步的去写这个自定义的文件：
我们起一个自定义Dialog叫CenterDialog:

 private Context context;      // 上下文
 private int layoutResID;      // 布局文件id
 private int[] listenedItems;  // 要监听的控件id

 public CenterDialog(Context context, int layoutResID, int[] listenedItems) {
        super(context, R.style.dialog_custom); //dialog的样式
        this.context = context;
        this.layoutResID = layoutResID;
        this.listenedItems = listenedItems;
    }

通过上面的分析，我们已经把Context,布局文件，布局文件里面的控件id还有构造方法都写好了，这里说下，因为布局文件里面的id控件会有很多，所有写了一个int[]数组。

接下来我们重写onCreate()方法：

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Window window = getWindow();
        window.setGravity(Gravity.CENTER); // 此处可以设置dialog显示的位置为居中
        window.setWindowAnimations(R.style.bottom_menu_animation); // 添加动画效果
        setContentView(layoutResID);

        WindowManager windowManager = ((Activity) context).getWindowManager();
        Display display = windowManager.getDefaultDisplay();
        WindowManager.LayoutParams lp = getWindow().getAttributes();
        lp.width = display.getWidth()*4/5; // 设置dialog宽度为屏幕的4/5
        getWindow().setAttributes(lp);
        setCanceledOnTouchOutside(true);// 点击Dialog外部消失
        //遍历控件id,添加点击事件
        for (int id : listenedItems) {
            findViewById(id).setOnClickListener(this);
        }
    }

接下来就是让CenterDialog implements View.OnClickListener重写onClick()方法，到这里我们再想下，如果想在外部要监听布局文件控件的事件，首先我们要对CenterDialog添加监听事件，然后才可以进行控制控件的监听事件？怎么做呢？
如果java学的好的话，很明显我们要在这里面写个接口，然后添加一个方法，让外部重写，那下面我们看下代码：

 private OnCenterItemClickListener listener;
 public interface OnCenterItemClickListener {
        void OnCenterItemClick(CenterDialog dialog, View view);
    }
 public void setOnCenterItemClickListener(OnCenterItemClickListener listener) {
        this.listener = listener;
    }

  @Override
    public void onClick(View view) {
        dismiss();//注意：我在这里加了这句话，表示只要按任何一个控件的id,弹窗都会消失，不管是确定还是取消。
        listener.OnCenterItemClick(this, view);
    }

好了，自定义的CenterDialog已经书写完毕，那我们调用看看：
首先写个简单的布局：activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#F0EFF5">
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="点击" />
</LinearLayout>

然后再写个dialog布局：dialog_layout.xml:

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

    <TextView
        android:id="@+id/dialog_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:layout_marginTop="20dp"
        android:text="需要写的信息"
        android:textColor="#F88833"
        android:textSize="20sp" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#cecece" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/dialog_cancel"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="取消"
            android:textColor="#6FBF6A"
            android:textSize="20sp" />

        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#cecece" />

        <TextView
            android:id="@+id/dialog_sure"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="确定"
            android:textColor="#6FBF6A"
            android:textSize="20sp" />
    </LinearLayout>

</LinearLayout>

在MainActivity里面：我们new出CenterDialog对象，并添加点击事件：

package com.fshsoft.dialogdemo;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity implements View.OnClickListener, CenterDialog.OnCenterItemClickListener {

    private Button button;
    private CenterDialog centerDialog;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        button = (Button) findViewById(R.id.button);
        button.setOnClickListener(this);
        centerDialog = new CenterDialog(this, R.layout.dialog_layout,
         new int[]{R.id.dialog_cancel, R.id.dialog_sure});
        centerDialog.setOnCenterItemClickListener(this);

    }

    @Override
    public void onClick(View v) {
        centerDialog.show();
    }

    @Override
    public void OnCenterItemClick(CenterDialog dialog, View view) {
           case R.id.dialog_sure:
                Toast.makeText(MainActivity.this,"确定按钮",Toast.LENGTH_SHORT).show();
                break;
            default:
                break;
    }
}

在OnCenterItemClick();里面我没有进行取消按钮的判断，是因为在自定义的CenterDialog里面我已经把所有控件的id，点击都dismiss了，前面已经提到了。

以上就是自定义dialog的内容，到这里，也许你会说，我的布局里面需要一个取消按钮，但是不是确定，是添加图片这个字，我不可能再去写个布局把，你说的对，我们可以这样子做：

new int[]{R.id.dialog_cancel, R.id.dialog_sure});
  centerDialog.show();
  TextView dialog_sure = (TextView) centerDialog.findViewById(R.id.dialog_sure);
  dialog_sure.setText("添加图片");

这里需要注意的事就是，需要先把dialog给show()出来，然后通过centerDialog.findViewById(R.id.dialog_sure);才能拿到控件对象，然后在setText(“添加图片”);当然还可以改变字体的颜色等等信息，这里就不再列举。

以上就是全部内容，写到这里，你可以尝试写下第二张图片的dialog.

不足之处请留言指正！有问题的可以给我留言！谢谢！

下载源码