2020征文-TV「續3.1.1 文本組件」不需要背景圖，自定義繪制會更好

作者：佚名 2020-12-11 09:58:45

本小節我們對ShapeElement類做具體介紹，在后面的組件中將不在詳細介紹，可以根據本節內容自定義不同樣式的組件。對于ShapeElement類中的另外兩個繪制幾何圖形的方法，我將在后面的小節中單獨介紹。

https://harmonyos.51cto.com/#zz

上節我們對Text組件有了詳細的認知，我們可以通過設置Text組件的各類屬性來讓Text組件美觀起來，但是我們僅僅能設置背景、字體大小、字體大小自適應、內容折行、外邊距、內邊距等。很多時候我們想給字體設置邊框、圓角、陰影等等特殊的效果，但是在屬性中沒有特定的屬性可以完成這件事。當然我們可以給Text組件設置背景圖片，這樣也可以達到我們的預期效果，但是如果整個APP中圖片比較多會增加我們安裝包的體積，還會在各種手機的適配上出現不可預知的問題。

官方團隊提供了一個可以繪制帶有顏色、漸變、邊框，用于視圖背景的，及設置各種形狀的類—ShapeElement。

ShapeElement類源碼

ShapeElement類是Element的子類，Element類有多個擴展類，這里就不詳細說明了，后面我們在需要的時候再擴展講解。目前Java API中提供了多個常量值，兩個構造函數，以及多個繪圖方法。

我們先來了解一下能夠設置哪些形狀?

ShapeElement類提供了設置矩形、橢圓形、直線、圓弧和路徑(以直線段、二次曲線和三次曲線的幾何組合表示多輪廓路徑)。本節僅對前三個幾何圖形做介紹，后兩個后面小節會詳細介紹。

/** 
  * 繼承自Element，提供了帶有顏色漸變的可繪制實例，通常用于視圖背景 
  */ 
public class ShapeElement extends Element { 
    // 可繪制的幾何圖形 
    // 繪制形狀為矩形 
    public static final int RECTANGLE = 0; 
    // 繪制形狀為橢圓 
    public static final int OVAL = 1; 
    // 繪制形狀為直線 
    public static final int LINE = 2; 
     
    //默認構造器，在代碼中設定幾何圖形和背景的話，使用這個構造函數 
    public ShapeElement() {} 
    //引用資源文件中設定的幾何圖形和背景的話，使用這個構造函數 
    //xmlId為資源文件的內存地址 
    public ShapeElement(Context context, int xmlId) {} 
     
    //設置要顯示的集合圖形，參數為上面的靜態常量 
    public void setShape(int shape) {} 
    //設置背景顏色 
    public void setRgbColor(RgbColor color) {} 
    //設置漸變效果填充的顏色值，參數為顏色數組，對直線無效 
    public void setRgbColors(RgbColor[] colors) {} 
    //設置邊框的寬度和顏色 
    public void setStroke(int width, RgbColor color) {} 
    //設置圓角半徑，這個方法僅對矩形有效 
    public void setCornerRadius(float radius) {} 
    //設置每個角的半徑，這個方法僅對矩形有效 
    //表示四個角的半徑數組。如果數組的長度不等于8，則該設置無效。 
    // 每對半徑表示一個角的x軸半徑和y軸半徑。 
    public void setCornerRadiiArray(float[] radii) {} 
    //指定組件的漸變效果方向 
    public void setOrientation(ShapeElement.Orientation orientation) {} 
    public void setGradientOrientation(ShapeElement.Orientation orientation) {} 
    //設置虛線的間隔和相位 
    //數組項是成對的:這些值的偶數和奇數索引分別指定要繪制的象素個數和空白象素個數。 
    public void setDashPathEffectValues(float[] intervals, float phase) {} 
}

ShapeElement實例應用

上面我們將常用的源碼做了簡單分析，接下來我們將以實操為主，能夠熟練掌握ShapeElement的應用。

我們先來看看上面的UI界面，上面有三種自定義文本顯示，矩形、橢圓形、直線。而OHOS還提供了圓弧和基于路徑的多形狀圖。在矩形中，我們分別實現了默認的矩形背景，四角相同的圓角矩形背景，四角不同的圓角矩形背景，實線邊框的矩形背景，虛線邊框的矩形背景，橢圓背景，圓形背景，及直線背景。

首先我們先了解一下，我們為何使用這種類型的背景。

1、給app瘦身，可以替代純色和漸變色的組件背景

2、編寫一個矩形、圓、橢圓，便于維護，只需要改動少量代碼即可實現效果

3、節省內存

這些設置背景的圖形和背景色在ShapeElement類中，ShapeElement類是Element類的子類，該類用于實現帶有漸變效果的圖形化視圖背景。其提供了矩形、橢圓形、直線、圓弧和基于路徑的多形狀圖，本節我們先來對矩形、橢圓形和直線做示例介紹，后兩種我們在后續開專門的小節做詳細介紹。

矩形

矩形是常見的視圖背景，我們可以設置默認的矩形、帶圓角的矩形、帶邊框的矩形。

//矩形背景 
DirectionalLayout rectangle_layout = initChildDirectionalLayout(this); 
 
//這個組件顯示的效果是"帶背景的矩形" 
Text rectangle_background_text = initText(this, "帶背景的矩形"); 
//設置背景色 
ShapeElement rectangle_background_text_element = initChildShapeElement(this); 
rectangle_background_text_element.setShape(ShapeElement.RECTANGLE); 
rectangle_background_text.setBackground(rectangle_background_text_element); 
rectangle_layout.addComponent(rectangle_background_text); 
 
//這個組件顯示的效果是"帶背景和圓角的矩形" 
Text rectangle_background_radius_text = initText(this, "帶背景和圓角的矩形"); 
//設置背景色和圓角 
ShapeElement rectangle_background_radius_text_element = initChildShapeElement(this); 
rectangle_background_radius_text_element.setShape(ShapeElement.RECTANGLE); 
rectangle_background_radius_text_element.setCornerRadius(20); 
rectangle_background_radius_text_element.setDashPathEffectValues(new float[]{20f, 25f, 30f, 35f}, 2); 
rectangle_background_radius_text.setBackground(rectangle_background_radius_text_element); 
rectangle_layout.addComponent(rectangle_background_radius_text); 
 
//這個組件顯示的效果是"帶背景和四角不同圓角的矩形" 
Text rectangle_background_different_radius_text = initText(this, "帶背景和不同圓角的矩形"); 
//設置背景色和每個角的圓角 
ShapeElement rectangle_background_different_radius_text_element = initChildShapeElement(this); 
rectangle_background_different_radius_text_element.setShape(ShapeElement.RECTANGLE); 
rectangle_background_different_radius_text_element.setCornerRadiiArray(new float[]{20, 40, 30, 60, 20, 20, 100, 120}); 
rectangle_background_different_radius_text.setBackground(rectangle_background_different_radius_text_element); 
rectangle_layout.addComponent(rectangle_background_different_radius_text); 
 
 
//這個組件顯示的效果是"漸變背景"矩形 
Text gradient_background_text = initText(this, "帶漸變效果的矩形背景"); 
//設置背景色和漸變(從下端角到上端角) 
ShapeElement gradient_background_text_element = initChildShapeElement(this); 
gradient_background_text_element.setShape(ShapeElement.RECTANGLE); 
RgbColor[] rgbColors = new RgbColor[]{new RgbColor(34, 197, 255), new RgbColor(255, 197, 34)}; 
gradient_background_text_element.setRgbColors(rgbColors); 
gradient_background_text_element.setGradientOrientation(ShapeElement.Orientation.BOTTOM_END_TO_TOP_START); 
gradient_background_text.setBackground(gradient_background_text_element); 
rectangle_layout.addComponent(gradient_background_text); 
 
//這個組件的效果是"實線邊框的背景"矩形 
Text stroke_background_text = initText(this, "實線邊框的背景"); 
//設置背景色和路徑 
ShapeElement stroke_background_text_element = initChildShapeElement(this); 
stroke_background_text_element.setShape(ShapeElement.RECTANGLE); 
stroke_background_text_element.setStroke(5, new RgbColor(255, 197, 34)); 
stroke_background_text.setBackground(stroke_background_text_element); 
rectangle_layout.addComponent(stroke_background_text); 
 
//這個組件的效果是"虛線邊框的背景"矩形 
Text stroke_dash_background_text = initText(this, "虛線邊框的背景"); 
//設置背景色和路徑 
ShapeElement stroke_dash_background_text_element = initChildShapeElement(this); 
stroke_dash_background_text_element.setShape(ShapeElement.RECTANGLE); 
stroke_dash_background_text_element.setStroke(5, new RgbColor(255, 197, 34)); 
stroke_dash_background_text_element.setDashPathEffectValues(new float[]{10, 21, 32, 43, 54, 65}, 1); 
stroke_dash_background_text.setBackground(stroke_dash_background_text_element); 
rectangle_layout.addComponent(stroke_dash_background_text);

OHOS也提供了加載XML資源文件的方法，在graphic文件夾下可以創建xml類型的可繪制資源，如SVG可縮放矢量圖形文件、基本的幾何圖形(如矩形、圓形、線等)shape資源，下面是shape資源XML格式：

<?xml version="1.0" encoding="UTF-8" ?> 
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos" 
       ohos:shape="rectangle"> 
    <solid 
        ohos:color="#FFFFFF"/> 
</shape>

其中ohos:shape是指定幾何圖形，rectangle為矩形樣式。shape的屬性有solid(背景色)、corners表示圓角、gradient表示漸變、stroke表示邊框。

<?xml version="1.0" encoding="UTF-8" ?> 
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos" 
       ohos:shape="rectangle"> 
    <solid 
        ohos:color="#FF6A5C"/> 
 
    <corners 
        ohos:radius="20"/> 
<!-- 由于缺少相關文檔，還未摸索出漸變的設置方式 --> 
<!--    <gradient/>--> 
 
    <stroke 
        ohos:width="2" 
        ohos:color="#000000"/> 
</shape>

橢圓形

橢圓一般我們不常用，但是圓形我們是常用的，比如默認頭像，我們使用純色背景來實現。

//橢圓形背景 
 
DirectionalLayout oval_layout = initChildDirectionalLayout(this); 
 
//這個組件顯示的效果是"帶背景的橢圓" 
 
Text oval_background_text = initText(this, "帶背景的橢圓"); 
 
//設置背景和橢圓 
 
ShapeElement oval_background_text_element = initChildShapeElement(this); 
 
oval_background_text_element.setShape(OVAL); 
 
oval_background_text.setBackground(oval_background_text_element); 
 
oval_layout.addComponent(oval_background_text); 
 
//這個組件顯示的效果是"帶背景的圓" 
 
Text circular_background_text = initText(this, "帶背景的圓"); 
 
circular_background_text.setWidth(300); 
 
circular_background_text.setHeight(300); 
 
circular_background_text.setTextAlignment(CENTER); 
 
//設置背景和圓(組件的寬高一樣的時候是圓) 
 
ShapeElement circular_background_text_element = initChildShapeElement(this); 
 
circular_background_text_element.setShape(OVAL); 
 
circular_background_text.setBackground(circular_background_text_element); 
 
oval_layout.addComponent(circular_background_text); 
 
layout.addComponent(oval_layout);

直線

直線我們只需要了解即可，這個實際項目中沒有多大意義。

//直線 
 
DirectionalLayout line_layout = initChildDirectionalLayout(this); 
 
Text line_background_text = initText(this, "直線"); 
 
ShapeElement line_background_text_element = initChildShapeElement(this); 
 
line_background_text_element.setShape(LINE); 
 
line_background_text.setBackground(line_background_text_element); 
 
line_layout.addComponent(line_background_text); 
 
layout.addComponent(line_layout);

本小節我們對ShapeElement類有了一些具體的了解，在后面的組件中將不在詳細介紹，可以根據本節內容自定義不同樣式的組件。對于ShapeElement類中的另外兩個繪制幾何圖形的方法，我將在后面的小節中單獨介紹。

XML文件方式設置我在文中簡單的做了介紹，如果直接在布局XML中引用graphic文件下的資源，可以設置組件的ohos:background_element屬性。

ohos:background_element="$graphic:rectangle_background_radius_text"

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com/#zz

責任編輯：jianghua 來源：鴻蒙社區

成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

2020征文-TV「續3.1.1 文本組件」不需要背景圖，自定義繪制會更好