?本文已收錄于專欄

??《鴻蒙開發(fā)》??

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

---

1、簡(jiǎn)介

Image是用來顯示圖片的組件，我們?cè)陂_發(fā)中使用的非常頻繁！ ?

2、屬性表

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

我們?cè)谑褂肐mage組件的時(shí)候，只需要事先搞懂它的屬性，使用起來就很方便了（官方指定的全部Image屬性，都在這里）：

屬性名稱	中文描述	取值	取值說明	使用案例
clip_alignment	圖像裁剪對(duì)齊方式	left	表示按左對(duì)齊裁剪。	ohos:clip_alignment="left"
		right	表示按右對(duì)齊裁剪。	ohos:clip_alignment="right"
		top	表示按頂部對(duì)齊裁剪。	ohos:clip_alignment="top"
		bottom	表示按底部對(duì)齊裁剪。	ohos:clip_alignment="bottom"
		center	表示按居中對(duì)齊裁剪。	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最窄邊一致，并靠結(jié)束端顯示。
		stretch	表示將原圖縮放到與Image大小一致。
		center	表示不縮放，按Image大小顯示原圖中間部分。
		inside	表示將原圖按比例縮放到與Image相同或更小的尺寸，并居中顯示。
		clip_center	表示將原圖按比例縮放到與Image相同或更大的尺寸，并居中顯示。

3、使用

3.1 上傳資源

在使用Image組件之前，需要知道HarmonyOS的應(yīng)用程序結(jié)構(gòu)中，圖片資源的存放位置。 我們創(chuàng)建一個(gè)項(xiàng)目之后，打開項(xiàng)目的entry > src > main > resources > base > media目錄，這個(gè)下面會(huì)有一張默認(rèn)的icon.png圖片。這里就是圖片指定存放位置了。

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

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

3.2 代碼中使用

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

3.2.1 XML創(chuàng)建Image

在src -> main -> resources -> base -> layout -> ability_main.xml中實(shí)現(xiàn)如下代碼：

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

啟動(dòng)應(yīng)用程序看下效果，我們來瞅瞅Java之父（嗯嗯嗯，有點(diǎn)小呀！！）

3.2.2 Java代碼創(chuàng)建Image

注釋掉XML中配置的Image，我們改用Java代碼實(shí)現(xiàn)。 在com.liziba.image.slice.MainAbilitySlice類的onStart方法中，創(chuàng)建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);//創(chuàng)建一個(gè)Image組件Image?image?=?new?Image(getContext());image.setPixelMap(ResourceTable.Media_JamesGosling);image.setHeight(500);image.setWidth(500);image.setScaleMode(Image.ScaleMode.STRETCH);//創(chuàng)建一個(gè)布局DirectionalLayout?layout?=?new?DirectionalLayout(getContext());//Image組件添加到DirectionalLayout布局中l(wèi)ayout.addComponent(image);super.setUIContent(layout);}@Overridepublic?void?onActive()?{super.onActive();}@Overridepublic?void?onForeground(Intent?intent)?{super.onForeground(intent);} }

這里做了一個(gè)簡(jiǎn)單的縮放，將原圖縮放到與Image大小一致，看下效果（嗯不錯(cuò)，長(zhǎng)大了點(diǎn)，哈哈哈！！！）：

3.3 屬性

由于在實(shí)際開發(fā)中，XML配置UI的還是多一些，因?yàn)榉奖愀膭?dòng)和統(tǒng)一管理，也更加靈活。所以屬性這里，都用XML配置來演示啦！！！ ?

3.3.1 透明度

設(shè)置透明度為0.2，透明度設(shè)置的越小，圖片越透明，原圖透明度為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 縮放系數(shù)

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

縮放系數(shù)可設(shè)置X軸和Y軸方向兩個(gè)參數(shù)，其實(shí)就是寬、高 ?

如下是縮放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的效果，默認(rèn)為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大的數(shù)呢？當(dāng)然是可以的，這樣會(huì)更加配置的縮放參數(shù)，進(jìn)行放大。 比如配置一個(gè)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設(shè)置的大小，那該怎么辦呢？ 這個(gè)時(shí)候我們可以使用裁剪，裁剪有下面這些參數(shù)，只演示一個(gè)吧！

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

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

我們先將Image組件設(shè)置小一點(diǎn)，這樣我們能看出裁剪的效果，這里我們采取按左對(duì)齊裁剪：

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

3.3.4 縮放

當(dāng)圖片和Image組件的大小不同的時(shí)候，我們可以通過縮放的形式來自行適配。 比如我們此時(shí)設(shè)置的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組件非常簡(jiǎn)單，多試試就會(huì)了！！！ ?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。