“This is the 16th day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

Jetpack Compose Series (5) – Picture component

There are two common Image components in Jetpack Compose: Icon and Image. As you can see from the naming, these two components are responsible for graphics and image correlation in content rendering.

Compose obtains resources in four ways:

· Text -> stringResource(r.string.hello_world)

· Color -> colorResource(R.color.black)

· Dimension -> dimensionResource(R.dian.padding)

· Image -> painterResource(R.rawable.head_icon)

Icon and Image are undoubtedly Image resources.

Icon

There are three constructors for Icon:

fun Icon( bitmap: ImageBitmap, contentDescription: String? , modifier: Modifier = Modifier, tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current) ) fun Icon( imageVector: ImageVector, contentDescription: String? , modifier: Modifier = Modifier, tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current) ) fun Icon( painter: Painter, contentDescription: String? , modifier: Modifier = Modifier, tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current) )Copy the code

The three functions differ only in the first argument type, which is the actual content of the Icon. The other three parameters are:

ContentDescription: Description of content meaning, used for barrier-free services (considering the use of some visually impaired people, so there is this property, TTS voice playback will be used to read out the contentDescription property, to inform the user of the function of this button), if this Icon can be triggered, it needs to explain its meaning, If it’s just decorative, you can ignore it.

· Modifier: Modifier.

· Tint: shader that can directly modify the color of Icon substance. (Same as View system)

The other three different parameters are:

· ImageBitmap: bitmap.

· Painter: Abstract class representing content that can be drawn, similar to The Drawable in Android.

· ImageVector: Vector image.

Compose contains dozens of commonly used Icons, including five MaterialDesign styles: Outlined, Filled, Sharp, TwoTone and Rounded.

In the following example, we refer to officially provided vector graph resources to display five types of ICONS:

Row {
    Icon(Icons.Outlined.CheckCircle, contentDescription = null, tint = Color.Red)
    Icon(Icons.Filled.CheckCircle, contentDescription = null, tint = Color.Black)
    Icon(Icons.Sharp.CheckCircle, contentDescription = null, tint = Color.Blue)
    Icon(Icons.TwoTone.CheckCircle, contentDescription = null, tint = Color.Green)
    Icon(Icons.Rounded.CheckCircle, contentDescription = null, tint = Color.Red)
}
Copy the code

Corresponding effect is:

It is not difficult to see that these five styles correspond to each other:

· Filled Default type, graphics is content fill style.

· Outline style, outline only, no padding.

· Rounded, such as circular start icon.

· TwoTone double tone, not sure if the translation doc is written wrong, exactly the same as Sharp.

· Sharp e.g. right Angle icon.

Compose is composed’s built-in image resource file, which contains up to 40+ images by default. If you want to use other built-in ICONS, you can import the Material – ICONS -extended dependency from Gradle:

Dependencies {... implementation "androidx.com pose. Material: material - the ICONS - extended: $compose_version"}Copy the code

However, a full set of ICONS will cause the packaged APK file to be too large. Therefore, you are advised to import the icon file. For details, see the official document.

Painter

Let’s use Painter to write a simple Icon:

Icon(painter = painterResource(id = R.mipmap.ic_launcher), null)
Copy the code

On a run, find:

What a mistake! Here’s why:The reason for the error is very clear: the painter object only supports.png or.jpg images, while the original image is.webp.

Let’s change the picture this time, as follows:

Icon(painter = painterResource(id = R.mipmap.icon_text), null)
Copy the code

Run discovery:

It’s black. That’s not what the original image looks like.

Here to be sure, tint shader default mode is AmbientContentColor. The current, we need to change model to show the original Color, set the attribute is set to Color tint. Unspecified.

The code can be modified to:

Icon(painter = painterResource(id = R.mipmap.icon_text), null, tint = Color.Unspecified)
Copy the code

The corresponding Icon is also displayed normally:

Image

As usual, we first look at the parameters needed to reference the Image control.

It is not difficult to see that the Image parameter is almost the same as the basic parameter of Icon. In fact, they are used in the same way. Here are the other different parameters:

Alignment: Indicates the alignment direction

Image Before using the alignment, the width and height are set. The corresponding values are as follows:

You can guess the exact location from the meaning of the word, and I won’t repeat it here.

ContentScale: Scaling Settings

The effect is similar to that of the ImageView scaleType property in the View system, with the specific scale value in the ContentScale:

This one defaults to contentScale.fit. Other parameters are explained as follows:

· ContentScale.Crop: Crop;

· ContentScale.FillBounds: Stretch the width of the picture to fill the shape;

· ContentScale.FillHeight: Stretch the image height to fill the height;

· ContentScale.fillWidth: Stretch the image width to fill the width;

· ContentScale.fit: Scale the source evenly (keeping the aspect ratio of the source) so that both dimensions of the source (width and height) are equal to or less than the corresponding dimension of the target;

· ContentScale.inside: If the source is larger than the target, scale the source to keep the aspect ratio within the target boundary. If the source is less than or equal to the target in both dimensions, this behavior is similar to None;

· ContentScale.None: Does not scale.

Alpha transparency

Values range from 0f to 1f, default is 1F, which is nothing to say.

ColorFilter: coloring effect

To apply a color to a picture, that is, to mix the picture with color, there are three Settings as follows:

· Colorfilter. tint(Color, BlendMode) : modify the coloring effect;

· Colorfilter.lighting (Color,AddColor) : Add AddColor Color to the colored picture;

· Colorfilter. colorMatrix(colorMatrix) : Modify the coloring matrix.

Generally speaking, are used in the picture unchanged on the basis of changing the picture color.

Row {
    Image(modifier = Modifier
        .size(60.dp, 45.dp),
        painter = painterResource(id = R.drawable.icon_text),
        contentDescription = null,
        alpha = 1f,
        colorFilter = null
    )
    Image(modifier = Modifier
        .size(60.dp, 45.dp),
        painter = painterResource(id = R.drawable.icon_text),
        contentDescription = null,
        alpha = 1f,
        colorFilter = ColorFilter.tint(color = Color.Blue, BlendMode.SrcAtop)
    )
    Image(modifier = Modifier
        .size(60.dp, 45.dp),
        painter = painterResource(id = R.drawable.icon_text),
        contentDescription = null,
        alpha = 1f,
        colorFilter = ColorFilter.lighting(multiply = Color.Blue,add = Color.Black)
    )
}
Copy the code

The corresponding effect is:

ColorMatrix involves colorMatrix, and there are few scenes used, which will not be described here.