Hello, I’m your friend Pongo.

The last original article analyzed the functions and usage of the Switch. This is very important, is a necessary component for setting the slider switch. Everyone learn as soon as possible, the later update will be faster, after learning the common components began to develop a large number of projects.

All right, here’s today’s highlight Image……

​

Let’s start today’s article, as usual, by saying the following:

1. Introduction 2. Properties used 3

Introduction to the

Image is a component used to display images, which is required for the display of various images.

Attributes used

The common XML attribute for Image inherits from: Component

There are only three attributes for an image: cropping, image display, and zoom type

In actual combat

Try creating a basic image display first

Create the project and add an Image

<Image
    ohos:id="$+id:image"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:layout_alignment="center"
    ohos:image_src="$media:hongmeng"
    />
Copy the code

Ohos :image_src=”$media:hongmeng

2. Picture catalogue

​

2. Set the zoom scale

Ohos: scale_x = "0.9" ohos: scale_y = "0.9"Copy the code

1, scale from 0 to 1.

3. Set the zoom mode

<Image ohos:id="$+id:image2" ohos:height="match_content" ohos:width="match_content" ohos:top_margin="20vp" Ohos :layout_alignment="center" oHOs :image_src="$media:hongmeng" oHOs :scale_mode="zoom_center"Copy the code

1, there are several scaling methods, we just use the original scale, other interested partners can try.

(1), zoom_center

Indicates that the original Image is scaled to the narrowest edge of the Image and displayed in the center.

(2), zoom_start

Indicates that the original Image is scaled to the narrowest edge of the Image and displayed from the beginning.

(3), zoom_end

Indicates that the original Image is scaled to the narrowest edge of the Image and displayed against the end.

(4), stretch

Scale the original Image to the same size as Image.

(5), center

Indicates that the middle part of the original Image is displayed according to the size of Image without scaling.

(6), inside

Indicates that the original Image is scaled to the same or smaller size as Image and displayed in the center.

(7), clip_center

Indicates that the original Image is scaled to the same or larger size as Image and displayed in the center.

4. Set the cropping alignment

<Image
    ohos:id="$+id:image3"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:top_margin="20vp"
    ohos:layout_alignment="center"
    ohos:image_src="$media:hongmeng"
    ohos:clip_alignment="center"
    />
Copy the code

1. Set the clipping mode

(1), left indicates left-aligned clipping. (2), “right” means right-aligned clipping. (3), top means to trim according to the top. (4), bottom means to trim according to the bottom. (5), “center” means cutting according to the center.

Complete code:

<? 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="top" ohos:orientation="vertical"> <Image ohos:id="$+id:image1" ohos:height="match_content" ohos:width="match_content" ohos:top_margin="20vp" ohos:layout_alignment="center" Image_src ="$media:hongmeng" ohos:alpha="1" ohos:scale_x="0.9" ohos:scale_mode="zoom_center" /> <Image ohos:id="$+id:image2" ohos:height="match_content" ohos:width="match_content" ohos:top_margin="20vp" ohos:layout_alignment="center" ohos:image_src="$media:hongmeng" ohos:scale_mode="zoom_center" /> <Image ohos:id="$+id:image3" ohos:height="match_content" ohos:width="match_content" ohos:top_margin="20vp" ohos:layout_alignment="center" ohos:image_src="$media:hongmeng" ohos:clip_alignment="center" /> </DirectionalLayout>Copy the code

Old rules code can not be less, otherwise small partners should say I stingy.

Source:

Gitee.com/codegrowth/…

Pay attention to the public number [programmer chat programming], the background reply “Hongmeng”, you can get thousands of hongmeng open source components.

Original is not easy, useful attention. I’ll give you a triple if I help you. Thanks for your support.

Feel good friends, remember to help me like and attention yo, pen xin pen xin ~**

Author: code worker

Have a question please leave a message or private message, you can search wechat: programmer chat programming, pay attention to the public number to get more free learning materials.