Material Design Dialog简介

2015-12-30

Material Design的推出，最主要的受益群体，我觉得是广大的独立开发者。无数的独立开发者，坐拥无数的好点子，无奈开发出来的App不够精致，导致无人问津。辛亏，谷歌发布了Material Design，只要按照这个标注来设计自己的App，成品一般都不会难看。

为了让低版本的Android用户也能体会到Material Design，很多开源控件作者制作了很多易用且精美的Material Design风格的Android控件，在GitHub上可以找到很多很多。

好了，废话说完了，本文主要是介绍一下我写的一个符合Material Design风格的Dialog空间，使用方便，体积也小

Material Design中关于Dialog的设计规范：http://www.google.com/design/spec/components/dialogs.html

项目地址：https://github.com/celerysoft/MaterialDesignDialog

效果大概是这样的，建议右键新标签页打开查看大图：

2in1row2in1row2in1row

添加到项目中

引用方法很简单，修改项目文件夹下的build.gradle文件，在dependencies里添加一句

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    ...
    compile 'com.celerysoft:materialdesigndialog:1.0.1'
}

实例

要实现图一的效果，代码如下：

String message = "This dialog use material-design to design it."
                + " Use it if you really like it,"
                + " make it better if you feel it suck."
                + "\nThis dialog has 2 themes and"
                + " 2 styles, hope you can like it.";
final MaterialDesignDialog dialog = new MaterialDesignDialog(someMethodToGetContext());
dialog.setTitle("Permissions")
    .setMessage(message)
    .setNegativeButton("DECLINE", new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            dialog.dismiss();
        }
    })
    .setPositiveButton("ACCEPT", new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            dialog.dismiss();
        }
    });
dialog.show();

要实现图二的效果，代码如下：

String message = "This dialog use material-design to design it."
                + " Use it if you really like it,"
                + " make it better if you feel it suck."
                + "\nThis dialog has 2 themes and"
                + " 2 styles, hope you can like it.";
final MaterialDesignDialog dialog = new MaterialDesignDialog(someMethodToGetContext(),
                                                             MaterialDesignDialog.Style.STACKED_FULL_WIDTH_BUTTONS);
dialog.setTitle("Permissions")
    .setMessage(message)
    .setNegativeButton("DECLINE", new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            dialog.dismiss();
        }
    })
    .setPositiveButton("ACCEPT", new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            dialog.dismiss();
        }
    });
dialog.show();

要实现图三的效果，代码如下：

String message = "It is a dark theme dialog. Sometimes you need a dark theme dialog to"
                + " fit your own theme, it is."
                + "\nWe offer only 2 themes:"
                + "\nMaterialDesignDialog.Theme.Light"
                + "\nand"
                + "\nMaterialDesignDialog.Theme.Dark";
final MaterialDesignDialog dialog = new MaterialDesignDialog(someMethodToGetContext(),
                                                             MaterialDesignDialog.Theme.DARK);
dialog.setTitle("Dark theme dialog")
    .setMessage(message)
    .setCanceledOnTouchOutside(true)
    .setPositiveButton("OK", new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            dialog.dismiss();
        }
    });
dialog.show();

用法

看完上面三个示例，想必你已经对如何使用这个控件有一定了解了，本来我是想按照Dialog.Builder的方式来构建控件的，后来觉得这样还要调用MaterialDesignDialog.Builder来构建Dialog，不如直接通过MaterialDesignDialog类来实现。

使用方法很简单，遵循如下步骤即可：

1、创建一个MaterialDesignDialog实例

MaterialDesignDialog的构造函数有以下4种，使用不同的构造函数可以初始化Dialog的风格和主题

public MaterialDesignDialog(Context context) {
    this(context, Style.SIDE_BY_SIDE_BUTTONS, Theme.LIGHT);
}

public MaterialDesignDialog(Context context, Style style) {
    this(context, style, Theme.LIGHT);
}

public MaterialDesignDialog(Context context, Theme theme) {
    this(context, Style.SIDE_BY_SIDE_BUTTONS, theme);
}

public MaterialDesignDialog(Context context, Style style, Theme theme) {
    mContext = context;
    mStyle = style;
    mTheme = theme;
}

MaterialDesignDialog dialog = new MaterialDesignDialog(context); 这是创建默认风格的Dialog

MaterialDesignDialog dialog = new MaterialDesignDialog(context, MaterialDesignDialog.Style.STACKED_FULL_WIDTH_BUTTONS); 这是创建一个按钮占满一行风格的Dialog

MaterialDesignDialog dialog = new MaterialDesignDialog(context, MaterialDesignDialog.Theme.DARK); 这是创建默认风格但使用深色主题的Dialog

MaterialDesignDialog dialog = new MaterialDesignDialog(context, MaterialDesignDialog.Style.STACKED_FULL_WIDTH_BUTTONS, MaterialDesignDialog.Theme.DARK); 这是创建一个按钮占满一行，并使用深色主题的Dialog

2、为Dialog添加样式

为Dialog添加样式有以下几个方法：

  1. 为Dialog添加标题 dialog.setTitle("标题")，如果没有掉用setTitle，则生成的Dialog为不包含标题栏风格
  2. 为Dialog添加内容
    dialog.setMessage("内容")，这个是必须添加的。
  3. 为Dialog添加确定按钮 dialog.setPositiveButton("确定", onClickListener);
  4. 为Dialog添加取消按钮 dialog.setNegativeButton("取消", onClickListener);
  5. 为Dialog设置并排的按钮 dialog.setItems(strings, onItemClickListener)，这个会覆盖setMessage的效果，同时，使用这种样式时，不建议再添加取消或确定按钮
  6. 使用自定义View dialog.setContentView(view)，这会覆盖上面5种方法，让Dialog显示自定义的View
  7. 添加点击在Dialog外时是否释放Dialog的设置 dialog.setCanceledOnTouchOutside(true)
  8. 为Dialog释放后添加监听器 dialog.setOnDismissListener(onDismissListener)

以上几种方法的调用没有先后顺序，但需要注意他们的互斥关系，还有一些其他方法，不符合谷歌的设计规范，就不一一说明了，也不建议使用。

3、显示Dialog

为Dialog添加完样式之后，通过调用dialog.show();即可显示Dialog。

以上，便是MaterialDesignDialog的用法了，本项目欢迎pr，期待你的参与。

noBorder
除非另有声明，本博客所有文章采用的授权方式为 自由转载-非商用-非衍生-保持署名 ，转载请务必注明出处，谢谢。

文章评论


章节列表