自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

HarmonyOS 自定義View之圖文標(biāo)題

作者：彭為杰
開發(fā) OpenHarmony
日常項(xiàng)目中，我們可能會(huì)碰到一些標(biāo)題加特效或多行內(nèi)容+查看更多的需求，根據(jù)現(xiàn)有的HarmonyOS Text提供了一種思路實(shí)現(xiàn)了圖文標(biāo)題，我們需要在Text中進(jìn)行圖文混排。

[[430555]]

想了解更多內(nèi)容，請?jiān)L問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com

簡介

日常項(xiàng)目中，我們可能會(huì)碰到一些標(biāo)題加特效或多行內(nèi)容+查看更多的需求，如果使用Text+Image這樣去拼接的話，在復(fù)雜多“標(biāo)簽”場景就實(shí)現(xiàn)起來比較呆板，于是根據(jù)現(xiàn)有的HarmonyOS Text提供了一種思路實(shí)現(xiàn)了圖文標(biāo)題，我們需要在Text中進(jìn)行圖文混排。

效果演示

#星光計(jì)劃1.0#HarmonyOS 自定義View之圖文標(biāo)題-鴻蒙HarmonyOS技術(shù)社區(qū)

TextImageTitle介紹

TextImageTitle是用來顯示字符串+圖片(或任意Component)的自定義控件，目前只支持頭部或者尾部。

  1. private int textSize = 45; 
  2. private Color textColor = new Color(0xff000000); 
  3. private int lineHeight = 60; 
  4. private int maxTextLines = DEFAULT_LINES; 
  5. private int imageLayout; 
  6. private int imageResId; 
  7. private int imageWidth; 
  8. private int imageHeight; 
  9. private int imageMarginLeft; 
  10. private int imageMarginRight; 
  11. private Component imageComponent; 

TextImageTitle常用屬性

TextImageTitle用法

在layout目錄下的xml文件中創(chuàng)建TextImageTitle組件。

  1. <com.pvj.textimagetitlelibrary.TextImageTitle 
  2.     ohos:id="$+id:text0" 
  3.     ohos:height="match_content" 
  4.     ohos:width="match_parent" 
  5.     ohos:padding="10vp" 
  6.     /> 

1、設(shè)置圖片在頭部

示例代碼：

  1. TextImageTitle textImageTitle = (TextImageTitle) findComponentById(ResourceTable.Id_text0); 
  2. TextImageTitle.Parameter parameter = new TextImageTitle.Parameter(). 
  3.         setMaxTextLines(1). 
  4.         setImageLayout(TextImageTitle.LAYOUT_FRONT). 
  5.         setImageResId(ResourceTable.Media_icon_notice). 
  6.         setLineHeight(80). 
  7.         setTextSize(50). 
  8.         setImageWidth(100).setImageHeight(80). 
  9.         setImageMarginRight(30). 
  10.         setImageMarginLeft(0); 
  11. textImageTitle.setParameter(parameter); 
  12. textImageTitle.setText("鴻蒙3.0有望在10月22日發(fā)布"); 

示例效果：

#星光計(jì)劃1.0#HarmonyOS 自定義View之圖文標(biāo)題-鴻蒙HarmonyOS技術(shù)社區(qū)

2、設(shè)置Component在尾部

示例代碼：

  1. TextImageTitle textImageTitle = (TextImageTitle) findComponentById(ResourceTable.Id_text1); 
  2. Component component = LayoutScatter.getInstance(getContext()).parse(ResourceTable.Layout_icon_tv2, textImageTitle, false); 
  3. TextImageTitle.Parameter parameter = new TextImageTitle.Parameter(). 
  4.         setMaxTextLines(1). 
  5.         setImageLayout(TextImageTitle.LAYOUT_TAIL). 
  6.         setImageComponent(component). 
  7.         setLineHeight(70). 
  8.         setTextSize(45). 
  9.         setImageWidth(400).setImageHeight(70). 
  10.         setImageMarginLeft(30); 
  11. textImageTitle.setParameter(parameter); 
  12. textImageTitle.setText("HarmonyOS 圖文混排標(biāo)題!"); 

示例效果：

 #星光計(jì)劃1.0#HarmonyOS 自定義View之圖文標(biāo)題-鴻蒙HarmonyOS技術(shù)社區(qū)

3、設(shè)置多行文字尾部圖片

示例代碼：

  1. TextImageTitle textImageTitle = (TextImageTitle) findComponentById(ResourceTable.Id_text3); 
  2. TextImageTitle.Parameter parameter = new TextImageTitle.Parameter(). 
  3.         setMaxTextLines(3). 
  4.         setImageLayout(TextImageTitle.LAYOUT_TAIL). 
  5.         setImageResId(ResourceTable.Media_icon_more). 
  6.         setImageWidth(70).setImageHeight(70). 
  7.         setLineHeight(70). 
  8.         setTextSize(45). 
  9.         setImageMarginLeft(0). 
  10.         setImageMarginRight(50); 
  11. textImageTitle.setParameter(parameter); 
  12. textImageTitle.setText("華為開發(fā)者大會(huì)2021將在東莞松山湖舉辦，根據(jù)官方邀請函上透露出來的信息，鴻蒙HarmonyOS 3.0、HMS Core 6、全屋智能等黑科技也將悉數(shù)亮相鴻蒙HarmonyOS 2升級(jí)用戶數(shù)量已經(jīng)突破了1.3億大關(guān)，并且華為鴻蒙OS系統(tǒng)目前平均每天升級(jí)用戶數(shù)量都超過了100百萬，根據(jù)華為目前的規(guī)劃，鴻蒙OS系統(tǒng)的百機(jī)升級(jí)計(jì)劃將會(huì)在今年12月份前后完成。"); 

示例效果：

#星光計(jì)劃1.0#HarmonyOS 自定義View之圖文標(biāo)題-鴻蒙HarmonyOS技術(shù)社區(qū)

4、圖片單擊事件

  1. textImageTitle.setImageClickedListener(() -> { 
  2.     L.d("TextImageTitle", "image click...."); 
  3.     // TODO do something.... 
  4. }); 

實(shí)現(xiàn)思路

根據(jù)遍歷字符計(jì)算是否換行(細(xì)節(jié)請查看源代碼)

  1. int titleLength = title.length(); 
  2. measurePaint.setTextSize(parameter.textSize); 
  3. int curLines = 1; 
  4. float curWidth = 0.0f; 
  5. int indexEnd = 0; 
  6.  
  7. //判斷圖文在前 還是在后 
  8. boolean isFront = parameter.imageLayout == LAYOUT_FRONT; 
  9.  // 1，遍歷字符串 
  10. for (int index = 0; index < titleLength; index++) { 
  11.       String c = String.valueOf(title.charAt(index)); 
  12.       float vW = measurePaint.measureText(c); 
  13.       curWidth += vW; 
  14.      
  15.     //  一些行數(shù) 或每行寬度判斷示例 頭尾判斷 
  16.     if (lineWidth < curWidth) { 
  17.         // ..... 省略大量代碼 
  18.     } 
  19.      
  20.     if (lineWidth < curWidth + imageTotalWidth) { 
  21.        // ..... 省略大量代碼 
  22.     } 
  23.      
  24.    if (isFront && curLines == 1) { 
  25.       // ..... 省略大量代碼  
  26.    } 
  27.     ... 
  28. } 

繪制文字

  1. private void createText(String text) { 
  2.     // Text內(nèi)容創(chuàng)建并且加到容器上 
  3.     Text titleText = new Text(getContext()); 
  4.     titleText.setTextSize(parameter.textSize); 
  5.     titleText.setTextColor(parameter.textColor); 
  6.     addComponent(titleText, ComponentContainer.LayoutConfig.MATCH_PARENT, parameter.lineHeight); 
  7.     titleText.setText(text); 

 繪制圖文

  1. private void createTextAndImage(String text, int maxTextWidth, boolean isFront) { 
  2.        //創(chuàng)建一個(gè)圖片和文字的容器 
  3.        DirectionalLayout directionalLayout = new DirectionalLayout(getContext()); 
  4.        directionalLayout.setOrientation(ComponentContainer.HORIZONTAL); 
  5.        directionalLayout.setAlignment(LayoutAlignment.VERTICAL_CENTER); 
  6.        Text titleText = new Text(getContext()); 
  7.        titleText.setTextSize(parameter.textSize); 
  8.        titleText.setTextColor(parameter.textColor); 
  9.         // 文字的最大長度，決定尾部是否顯示...;不限制有情況是Image出邊界 
  10.        titleText.setMaxTextWidth(maxTextWidth); 
  11.        titleText.setMultipleLine(false); 
  12.        titleText.setTruncationMode(Text.TruncationMode.ELLIPSIS_AT_END); 
  13.        titleText.setText(text); 
  14.  
  15.        Component component = getImage(text); 
  16.        // 點(diǎn)擊事件 
  17.        component.setClickedListener(new ClickedListener() { 
  18.            @Override 
  19.            public void onClick(Component component) { 
  20.                if (listener != null) { 
  21.                    listener.onClick(); 
  22.                } 
  23.            } 
  24.        }); 
  25.  
  26.        //判斷圖片在前還是在后 
  27.        if (isFront) { 
  28.            if (component != null) { 
  29.                directionalLayout.addComponent(component); 
  30.            } 
  31.            directionalLayout.addComponent(titleText, ComponentContainer.LayoutConfig.MATCH_CONTENT,                                                           ComponentContainer.LayoutConfig.MATCH_PARENT); 
  32.        } else { 
  33.            directionalLayout.addComponent(titleText, ComponentContainer.LayoutConfig.MATCH_CONTENT,                                                           ComponentContainer.LayoutConfig.MATCH_PARENT); 
  34.            if (component != null) { 
  35.                directionalLayout.addComponent(component); 
  36.            } 
  37.        } 
  38.        addComponent(directionalLayout, ComponentContainer.LayoutConfig.MATCH_PARENT, parameter.lineHeight); 
  39.    } 
  40.  
  41.    private Component getImage(String text) { 
  42.         // 自定義Component優(yōu)先 
  43.        if (parameter.imageComponent != null) { 
  44.            parameter.imageComponent.setComponentSize(parameter.imageWidth, parameter.imageHeight); 
  45.            parameter.imageComponent.setMarginLeft(parameter.imageMarginLeft); 
  46.            parameter.imageComponent.setMarginRight(parameter.imageMarginRight); 
  47.            return parameter.imageComponent; 
  48.        } else if (parameter.imageResId != 0) {   
  49.           //圖文 
  50.            Image image = new Image(getContext()); 
  51.            image.setComponentSize(parameter.imageWidth, parameter.imageHeight); 
  52.            if (!TextTool.isNullOrEmpty(text)) { 
  53.                image.setMarginLeft(parameter.imageMarginLeft); 
  54.                image.setMarginRight(parameter.imageMarginRight); 
  55.            } 
  56.            image.setScaleMode(Image.ScaleMode.STRETCH); 
  57.            image.setPixelMap(parameter.imageResId); 
  58.            return image; 
  59.        } 
  60.        return null; 
  61.    } 

想了解更多內(nèi)容，請?jiān)L問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com

 

責(zé)任編輯：jianghua 來源： 鴻蒙社區(qū)
鴻蒙HarmonyOS應(yīng)用
相關(guān)推薦

2011-08-02 11:17:13

iOS開發(fā) View

2013-01-06 10:43:54

Android開發(fā)View特效

2016-12-26 15:25:59

Android自定義View

2016-11-16 21:55:55

源碼分析自定義view androi

2016-04-12 10:07:55

AndroidViewList

2013-05-20 17:33:44

Android游戲開發(fā)自定義View

2017-03-14 15:09:18

AndroidView圓形進(jìn)度條

2022-06-30 14:02:07

鴻蒙開發(fā)消息彈窗組件

2022-07-15 16:45:35

slider滑塊組件鴻蒙

2021-03-09 15:23:45

鴻蒙HarmonyOS應(yīng)用開發(fā)

2021-12-24 15:46:23

鴻蒙HarmonyOS應(yīng)用

2021-11-01 10:21:36

鴻蒙HarmonyOS應(yīng)用

2021-08-25 10:14:51

鴻蒙HarmonyOS應(yīng)用

2021-08-16 14:45:38

鴻蒙HarmonyOS應(yīng)用

2017-03-02 13:33:19

Android自定義View

2022-06-20 15:43:45

switch開關(guān)鴻蒙

2021-09-06 14:58:23

鴻蒙HarmonyOS應(yīng)用

2022-04-24 15:17:56

鴻蒙操作系統(tǒng)

2012-05-18 10:52:20

TitaniumAndroid模塊自定義View模塊

2022-07-12 16:56:48

自定義組件鴻蒙
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)