Jetpack?Compose圖片組件如何使用

本文小編為大家詳細(xì)介紹“Jetpack Compose圖片組件如何使用”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“Jetpack Compose圖片組件如何使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

概述

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

示例解析

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）自定義畫筆，可以使用它在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í)例，也可以通過資源文件（res/drawable …）引用

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

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

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

  @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)的無障礙功能，這個(gè)參數(shù)中設(shè)置的文字會(huì)被轉(zhuǎn)換成語音，供視障人士聽取內(nèi)容，這個(gè)參數(shù)沒有默認(rèn)值，必須手動(dòng)設(shè)置，Material包里面還提供了很多其他的圖標(biāo)，都可以通過Icons.xxx.xxx的方式調(diào)用。

2.Image圖片組件

圖片組件用來顯示一張圖片，和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，它可以通過對(duì)繪制的圖片的每個(gè)像素顏色進(jìn)行修改，以實(shí)現(xiàn)不同的圖片效果，ColorFilter有三種修改方式，分別是: tint,colorMatrix,lighting.

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

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

// lighting用來為圖片應(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,
        )
    }

讀到這里，這篇“Jetpack Compose圖片組件如何使用”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。