3.4 HarmonyOS Hongmeng Component Image

Author: Han Ru

Company: Program Ka (Beijing) Technology Co., LTD

Hong Meng Bus columnist

Image is the component used to display an Image.

Supported XML attributes

The common XML attribute for Image inherits from: Component

The Image’s own XML attributes are shown in the following table:

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=”`$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.

Create an Image

In the Project window, choose Entry > SRC > Main > Resources > Base > Media and add an image to the media folder. Take Chengxuka.jpg as an example.

You can create an Image either in XML or in code as follows:

Create an Image in XML

<Image
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:layout_alignment="center"
        ohos:image_src="$media:chengxuka"/>
Copy the code

Get the contents of the input box: Create an Image in your code

				/ / create the Image
        Image image = new Image(getContext());
        // Set the image to display
        image.setPixelMap(ResourceTable.Media_chengxuka);
Copy the code

Note here that using Image does not error package, use the following import:

import ohos.agp.components.Image;
Copy the code

Effect:

3. Set Image

1. Set transparency

  <Image
          ohos:height="match_content"
          ohos:width="match_content"
          ohos:layout_alignment="center"
          ohos:top_margin="20vp"
          ohos:image_src="$media:chengxuka"
          ohos:alpha="0.5"
          />
Copy the code

Contrast the effect with opacity set to 0.5 and no opacity set:

1. Set scaling factor

  <Image
          ohos:height="match_content"
          ohos:width="match_content"
          ohos:layout_alignment="center"
          ohos:top_margin="20vp"
          ohos:image_src="$media:chengxuka"
          ohos:scale_x="0.5"
          ohos:scale_y="0.5"
          />
Copy the code

The effect

1. Set zoom Mode
When the size of the Image is different from that of the Image, the Image can be zoomed according to different zooming methods. For example, the width and height of the Image can be set to 150VP

<? 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:orientation="vertical"> <! -- scale_mode, when the size of the Image is different from that of the Image, the Image can be scaled according to different scaling modes. Center indicates that the Image is not scaled and the middle part of the original Image is displayed according to the Image size. Zoom_center: indicates that the original Image is scaled to the narrowest edge of the Image and displayed in the center. Stretch: zooms the original Image to the same size as the Image. Inside, which means to scale the original Image to the same or smaller size as Image and display it in the center. Clip_center: scales the original Image to the same or larger size as the Image and displays it in the center. -- > <! -- Center: shows the middle part of the original Image according to the size of Image without scaling. --> <Image ohos:height="150vp"
          ohos:width="150vp"
          ohos:image_src="$media:chengxuka"
          ohos:scale_mode="center"/ > <! -- zoom_center: indicates that the original Image is scaled to the narrowest edge of the Image and is centered. --> <Image ohos:height="150vp"
          ohos:width="150vp"
          ohos:image_src="$media:chengxuka"
          ohos:scale_mode="zoom_center"
          ohos:background_element="$graphic:background_image"/ > <! -- stretch: zooms the original Image to the same size as the Image. <Image ohos:height="150vp"
          ohos:width="150vp"
          ohos:image_src="$media:chengxuka"
          ohos:scale_mode="stretch"
          ohos:background_element="$graphic:background_image"/ > <! -- Inside: Scale the original Image to the same or smaller size as Image and display it in the center. --> <Image ohos:height="150vp"
          ohos:width="150vp"
          ohos:image_src="$media:chengxuka"
          ohos:scale_mode="inside"
          ohos:background_element="$graphic:background_image"/ > <! -- clip_center: scale the original Image to the same or larger size as the Image and center it. --> <Image ohos:height="150vp"
          ohos:width="150vp"
          ohos:image_src="$media:chengxuka"
          ohos:scale_mode="clip_center"
          ohos:background_element="$graphic:background_image"
          />
  
  </DirectionalLayout>
Copy the code

Here we add a border to the image for a better view and set the background resource as background_image.xml:


      
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">

    <stroke
        ohos:color="#FF0000"
        ohos:width="6"/>
</shape>
Copy the code

Effect:

1. Sets the cropping alignment mode
When the size of the Image is smaller than that of the Image, the Image can be clipped. For example, the width and height of the Image is 150VP, which is smaller than the size of the Image.

<? 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:orientation="vertical"> <! -- Clip_alignment Left Indicates left-aligned clipping. Right: Right-aligned clipping. Top indicates trimming by top alignment. Bottom means trim by bottom alignment. Center indicates that the clipping is centered. -- > <! -- left indicates left-aligned clipping. --> <Image ohos:height="150vp"
          ohos:width="150vp"
          ohos:image_src="$media:chengxuka"
          ohos:clip_alignment="left"/ > <! -- Right indicates right-aligned clipping. --> <Image ohos:height="150vp"
          ohos:width="150vp"
          ohos:image_src="$media:chengxuka"
          ohos:clip_alignment="right"/ > <! Top: Trim by top alignment. --> <Image ohos:height="150vp"
          ohos:width="150vp"
          ohos:image_src="$media:chengxuka"
          ohos:clip_alignment="top"/ > <! -- bottom indicates bottom aligned clipping. --> <Image ohos:height="150vp"
          ohos:width="150vp"
          ohos:image_src="$media:chengxuka"
          ohos:clip_alignment="bottom"/ > <! -- Center: trim by centering. --> <Image ohos:height="150vp"
          ohos:width="150vp"
          ohos:image_src="$media:chengxuka"
          ohos:clip_alignment="center"
          />
  
  </DirectionalLayout>
Copy the code

The effect is as follows:

Fourth, write an example – round – cast graph

Let’s make a wheel map: set two buttons, one up and one down, click the next one to show the next picture, click the previous one to show the last picture.

We first store these Image resources in an array, and then set index to indicate the Image component to display. When the previous button is clicked, we decrease index by 1. When the next button is clicked, we increment idNEx by 1. Note the boundary value problem with index.Copy the code

1, first prepare some pictures, paste them into the media directory.

2. In the Layout directory, create a new layout file: image_carousel.xml

<? 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:orientation="vertical">



    <Image
        ohos:id="$+id:image1"
        ohos:height="0"
        ohos:weight="1"
        ohos:width="300vp"
        ohos:layout_alignment="center"
        ohos:top_margin="30vp"
        ohos:bottom_margin="30vp"
        ohos:scale_mode="stretch"
        ohos:image_src="$media:img001"
        ohos:background_element="#33FF0000"/>

    <DependentLayout
        ohos:height="match_content"
        ohos:layout_alignment="center"
        ohos:bottom_margin="30vp"
        ohos:width="300vp">
        <Button
            ohos:id="$+id:btn1"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:align_parent_left="true"
            ohos:text_size="18fp"
            ohos:background_element="$graphic:background_button"
            ohos:text="Last slide."
            ohos:left_padding="14vp"
            ohos:right_padding="14vp"
            ohos:top_padding="8vp"
            ohos:bottom_padding="8vp"

            />
        <Button
            ohos:id="$+id:btn2"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text_size="18fp"
            ohos:align_parent_right="true"
            ohos:text="Next slide."
            ohos:background_element="$graphic:background_button"
            ohos:left_padding="14vp"
            ohos:right_padding="14vp"
            ohos:top_padding="8vp"
            ohos:bottom_padding="8vp"
            />
    </DependentLayout>



</DirectionalLayout>
Copy the code

To make the two buttons look nice, let’s set the background of the buttons,

We then create the required XML file in the graphic directory,

Background_button.xml examples of code:

<? xml version="1.0" encoding="UTF-8"? > <shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <solid
        ohos:color="#3387CEFA"/>
    <corners
        ohos:radius="18vp"/>
    <stroke
        ohos:color="#9987CEFA"
        ohos:width="6"/>
</shape>
Copy the code

3. Code in Java

First we modify the onStart() method in MainAbilitySlice to load the display layout file:

				// Load the layout file to display
        super.setUIContent(ResourceTable.Layout_image_carousel);
Copy the code

First set the resource array and index index of the image, declare them as member variables:

//1. Store the image id in the array, int
    int[] images = {ResourceTable.Media_img001,ResourceTable.Media_img002,ResourceTable.Media_img003,ResourceTable.Media_img004,ResourceTab le.Media_img005,ResourceTable.Media_img006,ResourceTable.Media_img007,ResourceTable.Media_img008,ResourceTable.Media_img 009};//2. Define subscripts
    int index = 0;
Copy the code

Finally get picture control, button control, add click event for button:

				// Implement image rotation
        /* Click on the previous picture to switch to the previous picture. Click on the next picture to switch to the next picture. Store the image in an array, and operate on the index array. * /

        //3. Get the control object
        Image image = (Image) findComponentById(ResourceTable.Id_image1);
        Button btn1 = (Button) findComponentById(ResourceTable.Id_btn1);
        Button btn2 = (Button) findComponentById(ResourceTable.Id_btn2);

        //4. Add click events for buttons
        btn1.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                // Previous: click the button, index-1
                index--;
                if(index<0){
                    index = images.length-1;
                }
                if(index>images.length-1){
                    index= 0; } image.setPixelMap(images[index]); }}); btn2.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                // Next slide: click index+1
                index++;
                if(index<0){
                    index = images.length-1;
                }
                if(index>images.length-1){
                    index= 0; } image.setPixelMap(images[index]); }});Copy the code

Write another example

Let’s do another example, just like we did before, click the button to change the opacity of the image.

1, first prepare a material picture, copy to the media directory.

Create a new layout file: image_alpha. XML in the Layout directory.

<? 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">
    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="Increase or decrease transparency"
        ohos:text_size="18fp"
        ohos:text_alignment="center"
        />


    <Image
        ohos:id="$+id:image1"
        ohos:height="400vp"
        ohos:width="300vp"
        ohos:layout_alignment="center"
        ohos:top_margin="30vp"
        ohos:bottom_margin="30vp"
        ohos:scale_mode="stretch"
        ohos:image_src="$media:aa"
        ohos:background_element="#33FF0000"/>

    <DependentLayout
        ohos:height="match_content"
        ohos:layout_alignment="center"
        ohos:bottom_margin="30vp"
        ohos:width="300vp">
        <Button
            ohos:id="$+id:btn1"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:align_parent_left="true"
            ohos:text_size="18fp"
            ohos:background_element="$graphic:background_button"
            ohos:text="+"
            ohos:left_padding="14vp"
            ohos:right_padding="14vp"
            ohos:top_padding="8vp"
            ohos:bottom_padding="8vp"

            />
        <Button
            ohos:id="$+id:btn2"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text_size="18fp"
            ohos:align_parent_right="true"
            ohos:text="-"
            ohos:background_element="$graphic:background_button"
            ohos:left_padding="14vp"
            ohos:right_padding="14vp"
            ohos:top_padding="8vp"
            ohos:bottom_padding="8vp"
            />
    </DependentLayout>



</DirectionalLayout>
Copy the code

In the graphic directory, add the background file of the button, background_circle_button.xml, as follows:

<? xml version="1.0" encoding="UTF-8"? > <shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="oval">
    <solid
        ohos:color="#3387CEFA"/>
    <corners
        ohos:radius="18vp"/>
    <stroke
        ohos:color="#9987CEFA"
        ohos:width="6"/>
</shape>
Copy the code

Create a new Java file, SecondAbilitySlice. Java, in the slice directory, with the following code:

package com.example.hanruimage.slice;

import com.example.hanruimage.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.components.Image;

public class SecondAbilitySlice extends AbilitySlice{
    float alpha = 1.0 f;// The value ranges from 0 to 1.
    @Override
    protected void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_image_alpha);
        // Get the control
        Image image = (Image) findComponentById(ResourceTable.Id_image1);
        Button btn1 = (Button) findComponentById(ResourceTable.Id_btn1);
        Button btn2 = (Button) findComponentById(ResourceTable.Id_btn2);

        // Add a click event to the button
        btn1.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                alpha += 0.25;
                if(alpha>=1){
                    alpha = 1; } image.setAlpha(alpha); }}); btn2.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                alpha -= 0.25;
                if(alpha<=0){
                    alpha = 0; } image.setAlpha(alpha); }}); }}Copy the code

The default entry of the program is to display MainAbilitySlice. Modify the MainAbility file:

package com.example.hanruimage;

import com.example.hanruimage.slice.MainAbilitySlice;
import com.example.hanruimage.slice.SecondAbilitySlice;
import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;

public class MainAbility extends Ability {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
// super.setMainRoute(MainAbilitySlice.class.getName());
        super.setMainRoute(SecondAbilitySlice.class.getName()); }}Copy the code

Then run the program.

1. Community: Hongmeng Bus www.harmonybus.net/

2. HarmonyBus

3, technical exchange QQ group: 714518656

4. Video courses: www.chengxuka.com

3.4 HarmonyOS Hongmeng Component Image