QMUI框架简介

最新推荐文章于 2025-06-22 13:56:13 发布
最新推荐文章于 2025-06-22 13:56:13 发布
阅读量3.2k 收藏 15
点赞数 1
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42315359/article/details/90712658
QMUI Android框架旨在辅助快速构建设计还原的项目，提供全局UI配置、丰富控件和高效工具。介绍包括框架引入步骤、主题配置，以及QMUIRoundButton和对话框的详细使用方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

QMUI框架

文章目录

QUMI框架介绍

官网简介

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

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

框架的引入步骤

  • 新建一个空项目，打开build.gradle(Moudule:app)
  1. 在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'
}
  1. 同步gradle：两种方法
  • 点击上方的黄色警告，Sync now
    在这里插入图片描述* 或者点击工具栏的第三个按钮
    在这里插入图片描述
  • 配置主题：打开styles.xml文件
  1. 把项目的 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();
    }
}

在这里插入图片描述

腾讯开源的Android UI框架——QMUI Android
技术视界
12-07 4万+
各位同学，早上好，我是你们的老朋友D_clock爱吃葱花，前些天忙着发版本，最近也在看各种各样的新知识，有好多东西想写啊啊啊啊啊。嗯，先冷静捋一下，卖个关子。扯回正题，今天继续为大家推荐一个Github上的开源框架——QMUI Android，出品自腾讯广州研发部QMUI团队。https://github.com/QMUI如果是做Web开发的同学，应该会很熟悉QMUI所开源的QMUI Web框架，
android qmui框架,腾讯QMUI Android框架使用(三)QMUIDialog
weixin_34551660的博客
05-27 985
QMUIDialog提供了一系列常用的对话框，解决了使用系统默认对话框时在不同 Android 版本上的表现不一致的问题。使用不同的 Builder 来构建不同类型的对话框，这些 Builder 都拥有设置 title 和添加底部按钮的功能，不同的 Builder 特有的作用如下：1.MessageDialogBuilder: 消息类型的对话框 Builder。通过它可以生成一个带标题、文本消息、...
QMUIWeb一个前端框架旨在提高UI开发的效率
08-08
QMUI Web 是一个专注 Web UI 开发，帮助开发者快速实现特定的一整套设计的框架。通过 QMUI Web，开发者可以很轻松地提高 Web UI 开发的效率。
QMUI 一款腾讯开发的很不错的UI框架
georgehenrywilliam的博客
04-12 375
的产出都很大效率的提高了开发效率，我之前写了那么多的博客，很大部分都不如人家这个基础封装库来得直接，可见腾讯也是将自己多年的基础UI库多年打磨并且封装，很不错的效果非常值得推荐，也算是对自己多年开发的一次总结吧～～～QMUI里面很多UI框架都很值得借鉴，实际开发中也经常可以用到，一些常用功能的基础UI封装以及代码块。
Android应用集成Mui框架实操指南
最新发布
weixin_35754676的博客
06-22 984
Mui框架的核心设计哲学是“简洁至上”，力求通过最小的代码量实现强大的功能。该框架采用了分层架构设计，将UI、逻辑与数据处理分离，保证了代码的模块化与可维护性。同时，Mui坚持原生渲染优先，以确保应用的性能和兼容性。自定义组件是Android应用开发中的一个重要环节，它允许开发者构建可复用的UI元素，以提高开发效率和应用的一致性。本章节将探讨Mui框架下如何实现自定义组件，以及如何进行性能优化。为了提高开发效率和代码的可维护性，我们应该追求组件的复用性。在Mui框架中，可以通过继承。
【Kevin Learn QMUI】--＞QMUIDialog
Kevin Learn Android
03-26 832
qmui 提供了一系列常用的对话框，解决了使用系统默认对话框时在不同 Android 版本上的表现不一致的问题。使用不同的 Builder 来构建不同类型的对话框，这些 Builder 都拥有设置 title 和添加底部按钮的功能，不同的 Builder 特有的作用如下： MessageDialogBuilder: 消息类型的对话框 Builder。通过它可以生成一个带标题、文本消息、按钮的对话框。 ConfirmMessageDialogBuilder: 带 Checkbox 的消息确认框 Builder
QMUI_Android使用（一）QMUIDialog
热门推荐
u012833261的博客
02-06 1万+
1.QMUI_Android是腾讯出的一款UI框架，还有Web和IOS版本。 在AndriodStudio中新建一个Android项目，在APP中build.gradle的dependencies中加入compile'com.qmuiteam:qmui:1.0.6'，如下： 2.在styles.xml文件中将主题改为stylename="AppTheme"parent="QMUI.Com
相比于原生的Android弹出框，最新版QMUI的弹出框更加漂亮美观，QMUI的配置与弹出框的实现？
qq_45137584的博客
12-06 4890
这里我建议测试QMUI框架的时候，自己先新建一个项目测试一下，避免因为一些其他原因而导致QMUI是使用不成功。 QMUI的配置导入QMUI框架第二步修改主题样式第三步实现基本的弹框功能 导入QMUI框架 QMUI的官网地址是QMUI 首先先写下载包的仓库地址，找到你build.gradle的第一个文件>-allprojects。加入红色圆圈代码。 maven { url 'https://jitpack.io' } 其次，加入QMUI包 代码如下： implementation 'com.qmu
QMUI框架简介，android开发游戏
wqwq_22的博客
02-16 4428
效果： 对话框 对话框的使用，在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
QMUI Web前端框架
04-05
QMUI Web前端框架是一个旨在提高UI开发效率、快速产生项目UI的前端框架。 QMUI Web是一个专注Web UI开发，帮助开发者快速实现特定的一整套设计的框架。框架主要由一个强大的SASS方法合集与内置的工作流构成。通过...
QMUI Web前端框架 v1.2.6
12-04
QMUI Web前端框架是一个旨在提高UI开发效率、快速产生项目UI的前端框架。 QMUI Web是一个专注Web UI开发，帮助开发者快速实现特定的一整套设计的框架。框架主要由一个强大的SASS方法合集与内置的工作流构成。通过...
Qmui资源库
04-28
UI设计，开源的QMUI的项目，提升开发速度与界面效果，上手速度快
QMUI Web前端框架 v2.2.1
11-29
QMUI Web前端框架是一个旨在提高UI开发效率、快速产生项目UI的前端框架。 QMUI Web是一个专注Web UI开发，帮助开发者快速实现特定的一整套设计的框架。框架主要由一个强大的SASS方法合集
QMUI
qq_41289165的博客
04-22 257
https://qmuiteam.com/android/
2.QMUI---QMUIDialog的用法
qq_31309689的博客
01-09 6218
1. 引入库1.最新的库会上传到 JCenter 仓库上，请确保配置了 JCenter 仓库源，然后直接引用：compile 'com.qmuiteam:qmui:1.0.6'至此，QMUI 已被引入项目中。2.需要引用QMUI的样式&lt;application android:allowBackup="true" android:icon="@mipmap/ic_launche...
GitHub标星5，值得推荐
m0_61408464的博客
09-02 286
引入工程中使用也非常简单，参照官方配置文档的手把手教学即可Happy Coding！ 官方配置文档：http://qmuiteam.com/android/page/start.html 经过一小段时间的体验之后，我总结了以下几个亮点分享一下。 常见UI效果封装 QMUI Android中提供了很多常见使用的UI效果封装，比如下面这些： 1、QMUIDialog：它提供了一系列常用的对话框，解决了使用系统默认对话框时在不同 Android 版本上的表现不一致的问题。 并且可以使用不同的Builde
使用QMUI实现用户协议对话框
Unlimitedz的博客
02-02 560
使用QMUI实现用户协议对话框
QMUI自定义弹框
jiayuanwai的博客
05-04 600
1、QMUI自定义弹框。
QMUI Android UI 框架正式发布
weixin_34232617的博客
08-29 418
QMUI Android 的设计目的是用于辅助快速搭建一个具备基本设计还原效果的 Android 项目，同时利用自身提供的丰富控件及兼容处理，让开发者能专注于业务需求而无需耗费精力在基础代码的设计上。不管是新项目的创建，或是已有项目的维护，均可使开发效率和项目质量得到大幅度提升。 官网：http://qmuiteam.com/andro...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值