background image怎么完全显示_3.1.2 图像组件 Image详解及应用

1Image源码阅读

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

2Image组件应用

每个组件的使用我都以两种方式来编写，一种是代码方式；另一种是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>

3Image和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>