Java之父詹姆斯·高斯林 (James Gosling)学鸿蒙(HarmonyOS),HarmonyOS(鸿蒙)——Image组件详述

简介: Java之父詹姆斯·高斯林 (James Gosling)学鸿蒙(HarmonyOS),HarmonyOS(鸿蒙)——Image组件详述

本文已收录于专栏


❤️《鸿蒙开发》❤️


欢迎各位关注、三连博主的文章及专栏,每周定期更新1-5篇基础文章,共勉!


1、简介

Image是用来显示图片的组件,我们在开发中使用的非常频繁!


2、属性表

Image也是组件,它继承自:ohos.agp.components.Component


我们在使用Image组件的时候,只需要事先搞懂它的属性,使用起来就很方便了(官方指定的全部Image属性,都在这里):

image.png3、使用

3.1 上传资源

在使用Image组件之前,需要知道HarmonyOS的应用程序结构中,图片资源的存放位置。 我们创建一个项目之后,打开项目的entry > src > main > resources > base > media目录,这个下面会有一张默认的icon.png图片。这里就是图片指定存放位置了。

image.pngimage.png3.2 代码中使用

HarmonyOS的Java语义开发中,组件可以通过XML配置和Java代码直接构建,这里两种方式都演示一下。


3.2.1 XML创建Image


在src -> main -> resources -> base -> layout -> ability_main.xml中实现如下代码:

image.pngimage.png3.2.2 Java代码创建Image

注释掉XML中配置的Image,我们改用Java代码实现。 在com.liziba.image.slice.MainAbilitySlice类的onStart方法中,创建Image代码如下:

package com.liziba.image.slice;
import com.liziba.image.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.DirectionalLayout;
import ohos.agp.components.Image;
public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        //创建一个Image组件
        Image image = new Image(getContext());
        image.setPixelMap(ResourceTable.Media_JamesGosling);
        image.setHeight(500);
        image.setWidth(500);
        image.setScaleMode(Image.ScaleMode.STRETCH);
        //创建一个布局
        DirectionalLayout layout = new DirectionalLayout(getContext());
        //Image组件添加到DirectionalLayout布局中
        layout.addComponent(image);
        super.setUIContent(layout);
    }
    @Override
    public void onActive() {
        super.onActive();
    }
    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

image.png由于在实际开发中,XML配置UI的还是多一些,因为方便改动和统一管理,也更加灵活。所以属性这里,都用XML配置来演示啦!!!

3.3.1 透明度

设置透明度为0.2,透明度设置的越小,图片越透明,原图透明度为1。

ohos:alpha="0.2"image.png3.3.2 缩放系数


当我们给定的图片大小和Image组件设置的大小不一致的时候,我们往往需要通过缩放来实现兼容。(但是为了图片不失真,最后还是少用缩放,图片大小不符合尽量找美工做一张新的图片。)


缩放系数可设置X轴和Y轴方向两个参数,其实就是宽、高


如下是缩放x和y轴都配置0.5的效果


ohos:scale_x="0.5"


ohos:scale_y="0.5"


image.png

image.png如下是配置为1的效果,默认为1,可以不配置:

ohos:scale_x="1"

ohos:scale_y="1"image.png能不能配置为比1大的数呢?当然是可以的,这样会更加配置的缩放参数,进行放大。 比如配置一个2试试:

ohos:scale_x="2"

ohos:scale_y="2"image.png3.3.3 裁剪

如果给定的图片太大了,超过了我们的Image设置的大小,那该怎么办呢? 这个时候我们可以使用裁剪,裁剪有下面这些参数,只演示一个吧!

image.pngimage.png3.3.4 缩放


当图片和Image组件的大小不同的时候,我们可以通过缩放的形式来自行适配。 比如我们此时设置的Image组件大小宽高均为200vp,但是图片的肯定没得这么大,所以我们可以考虑放大图片,让图片放大到Image组件的大小即可。


我们采用stretch,将原图缩放到与Image大小一致。


ohos:scale_mode="stretch"

image.png

目录
相关文章
|
5月前
|
开发者 容器
鸿蒙应用开发从入门到实战(十四):ArkUI组件Column&Row&线性布局
ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文主要讲解Column和Row组件的使用以及线性布局的方法。
440 12
|
4月前
|
Java 数据安全/隐私保护 索引
(Java)Java里JFrame窗体的基本操作(组件篇-3)
回顾 说过了下拉框和下拉列表,本篇内容将了解滚动面板和各类输入框 什么是组件? 如果不熟悉组件,可以将组件看作是某个Form表单中的表单元素,组件可以完善JFrame窗口的布局,以及一些功能; 本篇内容中所有的组件所用到的类全都来自于javax.swing这个包中,记得引入; 另:在使用组件前,请先将窗体中的内容类给实例化出来进行操作,代码如下: Container c = getContentPane(); JScollPane JScollPane类,说的就是滚动面板。它不同于其他组件,它是一个容器,
114 1
|
4月前
|
Java 索引 容器
(Java)Java里JFrame窗体的基本操作(组件篇-2)
回顾 这算是JFrame窗体基本操作的组件第二篇了,上一篇说过了单选框,复选框,按钮。 在这一篇中,我会说明下拉框和列表框 什么是组件? 自行百度:java中JFrame窗体里的组件是什么? 名字都给你想好了 ( :I ) JComBox下拉框 JComBox类,就是下拉框,实例化出来后,要填写泛型<>,添加是什么数据类型的内容,泛型中就写上该数据类型; JComboBox<?> combox = new JComboBox<>(); 以下实例化下拉框的时候我泛型写的全
116 0
|
4月前
|
Java 容器
(Java)Java里JFrame窗体的基础操作(组件-1)
如果不熟悉组件,可以将组件看作是某个Form表单中的表单元素,当然这只是在不熟悉组件的前提下。如果深入了解了组件,那么它有着非常多的组件,这些组件可以完善JFrame窗口的布局,以及一些功能; 本篇内容中所有的组件所用到的类全都来自于javax.swing这个包中,记得引入
93 1
|
5月前
|
API 数据处理
鸿蒙应用开发从入门到实战(十三):ArkUI组件Slider&Progress
ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文主要讲解滑块Slider和进度条Progress组件的使用。
249 1
|
5月前
|
数据安全/隐私保护 开发者
鸿蒙应用开发从入门到实战(十一):ArkUI组件Text&TextInput
ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文主要讲解文本组件Text和TextInput的使用。
381 3
|
5月前
|
存储 缓存 5G
鸿蒙 HarmonyOS NEXT端云一体化开发-云存储篇
本文介绍用户登录后获取昵称、头像的方法,包括通过云端API和AppStorage两种方式,并实现上传头像至云存储及更新用户信息。同时解决图片缓存问题,添加上传进度提示,支持自动登录判断,提升用户体验。
238 1
|
5月前
|
存储 负载均衡 数据库
鸿蒙 HarmonyOS NEXT端云一体化开发-云函数篇
本文介绍基于华为AGC的端云一体化开发流程,涵盖项目创建、云函数开通、应用配置及DevEco集成。重点讲解云函数的编写、部署、调用与传参,并涉及环境变量设置、负载均衡、重试机制与熔断策略等高阶特性,助力开发者高效构建稳定云端服务。
539 1
鸿蒙 HarmonyOS NEXT端云一体化开发-云函数篇
|
5月前
|
API 数据处理
鸿蒙应用开发从入门到实战(十三):ArkUI组件Slider&Progress
ArkUI提供滑块Slider与进度条Progress组件,用于鸿蒙原生APP开发。Slider支持拖动调节音量、亮度等,可设步长、方向及提示气泡;Progress支持线性、环形等多种样式,可自定义颜色、宽度与刻度,实时显示任务进度。
352 2
|
5月前
|
JavaScript
鸿蒙应用开发从入门到实战(八):ArkTS自定义组件语法
ArkUI除系统预置的组件外,还支持自定义组件。使用自定义组件,可使代码的结构更加清晰,并且能提高代码的复用性。
272 7