简单的自定义一个拥有圆角的 Dialog

6,005 阅读4分钟

简单的自定义一个拥有圆角的Dialog

现在越来越多的App都会使用到Dialog(对话框)这一个东东,在写Dialog的时候为什么总是不如人愿,展现给我们的又是不一样的呢? 就在最近公司项目里出现了这个东东,下面就我遇到的坑给大家说说,希望有所帮助。

开始

二话不说,先来效果图(虽然是第一次写博客,但是规矩我还是懂得,哈哈):

这是一个非常非常简单的首页图,里面只有一个Button;
这是一个简答的首页
紧接着是点击按钮弹出对话框的样式
弹出对话框
这是在弹出的对话框上面点击了取消按钮
点击了取消按钮之后
这是在弹出的对话框上面点击了确定按钮
点击了确定按钮之后

写到这里很多同学应该看明白了,但是回想我的为什么总是不如人意呢(边框距离屏幕边框的距离无法确定,没有圆角,监听加不了。。。)

代码来也

package cn.ddh.administrator.mydialog;

import android.app.Dialog;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

/**
 * 这是我的主界面
 */
public class MainActivity extends AppCompatActivity {
    private Button button;
    Dialog dialog;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        button = (Button) findViewById(R.id.btn_dialog);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showdialog();
            }
        });
    }


    /**
     * 弹出对话框
     */
    private void showdialog() {
     View view=View.inflate(this,R.layout.dialog_cancel_indent,null);
    dialog = new MyDialog(this, 200, 100, view, R.style.dialog);
        dialog.show();
  final TextView cancel = 
                 (TextView) view.findViewById(R.id.cancel);
  final TextView confirm =        
                 (TextView)view.findViewById(R.id.confirm);
    cancel.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "点击了取消按钮", Toast.LENGTH_SHORT).show();
                Log.d("ddh", "onClick: " + cancel);
                dialog.dismiss();
            }
        });
    confirm.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "点击了确认按钮", Toast.LENGTH_SHORT).show();
                Log.d("ddh", "onClick: " + confirm);
                dialog.dismiss();
            }
        });



    }
}

到这里你会惊讶的发现,一片大红,不要着急。。。一个小小的MyDialog,两个布局文件,一个Style,稍等片刻

这是自定义MyDialog 有人会问为什么要写这个类,我也不知道,我只知道不写的话我加的圆角就不起作用(这是程序猿的通病,得治)

package cn.ddh.administrator.mydialog;

import android.app.Dialog;
import android.content.Context;
import android.view.Gravity;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;

/**
 * Created by 黄童鞋 on 2017/4/8.
 *
 * 自定义dialog为了解决圆角的冲突
 */

public class MyDialog extends Dialog{
    private static int default_width = 300; //默认宽度

    private static int default_height = 200;//默认高度



    public MyDialog(Context context, View layout, int style) {

        this(context, default_width, default_height, layout, style);

    }



    public MyDialog(Context context, int width, int height, View layout, int style) {

        super(context, style);

        setContentView(layout);

        Window window = getWindow();

        WindowManager.LayoutParams params = window.getAttributes();

        params.gravity = Gravity.CENTER;

        window.setAttributes(params);

    }

}

很明显这是一个style,是继承自style/Theme.Dialog 的style 这是为了设置屏幕的各种颜色,里面的属性可以根据自己的需求改变。

dialog

<!--这个是dialog的style-->
    <style name="dialog" parent="@android:style/Theme.Dialog">

        <item name="android:windowFrame">@null</item>

        <item name="android:windowIsFloating">true</item>

        <item name="android:windowIsTranslucent">true</item>

        <item name="android:windowNoTitle">true</item>

        <item name="android:background">@android:color/transparent</item>

        <item name="android:windowBackground">@android:color/transparent</item>

        <item name="android:backgroundDimEnabled">true</item>

        <item name="android:backgroundDimAmount">0.6</item>



    </style>

style结束了下面就是最为重要的自定义布局

dialog_cancel_indent

<?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:orientation="vertical"
              android:background="@drawable/dialog">
<!--加上padding是为了撑开dialog的宽度-->
        <TextView
            android:gravity="center"
            android:layout_marginTop="50dp"
            android:id="@+id/textView10"
            android:textColor="#7b7b7b"
            android:layout_gravity="center_horizontal"
            android:layout_marginBottom="30dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="确认取消该订单"/>

        <TextView
            android:layout_gravity="center_horizontal"
            android:layout_width="300dp"
            android:layout_height="1dp"
            android:background="#ebebeb"


            />

        <LinearLayout
            android:layout_gravity="center_horizontal"
            android:gravity="center_vertical"
            android:layout_width="300dp"
            android:orientation="horizontal"
            android:layout_height="50dp">
            <TextView
                android:layout_weight="1"
                android:layout_gravity="center_vertical"
                android:id="@+id/cancel"
                android:gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#fd7e2a"
                android:text="取消"
                />
            <TextView
                android:layout_gravity="center_vertical"
                android:layout_width="1dp"
                android:background="#ebebeb"
                android:layout_height="30dp"/>

            <TextView
                android:layout_weight="1"
                android:textColor="#fd7e2a"
                android:layout_gravity="center_vertical"
                android:id="@+id/confirm"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="确定"
                />

        </LinearLayout>





</LinearLayout>

这里面也没啥好说的就是最外层LinearLayout有个background

dialog

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 圆角 -->
    <corners
        android:radius="9dp"
        /><!-- 设置圆角半径 -->
    <!-- 填充 -->
    <solid
        android:color="@android:color/white"/><!-- 填充的颜色 -->
</shape>

这个shape很明显是控制圆角的东东,
代码到这里也就要告一段落了。

结束

叨叨几句(结束语)

整片代码,最重要的也就三句话

    View view;
    view=View.inflate(this,R.layout.dialog_cancel_indent,null);
    dialog = new MyDialog(this, 200, 100, view, R.style.dialog);
        dialog.show();

所以我的Dialog被称为史上最简单的Dialog,是不是有那种感觉;
友情提醒:在初始化对话框里面的按钮时应该

 final TextView cancel = 
                 (TextView) view.findViewById(R.id.cancel);
  final TextView confirm =        
                 (TextView)view.findViewById(R.id.confirm);

事后运行,会发现我的Dialog的宽度为什么没有达到我想要的宽度,请看布局,在最外层的LinearLayout里面加上padding这样一来就相当于用力把边距撑大了,但是有人好奇我为什么并没有用,是应为一旦撑大了之后我中间那条暗灰色的分割线会被压断,我们项目需要,那条分割线要充满Dialog,so我在那条分割线上做了功夫:

犹如我在做分割线的时候固定他的宽度,还有分多钟方法,你喜欢就好

android:layout_width="300dp"

注意:我所用的720x1280的分辨率,
因为是第一次写博客,可能会有很多不足之处,还请各位童鞋多多指正,小黄在此谢过;