51CTO首页
AI.x社区
博客
学堂
精品班
软考社区
免费课
企业培训
鸿蒙开发者社区
WOT技术大会
IT证书
公众号矩阵
移动端
短视频免费课程课程排行直播课软考学堂
全部课程软考华为认证厂商认证IT技术PMP项目管理免费题库
在线学习
文章资源问答课堂专栏直播
51CTO
鸿蒙开发者社区
51CTO技术栈
51CTO官微
51CTO学堂
51CTO博客
CTO训练营
鸿蒙开发者社区订阅号
51CTO软考
51CTO学堂APP
51CTO学堂企业版APP
鸿蒙开发者社区视频号
51CTO软考题库
活动 短视频 专栏 极客Show 鸿蒙技术特刊

【HarmonyOS 专题】05 简单了解 ShapeElement 背景设置 原创 精华

阿策小和尚
发布于 2022-2-5 22:49
浏览
0收藏

    春节不停更，此文正在参加「星光计划-春节更帖活动」
    和尚刚学习了 HarmonyOS 中 Button 的不同样式，其中背景效果主要是通过 shape 文件进行修改，对于渐变色等效果是通过 Java 的 ShapeElement 方式进行修改，和尚今天详细学习一下 ShapeElement 背景设置；

ShapeElement

    与 Android 类似，HarmonyOS 同样可以使用 xml 和 Java 两种方式对组件样式进行绘制；

1. 引入 shape.xml 方式

    和尚查看 ShapeElement 源码，有无参构造函数和两个参数的构造函数；带有参数的构造方法可以直接引入 shape.xml 文件，第一个参数是上下文环境，第二个参数是引入对应的 shape.xml 文件；

public ShapeElement(Context context, int xmlId) {
    throw new RuntimeException("Stub!");
}

Component component01 = (Component) findComponentById(ResourceTable.Id_test_component1);
ShapeElement shapeElement = new ShapeElement(getContext(), ResourceTable.Graphic_shape_stroke);
component01.setBackground(shapeElement);

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

【HarmonyOS 专题】05 简单了解 ShapeElement 背景设置-鸿蒙开发者社区

2. set/getShape 设置/获取样式

    和尚查看源码，可以通过 set/getShape 方式设置和获取样式，包括：RECTANGLE 矩形、OVAL 圆形、PATH 路径、ARC 弧形、LINE 线形；

public void setShape(int shape) {
    throw new RuntimeException("Stub!");
}

public int getShape() {
    throw new RuntimeException("Stub!");
}

private ShapeElement shapeElement01(int shape) {
    ShapeElement shapeElement = new ShapeElement();
    shapeElement.setShape(shape);
    shapeElement.setRgbColor(RgbColor.fromArgbInt(getColor(ResourceTable.Color_color_btn_start)));
    return shapeElement;
}

Component component02 = (Component) findComponentById(ResourceTable.Id_test_component2);
component02.setBackground(shapeElement01(ShapeElement.RECTANGLE));
Component component03 = (Component) findComponentById(ResourceTable.Id_test_component3);
component03.setBackground(shapeElement01(ShapeElement.OVAL));

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.

【HarmonyOS 专题】05 简单了解 ShapeElement 背景设置-鸿蒙开发者社区

3. set/getRgbColor & set/getRgbColors 设置/获取颜色

    ShapeElement 可以通过 setRgbColor 和 setRgbColors 两种方式设置背景色，setRgbColor 为设置单色，setRgbColors 用于添加颜色数组，设置渐变色；

public void setRgbColor(RgbColor color) {
    throw new RuntimeException("Stub!");
}

public void setRgbColors(RgbColor[] colors) {
    throw new RuntimeException("Stub!");
}

public RgbColor[] getRgbColors() {
    throw new RuntimeException("Stub!");
}

public void setRgbColor(RgbColor color) {
    throw new RuntimeException("Stub!");
}

private ShapeElement shapeElement02(int shape, boolean isRgbColor, RgbColor rgbColor, RgbColor[] rgbColors) {
    ShapeElement shapeElement = new ShapeElement();
    shapeElement.setShape(shape);
    if (isRgbColor) {
        shapeElement.setRgbColor(rgbColor);
    } else {
        shapeElement.setRgbColors(rgbColors);
    }
    return shapeElement;
}

Component component04 = (Component) findComponentById(ResourceTable.Id_test_component4);
component04.setBackground(shapeElement02(ShapeElement.RECTANGLE, true, RgbColor.fromArgbInt(getColor(ResourceTable.Color_color_btn_start)), null));
Component component05 = (Component) findComponentById(ResourceTable.Id_test_component5);
RgbColor[] rgbColors = new RgbColor[]{
        RgbColor.fromArgbInt(getColor(ResourceTable.Color_color_btn_start)),
        RgbColor.fromArgbInt(getColor(ResourceTable.Color_color_btn_center)),
        RgbColor.fromArgbInt(getColor(ResourceTable.Color_color_btn_end))};
component05.setBackground(shapeElement02(ShapeElement.RECTANGLE, false, null, rgbColors));

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.

【HarmonyOS 专题】05 简单了解 ShapeElement 背景设置-鸿蒙开发者社区

4. setStroke 设置边框

    可以通过 setStroke 设置边框样式，参数分别对应边框宽度和颜色；

public void setStroke(int width, RgbColor color) {
    throw new RuntimeException("Stub!");
}

public int getStrokeWidth() {
    throw new RuntimeException("Stub!");
}

public RgbColor getStrokeColor() {
    throw new RuntimeException("Stub!");
}

private ShapeElement shapeElement03(int shape, int width, RgbColor rgbColor) {
    ShapeElement shapeElement = new ShapeElement();
    shapeElement.setShape(shape);
    shapeElement.setRgbColor(RgbColor.fromArgbInt(getColor(ResourceTable.Color_color_btn_start)));
    shapeElement.setStroke(width, rgbColor);
    return shapeElement;
}

Component component06 = (Component) findComponentById(ResourceTable.Id_test_component6);
component06.setBackground(shapeElement03(ShapeElement.RECTANGLE, 4, RgbColor.fromArgbInt(getColor(ResourceTable.Color_color_btn_end))));
Component component07 = (Component) findComponentById(ResourceTable.Id_test_component7);
component07.setBackground(shapeElement03(ShapeElement.RECTANGLE, 8, RgbColor.fromArgbInt(getColor(ResourceTable.Color_color_btn_end))));

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.

【HarmonyOS 专题】05 简单了解 ShapeElement 背景设置-鸿蒙开发者社区

5. set/getCornerRadius & setCornerRadiiArray 设置圆角

    ShapeElement 提供了两种设置圆角的方式，分别为 setCornerRadius 设置四角相同的圆角和 setCornerRadiiArray 分别设置四个圆角方式；其中 setCornerRadiiArray 需要设置 8 个 float 元素，角度分别从左上角顺时针分布；

public void setCornerRadius(float radius) {
    throw new RuntimeException("Stub!");
}

public float getCornerRadius() {
    throw new RuntimeException("Stub!");
}

public void setCornerRadiiArray(float[] radii) {
    throw new RuntimeException("Stub!");
}

public float[] getCornerRadii() {
    throw new RuntimeException("Stub!");
}

private ShapeElement shapeElement04(int shape, boolean isSameRadius, float radius, float[] radii) {
    ShapeElement shapeElement = new ShapeElement();
    shapeElement.setShape(shape);
    shapeElement.setRgbColor(RgbColor.fromArgbInt(getColor(ResourceTable.Color_color_btn_start)));
    shapeElement.setStroke(8, RgbColor.fromArgbInt(getColor(ResourceTable.Color_color_btn_end)));
    if (isSameRadius) {
        shapeElement.setCornerRadius(radius);
    } else {
        shapeElement.setCornerRadiiArray(radii);
    }
    return shapeElement;
}

Component component08 = (Component) findComponentById(ResourceTable.Id_test_component8);
component08.setBackground(shapeElement04(ShapeElement.RECTANGLE, true, 20.0f, null));
Component component09 = (Component) findComponentById(ResourceTable.Id_test_component9);
float[] radii = {60.0f, 60.f, 20.f, 20.0f, 60.0f, 60.f, 20.f, 20.0f};
component09.setBackground(shapeElement04(ShapeElement.RECTANGLE, false, 0.0f, radii));

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.

【HarmonyOS 专题】05 简单了解 ShapeElement 背景设置-鸿蒙开发者社区

6. set/getGradientOrientation 设置/获取渐变色方向

    对于渐变色的渐变方向，可以通过 setGradientOrientation 方式设置，可以按需求设置水平方向，或对角线方向等；

public void setGradientOrientation(ShapeElement.Orientation orientation) {
    throw new RuntimeException("Stub!");
}

public ShapeElement.Orientation getGradientOrientation() {
    throw new RuntimeException("Stub!");
}

private ShapeElement shapeElement05(int shape, ShapeElement.Orientation orientation) {
    ShapeElement shapeElement = new ShapeElement();
    shapeElement.setShape(shape);
    RgbColor[] rgbColors = new RgbColor[]{
            RgbColor.fromArgbInt(getColor(ResourceTable.Color_color_btn_start)),
            RgbColor.fromArgbInt(getColor(ResourceTable.Color_color_btn_center)),
            RgbColor.fromArgbInt(getColor(ResourceTable.Color_color_btn_end))};
    shapeElement.setRgbColors(rgbColors);
    shapeElement.setStroke(8, RgbColor.fromArgbInt(getColor(ResourceTable.Color_color_btn_end)));
    shapeElement.setCornerRadius(20.0f);
    shapeElement.setGradientOrientation(orientation);
    return shapeElement;
}

Component component10 = (Component) findComponentById(ResourceTable.Id_test_component10);
component10.setBackground(shapeElement05(ShapeElement.RECTANGLE, ShapeElement.Orientation.BOTTOM_RIGHT_TO_TOP_LEFT));
Component component11 = (Component) findComponentById(ResourceTable.Id_test_component11);
component11.setBackground(shapeElement05(ShapeElement.RECTANGLE, ShapeElement.Orientation.LEFT_TO_RIGHT));
Component component12 = (Component) findComponentById(ResourceTable.Id_test_component12);
component12.setBackground(shapeElement05(ShapeElement.RECTANGLE, ShapeElement.Orientation.TOP_END_TO_BOTTOM_START));

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.

【HarmonyOS 专题】05 简单了解 ShapeElement 背景设置-鸿蒙开发者社区

    和尚对 ShapeElement 的方式还不够熟悉，还有几个方法需要深入研究；如有错误，请多多指导！

来源：阿策小和尚

©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任
分类
HarmonyOS
其他
Java
ArkUI / eTS
标签
HarmonyOS 专题
Android 小菜鸟
赞 2
收藏
回复
举报
2
1
1条回复
按时间正序
/
按时间倒序
没用的喵叔
没用的喵叔

总结得不错，直观、全面！如果把xml的方式也列举一下就更完美了。

回复
2022-2-5 23:21:09


回复
    相关推荐
    这个用户很懒，还没有个人简介
    觉得TA不错？点个关注精彩不错过
    帖子
    视频
    声望
    粉丝
    最近发布
    热门推荐
    基于OpenHarmony的自定义日历组件实现----详细的自定义日历组件-Bond！ 3回复
    应用的一次开发，多端部署实例解析 0回复
    实现录制视频功能鸿蒙示例代码 0回复
    HarmonyOS Next AI开发环境搭建与工具使用 1回复
    HarmonyOS NEXT场景化示例代码（第一期）#鸿蒙示例代码# 0回复
    相关问题
    ShapeElement类如何使用ShapeElement​(Context context, int xmlId)实例化一个对象 1回答
    nginx超时设置有了解的吗？ 1回答
    HarmonyOS 组件/容器设置背景样式 1回答
    HarmonyOS Navigation标题居中，背景设置 1回答
    HarmonyOS 如何设置渐变背景色？ 1回答
    社区精华内容

    目录