首页 > 其他分享> > QMUI框架简介

QMUI框架简介

2019-06-02 14:55:59 作者：互联网

QMUI框架

文章目录

QMUI框架

QUMI框架介绍

官网简介
功能特性

框架的引入步骤
框架的使用

按钮
对话框

QUMI框架介绍

官网简介

QMUI Android 的设计目的是用于辅助快速搭建一个具备基本设计还原效果的 Android 项目，同时利用自身提供的丰富控件及兼容处理，让开发者能专注于业务需求而无需耗费精力在基础代码的设计上。不管是新项目的创建，或是已有项目的维护，均可使开发效率和项目质量得到大幅度提升。

功能特性

全局 UI 配置
只需要修改一份配置表就可以调整 App 的全局样式，包括组件颜色、导航栏、对话框、列表等。一处修改，全局生效。
丰富的 UI 控件
提供丰富常用的 UI 控件，例如 BottomSheet、Tab、圆角 ImageView、下拉刷新等，使用方便灵活，并且支持自定义控件的样式。
高效的工具方法
提供高效的工具方法，包括设备信息、屏幕信息、键盘管理、状态栏管理等，可以解决各种常见场景并大幅度提升开发效率。

框架的引入步骤

新建一个空项目，打开build.gradle(Moudule:app)

在dependencies {}中：
注释掉implementation ‘com.android.support:appcompat-v7:28.0.0’
添加 implementation ‘com.qmuiteam:qmui:1.1.2’

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    //注释
    //implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    //引用
  implementation 'com.qmuiteam:qmui:1.1.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

同步gradle：两种方法

点击上方的黄色警告，Sync now
* 或者点击工具栏的第三个按钮
配置主题：打开styles.xml文件

把项目的 theme 的 parent 指向 QMUI.Compat

框架的使用

框架的使用可以对照着QMUI官网上给出的一个Demo来写，下面分析一些常用的控件，逐步熟悉QMUI框架。

如果下载了官方给出的demo，就会看到qmuidemo，我们可以参考这里的代码来使用这个框架。

按钮

按钮的代码在标红的布局文件中，但介绍的不是很详细，我把一些官网没介绍清楚的属性写下来：
<com.qmuiteam.qmui.widget.roundwidget.QMUIRoundButton表示使用QMUI框架的按钮
**android:padding=“20dp”**调整按钮大小
**app:qmui_radius=“22dp”**调整圆角大小
**app:qmui_radiusTopLeft=“80dp”**指定按钮左上角的圆角大小
**app:qmui_radiusTopRight=“80dp”**指定按钮右上角的圆角大小
** app:qmui_radiusBottomLeft=“80dp”**指定按钮左下角的圆角大小
**app:qmui_radiusBottomRight=“80dp”**指定按钮右下角的圆角大小
**app:qmui_borderWidth=“12px”**指定按钮的边框宽度
** app:qmui_borderColor="@color/colorPrimary"**指定按钮的边框颜色
写了一个小例子：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

系统按钮的样式，用来对比

    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_alignParentTop="true"
        android:text="系统按钮"/>

QMUI按钮1

    <com.qmuiteam.qmui.widget.roundwidget.QMUIRoundButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:padding="20dp"
        app:qmui_radius="22dp"
        app:qmui_borderWidth="12px"
        app:qmui_borderColor="@color/colorPrimary"
        android:layout_below="@id/btn1"
        android:text="QMUI按钮1"/>

左上角弧形按钮

    <com.qmuiteam.qmui.widget.roundwidget.QMUIRoundButton
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:text="东"
        app:qmui_radiusTopLeft="80dp"/>

右上角弧形按钮

    <com.qmuiteam.qmui.widget.roundwidget.QMUIRoundButton
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_marginLeft="64dp"
        android:text="西"
        app:qmui_radiusTopRight="80dp"/>

左下角弧形按钮

    <com.qmuiteam.qmui.widget.roundwidget.QMUIRoundButton
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_marginTop="64dp"
        android:text="南"
        app:qmui_radiusBottomLeft="80dp"/>

右下角弧形按钮

    <com.qmuiteam.qmui.widget.roundwidget.QMUIRoundButton
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_marginLeft="64dp"
        android:layout_marginTop="64dp"
        android:text="北"
        app:qmui_radiusBottomRight="80dp"/>
</RelativeLayout>

效果：
在这里插入图片描述

对话框

对话框的使用，在demo里写不是很清楚，我拿出来做了一个小例子
dialog.xml布局文件是5个按钮，分别对应五种不同的对话框类型:

<?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"
    xmlns:app="http://schemas.android.com/apk/res-auto">

消息类型对话框（蓝色按钮）

    <com.qmuiteam.qmui.widget.roundwidget.QMUIRoundButton
        android:id="@+id/d1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_alignParentTop="true"
        android:padding="20dp"
        app:qmui_radius="22dp"
        app:qmui_borderWidth="12px"
        app:qmui_borderColor="@color/colorPrimary"
        android:onClick="showMessagePositiveDialog"
        android:text="消息类型对话框（蓝色按钮）"/>

单选菜单类型对话框

    <com.qmuiteam.qmui.widget.roundwidget.QMUIRoundButton
        android:id="@+id/d2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_below="@id/d1"
        android:padding="20dp"
        app:qmui_radius="22dp"
        app:qmui_borderWidth="12px"
        app:qmui_borderColor="@color/colorPrimary"
        android:onClick="showSingleChoiceDialog"
        android:text="单选菜单类型对话框"/>

带Checkbox的消息对话框

    <com.qmuiteam.qmui.widget.roundwidget.QMUIRoundButton
        android:id="@+id/d3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_below="@id/d2"
        android:padding="20dp"
        app:qmui_radius="22dp"
        app:qmui_borderWidth="12px"
        app:qmui_borderColor="@color/colorPrimary"
        android:onClick="showConfirmMessageDialog"
        android:text="带 Checkbox 的消息确认框"/>

多选菜单类型对话框

    <com.qmuiteam.qmui.widget.roundwidget.QMUIRoundButton
        android:id="@+id/d5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_below="@id/d3"
        android:padding="20dp"
        app:qmui_radius="22dp"
        app:qmui_borderWidth="12px"
        app:qmui_borderColor="@color/colorPrimary"
        android:onClick="showMultiChoiceDialog"
        android:text="多选菜单类型对话框"/>

带输入框的对话框

    <com.qmuiteam.qmui.widget.roundwidget.QMUIRoundButton
        android:id="@+id/d6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_below="@id/d5"
        android:padding="20dp"
        app:qmui_radius="22dp"
        app:qmui_borderWidth="12px"
        app:qmui_borderColor="@color/colorPrimary"
        android:onClick="showEditTextDialog"
        android:text="带输入框的对话框"/>

</RelativeLayout>

dialog.java文件：
一些属性的介绍：
- .setTitle(“消息类型对话框”)：对话框标题
- .setMessage(“蓝色按钮”)：对话框内容
- .addAction(“取消”, new QMUIDialogAction.ActionListener() 点击后的行为
- dialog.dismiss() 对话框消失
- .setChecked(true) 带check 选项
完整的代码贴出：
一些import:

package com.example.win.qmuidemo;

import android.content.DialogInterface;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.text.InputType;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.AdapterView;
import android.widget.Button;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.Toast;

import com.qmuiteam.qmui.util.QMUIStatusBarHelper;
import com.qmuiteam.qmui.widget.dialog.QMUIDialog;
import com.qmuiteam.qmui.widget.dialog.QMUIDialogAction;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

Button定义和onCreate()方法:

public class Dialog extends AppCompatActivity {
   Button b1=null;
    Button b2=null;
    Button b3=null;
    Button b4=null;
    Button b5=null;
    Button b6=null;
    Button b7=null;
    private int mCurrentDialogStyle = com.qmuiteam.qmui.R.style.QMUI_Dialog;
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.dialog);
    }

消息类型对话框

    //消息类型对话框（蓝色按钮）
    public void showMessagePositiveDialog(View view) {
        new QMUIDialog.MessageDialogBuilder(this)
                .setTitle("消息类型对话框")
                .setMessage("蓝色按钮")
                .addAction("取消", new QMUIDialogAction.ActionListener() {
                    @Override
                    public void onClick(QMUIDialog dialog, int index) {
                        dialog.dismiss();
                        Toast.makeText(Dialog.this, "点击了取消", Toast.LENGTH_SHORT).show();
                    }
                })
                .addAction("确定", new QMUIDialogAction.ActionListener() {
                    @Override
                    public void onClick(QMUIDialog dialog, int index) {
                        dialog.dismiss();
                        Toast.makeText(Dialog.this, "点击了确定", Toast.LENGTH_SHORT).show();
                    }
                })
                .show();
    }

在这里插入图片描述

单选菜单类型对话框

    //单选菜单类型对话框
    public void showSingleChoiceDialog(View view){
        final String[] items = new String[]{"选项1", "选项2", "选项3"};
        final int checkedIndex = 1;
        new QMUIDialog.CheckableDialogBuilder(this)
                .setCheckedIndex(checkedIndex)
                .addItems(items, new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        Toast.makeText(Dialog.this, "你选择了 " + items[which], Toast.LENGTH_SHORT).show();
                        dialog.dismiss();
                    }
                })
                .show();
    }

在这里插入图片描述

带checkbox类型对话框

    //带checkbox类型的对话框
    public void showConfirmMessageDialog(View view){
        new QMUIDialog.CheckBoxMessageDialogBuilder(this)
                .setTitle("退出后是否删除账号信息?")
                .setMessage("删除账号信息")
                .setChecked(true)
                .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) {
                        dialog.dismiss();
                    }
                })
                .show();
    }

在这里插入图片描述

多选类型对话框

    //多选菜单类型对话框
    public void showMultiChoiceDialog(View view){
        final String[] items = new String[]{"选项1", "选项2", "选项3", "选项4", "选项5", "选项6"};
        final QMUIDialog.MultiCheckableDialogBuilder builder = new QMUIDialog.MultiCheckableDialogBuilder(this)
                .setCheckedItems(new int[]{1, 3})
                .addItems(items, new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {

                    }
                });
        builder.addAction("取消", new QMUIDialogAction.ActionListener() {
            @Override
            public void onClick(QMUIDialog dialog, int index) {
                dialog.dismiss();
            }
        });
        builder.addAction("提交", new QMUIDialogAction.ActionListener() {
            @Override
            public void onClick(QMUIDialog dialog, int index) {
                String result = "你选择了 ";
                for (int i = 0; i < builder.getCheckedItemIndexes().length; i++) {
                    result += "" + builder.getCheckedItemIndexes()[i] + "; ";
                }
                Toast.makeText(Dialog.this, result, Toast.LENGTH_SHORT).show();
                dialog.dismiss();
            }
        });
        builder.show();
    }

在这里插入图片描述

带输入框的对话框

    //带输入框的对话框
    public void showEditTextDialog(View view){
        final QMUIDialog.EditTextDialogBuilder builder = new QMUIDialog.EditTextDialogBuilder(this);
        builder.setTitle("标题")
                .setPlaceholder("在此输入您的昵称")
                .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();
                        if (text != null && text.length() > 0) {
                            Toast.makeText(Dialog.this, "您的昵称: " + text, Toast.LENGTH_SHORT).show();
                            dialog.dismiss();
                        } else {
                            Toast.makeText(Dialog.this, "请填入昵称", Toast.LENGTH_SHORT).show();
                        }
                    }
                })
                .create(mCurrentDialogStyle).show();
    }
}

在这里插入图片描述

作者：李闻昕
链接：https://blog.csdn.net/qq_42315359/article/details/90712658

标签：QMUI,框架,对话框,简介,按钮,dialog,import,new,android
来源： https://blog.csdn.net/fjnu_se/article/details/90738724