TextDrawable: TextDrawable is a light-weight library provides images with letter/text like the Gmail app

NOTICE: 1.在中文路径下，Build Debug Hap(s)会失败。建议将项目放置在全英文目录下。 2.此项目中library Module类型为Java Library,下载导入后需修改/library/build.gradle中的sdk依赖路径方可正常编译。

dependencies {
    // dir改为自己本地sdk安装路径
    compileOnly fileTree(dir: 'C:/Users/Administrator/AppData/Local/Huawei/Sdk/java/2.1.1.21/api', include: ['*.jar'])
}

TextDrawable

This light-weight library provides images with letter/text like the Gmail app. It extends the ShapeElement class thus can be used with existing/custom/network Image classes. Also included is a fluent interface for creating shapeElements and a customizable ColorGenerator.

How to use

install

case 1： Generate a JAR package through the library Module and add the JAR package to the libs directory. Add the following code in entry/gradle.build.

implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])

case 2：

allprojects{
    repositories{
        mavenCentral()
    }
}

implementation 'io.openharmony.tpc.thirdlib:TextDrawable:1.0.3'

1. Create simple tile:

<Image ohos:width="60dp"
       ohos:height="60dp"
       ohos:id="$+id:image"/>

Note: Specify width/height for the Image and the drawable` will auto-scale to fit the size.

TextDrawable drawable = TextDrawable.builder()
                .buildRect("A", Color.RED);
Image image = (Image) findComponentById(ResourceTable.Id_image);
image.addDrawTask(new Component.DrawTask() {
    @Override
    public void onDraw(Component component, Canvas canvas) {
    drawable.setBounds(new Rect(0, 0, image.getWidth(), image.getHeight()));
    drawable.drawToCanvas(canvas);
    }
});

2. Create rounded corner or circular tiles:

TextDrawable drawable1 = TextDrawable.builder()
                .buildRoundRect("A", Color.RED, 10); // radius in px

TextDrawable drawable2 = TextDrawable.builder()
                .buildRound("A", Color.RED);

3. Add border:

TextDrawable drawable = TextDrawable.builder()
                .beginConfig()
                    .withBorder(4) /* thickness in px */
                .endConfig()
                .buildRoundRect("A", Color.RED, 10);

4. Modify font style:

TextDrawable drawable = TextDrawable.builder()
                .beginConfig()
	                .textColor(Color.BLACK)
                    .useFont(Typeface.DEFAULT)
                    .fontSize(30) /* size in px */
                    .bold()
                    .toUpperCase()
                .endConfig()
                .buildRect("a", Color.RED)

5. Built-in color generator:

ColorGenerator generator = ColorGenerator.MATERIAL; // or use DEFAULT
// generate random color
int color1 = generator.getRandomColor();
// generate color based on a key (same key returns the same color), useful for list/grid views
int color2 = generator.getColor("user@gmail.com")

// declare the builder object once.
TextDrawable.IBuilder builder = TextDrawable.builder()
				.beginConfig()
					.withBorder(4)
				.endConfig()
				.rect();

// reuse the builder specs to create multiple drawables
TextDrawable ic1 = builder.build("A", color1);
TextDrawable ic2 = builder.build("B", color2);

6. Specify the width / height:

	<Image ohos:width="match_content"
		   ohos:height="match_content"
		   android:id="$+id:image"/>

Note: The Image could use match_content width/height. You could set the width/height of the drawable using code.

	TextDrawable drawable = TextDrawable.builder()
					.beginConfig()
						.width(60)  // width in px
						.height(60) // height in px
					.endConfig()
					.buildRect("A", Color.RED);

	Image image = (Image) findComponentById(ResourceTable.Id_image);
	image.addDrawTask(new Component.DrawTask() {
		@Override
		public void onDraw(Component component, Canvas canvas) {
		drawable.setBounds(new Rect(0, 0, image.getWidth(), image.getHeight()));
		drawable.drawToCanvas(canvas);
		}
	});

7. Other features:

Mix-match with other drawables. Use it in conjunction with StateElement, FrameAnimationElement etc.
Compatible with other views (not just Image). Use it as background drawable, compound drawable for Text, Button etc.
Use multiple letters or unicode characters to create interesting tiles.

HarmonyOS-TPC / TextDrawable

TextDrawable

How to use

install

1. Create simple tile:

2. Create rounded corner or circular tiles:

3. Add border:

4. Modify font style:

5. Built-in color generator:

6. Specify the width / height:

7. Other features:

简介

发行版

贡献者

近期动态

HarmonyOS-TPC / TextDrawable .gitee-modal { width: 500px !important; }

TextDrawable

How to use

install

1. Create simple tile:

2. Create rounded corner or circular tiles:

3. Add border:

4. Modify font style:

5. Built-in color generator:

6. Specify the width / height:

7. Other features:

简介

发行版

开源评估指数源自 OSS-Compass 评估体系，评估体系围绕以下三个维度对项目展开评估：

贡献者

近期动态

搜索帮助

HarmonyOS-TPC / TextDrawable