按钮
按钮-button
按钮控件{XButton}是属于{XView}的子控件，因此{XView}中的所有方法，按钮控件都可以调用。
按钮是界面的最简单的元素，一般用于点击操作。
一、基础使用
其实按钮本身是没有点击事件的，由于它继承了父类{XView}，因此可以调用其父类中的函数来实现点击操作。
事实上，所有的组件都是继承自{XView}的，因此都可以调用{XView}中的方法。
<ui>
<statusbar />
<button id="mBut" text="点击我试试" />
</ui>
let ui = $ui.layout("ui.xml");
ui.show();//显示界面
//找到界面中的元素并且实现点击事件
ui.id("mBut").click(() => {
info("我被点击了");
});
二、常用属性
text - 文本
设置文本
<ui>
<statusbar />
<!-- 设置文本 -->
<button text="我是文本" />
</ui>
style - 样式
设置样式
可选值有："text","outline","tonal","icon"
<ui>
<statusbar />
<!-- 横向排列 -->
<linear dir="h" w="max">
<button text="默认样式" />
<button style="text" text="文本样式" />
<button style="outline" text="边框样式" />
</linear>
<linear dir="h" w="max">
<button style="tonal" text="色调样式" />
<button style="icon" icon="ic_app" text="图标样式" />
</linear>
</ui>
color - 主题颜色
设置主题颜色
<ui>
<statusbar />
<!-- 居中显示 -->
<linear dir="h" w="max" gravity="center">
<button color="#57965C" text="主题颜色" />
</linear>
</ui>
textColor - 文本颜色
设置文本颜色
<ui>
<statusbar />
<!-- 居中显示 -->
<linear dir="h" w="max" gravity="center">
<button textColor="#B44A4A" text="文字颜色" />
</linear>
</ui>
ripper - 涟漪颜色
设置涟漪颜色
<ui>
<statusbar />
<!-- 居中显示 -->
<linear dir="h" w="max" gravity="center">
<button ripper="#000000" text="涟漪颜色:黑色"/>
</linear>
</ui>
radius - 弧度
设置弧度
<ui>
<statusbar />
<!-- 居中显示 -->
<linear dir="h" w="max" gravity="center">
<button radius="8" text="圆角弧度:8dp"/>
<button radius="15" text="圆角弧度:15dp"/>
</linear>
</ui>
textSize - 文本尺寸
设置文本尺寸
<ui>
<statusbar />
<!-- 居中显示 -->
<linear dir="h" w="max" gravity="center">
<button text="文本尺寸15" textSize="15"/>
<button text="文本尺寸25" textSize="25"/>
</linear>
</ui>
icon - 图标
设置图标
<ui>
<statusbar />
<!-- 居中显示 -->
<linear dir="h" w="max" gravity="center">
<button text="设置图标" icon="ic_delete"/>
</linear>
</ui>
iconTint - 图标颜色
设置图标颜色
<ui>
<statusbar />
<!-- 居中显示 -->
<linear dir="h" w="max" gravity="center">
<button text="图标颜色" iconTint="#FF0000" icon="ic_delete"/>
</linear>
</ui>
iconSize - 图标尺寸
设置图标尺寸
<ui>
<statusbar />
<!-- 居中显示 -->
<linear dir="h" w="max" gravity="center">
<button text="图标尺寸:11" iconSize="11" icon="ic_delete"/>
<button text="图标尺寸:25" iconSize="25" icon="ic_delete"/>
</linear>
</ui>
iconPadding - 图标内边距
设置图标内边距
<ui>
<statusbar />
<!-- 居中显示 -->
<linear dir="h" w="max" gravity="center">
<button text="图标内边距:5" iconPadding="5" icon="ic_delete"/>
<button text="图标内边距:35" iconPadding="35" icon="ic_delete"/>
</linear>
</ui>
minW - 最小宽度
设置最小宽度
单位:dp
minH - 最小高度
设置最小高度
单位:dp
padding - 内边距
设置内边距
<ui>
<statusbar />
<!-- 居中显示 -->
<linear dir="h" w="max" gravity="center">
<!--padding顺序是:左,上,右,下-->
<!--padding只设置一个值：则设置所有方向的内边距-->
<!--padding只设置两个值：则设置左右和上下方向的内边距-->
<button padding="10" text="内边距:10"/>
<button padding="20" text="内边距:20"/>
</linear>
</ui>
gravity - 重力
设置重力
<ui>
<statusbar />
<!-- 为了让重力效果更直观，我将按钮增高增宽显示 -->
<button gravity="start" text="重力:start" w="max" h="60"/>
<button gravity="end" text="重力:end" w="max" h="60" />
</ui>
bg - 背景颜色
设置背景颜色
<ui>
<statusbar />
<linear w="max" gravity="center">
<button bg="#1E1F22" text="背景颜色" />
</linear>
</ui>
bgImg - 背景图片
设置背景图片
<ui>
<statusbar />
<linear w="max" gravity="center">
<button bgImg="/res/button-bg.png" text="背景图片" textColor="#000000" />
</linear>
</ui>
三、常用函数
setGravity(gravity)
设置重力
//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获得控件
let mBut = ui.id("mButton");
//设置重力
mBut.setGravity("center|bottom");
setTypeface(typeface)
设置字体
//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获得控件
let mBut = ui.id("mButton");
//设置字体
mBut.setTypeface($ui.BOLD);//常用值：$ui.NORMAL,$ui.ITALIC,$ui.BOLD,$ui.BOLD_ITALIC
setColor(color)
设置主题颜色
//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获得控件
let mBut = ui.id("mButton");
//设置红色
mBut.setColor($color.RED);
//设置成主题的颜色(具体颜色请参考$color文档)
//mBut.setColor($color.parse("colorPrimary"));
setColor(color)
设置主题颜色
//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获得控件
let mBut = ui.id("mButton");
//设置主题颜色
mBut.setColor("#1E1F22");
setText(text)
设置文字
//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获得控件
let mBut = ui.id("mButton");
//设置文字
mBut.setText("我是按钮");
getText()
获得文字
如果获取的文本为null则会返回空字符串
//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获得控件
let mBut = ui.id("mButton");
//获得文字
let text = mBut.getText("我是按钮");
setTextColor(color)
设置文字颜色
//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获得控件
let mBut = ui.id("mButton");
//设置文字颜色
mBut.setTextColor("#1E1F22");
setTextColor(color)
设置文字颜色
//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获得控件
let mBut = ui.id("mButton");
//设置文字颜色
mBut.setTextColor($color.RED);
setRipper(color)
设置涟漪颜色
//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获得控件
let mBut = ui.id("mButton");
//设置涟漪颜色
mBut.setRipper($color.RED);
setRipper(color)
设置涟漪颜色
//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获得控件
let mBut = ui.id("mButton");
//设置涟漪颜色
mBut.setRipper("#1E1F22");
setRadius(radius)
设置弧度
//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获得控件
let mBut = ui.id("mButton");
//设置弧度
mBut.setRadius(20);
setTextSize(size)
设置字体大小
//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获得控件
let mBut = ui.id("mButton");
//设置字体大小(单位:sp)
mBut.setTextSize(20);
setIcon(icon)
设置图标
//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获得控件
let mBut = ui.id("mButton");
//设置图标
mBut.setIcon("logo_ag");
setIconTint(color)
设置图标颜色
//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获得控件
let mBut = ui.id("mButton");
//设置图标
mBut.setIcon("logo_ag");
//设置图标颜色
mBut.setIconTint($color.RED);
setIconTint(color)
设置图标颜色
//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获得控件
let mBut = ui.id("mButton");
//设置图标
mBut.setIcon("logo_ag");
//设置图标颜色
mBut.setIconTint("#1E1F22");
setIconSize(size)
设置图标尺寸
//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获得控件
let mBut = ui.id("mButton");
//设置图标
mBut.setIcon("logo_ag");
//设置图标尺寸(单位:dp)
mBut.setIconSize(15);
setIconPadding(padding)
设置图标内边距
//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获得控件
let mBut = ui.id("mButton");
//设置图标
mBut.setIcon("logo_ag");
//设置图标内边距
mBut.setIconPadding(8);
