图片与图标

  • 更新时间:2025-12-02 10:12:46

图片-img

常用于显示图片或者图标

原生类型:{com.google.android.material.imageview.ShapeableImageView}

图片(图标):用于显示图片或者图标

一、常用属性

radius - 圆弧半径

设置圆弧半径

单位:dp

<img radius="16"/>

url - 图片链接

设置图片链接

<img url="http://..."/>

strokeWidth - 边框宽度

设置边框宽度

单位:dp

<img strokeWidth="5"/>

strokeColor - 边框颜色

设置边框颜色

<img strokeColor="#FF0000"/>

scaleType - 拉伸类型

设置拉伸类型

可选(忽略大小写,可忽略下划线):FIT_CENTER, FIT_START, FIT_END, FIT_XY, CENTER, CENTER_CROP, CENTER_INSIDE, MATRIX

<img scaleType="fitxy"/>

tint - 图片填充颜色

设置图片填充颜色

<img tint="#FF0000"/>

path - 图片本地路径

设置图片本地路径

<img path="/res/t01.png"/>

src - 图片或图标路径

设置图片或图标路径

<img src="/res/t01.png"/>

rotation - 旋转角度

设置旋转角度

<img rotation="45"/>

rotateSpeed - 自动旋转的倍速

设置自动旋转的倍速

<img rotateSpeed="3"/>

rotate - 是否自动旋转

是否自动旋转

<img rotate="true"/>

padding - 内边距

设置内边距

<!--padding顺序是:左,上,右,下-->
<!--padding只设置一个值:则设置所有方向的内边距-->
<!--padding只设置两个值:则设置左右和上下方向的内边距-->
<img padding="20" />

gravity - 重力

设置重力

<img gravity="start" />

bg - 背景颜色

设置背景颜色

<img bg="#1E1F22" />

bgImg - 背景图片

设置背景图片

<img bgImg="./img.png" />

二、常用函数

rotate(rotated)

图片自动旋转

  • 参数 : rotated {boolean} 是否旋转

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let mImg = ui.id("mImg");
//设置图片自动旋转
mImg.rotate(true);

rotate(rotated, speed)

图片自动旋转

  • 参数 : rotated {boolean} 是否旋转

  • 参数 : speed {float} 旋转速度

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let mImg = ui.id("mImg");
//设置图片自动旋转
mImg.rotate(true,10);

setRotation(rotation)

设置角度

  • 参数 : rotation {float} 角度

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let mImg = ui.id("mImg");
//设置角度
mImg.setRotation(45);

setSrc(src)

设置图标

  • 参数 : src {string} 设置图片名称,并且加载名称上的图片

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let mImg = ui.id("mImg");
//设置图标
mImg.setSrc("logo_ag");

setUrl(url)

设置图片Url

  • 参数 : url {string} 设置图片Url,并且加载Url上的图片

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let mImg = ui.id("mImg");
//设置图片链接(这里我随便弄了个链接)
mImg.setUrl("https://www.baidu.com/icon.png  ");

setPath(path)

设置图片路径

  • 参数 : path {string} 设置图片路径,并且加载路径上的图片

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let mImg = ui.id("mImg");
//设置图片
mImg.setPath("./res/mImg.png");

setImg(bitmap)

设置图片

  • 参数 : bitmap {bitmap} 设置的图片

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let mImg = ui.id("mImg");
//设置图片
let img = $img.read("./res/mImg.png");
mImg.setImg(img.getBitmap());

getImg()

获取图片

  • 返回 : {bitmap} 获取到的图片

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let mImg = ui.id("mImg");
//获取图片
let bitmap = mImg.getImg();
//构建$img对象
let img = $img.open(bitmap);