“This is the 27th day of my participation in the Gwen Challenge in November. See details of the event: The Last Gwen Challenge in 2021”

1, the introduction of

Image is the component that displays images, and we use it a lot in development!

2. Property sheet

Image is also a component, it inherits from: ohos.agp.components.Com ponent

When we use the Image component, we only need to understand its properties in advance, which is very convenient to use (all the officially specified Image properties are here) :

The attribute name Product description The values The values that Use case
clip_alignment Image cropping alignment left Left-aligned clipping. ohos:clip_alignment=”left”
right Indicates right-aligned clipping. ohos:clip_alignment=”right”
top Indicates clipping by top alignment. ohos:clip_alignment=”top”
bottom Bottom aligned clipping. ohos:clip_alignment=”bottom”
center Indicates centering cropping. ohos:clip_alignment=”center”
image_src image Element type Can directly configure the color value, also can reference color resources or reference media/graphic image resources. ohos:image_src=”#FFFFFFFF”ohos:image_src=”
c o l o r : b l a c k ” o h o s : i m a g e s r c = ” color:black”ohos:image_src=” media:warning”ohos:image_src=”$graphic:graphic_src”
scale_mode Image scaling type zoom_center Indicates that the original Image is scaled to the narrowest edge of the Image and displayed in the center. ohos:scale_mode=”center”
zoom_start Indicates that the original Image is scaled to the narrowest edge of the Image and displayed from the beginning.
zoom_end Indicates that the original Image is scaled to the narrowest edge of the Image and displayed against the end.
stretch Scale the original Image to the same size as Image.
center Indicates that the middle part of the original Image is displayed according to the size of Image without scaling.
inside Indicates that the original Image is scaled to the same or smaller size as Image and displayed in the center.
clip_center Indicates that the original Image is scaled to the same or larger size as Image and displayed in the center.

3, use,

3.1 Uploading Resources

Before using the Image component, you need to know where Image resources are stored in HarmonyOS ‘application structure.

After creating a project, open the project’s entry > SRC > Main > Resources > Base > Media directory, which will have a default icon.png image. This is the designated location of the image.

We are going to use the father of Java (James Gosling) to test this out and bless you all as the mother of Java, hahaha!!

Place the image into entry > SRC > Main > Resources > Base > Media.

3.2 Used in code

In Java semantic development for HarmonyOS, components can be built directly from XML configuration and Java code, both of which are demonstrated here.

3.2.1 Creating an Image with XML

SRC -> main -> resources -> base -> layout -> ability_main.xml

<? The XML version = "1.0" encoding = "utf-8"? > <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:alignment="center" ohos:orientation="vertical"> <! <Image ohos:id="$+id:imageComponent" ohos:height="200vp" oHOs :width="200vp" ohos:image_src="$media:JamesGosling" /> </DirectionalLayout>Copy the code

Launch the application to see what it looks like. Let’s take a look at the father of Java (MMMM, a little small!!).

3.2.2 Java code to create an Image

Comment out the Image configuration in XML and use Java code to implement it.

In com. Liziba. Image. Slice. MainAbilitySlice onStart method of a class, create image code is as follows:

package com.liziba.image.slice; import com.liziba.image.ResourceTable; import ohos.aafwk.ability.AbilitySlice; import ohos.aafwk.content.Intent; import ohos.agp.components.DirectionalLayout; import ohos.agp.components.Image; public class MainAbilitySlice extends AbilitySlice { @Override public void onStart(Intent intent) { super.onStart(intent); // Create an Image component Image Image = new Image(getContext()); image.setPixelMap(ResourceTable.Media_JamesGosling); image.setHeight(500); image.setWidth(500); image.setScaleMode(Image.ScaleMode.STRETCH); // Create a layout DirectionalLayout Layout = new DirectionalLayout(getContext()); // Add the Image component to the DirectionalLayout layout. AddComponent (Image); super.setUIContent(layout); } @Override public void onActive() { super.onActive(); } @Override public void onForeground(Intent intent) { super.onForeground(intent); }}Copy the code

Here is a simple scaling to scale the original Image to the same size as the Image and see what it looks like. :

3.3 attributes

Because in the actual development, XML configuration UI is still more, because it is easy to change and unified management, but also more flexible. So the attributes here are all demonstrated with XML configuration!!

3.3.1 transparency

Set the opacity to 0.2. The smaller the opacity is, the more transparent the image is. The original opacity is 1.

Ohos: alpha = “0.2”

<Image ohos:id="$+id:imageComponent" ohos:height="200vp" ohos:width="200vp" ohos:image_src="$media:JamesGosling" Ohos: alpha = "0.2" / >Copy the code

3.3.2 Scaling factor

When the given Image size is inconsistent with the size set by the Image component, we often need to scale to achieve compatibility. (But in order not to distort the image, use less zoom in the end. If the image size does not fit, try to get the artist to make a new image.)

The scaling factor can be set in X and Y directions, which are actually width and height

Here is the effect of scaling both the X and y axes with 0.5

Ohos: scale_x = “0.5”

Ohos: scale_y = “0.5”

<! <Image ohos:id="$+id:imageComponent" ohos:height="200vp" oHOs :width="200vp" Ohos: image_src = "$media: JamesGosling" ohos: scale_x = "0.5" ohos: scale_y = "0.5" / >Copy the code

The following is the effect if the value is set to 1. The default value is 1 and you do not need to configure the value:

ohos:scale_x=”1″

ohos:scale_y=”1″

<! <Image ohos:id="$+id:imageComponent" ohos:height="200vp" oHOs :width="200vp" ohos:image_src="$media:JamesGosling" ohos:scale_x="1" ohos:scale_y="1" />Copy the code

\

Can I set it to something greater than 1? Of course, yes, this will be more configurable zoom parameters, zoom.

For example, try configuring a 2:

ohos:scale_x=”2″

ohos:scale_y=”2″

<! <Image ohos:id="$+id:imageComponent" ohos:height="200vp" oHOs :width="200vp" ohos:image_src="$media:JamesGosling" ohos:scale_x="2" ohos:scale_y="2" />Copy the code

3.3.3 cutting

What if the given Image is too large for our Image setting?

At this point we can use clipping, clipping has the following parameters, just one demo!

The attribute name Product description The values The values that Use case
clip_alignment Image cropping alignment left Left-aligned clipping. ohos:clip_alignment=”left”
right Indicates right-aligned clipping. ohos:clip_alignment=”right”
top Indicates clipping by top alignment. ohos:clip_alignment=”top”
bottom Bottom aligned clipping. ohos:clip_alignment=”bottom”
center Indicates centering cropping. ohos:clip_alignment=”center”

Let’s first make the Image component smaller so that we can see the clipping effect. Here we use left-aligned clipping:

<! <Image ohos:id="$+id:imageComponent" ohos:height="50vp" oHOs :width="50vp" ohos:image_src="$media:JamesGosling" ohos:clip_alignment="left" />Copy the code

We do the zoom

When the Image and Image components are of different sizes, we can adjust them by scaling them.

For example, the size, width and height of the Image component we set at this time are 200vp, but the Image is definitely not so large. Therefore, we can consider enlargingthe Image to the size of the Image component.

We used Stretch to scale the original Image to the same size as Image.

ohos:scale_mode=”stretch”

<! <Image ohos:id="$+id:imageComponent" ohos:height="200vp" oHOs :width="200vp" ohos:image_src="$media:JamesGosling" ohos:scale_mode="stretch" />Copy the code

Image component is very simple, try more will be!!