小菜剛學習了 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);
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));
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));
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))));
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));
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));
小菜對 ShapeElement 的方式還不夠熟悉,還有幾個方法需要深入研究;如有錯誤,請多多指導!
來源:阿策小和尚