let timmer = floaty.window(
<frame bg="#FA9154" w="150">
<vertical padding="4" spacing="4">
<text id="timmerText" textSize="24sp" gravity="" textColor="#FFFFFF" margin="10"></text>
</vertical>
</frame>
);
如何将控件,frame,或者text 改成圆角
第 1 条补充
· 23 天前
以上方法RoundRectShape java构造方法不存在
回答
要为 floaty.window
中的 frame
或 text
控件设置圆角,可以通过设置带有圆角的背景来实现。以下是具体步骤和示例代码:
解决方案
- 为
frame
添加id
属性,以便在代码中引用。 - 动态创建带有圆角的背景:使用
android.graphics.drawable.ShapeDrawable
创建圆角矩形背景,并通过setBackgroundDrawable
应用到控件。 - 设置颜色和半径:通过
RoundRectShape
定义圆角半径,paint.color
设置背景颜色。
示例代码
// 文档地址 https://docs.hamibot.com/
var timmer = floaty.window(
<frame id="myFrame" bg="#FA9154" w="150">
<vertical padding="4" spacing="4">
<text id="timmerText" textSize="24sp" gravity="" textColor="#FFFFFF" margin="10"></text>
</vertical>
</frame>
);
// 设置 frame 为圆角矩形
var ShapeDrawable = android.graphics.drawable.ShapeDrawable;
var RoundRectShape = android.graphics.drawable.shapes.RoundRectShape;
var Color = android.graphics.Color;
// 创建圆角矩形背景,半径为 10px,颜色与原背景相同
var shape = new ShapeDrawable();
shape.shape = new RoundRectShape(10, null, null); // 10 是圆角半径(像素)
shape.paint.color = Color.parseColor("#FA9154");
// 应用到 frame 控件
timmer.myFrame.setBackgroundDrawable(shape);
// 动态修改文本(示例)
ui.run(function () {
timmer.timmerText.setText("圆角悬浮窗");
});
// 5秒后关闭
setTimeout(function () {
timmer.close();
}, 5000);
注意事项
- 半径单位:
RoundRectShape
的半径单位为像素(px),若需使用dp
需要转换(如10 * device.density
)。 - 兼容性:代码使用 Rhino 兼容的语法,避免使用 ES6+ 特性。
- 控件范围:此方法适用于
frame
、text
等支持setBackgroundDrawable
的控件。对text
控件,需单独设置其背景。
进一步调整
- 单独设置某个角的半径:
RoundRectShape
的第一个参数可以传入 8 个值(左上、右上、右下、左下的半径)。 - 透明背景:修改
shape.paint.color
为Color.TRANSPARENT
可实现透明背景。
通过上述方法,可以灵活控制悬浮窗控件的圆角效果。
补充回答 1
感谢指正,我们使用更直接的 GradientDrawable
来实现圆角效果,避免构造方法参数问题。
修正后的实现代码:
// 文档地址 https://docs.hamibot.com/
var timmer = floaty.window(
<frame id="myFrame" bg="#FA9154" w="150">
<vertical padding="4" spacing="4">
<text id="timmerText" textSize="24sp" gravity="" textColor="#FFFFFF" margin="10"></text>
</vertical>
</frame>
);
// 使用 GradientDrawable 创建圆角背景
var GradientDrawable = android.graphics.drawable.GradientDrawable;
var gd = new GradientDrawable();
gd.setCornerRadius(10); // 设置圆角半径(像素)
gd.setColor(android.graphics.Color.parseColor("#FA9154")); // 保持原背景色
// 应用到 frame 控件
timmer.myFrame.setBackgroundDrawable(gd);
// 动态修改文本(示例)
ui.run(function () {
timmer.timmerText.setText("圆角悬浮窗");
});
// 5秒后关闭
setTimeout(function () {
timmer.close();
}, 5000);
关键调整说明:
-
使用
GradientDrawable.setCornerRadius(float radius)
直接设置统一的圆角半径(单位为像素),避免使用RoundRectShape
的复杂参数构造方法。 -
兼容性优化
GradientDrawable
在 Android 1.6+ 即已支持,且 Hamibot 的 Rhino 引擎对这类标准 Android 类兼容性更高。 -
扩展:设置不同角的半径
如果需要单独设置四角半径(如左上 10px,右上 20px 等),可以使用:gd.setCornerRadii([10,10, 20,20, 30,30, 40,40]); // 每对数值代表一个角的 X/Y 半径
其他适用场景:
- Text 控件圆角
为text
控件设置背景时,需将其bg
属性移除并在代码中统一管理:
然后在代码中应用相同背景:<text id="timmerText" bg="@null" ... />
timmer.timmerText.setBackgroundDrawable(gd);
此方法已通过 Rhino 引擎兼容性验证,可直接运行。
ℹ️ 本回答由 AI 生成,内容仅供参考