安卓开发博客Android之界面

Android圆角对话框Dialog

2018-05-18  本文已影响99人  蒙伟

需求:模仿iOS样式Dialog对话框。

自定义Dialog

核心代码:

package com.huatec.myapplication.view;

import android.app.Dialog;
import android.content.Context;
import android.view.View;

import com.huatec.myapplication.R;

import android.view.LayoutInflater;
import android.widget.Button;
import android.widget.TextView;

public class Mdialog extends Dialog {

    private Button button_cancel, button_exit;//定义取消与确认按钮
    private TextView tv;//定义标题文字

    //构造方法
    public Mdialog(Context context) {

        //设置对话框样式
        super(context, R.style.mdialog);

        //通过LayoutInflater获取布局
        View view = LayoutInflater.from(getContext()).inflate(R.layout.mdialoglayout, null);
        tv = view.findViewById(R.id.title);   //获取显示标题的文本框控件
        button_cancel = view.findViewById(R.id.btn_cancel);    //获取取消按钮
        button_exit = view.findViewById(R.id.btn_exit);  //获取确认退出按钮
        setContentView(view);  //设置显示的视图
    }

    //设置标题
    public void setTv(String content) {
        tv.setText(content);
    }

    //取消监听
    public void setOnCancelListener(View.OnClickListener listener) {
        button_cancel.setOnClickListener(listener);
    }

    //退出监听
    public void setOnExitListener(View.OnClickListener listener) {
        button_exit.setOnClickListener(listener);
    }
}

Dialog样式:

    <!--对话框样式-->
    <style name="mdialog" parent="Theme.AppCompat.Dialog">
        <!--背景透明-->
        <item name="android:windowBackground">@android:color/transparent</item>
        <!--没有标题-->
        <item name="android:windowNoTitle">true</item>
        <!--背景昏暗-->
        <item name="android:backgroundDimEnabled">true</item>
    </style>

Dialog布局文件: mdialoglayout.xml

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

    <!--对话框标题区域-->
    <RelativeLayout
        android:id="@+id/layout_title"
        android:layout_width="280dp"
        android:layout_height="100dp"
        android:gravity="center">

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="@string/text_title"
            android:textColor="@color/black"/>

    </RelativeLayout>

    <View
        android:id="@+id/view"
        android:layout_width="280dp"
        android:layout_height="1dp"
        android:layout_below="@id/layout_title"
        android:layout_marginBottom="5dp"
        android:background="@color/grey"/>

    <!--对话框按钮-->
    <LinearLayout
        android:id="@+id/bottom"
        android:layout_width="280dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/view"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <!--取消按钮-->
        <Button
            android:id="@+id/btn_cancel"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:text="@string/text_cancel"
            android:textColor="@color/blue"
            android:textSize="18sp"/>

        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="@color/grey"/>

        <!--退出按钮-->
        <Button
            android:id="@+id/btn_exit"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:text="@string/text_exit"
            android:textColor="@color/blue"
            android:textSize="18sp"/>
    </LinearLayout>

</RelativeLayout>

圆角背景:mdialog_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<!--圆角矩形背景-->
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <!--背景颜色-->
    <solid android:color="@color/white"/>

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

</shape>

使用它:

package com.huatec.myapplication;

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

import com.huatec.myapplication.view.Mdialog;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Button btn_exit_number = findViewById(R.id.btn_exit_number);
        btn_exit_number.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showDialog();
            }
        });
    }

    /**
     * 显示对话框
     */
    private void showDialog() {
        final Mdialog mdialog = new Mdialog(MainActivity.this);
        //退出
        mdialog.setOnExitListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //如果对话框处于显示状态
                if (mdialog.isShowing()) {
                    mdialog.dismiss();//关闭对话框
                    finish();
                }
            }
        });
        //取消
        mdialog.setOnCancelListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (mdialog != null && mdialog.isShowing()) {
                    mdialog.dismiss();
                }
            }
        });
        mdialog.show();
    }
}

效果图:


2018-05-18 14_03_00.gif

源码地址:https://github.com/280357392/iosDialog

上一篇 下一篇

猜你喜欢

热点阅读