概述

在Compose中，圖片組件主要有兩種，分別是顯示圖標(biāo)的Icon組件和顯示圖片的Image組件，當(dāng)我們顯示一系列的小圖標(biāo)的時(shí)候，我們可以使用Icon組件，當(dāng)顯示圖片時(shí)，我們就用專用的Image組件。在Android傳統(tǒng)的View中,我們顯示圖片和圖標(biāo)都是使用ImageView。我個(gè)人比較喜歡Compose的這種分開(kāi)的方式，增加了代碼的可讀性。

示例解析

1.Icon圖標(biāo)組件

Icon組件用于展示一系列的小圖標(biāo)，它支持三種不同類型的圖片設(shè)置，分別是：矢量圖、位圖、自定義繪制的圖標(biāo)

（1）矢量圖對(duì)象，可以顯示SVG格式的圖標(biāo)

@Composable
fun Icon(
    imageVector: ImageVector,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
)

（2）位圖對(duì)象，可以顯示JPG,PNG格式的圖標(biāo)

@Composable
fun Icon(
    bitmap: ImageBitmap,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
)

（3）自定義畫(huà)筆，可以使用它在canvas上直接繪制圖標(biāo)

@Composable
fun Icon(
    painter: Painter,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
) 

當(dāng)我們使用上面的方法去展示圖標(biāo)時(shí)，既可以傳遞具體類型的實(shí)例，也可以通過(guò)資源文件（res/drawable …）引用

// 矢量圖資源
 Icon(imageVector = ImageVector.vectorResource(id = R.drawable.ic_svg), contentDescription = null)
 // 位圖資源
 Icon(bitmap = ImageBitmap.imageResource(id = R.drawable.ic_bmp), contentDescription = null)
 // 畫(huà)筆資源
 Icon(painter = painterResource(id = R.drawable.ic_both), contentDescription = null)

如上面的代碼所示，ImageVector和ImageBitmap都提供了對(duì)應(yīng)的加載drawable資源的方法，vectorResource用來(lái)加載一個(gè)矢量XML，imageResource用來(lái)加載jpg或者時(shí)png圖片，而painterResource對(duì)以上的兩種drawable都支持，內(nèi)部會(huì)根據(jù)資源創(chuàng)建對(duì)應(yīng)的畫(huà)筆進(jìn)行圖標(biāo)的繪制

接下來(lái)我們看下使用Icon組件顯示一個(gè)具體的圖標(biāo)應(yīng)該怎么寫(xiě)，代碼如下：

  @Composable
    fun IconDemo(){
        Icon(imageVector = Icons.Filled.CheckCircle,
            contentDescription = null,
            tint = Color.Red
        )
    }

運(yùn)行結(jié)果：

代碼很簡(jiǎn)單，就展示了一個(gè)勾選的圖標(biāo)，這里我們直接使用的時(shí)Material包里預(yù)置的CheckCircle圖標(biāo)，contentDescription 參數(shù)是系統(tǒng)的無(wú)障礙功能，這個(gè)參數(shù)中設(shè)置的文字會(huì)被轉(zhuǎn)換成語(yǔ)音，供視障人士聽(tīng)取內(nèi)容，這個(gè)參數(shù)沒(méi)有默認(rèn)值，必須手動(dòng)設(shè)置，Material包里面還提供了很多其他的圖標(biāo)，都可以通過(guò)Icons.xxx.xxx的方式調(diào)用。

2.Image圖片組件

圖片組件用來(lái)顯示一張圖片，和Icon圖標(biāo)組件一樣，它有三種類型的圖片設(shè)置，這里我們就以Painter類型的為例，下面為Image組件的Painter類型的參數(shù)列表：

@Composable
fun Image(
    painter: Painter,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    alignment: Alignment = Alignment.Center,
    contentScale: ContentScale = ContentScale.Fit,
    alpha: Float = DefaultAlpha,
    colorFilter: ColorFilter? = null
) 

contentScale參數(shù)用于指定圖片在Image組件中的伸縮樣式，類似于傳統(tǒng)視圖ImageView的scaleType屬性，它有以下幾種類型

ContentScale.Crop: 居中裁剪，類似于傳統(tǒng)ImageView的ScaleType.CenterCrop

ContentScale.Fit: 類似于傳統(tǒng)ImageView的ScaleType.fitCenter

ContentScale.FillHeight: 充滿高

ContentScale.FillWidth: 充滿寬

ContentScale.None: 不處理

ContentScale.FillBounds: 類似ScaleType.fitXY拉伸撐滿寬高

colorFilter 參數(shù)用于設(shè)置一個(gè)ColorFilter，它可以通過(guò)對(duì)繪制的圖片的每個(gè)像素顏色進(jìn)行修改，以實(shí)現(xiàn)不同的圖片效果，ColorFilter有三種修改方式，分別是: tint,colorMatrix,lighting.

// tint用BlendMode混合指定顏色，其中參數(shù)color將用來(lái)混合原圖片每個(gè)像素的顏色
// 參數(shù)blendMode是混合的模式，blendModel有多種混合模式
// 和傳統(tǒng)是同中使用的Xfermode的PorterDuff.Model類似
ColorFilter.tint(color: Color, blendMode: BlendMode = BlendMode.SrcIn)

// colorMatrix通過(guò)傳入一個(gè)RGBA四通道的4x5的數(shù)字矩陣去處理顏色的變化
// 比如降低圖片的飽和度以達(dá)到圖片灰化的目的
ColorFilter.colorMatrix(colorMatrix: ColorMatrix)

// lighting用來(lái)為圖片應(yīng)用一個(gè)簡(jiǎn)單的燈光效果
// 它由兩個(gè)參數(shù)定義，第一個(gè)用于顏色相乘，第二個(gè)用于添加原圖顏色
ColorFilter.lighting(multiply: Color, add: Color)

最后，我們看下簡(jiǎn)單的一個(gè)使用Image組件展示一張圖片的例子

   @Composable
    fun ImageDemo()
    {
        Image(painterResource(id = R.drawable.portrait),
            contentDescription = null,
            contentScale = ContentScale.Crop,
        )
    }

運(yùn)行結(jié)果：

總結(jié)

本文主要介紹了Icon圖標(biāo)組件和Image圖片組件的使用方法，在開(kāi)發(fā)應(yīng)用時(shí)，讀者應(yīng)該根據(jù)自己的應(yīng)用場(chǎng)景進(jìn)行選擇。寫(xiě)出更好更可讀的界面代碼。本文介紹的都屬于基礎(chǔ)知識(shí)，若要探究更高深的界面知識(shí)，請(qǐng)各位讀者繼續(xù)看后面的文章。

到此這篇關(guān)于Jetpack Compose圖片組件使用實(shí)例詳細(xì)講解的文章就介紹到這了,更多相關(guān)Jetpack Compose圖片組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論