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

Tuer白晓明
发布于 2020-12-8 19:59
浏览
5收藏

#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) {}
}

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);

#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>

#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>

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

Image组件相对简单一点,但是必须掌握,它是我们在项目开发中经常用到的组件,是一个必不可少的组件。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2021-1-24 21:16:45修改
2
收藏 5
回复
举报
5条回复
按时间正序
/
按时间倒序
鲜橙加冰
鲜橙加冰

继续加油哦。

回复
2020-12-9 09:55:29
SummerRic
SummerRic

看起来很厉害的样子/

回复
2020-12-9 10:36:26
Tuer白晓明
Tuer白晓明 回复了 鲜橙加冰
继续加油哦。

这篇没有成为精华有点遗憾,应该把第二个实例也放上。

回复
2020-12-9 11:12:33
qq589b27528fb58
qq589b27528fb58

我想请问一下怎么动态设置xml背景,或者怎样让Image动态显示xml图标

回复
2021-1-24 20:21:30
张荣超_九丘教育
张荣超_九丘教育

期待更多常用组件的讲解^_^

回复
2021-1-24 21:15:57
回复
    相关推荐