?本文已收錄于專欄

??《鴻蒙開發》??

歡迎各位關注、三連博主的文章及專欄，每周定期更新1-5篇基礎文章，共勉！

---

1、簡介

Image是用來顯示圖片的組件，我們在開發中使用的非常頻繁！ ?

2、屬性表

Image也是組件，它繼承自：ohos.agp.components.Component ?

我們在使用Image組件的時候，只需要事先搞懂它的屬性，使用起來就很方便了（官方指定的全部Image屬性，都在這里）：

屬性名稱	中文描述	取值	取值說明	使用案例
clip_alignment	圖像裁剪對齊方式	left	表示按左對齊裁剪。	ohos:clip_alignment="left"
		right	表示按右對齊裁剪。	ohos:clip_alignment="right"
		top	表示按頂部對齊裁剪。	ohos:clip_alignment="top"
		bottom	表示按底部對齊裁剪。	ohos:clip_alignment="bottom"
		center	表示按居中對齊裁剪。	ohos:clip_alignment="center"
image_src	圖像	Element類型	可直接配置色值，也可引用color資源或引用media/graphic下的圖片資源。	ohos:image_src="#FFFFFFFF" ohos:image_src="$color:black" ohos:image_src="$media:warning" ohos:image_src="$graphic:graphic_src"
scale_mode	圖像縮放類型	zoom_center	表示原圖按照比例縮放到與Image最窄邊一致，并居中顯示。	ohos:scale_mode="center"
		zoom_start	表示原圖按照比例縮放到與Image最窄邊一致，并靠起始端顯示。
		zoom_end	表示原圖按照比例縮放到與Image最窄邊一致，并靠結束端顯示。
		stretch	表示將原圖縮放到與Image大小一致。
		center	表示不縮放，按Image大小顯示原圖中間部分。
		inside	表示將原圖按比例縮放到與Image相同或更小的尺寸，并居中顯示。
		clip_center	表示將原圖按比例縮放到與Image相同或更大的尺寸，并居中顯示。

3、使用

3.1 上傳資源

在使用Image組件之前，需要知道HarmonyOS的應用程序結構中，圖片資源的存放位置。 我們創建一個項目之后，打開項目的entry > src > main > resources > base > media目錄，這個下面會有一張默認的icon.png圖片。這里就是圖片指定存放位置了。

我們接下來使用Java之父（詹姆斯·高斯林 （James Gosling）），來做測試，保佑大家都成為Java之母，哈哈哈哈哈！！！

將圖片放置到entry > src > main > resources > base > media即可！

3.2 代碼中使用

HarmonyOS的Java語義開發中，組件可以通過XML配置和Java代碼直接構建，這里兩種方式都演示一下。

3.2.1 XML創建Image

在src -> main -> resources -> base -> layout -> ability_main.xml中實現如下代碼：

<?xml?version="1.0"?encoding="utf-8"?> <DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:alignment="center"ohos:orientation="vertical"><!--XML配置Image--><Imageohos:id="$+id:imageComponent"ohos:height="200vp"ohos:width="200vp"ohos:image_src="$media:JamesGosling"/></DirectionalLayout>

啟動應用程序看下效果，我們來瞅瞅Java之父（嗯嗯嗯，有點小呀！！）

3.2.2 Java代碼創建Image

注釋掉XML中配置的Image，我們改用Java代碼實現。 在com.liziba.image.slice.MainAbilitySlice類的onStart方法中，創建Image代碼如下：

package?com.liziba.image.slice;import?com.liziba.image.ResourceTable; import?ohos.aafwk.ability.AbilitySlice; import?ohos.aafwk.content.Intent; import?ohos.agp.components.DirectionalLayout; import?ohos.agp.components.Image;public?class?MainAbilitySlice?extends?AbilitySlice?{@Overridepublic?void?onStart(Intent?intent)?{super.onStart(intent);//創建一個Image組件Image?image?=?new?Image(getContext());image.setPixelMap(ResourceTable.Media_JamesGosling);image.setHeight(500);image.setWidth(500);image.setScaleMode(Image.ScaleMode.STRETCH);//創建一個布局DirectionalLayout?layout?=?new?DirectionalLayout(getContext());//Image組件添加到DirectionalLayout布局中layout.addComponent(image);super.setUIContent(layout);}@Overridepublic?void?onActive()?{super.onActive();}@Overridepublic?void?onForeground(Intent?intent)?{super.onForeground(intent);} }

這里做了一個簡單的縮放，將原圖縮放到與Image大小一致，看下效果（嗯不錯，長大了點，哈哈哈！！！）：

3.3 屬性

由于在實際開發中，XML配置UI的還是多一些，因為方便改動和統一管理，也更加靈活。所以屬性這里，都用XML配置來演示啦！！！ ?

3.3.1 透明度

設置透明度為0.2，透明度設置的越小，圖片越透明，原圖透明度為1。

ohos:alpha="0.2"

<Imageohos:id="$+id:imageComponent"ohos:height="200vp"ohos:width="200vp"ohos:image_src="$media:JamesGosling"ohos:alpha="0.2"/>

3.3.2 縮放系數

當我們給定的圖片大小和Image組件設置的大小不一致的時候，我們往往需要通過縮放來實現兼容。（但是為了圖片不失真，最后還是少用縮放，圖片大小不符合盡量找美工做一張新的圖片。） ?

縮放系數可設置X軸和Y軸方向兩個參數，其實就是寬、高 ?

如下是縮放x和y軸都配置0.5的效果

ohos:scale_x="0.5"

ohos:scale_y="0.5"

<!--XML配置Image--> <Imageohos:id="$+id:imageComponent"ohos:height="200vp"ohos:width="200vp"ohos:image_src="$media:JamesGosling"ohos:scale_x="0.5"ohos:scale_y="0.5"/>

如下是配置為1的效果，默認為1，可以不配置：

ohos:scale_x="1"

ohos:scale_y="1"

<!--XML配置Image--> <Imageohos:id="$+id:imageComponent"ohos:height="200vp"ohos:width="200vp"ohos:image_src="$media:JamesGosling"ohos:scale_x="1"ohos:scale_y="1"/>

能不能配置為比1大的數呢？當然是可以的，這樣會更加配置的縮放參數，進行放大。 比如配置一個2試試：

ohos:scale_x="2"

ohos:scale_y="2"

<!--XML配置Image--> <Imageohos:id="$+id:imageComponent"ohos:height="200vp"ohos:width="200vp"ohos:image_src="$media:JamesGosling"ohos:scale_x="2"ohos:scale_y="2"/>

3.3.3 裁剪

如果給定的圖片太大了，超過了我們的Image設置的大小，那該怎么辦呢？ 這個時候我們可以使用裁剪，裁剪有下面這些參數，只演示一個吧！

屬性名稱中文描述取值取值說明使用案例

clip_alignment	圖像裁剪對齊方式	left	表示按左對齊裁剪。	ohos:clip_alignment="left"
		right	表示按右對齊裁剪。	ohos:clip_alignment="right"
		top	表示按頂部對齊裁剪。	ohos:clip_alignment="top"
		bottom	表示按底部對齊裁剪。	ohos:clip_alignment="bottom"
		center	表示按居中對齊裁剪。	ohos:clip_alignment="center"

我們先將Image組件設置小一點，這樣我們能看出裁剪的效果，這里我們采取按左對齊裁剪：

<!--XML配置Image--> <Imageohos:id="$+id:imageComponent"ohos:height="50vp"ohos:width="50vp"ohos:image_src="$media:JamesGosling"ohos:clip_alignment="left"/>

3.3.4 縮放

當圖片和Image組件的大小不同的時候，我們可以通過縮放的形式來自行適配。 比如我們此時設置的Image組件大小寬高均為200vp，但是圖片的肯定沒得這么大，所以我們可以考慮放大圖片，讓圖片放大到Image組件的大小即可。 ?

我們采用stretch，將原圖縮放到與Image大小一致。

ohos:scale_mode="stretch"

<!--XML配置Image--> <Imageohos:id="$+id:imageComponent"ohos:height="200vp"ohos:width="200vp"ohos:image_src="$media:JamesGosling"ohos:scale_mode="stretch"/>

Image組件非常簡單，多試試就會了！！！ ?

總結

以上是生活随笔為你收集整理的Java之父詹姆斯·高斯林 （James Gosling）学鸿蒙（HarmonyOS），HarmonyOS（鸿蒙）——Image组件详述的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。