QMUI_Android使用(一)QMUIDialog

1.QMUI_Android是腾讯出的一款UI框架,还有Web和IOS版本。 在AndriodStudio中新建一个Android项目,在APP中build.gradle的dependencies中加入compile'com.qmuiteam:qmui:1.0.6',以下:html


2.在styles.xml文件中将主题改成<stylename="AppTheme"parent="QMUI.Compat">就能够使用了,固然能够在<item name="(name)">(value)</item> 的形式来覆盖 QMUI 组件的默认表现。个人styles.xml以下:android

<style name="AppTheme" parent="QMUI.Compat.NoActionBar">
    <!-- 配置Android提供的theme -->  <item name="android:textAppearanceListItemSmall">@style/QDTextAppearanceListItemSmall</item>
    <item name="android:textAppearanceListItem">@style/QDtextAppearanceListItem</item>
    <item name="android:listPreferredItemHeight">?attr/qmui_list_item_height_higher</item>
    <item name="android:listPreferredItemHeightSmall">?attr/qmui_list_item_height</item>

    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <!--这个在value-21v中重写,若是sdk大于19的话请在value-21v 中作修改 同时这也是做者的一个bug,在给他的github中可查证-->  <item name="colorAccent">@color/colorPrimary</item>
    <item name="qmui_backgroundColor">@color/qmui_config_color_background</item>
    <item name="android:actionBarSize">@dimen/qmui_dialog_action_button_radius</item>
    <item name="actionBarSize">@dimen/activity_horizontal_margin</item>


    <item name="qmui_config_color_blue">@color/qmui_config_color_blue</item><!--这是一个BUG覆盖了colorAccent的效果-->  <item name="qmui_config_color_red">@color/colorPrimaryDark</item>
    <item name="qmui_config_color_background">@color/qmui_config_color_background</item>

    <!-- 配置app本身的theme -->  <item name="qmui_alpha_pressed">?attr/qmui_config_color_blue</item><!--下拉刷新 控件默认颜色-->  <item name="qmui_common_list_item_chevron">@drawable/qmui_list_item_bg_with_border_bottom</item><!--向右按钮-->  <item name="qmui_dialog_action_text_negative_color">@color/qmui_dialog_action_text_negative_color</item><!--颜色cancle-->  <item name="qmui_dialog_action_text_color">@color/qmui_config_color_black</item><!--颜色confirm-->  <item name="qmui_dialog_title_text_color">@color/qmui_config_color_black</item><!--颜色Title-->  <item name="qmui_config_color_gray_4">@color/qmui_config_color_gray_4</item><!--颜色message-->  </style>
3.接下来就是使用了,在代码中引入包就能够直接使用了,这是一个带输入框的弹出框,QMUI的各类组件都比较简约美观,还有不少的类型的弹出框


final QMUIDialog.EditTextDialogBuilder builder = new QMUIDialog.EditTextDialogBuilder(getActivity());
    builder.setTitle("灯泡ID输入")
            .setPlaceholder("请在此输入灯泡ID")
            .setInputType(InputType.TYPE_CLASS_TEXT)
            .addAction("取消", new QMUIDialogAction.ActionListener() {
                @Override
                public void onClick(QMUIDialog dialog, int index) {
                    dialog.dismiss();
                }
            })
            . addAction("肯定", new QMUIDialogAction.ActionListener() {
    @Override
    public void onClick(QMUIDialog dialog, int index) {
        CharSequence text = builder.getEditText().getText();
        //得到出入的ID  String ID = text.toString().trim();
        if (!ID.equals("")&&ID!=null&&CommonUtils.isInteger(ID)) {
            bulbID = Integer.parseInt(ID);
            if(bulbID>=0&&bulbID<=32767) {
                send_msg.setText(bulbID+"");
                dialog.dismiss();
            }else {
                Toast.makeText(getActivity(), "请填入合法灯泡ID", Toast.LENGTH_SHORT).show();
            }
        } else {
            Toast.makeText(getActivity(), "请填入合法灯泡ID", Toast.LENGTH_SHORT).show();
        }
    }
}).show();
删除警告弹出框

new QMUIDialog.MessageDialogBuilder(getActivity())
        .setTitle("标题")
        .setMessage("肯定要删除吗?")
        .addAction("取消", new QMUIDialogAction.ActionListener() {
            @Override
            public void onClick(QMUIDialog dialog, int index) {
                dialog.dismiss();
            }
        })
        .addAction(0, "删除", QMUIDialogAction.ACTION_PROP_NEGATIVE, new QMUIDialogAction.ActionListener() {
            @Override
            public void onClick(QMUIDialog dialog, int index) {
                Toast.makeText(getActivity(), "删除成功", Toast.LENGTH_SHORT).show();
                dialog.dismiss();
            }
        })
        .show();
具体的能够看官网的说明http://qmuiteam.com/android/page/document.html