• This is the 7th day of my participation in the August More Text Challenge.

Click to replace the picture randomly

• Click the button to change an image

Implementation cases:

• New project:ImageSwitchApplication

Analysis of ideas:

• Prepare several pictures to copy into the media

• If you want to gettextThe Chinese characters in the text can use the resource manager, but now you don’t need every byte in the picture, you want the whole picture, you don’t need to use the resource manager to read, directly useResourceTableJust to get it
• It’s more convenient to use collections to store images, because there may be many images, and the array has to determine the length, which is a little inconvenient, so we use collections
• You can see the picture isintType, so collection is usedInteger

• inonClickIn the methodimgComponent object, collection object to be created, so make them member variables,onClickMethod to use

Code implementation:

ability_main

      
<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:img"
        ohos:height="match_content"
        ohos:width="match_content">

    </Image>

    <Button
        ohos:id="$+id:but1"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="点我"
        ohos:text_size="150"
        ohos:background_element="red"
        >

    </Button>

</DirectionalLayout>
Copy the code

MainAbilitySlice

package com.xdr630.imageswitchapplication.slice;

import com.xdr630.imageswitchapplication.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;

import java.util.ArrayList;
import java.util.Random;

public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {

    ArrayList<Integer> list = new ArrayList<>();
    Image img;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        // Define an array or collection to store all images

        list.add(ResourceTable.Media_girl1);
        list.add(ResourceTable.Media_girl2);
        list.add(ResourceTable.Media_girl3);
        list.add(ResourceTable.Media_girl4);
        list.add(ResourceTable.Media_girl5);
        list.add(ResourceTable.Media_girl6);
        list.add(ResourceTable.Media_girl7);
        list.add(ResourceTable.Media_girl8);
        list.add(ResourceTable.Media_girl9);

        // Find the component
        img = (Image) findComponentById(ResourceTable.Id_img);
        Button but1 = (Button) findComponentById(ResourceTable.Id_but1);

        // Bind the click event to the button
        but1.setClickedListener(this);
    }

    @Override
    public void onActive(a) {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }

    @Override
    public void onClick(Component component) {
        // When the button is clicked, the content of the image needs to be modified
        Random r = new Random();
        int index = r.nextInt(list.size());
        // With random index, we can get random elements
        int randomImg = list.get(index);
        // Set the random Image to the Image componentimg.setImageAndDecodeBounds(randomImg); }}Copy the code

• Run:

• You can also expand it further: you can see the details when you click on the image.