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
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() {
评论