首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >HarmonyOS实战—点击更换随机图片

HarmonyOS实战—点击更换随机图片

原创
作者头像
兮动人
修改2021-09-06 18:10:28
1.2K0
修改2021-09-06 18:10:28
举报
文章被收录于专栏:兮动人的博客兮动人的博客

单击随机更换图片

  • 点击按钮就会更换一张图片
在这里插入图片描述
在这里插入图片描述

实现案例:

  • 新建项目: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);
    }
}
  • 运行:
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  • 也可以进一步扩展:点击图片时就可以查看详细信息。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 单击随机更换图片
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档