2020征文-TV「續(xù)3.1.1 文本組件」不需要背景圖，自定義繪制會(huì)更好
想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
https://harmonyos.51cto.com/#zz
上節(jié)我們對(duì)Text組件有了詳細(xì)的認(rèn)知，我們可以通過(guò)設(shè)置Text組件的各類屬性來(lái)讓Text組件美觀起來(lái)，但是我們僅僅能設(shè)置背景、字體大小、字體大小自適應(yīng)、內(nèi)容折行、外邊距、內(nèi)邊距等。很多時(shí)候我們想給字體設(shè)置邊框、圓角、陰影等等特殊的效果，但是在屬性中沒(méi)有特定的屬性可以完成這件事。當(dāng)然我們可以給Text組件設(shè)置背景圖片，這樣也可以達(dá)到我們的預(yù)期效果，但是如果整個(gè)APP中圖片比較多會(huì)增加我們安裝包的體積，還會(huì)在各種手機(jī)的適配上出現(xiàn)不可預(yù)知的問(wèn)題。
官方團(tuán)隊(duì)提供了一個(gè)可以繪制帶有顏色、漸變、邊框，用于視圖背景的，及設(shè)置各種形狀的類—ShapeElement。
ShapeElement類源碼
ShapeElement類是Element的子類，Element類有多個(gè)擴(kuò)展類，這里就不詳細(xì)說(shuō)明了，后面我們?cè)谛枰臅r(shí)候再擴(kuò)展講解。目前Java API中提供了多個(gè)常量值，兩個(gè)構(gòu)造函數(shù)，以及多個(gè)繪圖方法。
我們先來(lái)了解一下能夠設(shè)置哪些形狀?
ShapeElement類提供了設(shè)置矩形、橢圓形、直線、圓弧和路徑(以直線段、二次曲線和三次曲線的幾何組合表示多輪廓路徑)。本節(jié)僅對(duì)前三個(gè)幾何圖形做介紹，后兩個(gè)后面小節(jié)會(huì)詳細(xì)介紹。
- /**
- * 繼承自Element，提供了帶有顏色漸變的可繪制實(shí)例，通常用于視圖背景
- */
- public class ShapeElement extends Element {
- // 可繪制的幾何圖形
- // 繪制形狀為矩形
- public static final int RECTANGLE = 0;
- // 繪制形狀為橢圓
- public static final int OVAL = 1;
- // 繪制形狀為直線
- public static final int LINE = 2;
- //默認(rèn)構(gòu)造器，在代碼中設(shè)定幾何圖形和背景的話，使用這個(gè)構(gòu)造函數(shù)
- public ShapeElement() {}
- //引用資源文件中設(shè)定的幾何圖形和背景的話，使用這個(gè)構(gòu)造函數(shù)
- //xmlId為資源文件的內(nèi)存地址
- public ShapeElement(Context context, int xmlId) {}
- //設(shè)置要顯示的集合圖形，參數(shù)為上面的靜態(tài)常量
- public void setShape(int shape) {}
- //設(shè)置背景顏色
- public void setRgbColor(RgbColor color) {}
- //設(shè)置漸變效果填充的顏色值，參數(shù)為顏色數(shù)組，對(duì)直線無(wú)效
- public void setRgbColors(RgbColor[] colors) {}
- //設(shè)置邊框的寬度和顏色
- public void setStroke(int width, RgbColor color) {}
- //設(shè)置圓角半徑，這個(gè)方法僅對(duì)矩形有效
- public void setCornerRadius(float radius) {}
- //設(shè)置每個(gè)角的半徑，這個(gè)方法僅對(duì)矩形有效
- //表示四個(gè)角的半徑數(shù)組。如果數(shù)組的長(zhǎng)度不等于8，則該設(shè)置無(wú)效。
- // 每對(duì)半徑表示一個(gè)角的x軸半徑和y軸半徑。
- public void setCornerRadiiArray(float[] radii) {}
- //指定組件的漸變效果方向
- public void setOrientation(ShapeElement.Orientation orientation) {}
- public void setGradientOrientation(ShapeElement.Orientation orientation) {}
- //設(shè)置虛線的間隔和相位
- //數(shù)組項(xiàng)是成對(duì)的:這些值的偶數(shù)和奇數(shù)索引分別指定要繪制的象素個(gè)數(shù)和空白象素個(gè)數(shù)。
- public void setDashPathEffectValues(float[] intervals, float phase) {}
- }
ShapeElement實(shí)例應(yīng)用
上面我們將常用的源碼做了簡(jiǎn)單分析，接下來(lái)我們將以實(shí)操為主，能夠熟練掌握ShapeElement的應(yīng)用。
我們先來(lái)看看上面的UI界面，上面有三種自定義文本顯示，矩形、橢圓形、直線。而OHOS還提供了圓弧和基于路徑的多形狀圖。在矩形中，我們分別實(shí)現(xiàn)了默認(rèn)的矩形背景，四角相同的圓角矩形背景，四角不同的圓角矩形背景，實(shí)線邊框的矩形背景，虛線邊框的矩形背景，橢圓背景，圓形背景，及直線背景。
首先我們先了解一下，我們?yōu)楹问褂眠@種類型的背景。
1、給app瘦身，可以替代純色和漸變色的組件背景
2、編寫(xiě)一個(gè)矩形、圓、橢圓，便于維護(hù)，只需要改動(dòng)少量代碼即可實(shí)現(xiàn)效果
3、節(jié)省內(nèi)存
這些設(shè)置背景的圖形和背景色在ShapeElement類中，ShapeElement類是Element類的子類，該類用于實(shí)現(xiàn)帶有漸變效果的圖形化視圖背景。其提供了矩形、橢圓形、直線、圓弧和基于路徑的多形狀圖，本節(jié)我們先來(lái)對(duì)矩形、橢圓形和直線做示例介紹，后兩種我們?cè)诤罄m(xù)開(kāi)專門(mén)的小節(jié)做詳細(xì)介紹。
矩形
矩形是常見(jiàn)的視圖背景，我們可以設(shè)置默認(rèn)的矩形、帶圓角的矩形、帶邊框的矩形。
- //矩形背景
- DirectionalLayout rectangle_layout = initChildDirectionalLayout(this);
- //這個(gè)組件顯示的效果是"帶背景的矩形"
- Text rectangle_background_text = initText(this, "帶背景的矩形");
- //設(shè)置背景色
- 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);
- //這個(gè)組件顯示的效果是"帶背景和圓角的矩形"
- Text rectangle_background_radius_text = initText(this, "帶背景和圓角的矩形");
- //設(shè)置背景色和圓角
- 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);
- //這個(gè)組件顯示的效果是"帶背景和四角不同圓角的矩形"
- Text rectangle_background_different_radius_text = initText(this, "帶背景和不同圓角的矩形");
- //設(shè)置背景色和每個(gè)角的圓角
- 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);
- //這個(gè)組件顯示的效果是"漸變背景"矩形
- Text gradient_background_text = initText(this, "帶漸變效果的矩形背景");
- //設(shè)置背景色和漸變(從下端角到上端角)
- 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);
- //這個(gè)組件的效果是"實(shí)線邊框的背景"矩形
- Text stroke_background_text = initText(this, "實(shí)線邊框的背景");
- //設(shè)置背景色和路徑
- 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);
- //這個(gè)組件的效果是"虛線邊框的背景"矩形
- Text stroke_dash_background_text = initText(this, "虛線邊框的背景");
- //設(shè)置背景色和路徑
- 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文件夾下可以創(chuàng)建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"/>
- <!-- 由于缺少相關(guān)文檔，還未摸索出漸變的設(shè)置方式 -->
- <!-- <gradient/>-->
- <stroke
- ohos:width="2"
- ohos:color="#000000"/>
- </shape>
橢圓形
橢圓一般我們不常用，但是圓形我們是常用的，比如默認(rèn)頭像，我們使用純色背景來(lái)實(shí)現(xiàn)。
- //橢圓形背景
- DirectionalLayout oval_layout = initChildDirectionalLayout(this);
- //這個(gè)組件顯示的效果是"帶背景的橢圓"
- Text oval_background_text = initText(this, "帶背景的橢圓");
- //設(shè)置背景和橢圓
- 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);
- //這個(gè)組件顯示的效果是"帶背景的圓"
- Text circular_background_text = initText(this, "帶背景的圓");
- circular_background_text.setWidth(300);
- circular_background_text.setHeight(300);
- circular_background_text.setTextAlignment(CENTER);
- //設(shè)置背景和圓(組件的寬高一樣的時(shí)候是圓)
- 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);
直線
直線我們只需要了解即可，這個(gè)實(shí)際項(xiàng)目中沒(méi)有多大意義。
- //直線
- 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);
本小節(jié)我們對(duì)ShapeElement類有了一些具體的了解，在后面的組件中將不在詳細(xì)介紹，可以根據(jù)本節(jié)內(nèi)容自定義不同樣式的組件。對(duì)于ShapeElement類中的另外兩個(gè)繪制幾何圖形的方法，我將在后面的小節(jié)中單獨(dú)介紹。
XML文件方式設(shè)置我在文中簡(jiǎn)單的做了介紹，如果直接在布局XML中引用graphic文件下的資源，可以設(shè)置組件的ohos:background_element屬性。
- ohos:background_element="$graphic:rectangle_background_radius_text"
想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
https://harmonyos.51cto.com/#zz
