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

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

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

ShapeElement

    与 Android 类似,HarmonyOS 同样可以使用 xmlJava 两种方式对组件样式进行绘制;

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);

【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));

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

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

    ShapeElement 可以通过 setRgbColorsetRgbColors 两种方式设置背景色,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));

【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))));

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

5. set/getCornerRadius & setCornerRadiiArray 设置圆角

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

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));

【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));

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

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

来源:阿策小和尚

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
2
收藏
回复
举报
1条回复
按时间正序
/
按时间倒序
没用的喵叔
没用的喵叔

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

回复
2022-2-5 23:21:09
回复
    相关推荐