概述

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

示例解析

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

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

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

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

（2）位圖對象，可以顯示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í)例，也可以通過資源文件（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都提供了對應(yīng)的加載drawable資源的方法，vectorResource用來加載一個矢量XML，imageResource用來加載jpg或者時png圖片，而painterResource對以上的兩種drawable都支持，內(nèi)部會根據(jù)資源創(chuàng)建對應(yīng)的畫筆進(jìn)行圖標(biāo)的繪制

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

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

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

代碼很簡單，就展示了一個勾選的圖標(biāo)，這里我們直接使用的時Material包里預(yù)置的CheckCircle圖標(biāo)，contentDescription 參數(shù)是系統(tǒng)的無障礙功能，這個參數(shù)中設(shè)置的文字會被轉(zhuǎn)換成語音，供視障人士聽取內(nèi)容，這個參數(shù)沒有默認(rèn)值，必須手動設(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è)置一個ColorFilter，它可以通過對繪制的圖片的每個像素顏色進(jìn)行修改，以實(shí)現(xiàn)不同的圖片效果，ColorFilter有三種修改方式，分別是: tint,colorMatrix,lighting.

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

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

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

最后，我們看下簡單的一個使用Image組件展示一張圖片的例子

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

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

總結(jié)

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

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