#2020征文-TV#「3.1.2 图像组件」图像组件Image详解及应用原创

Tuer白晓明

发布于 2020-12-8 19:59

浏览

5收藏

最新收录于

智慧屏/TV

查看专栏

#2020征文-TV#「3.1.2 图像组件」图像组件Image详解及应用-鸿蒙开发者社区 Image组件源码阅读

Image类继承自Component类，是用于显示图像资源的组件。比如我们在做新闻列表时，需要显示新闻的封面图；再比如我们动态加载显示用户头像；朋友圈发出的九宫格图片等等，都可以使用Image组件进行显示。

在对图像的应用中，不仅仅是用于显示图像，还可以自定义为图像按钮，还可以结合其他组件合成新闻列表、层叠照片、轮播图等等。

public class Image extends Component {
        /**
         * 设置图像的裁剪方向
         * CLIP_HORIZONTAL 水平裁剪模式
         * CLIP_VERTICAL 垂直裁剪模式
         */
    public static final int CLIP_HORIZONTAL = 1;
    public static final int CLIP_VERTICAL = 2;
        /**
         * 设置裁剪对齐模式
         * GRAVITY_BOTTOM 裁剪图像的底部对齐模式
         * GRAVITY_CENTER 裁剪图像的中心对齐模式
         * GRAVITY_LEFT 裁剪图像的左侧对齐模式
         * GRAVITY_RIGHT 裁剪图像的右侧对齐模式
         * GRAVITY_TOP 裁剪图像的顶部对齐模
         */
    public static final int GRAVITY_BOTTOM = 2048;
    public static final int GRAVITY_CENTER = 4096;
    public static final int GRAVITY_LEFT = 256;
    public static final int GRAVITY_RIGHT = 512;
    public static final int GRAVITY_TOP = 1024;

   //默认的构造函数，其他两个构造函数目前不做详细讲解，它们多用于自定义图像组件，后续章节会详细介绍，此处略过
    public Image(Context context) {}
        /**
         * 设置要显示图像的资源ID
         */
    public void setPixelMap(int resId) {}
        /**
         * 为此图像的每个圆角设置半径
         * 数组长度为8，成对出现，分别表示x轴和y轴半径
         */
    public void setCornerRadii(float[] radii) {}
        /**
         * 为此图像的四个圆角设置半径
         */
    public void setCornerRadius(float radius) {}
        /**
         * 设置图像的缩放模式
         */
    public void setScaleMode(Image.ScaleMode scaleMode) {}
        /**
         * 设置裁剪对齐模
         * 如果设置为GRAVITY_LEFT，那么当图像的宽度超过组件的宽度时，图像的右边部分将被裁剪
         */
    public void setClipGravity(int clipGravity) {}
        /**
         * 设置图像的裁剪方向
         * 如果图像大小超出了该组件的大小，则可以对图像进行垂直和水平裁剪
         * 水平裁剪不会改变图像的垂直内容；垂直裁剪不会改变图像的水平内容。
         */
    public void setClipDirection(int clipDirection) {}
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.

Image组件应用

每个组件的使用我都以两种方式来编写，一种是代码方式；另一种是XML资源文件的方式。相对于代码来说，XML的文档比较稀缺，只能参考代码中的属性值来和XML中的属性值作对比，然后确定其属性的意义。

图像有background和src属性，background是用于显示背景色，src是用于显示内。当使用src填入图片时，是按照图片大小直接填充，并不会进行拉伸。而使用背景则会根据图像的宽高进行拉伸。

图像的裁剪方向有两种，水平裁剪和垂直裁剪，如果图像大小超出了该组件的大小，则可以对图像进行垂直和水平裁剪，水平裁剪不会改变图像的垂直内容，垂直裁剪不会改变图像的水平内容。

图像还有四种裁剪对齐模式：

GRAVITY_CENTER 裁剪图像的中心对齐模式
GRAVITY_LEFT 裁剪图像的左侧对齐模式
GRAVITY_RIGHT 裁剪图像的右侧对齐模式
GRAVITY_TOP 裁剪图像的顶部对齐模式

        layout.setWidth(MATCH_PARENT);
        layout.setHeight(MATCH_PARENT);
        layout.setOrientation(Component.VERTICAL);

        Image image = new Image(this);
        image.setLayoutConfig(layoutConfig);
        image.setMarginsLeftAndRight(10,10);
        image.setMarginsTopAndBottom(20,20);
        image.setPadding(10,10,10,10);
        /**
         * 设置图像的裁剪方向
         * CLIP_HORIZONTAL 水平裁剪模式
         * CLIP_VERTICAL 垂直裁剪模式
         *
         * 如果图像大小超出了该组件的大小，则可以对图像进行垂直和水平裁剪
         * 水平裁剪不会改变图像的垂直内容；垂直裁剪不会改变图像的水平内容。
         */
        image.setClipDirection(Image.CLIP_HORIZONTAL);

        /**
         * 设置裁剪对齐模
         * GRAVITY_BOTTOM 裁剪图像的底部对齐模式
         * GRAVITY_CENTER 裁剪图像的中心对齐模式
         * GRAVITY_LEFT 裁剪图像的左侧对齐模式
         * GRAVITY_RIGHT 裁剪图像的右侧对齐模式
         * GRAVITY_TOP 裁剪图像的顶部对齐模式
         * 如果设置为GRAVITY_LEFT，那么当图像的宽度超过组件的宽度时，图像的右边部分将被裁剪
         */
        image.setClipGravity(Image.GRAVITY_LEFT);
        /**
         * 为此图像的每个圆角设置半径
         * 数组长度为8，成对出现，分别表示x轴和y轴半径
         */
        image.setCornerRadii(new float[]{10,30,60,90,10,30,60,90});
        /**
         * 设置要显示图像的资源ID
         */
        image.setPixelMap(ResourceTable.Media_template);
        /**
         * 设置图像的缩放模式
         */
        image.setScaleMode(Image.ScaleMode.CLIP_CENTER);
        layout.addComponent(image);
        super.setUIContent(layout);1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.

#2020征文-TV#「3.1.2 图像组件」图像组件Image详解及应用-鸿蒙开发者社区

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

    <Image
        ohos:height="200px"
        ohos:width="200px"
        ohos:margin="20fp"
        ohos:image_src="$media:template"
        ohos:scale_mode="clip_center"
        ohos:clip_alignment="center"
        ohos:clip_direction="vertical"/>

</DirectionalLayout>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

#2020征文-TV#「3.1.2 图像组件」图像组件Image详解及应用-鸿蒙开发者社区

Image和Text组合应用

#2020征文-TV#「3.1.2 图像组件」图像组件Image详解及应用-鸿蒙开发者社区在上面这个UI界面上，我首先给布局设置了灰色背景，然后设置两个组件居中显示。左侧显示一个图片，右侧显示一串提示字符。实际代码如下所示：

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:background_element="#F8F3F3">

    <DirectionalLayout
        ohos:height="140fp"
        ohos:width="match_parent"
        ohos:orientation="horizontal"
        ohos:alignment="center"
        ohos:background_element="#EBE6E6">
        <Image
            ohos:height="120fp"
            ohos:width="120fp"
            ohos:image_src="$media:logo"/>

        <Text
            ohos:height="match_parent"
            ohos:width="match_content"
            ohos:text_size="40fp"
            ohos:text="欢迎一起建设HarmonyOS生态"/>
    </DirectionalLayout>

</DependentLayout>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.