【HarmonyOS 專題】05 簡單了解 ShapeElement 背景設(shè)置

????小菜剛學(xué)習(xí)了 HarmonyOS 中 Button 的不同樣式，其中背景效果主要是通過 shape 文件進(jìn)行修改，對于漸變色等效果是通過 Java 的 ShapeElement 方式進(jìn)行修改，小菜今天詳細(xì)學(xué)習(xí)一下 ShapeElement 背景設(shè)置；

ShapeElement

????與 Android 類似，HarmonyOS 同樣可以使用 xml 和 Java 兩種方式對組件樣式進(jìn)行繪制；

1. 引入 shape.xml 方式

????小菜查看 ShapeElement 源碼，有無參構(gòu)造函數(shù)和兩個參數(shù)的構(gòu)造函數(shù)；帶有參數(shù)的構(gòu)造方法可以直接引入 shape.xml 文件，第一個參數(shù)是上下文環(huán)境，第二個參數(shù)是引入對應(yīng)的 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);

2. set/getShape 設(shè)置/獲取樣式

????小菜查看源碼，可以通過 set/getShape 方式設(shè)置和獲取樣式，包括：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));

3. set/getRgbColor & set/getRgbColors 設(shè)置/獲取顏色

????ShapeElement 可以通過 setRgbColor 和 setRgbColors 兩種方式設(shè)置背景色，setRgbColor 為設(shè)置單色，setRgbColors 用于添加顏色數(shù)組，設(shè)置漸變色；

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

4. setStroke 設(shè)置邊框

????可以通過 setStroke 設(shè)置邊框樣式，參數(shù)分別對應(yīng)邊框?qū)挾群皖伾?/p> 

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

5. set/getCornerRadius & setCornerRadiiArray 設(shè)置圓角

????ShapeElement 提供了兩種設(shè)置圓角的方式，分別為 setCornerRadius 設(shè)置四角相同的圓角和 setCornerRadiiArray 分別設(shè)置四個圓角方式；其中 setCornerRadiiArray 需要設(shè)置 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));

6. set/getGradientOrientation 設(shè)置/獲取漸變色方向

????對于漸變色的漸變方向，可以通過 setGradientOrientation 方式設(shè)置，可以按需求設(shè)置水平方向，或?qū)蔷€方向等；

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

????小菜對 ShapeElement 的方式還不夠熟悉，還有幾個方法需要深入研究；如有錯誤，請多多指導(dǎo)！

來源：阿策小和尚

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容