QMUI 框架简介

框架的使用

框架的使用可以对照着 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();

}

})

.sh

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开：qq.cn.hn/FTe 免费领取

ow();

}

• 带 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() {