#星光计划1.0#HarmonyOS 自定义View之图文标题原创精华

中软HOS小鸿

发布于 2021-10-22 10:17

浏览

7收藏

简介

日常项目中，我们可能会碰到一些标题加特效或多行内容+查看更多的需求，如果使用Text+Image这样去拼接的话，在复杂多“标签”场景就实现起来比较呆板，于是根据现有的HarmonyOS Text提供了一种思路实现了图文标题，我们需要在Text中进行图文混排。

效果演示

#星光计划1.0#HarmonyOS 自定义View之图文标题-鸿蒙开发者社区

TextImageTitle介绍

TextImageTitle是用来显示字符串+图片（或任意Component）的自定义控件，目前只支持头部或者尾部。

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

TextImageTitle常用属性

属性名称	中文描述	取值	取值说明
textSize	文字大小	int	同Text
textColor	文字颜色	Color	同Text
lineHeight	行高	int	>0
maxTextLines	最大显示行数int	int	-1，认为显示最大行
imageLayout	图片位置	int	0：前面； 1：尾部；
imageResId	图片资源	int	R 下资源
imageWidth	图片宽度	int	>=0
imageHeight	图片高度	int	>=0
imageMarginLeft	图片left距离	int	>=0
imageMarginRight	图片right距离	int	>=0

TextImageTitle用法

在layout目录下的xml文件中创建TextImageTitle组件。

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

1、设置图片在头部

示例代码：

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

示例效果：

#星光计划1.0#HarmonyOS 自定义View之图文标题-鸿蒙开发者社区

2、设置Component在尾部

示例代码：

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

示例效果：

#星光计划1.0#HarmonyOS 自定义View之图文标题-鸿蒙开发者社区

3、设置多行文字尾部图片

示例代码：

TextImageTitle textImageTitle = (TextImageTitle) findComponentById(ResourceTable.Id_text3);
TextImageTitle.Parameter parameter = new TextImageTitle.Parameter().
        setMaxTextLines(3).
        setImageLayout(TextImageTitle.LAYOUT_TAIL).
        setImageResId(ResourceTable.Media_icon_more).
        setImageWidth(70).setImageHeight(70).
        setLineHeight(70).
        setTextSize(45).
        setImageMarginLeft(0).
        setImageMarginRight(50);
textImageTitle.setParameter(parameter);
textImageTitle.setText("华为开发者大会2021将在东莞松山湖举办，根据官方邀请函上透露出来的信息，鸿蒙HarmonyOS 3.0、HMS Core 6、全屋智能等黑科技也将悉数亮相鸿蒙HarmonyOS 2升级用户数量已经突破了1.3亿大关，并且华为鸿蒙OS系统目前平均每天升级用户数量都超过了100百万，根据华为目前的规划，鸿蒙OS系统的百机升级计划将会在今年12月份前后完成。");
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

示例效果：
#星光计划1.0#HarmonyOS 自定义View之图文标题-鸿蒙开发者社区

4、图片单击事件

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

实现思路

根据遍历字符计算是否换行（细节请查看源代码）

 int titleLength = title.length();
 measurePaint.setTextSize(parameter.textSize);
 int curLines = 1;
 float curWidth = 0.0f;
 int indexEnd = 0;

 //判断图文在前 还是在后
 boolean isFront = parameter.imageLayout == LAYOUT_FRONT;
  // 1，遍历字符串
 for (int index = 0; index < titleLength; index++) {
       String c = String.valueOf(title.charAt(index));
       float vW = measurePaint.measureText(c);
       curWidth += vW;
     
     //  一些行数 或每行宽度判断示例 头尾判断
     if (lineWidth < curWidth) {
         // ..... 省略大量代码
     }
     
     if (lineWidth < curWidth + imageTotalWidth) {
        // ..... 省略大量代码
     }
     
    if (isFront && curLines == 1) {
       // ..... 省略大量代码 
    }
     ...
 }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.

绘制文字

 private void createText(String text) {
     // Text内容创建并且加到容器上
     Text titleText = new Text(getContext());
     titleText.setTextSize(parameter.textSize);
     titleText.setTextColor(parameter.textColor);
     addComponent(titleText, ComponentContainer.LayoutConfig.MATCH_PARENT, parameter.lineHeight);
     titleText.setText(text);
}
1.
2.
3.
4.
5.
6.
7.
8.

绘制图文

    private void createTextAndImage(String text, int maxTextWidth, boolean isFront) {
        //创建一个图片和文字的容器
        DirectionalLayout directionalLayout = new DirectionalLayout(getContext());
        directionalLayout.setOrientation(ComponentContainer.HORIZONTAL);
        directionalLayout.setAlignment(LayoutAlignment.VERTICAL_CENTER);
        Text titleText = new Text(getContext());
        titleText.setTextSize(parameter.textSize);
        titleText.setTextColor(parameter.textColor);
         // 文字的最大长度，决定尾部是否显示...;不限制有情况是Image出边界
        titleText.setMaxTextWidth(maxTextWidth);
        titleText.setMultipleLine(false);
        titleText.setTruncationMode(Text.TruncationMode.ELLIPSIS_AT_END);
        titleText.setText(text);

        Component component = getImage(text);
        // 点击事件
        component.setClickedListener(new ClickedListener() {
            @Override
            public void onClick(Component component) {
                if (listener != null) {
                    listener.onClick();
                }
            }
        });

        //判断图片在前还是在后
        if (isFront) {
            if (component != null) {
                directionalLayout.addComponent(component);
            }
            directionalLayout.addComponent(titleText, ComponentContainer.LayoutConfig.MATCH_CONTENT,                                                           ComponentContainer.LayoutConfig.MATCH_PARENT);
        } else {
            directionalLayout.addComponent(titleText, ComponentContainer.LayoutConfig.MATCH_CONTENT,                                                           ComponentContainer.LayoutConfig.MATCH_PARENT);
            if (component != null) {
                directionalLayout.addComponent(component);
            }
        }
        addComponent(directionalLayout, ComponentContainer.LayoutConfig.MATCH_PARENT, parameter.lineHeight);
    }
	
    private Component getImage(String text) {
         // 自定义Component优先
        if (parameter.imageComponent != null) {
            parameter.imageComponent.setComponentSize(parameter.imageWidth, parameter.imageHeight);
            parameter.imageComponent.setMarginLeft(parameter.imageMarginLeft);
            parameter.imageComponent.setMarginRight(parameter.imageMarginRight);
            return parameter.imageComponent;
        } else if (parameter.imageResId != 0) {  
           //图文
            Image image = new Image(getContext());
            image.setComponentSize(parameter.imageWidth, parameter.imageHeight);
            if (!TextTool.isNullOrEmpty(text)) {
                image.setMarginLeft(parameter.imageMarginLeft);
                image.setMarginRight(parameter.imageMarginRight);
            }
            image.setScaleMode(Image.ScaleMode.STRETCH);
            image.setPixelMap(parameter.imageResId);
            return image;
        }
        return null;
    }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.