HarmonyOS实战—点击更换随机图片
source link: https://my.oschina.net/xdr630/blog/5167453
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
单击随机更换图片
- 点击按钮就会更换一张图片
实现案例：
- 新建项目：
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);
}
}
- 也可以进一步扩展：点击图片时就可以查看详细信息。
</integer>
Recommend
-
259
可能细心的小伙伴已经发现，微信启动图片换了！小人还是那个小人，但更换了全新的地球气象云图。这也是微信6年来，首次更换启动图片。从9月25下午17时开始一直到28日17时的四天内，手机微信启动页面将更换全新的地球图片。据了解，新图展示的是高清东半球云图。今...
-
90
一：简介在项目中免不了会遇到，实名认证上传身份证、绑定银行卡等功能。在实际操作中呢，会涉及到上传图片，在页面布局时，可能图片不是一张，考虑到布局的美观等因素，显示图片的位置变得很小，如果想查看上传的图片是否清晰，内容是否完整，可能就需要放大才能...
-
49
我经常在博客中插入大图，然而总需要借助浏览器的滚轮缩放功能放大观看实在是不方便。于是我希望做一个点击即放大的功能。 下面就是一张可点击放大的图片，你可以点击试试！当然，我期望的效果是自动对所有博客中的图片生效。
-
7
使用bash随机更换壁纸 本文要做的事情是写一个脚本，用来随机地从 reddit 的 wallpapers 中挑选一张壁纸应用到卓面上。 wget下载URL和壁纸图片 grep从URL中抽取指向壁纸的URL feh设置壁纸到桌面上 shu...
-
12
网页中的图片点击放大效果：Highslide 和 Lightbox 谢益辉 / 2007-09-08 这两个网站是我所看到比较经典的 JS 图片放大效果网站： 前者是在页面内缩放，后者是采用的 “全屏” 效果，我看后者的代码稍微简单一些，就采用了...
-
12
在日常开发过程中，有时候会遇到需要在app中嵌入网页，此时使用WebView实现效果，但在默认情况下是无法点击图片查看大图的，更无法保存图片。本文将就这一系列问题的实现进行说明。 项目的知识点： 加载网页后如何捕捉网页中的图...
-
8
1. 多按钮被点击
-
20
纯CSS图片层叠点击展开
-
6
使Simple主题支持图片点击放大 在使用 hexo 主题模版 hexo-theme-simple99 的时候，发现该模版并不支持数学公式的渲染，随即动手开始改造改模版使其支持图片点击放大。 为了...
-
7
1|0需求提供一张2d编辑完成的户型图片，图片中有多个房间、尺寸比例不固定、还有2d户型图数据(墙体顶点坐标、漫游点坐标等)，需要做到将2d编辑时提供的漫游点坐标映射到图片上，以做到用户点击图片某个位置时...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK