阅读 178
鸿蒙应用开发 | 图像视图(Image)的功能和用法

鸿蒙应用开发 | 图像视图(Image)的功能和用法

​导语:大家好,我是你们的朋友 朋哥。

上一篇原创文章 解析了 开关 Switch的功能和用法。这个可是很重要的,是做设置滑块开关的必备组件。
各位尽快学习,后面更新会比较快了,学习完常用的组件 后面就开始大量项目的开发了。

好了,来说一下今天的重点 Image......

图片

下面我们开始今天的文章,还是老规矩,通过如下几点来说:

1,简介
2,用到的属性
3,实战

简介

Image是用来显示图片的组件,各种图片的展示都需要该组件的使用。

用到的属性

Image的共有XML属性继承自:Component

图片的属性只有三种: 裁剪方式,图片显示,缩放类型

实战

先来创建一个基本的图片显示 试试吧

1,创建工程,添加一个Image

<Image
    ohos:id="$+id:image"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:layout_alignment="center"
    ohos:image_src="$media:hongmeng"
    />
复制代码

1,ohos:image_src="$media:hongmeng" 是图片资源的读取
2,图片目录

图片

2,设置缩放比例

ohos:scale_x="0.9"
ohos:scale_y="0.9"
复制代码

1,缩放比例 从 0-1。

3,设置缩放方式

<Image
    ohos:id="$+id:image2"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:top_margin="20vp"
    ohos:layout_alignment="center"
    ohos:image_src="$media:hongmeng"
    ohos:scale_mode="zoom_center" // 缩放方式
    />
复制代码

1,缩放方式有下面几种,我们只是用原图比例缩放,其它感兴趣的小伙伴可以都试试。

(1), zoom_center

表示原图按照比例缩放到与Image最窄边一致,并居中显示。

(2), zoom_start

表示原图按照比例缩放到与Image最窄边一致,并靠起始端显示。

(3), zoom_end

表示原图按照比例缩放到与Image最窄边一致,并靠结束端显示。

(4), stretch

表示将原图缩放到与Image大小一致。

(5), center

表示不缩放,按Image大小显示原图中间部分。

(6), inside

表示将原图按比例缩放到与Image相同或更小的尺寸,并居中显示。

(7), clip_center

表示将原图按比例缩放到与Image相同或更大的尺寸,并居中显示。

4, 设置裁剪对齐方式

<Image
    ohos:id="$+id:image3"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:top_margin="20vp"
    ohos:layout_alignment="center"
    ohos:image_src="$media:hongmeng"
    ohos:clip_alignment="center"
    />
复制代码

1,设置裁剪方式

(1), left 表示按左对齐裁剪。
(2), right 表示按右对齐裁剪。
(3), top 表示按顶部对齐裁剪。
(4), bottom 表示按底部对齐裁剪。
(5), center 表示按居中对齐裁剪。

完整代码:

<?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="top"
    ohos:orientation="vertical">

    <Image
        ohos:id="$+id:image1"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:top_margin="20vp"
        ohos:layout_alignment="center"
        ohos:image_src="$media:hongmeng"
        ohos:alpha="1"
        ohos:scale_x="0.9"
        ohos:scale_y="0.9"
        ohos:scale_mode="zoom_center"
        />

    <Image
        ohos:id="$+id:image2"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:top_margin="20vp"
        ohos:layout_alignment="center"
        ohos:image_src="$media:hongmeng"
        ohos:scale_mode="zoom_center"
        />

    <Image
        ohos:id="$+id:image3"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:top_margin="20vp"
        ohos:layout_alignment="center"
        ohos:image_src="$media:hongmeng"
        ohos:clip_alignment="center"
        />

</DirectionalLayout>
复制代码

老规矩 代码不能少,要不然小伙伴该说我小气了。
源码:

gitee.com/codegrowth/…

关注公众号【程序员漫话编程】,后台回复 ”鸿蒙“即可获得上千鸿蒙开源组件。

原创不易,有用就关注一下。要是帮到了你 就给个三连吧,多谢支持。

觉得不错的小伙伴,记得帮我 点个赞和关注哟,笔芯笔芯~**

作者:码工

有问题请留言或者私信,可以 微信搜索:程序员漫话编程,关注公众号获得更多免费学习资料。

文章分类
前端
文章标签