HarmonyOS實戰—點選更換随機圖檔

單擊随機更換圖檔

• 點選按鈕就會更換一張圖檔

實作案例：

• 建立項目：

  ImageSwitchApplication

  思路分析：
• 準備好幾張圖檔複制到 media 中

• 如果要擷取

  text

  文本裡面的漢字就可以使用資料總管，但是現在不需要圖檔裡的每個位元組，要的是圖檔的整體，就不需要用資料總管去讀了，直接用

  ResourceTable

  來擷取就行了
• 存儲圖檔使用集合更友善，因為圖檔可能有很多張，數組還要确定長度，有點不友善，是以用集合
• 可以看到圖檔是

  int

  類型的，是以集合用

  Integer

• 在

  onClick

  方法當中要用到

  img

  元件對象、還要建立的集合對象，是以要把這兩者定為成員變量，

  onClick

  方法才能使用

代碼實作：

ability_main

<?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: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>           

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);

        //定義一個數組或者集合來存儲所有圖檔

        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);

        //找到元件
        img = (Image) findComponentById(ResourceTable.Id_img);
        Button but1 = (Button) findComponentById(ResourceTable.Id_but1);

        //給按鈕綁定單擊事件
        but1.setClickedListener(this);
    }

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

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

    @Override
    public void onClick(Component component) {
        //當按鈕被點選之後，需要修改圖檔的内容
        Random r = new Random();
        int index = r.nextInt(list.size());
        //通過随機索引，可以擷取随機元素
        int randomImg = list.get(index);
        //把擷取到的随機圖檔設定給Image元件就可以了
        img.setImageAndDecodeBounds(randomImg);
    }
}           

• 運作：

• 也可以進一步擴充：點選圖檔時就可以檢視詳細資訊。