写点什么

QMUI 框架简介

用户头像
Android架构
关注
发布于: 56 分钟前

框架的使用

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

用户头像

Android架构

关注

还未添加个人签名 2021.10.31 加入

还未添加个人简介

评论

发布
暂无评论
QMUI框架简介