HarmonyOS 鸿蒙Next中「3.2 图像组件」图像组件Image详解及应用

HarmonyOS 鸿蒙Next中「3.2 图像组件」图像组件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;

    /**
     * 设置裁剪对齐模式
     * CLIP_DIRECTION_NOT_SET 未设置的图像裁剪方向
     * CLIP_GRAVITY_NOT_SET 未设置的图像裁剪对齐模式
     * 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资源文件的方式。

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

/**
 * 设置裁剪对齐模式
 * CLIP_DIRECTION_NOT_SET 未设置的图像裁剪方向
 * CLIP_GRAVITY_NOT_SET 未设置的图像裁剪对齐模式
 * 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);

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

Image和Text组合应用

在上面这个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>