「續3.1.1 文本組件」不需要背景圖,自定義繪製會更好

2020-12-14 三分鐘IT小課堂

上節我們對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"

相關焦點

  • LaTeX | TikZ & PGF 繪製 Contour 圖自定義標籤顯示教程
    這篇文章會詳細說下，利用「LaTeX」的 TikZ 宏包繪製的「Contour」圖時，如何使 label 部分顯示。「LaTeX」還可以用來做幻燈片，繪製各種數據圖、示意圖等，隨著「LaTeX 3」以及「LuaTeX」的發展，相信未來「LaTeX」能做的事情會越來越多！
  • iOS14小組件推薦
    進入軟體主頁，在不同的尺寸小組件下方點擊「Add XXX Widget」，就能在軟體內添加一個對應尺寸的小組件，點擊「Default Widget」就能編輯這個小組件。可以把添加的小組件顯示內容設置為：時間、日期、照片、文本、提醒事項、天氣（需要內購）、健康運動、潮汐、天文。
  • 一篇了解所有的LayaAir文本組件
    LayaAirIDE中提供了Text、FillText、Label這三種基礎的顯示文本組件。1.1、文本的底層渲染機制LayaAir引擎在文本的底層渲染上，有兩種方式。分別是Text文本類的文本統一提交方式，和Graphics類的fillText文本單字符繪製提交方式。
  • 超實用的 6 個自定義技巧，讓你的 WPS 獨一無二
    俗話說得好「工欲善其事，必先利其器」，想要做好一件事，那麼準備的工作非常重要。比如說每個同事的工位桌面並不相同，每個人都會按自身喜好布置，以便更好地投入工作。那 WPS 能否自定義 、讓它更符合日常的操作習慣呢？
  • kpc v1.3.0 發布,新增繪圖組件 Diagram
    KPC組件庫1.3.0版本，新增了一個繪圖組件Diagram，該組件基於強大的mxGraph開發，可以繪製流程圖，拓撲圖等
  • iOS14桌面組件快捷設置更改圖標透明小組件快捷功能自定義
    大到展示各種各樣的諸如日曆、倒計時、時鐘、步數、圖片展示、微博熱搜、掃一掃等豐富的功能，小到透明小組件、自定義應用圖標、負一屏組件、相機水印、戴殼截圖，帳本等其他家都不會做的功能都被集合進了這個不到100MB的應用裡。可以說這一款基本可以代替很多普通小組件應用了。①自帶功能。
  • 在Lightning Aura組件中使用自定義標籤
    自定義標籤是可從Aura組件，LWC組件，Apex類，Visualforce頁面訪問的自定義文本值。可以將值轉換為Salesforce支持的任何語言。定製標籤使開發人員能夠通過以用戶的母語自動顯示信息（例如，幫助文本或錯誤消息）來創建多語言應用程式。
  • 視覺工作流優化:如何構建組件庫?
    並不是各類產品廠商不想做差異化，而是本身的業務屬性對於大部分用戶來說已經形成一條比較成熟的數據排版結構，較大的改變會招致用戶的反感，雖然可博得部分用戶的追捧，但這樣的「創新」對於一個成熟產品而言卻是不利的，因此我們往往會把更多的差異放在組件細節上。
  • 設計規範 | Web端設計組件篇-文本與選擇器
    使用場景：1.用戶需要輸入字符時2.通過滑鼠鍵盤輸入內容3.輸入的文本通常置於輸入框例如網易考拉優惠券兌換的表單填寫，就是短文本輸入組件，前面是標題，後面是文本輸入框。 input短文本組件的展示形式可以分為三類。第1類是標題和輸入框左右排列；第二類是標題和輸入框上下排列；第三列不需要標題的排列。
  • 文本輸入框案例: 1、設置內邊距 2、限制字符串輸入格式 3、自定義文本輸入框彈框 4、綜合案例 、問題分析 、系統適配
    ：中文佔1，英文等能轉ascii的佔0.5iOS文本長度計算規則：中文佔1，英文等能轉ascii的佔0.5https://blog.csdn.net/z929118967/article/details/86480425III、 iOS限制字符串輸入(漢字\英文、數字)【限定文本輸入框輸入特定最大的字符個數及截取前N個字符】 iOS限制字符串輸入(漢字\英文、數字)https:/
  • 「強烈建議收藏」小程序canvas繪製帶二維碼海報全流程(枚舉踩坑,詳解解決方案)
    一 寫在前面1 canvas繪製帶二維碼的海報，這些坑總有一個你可能會踩到，我會帶你一步步解決這些坑技術選型背景：taro3.0-vue先來十一個問題壓壓驚，相信你做繪製海報過程中，一定會遇到taro框架遇到的坑① taro-vue createCanvasContext 獲取canvas實例無效問題，繪製不出來效果？
  • 用 matplotlib 自定義添加 「哆啦A夢」背景圖
    matplotlib庫的學習，其實不那麼簡單，但是又是那麼簡單。對於剛剛學習這個庫的朋友來說，他會覺得這個庫的代碼、參數怎麼那麼多？都不知道每一步該寫什麼。但是隨著你慢慢深入的學習和了解以後，你會發現：掌握了繪圖原理以後，一切都是那麼的簡單。
  • 使用Qt框架實現基於QPainter類的自定義場景圖
    演示如何使用Qt框架實現基於 QPainter的自定義場景圖項。"繪製項"示例演示如何使用 QML 場景圖框架使用QPainter 實現自定義場景圖項。QQuickPaintedItem類是從QQuickItem 派生的類，用於使用 QPainter 接口實現自定義 QML 場景圖形項。
  • 「MD規範」1.1-Material Design設計案例講解-Basil
    Basil的標題也會根據手機屏幕尺寸調整字體大小。菜譜的標題大小根據屏幕寬度動態調整菜譜的標題大小根據屏幕寬度動態調整高度Basil不使用投影表示兩個元素之間的高度差，而是通過視差動效與不透明度來區分內容所處的不同高度。通過視差動效可以區分這三個圖層各不相同。
  • 1.基礎知識(3) --Matlab繪製特殊的圖形
    1、指定坐標軸刻度值和標籤自定義沿坐標軸的刻度值和標籤有助於突出顯示數據的特定方面。
  • 【獨家經驗】我個人推薦以及不推薦的「思維導圖」用法
    專用軟體來繪製「思維導圖」。由於我定義的「思維導圖」是用於啟發思維，所以繪製原則是：（1）繪圖時，形式不重要， 不要為顏色字體糾結，非常容易打斷思路（2）羅列時，對錯不重要（尤其是頭腦風暴），不必苛求「分類」時一定要一絲不漏，因為隨時可以補充的。
  • 簡單幾步,教你自定義 iOS 14 充電提示音
    當然，你也可以在APPSO微信後臺回復「XXXX」，獲取製作好的快捷指令，跳過此步驟，進入下一步「充電自動化」；如果你已經有製作好的編碼也可以直接跳過這一步。1.升級到iOS14。2.iPhone錄屏需要的片段，並確保有聲音。建議不超過5秒，因為一旦播放，無法停止，除非關機。3.打開《快捷指令》，點擊右上角「+」新建快捷指令。
  • 利用Symbol 建立一套設計規範組件庫?
    文章目錄為保證更好地理解文章內容，你需要對以下知識點有一定的了解（部分內容已附註釋）。1. Text style ¹△ 圖片來自Sketch手冊在設計包含大量文本的界面時，許多圖層擁有相同的文本屬性。將它們保存為 Text Style，即可復用這些文本屬性，無需逐一設置。
  • flutter零基礎入門(1+1)Image組件和icon組件
    colorBlendMode: BlendMode.color,fit:BoxFit.cover,width: double.infinity,height: double.infinity),3.5.1
  • 「PPT拼圖」智能化拼圖,不用PS也能將 PPT 變成信息長圖
    ：實時預覽長圖導出效果圖片寬度：設置「圖片寬度」選項，預設導出圖片的質量預覽圖具體參數設置區域文字水印：自定義預覽圖的水印文案內容、水印的背景文字顏色導出預覽圖片範圍另存為導出1/ 設置導出圖片的大小在設置「圖片寬度」選項設置，圖片寬度數值越大，導出的預覽圖越大2/ 設置導出的 PPT 長圖排版