Jetpack?Compose圖片組件如何使用

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

概述

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

示例解析

1.Icon圖標組件

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

（1）矢量圖對象，可以顯示SVG格式的圖標

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

（2）位圖對象，可以顯示JPG,PNG格式的圖標

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

（3）自定義畫筆，可以使用它在canvas上直接繪制圖標

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

當我們使用上面的方法去展示圖標時，既可以傳遞具體類型的實例，也可以通過資源文件（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都提供了對應的加載drawable資源的方法，vectorResource用來加載一個矢量XML，imageResource用來加載jpg或者時png圖片，而painterResource對以上的兩種drawable都支持，內部會根據資源創建對應的畫筆進行圖標的繪制

接下來我們看下使用Icon組件顯示一個具體的圖標應該怎么寫，代碼如下：

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

運行結果：

代碼很簡單，就展示了一個勾選的圖標，這里我們直接使用的時Material包里預置的CheckCircle圖標，contentDescription 參數是系統的無障礙功能，這個參數中設置的文字會被轉換成語音，供視障人士聽取內容，這個參數沒有默認值，必須手動設置，Material包里面還提供了很多其他的圖標，都可以通過Icons.xxx.xxx的方式調用。

2.Image圖片組件

圖片組件用來顯示一張圖片，和Icon圖標組件一樣，它有三種類型的圖片設置，這里我們就以Painter類型的為例，下面為Image組件的Painter類型的參數列表：

@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參數用于指定圖片在Image組件中的伸縮樣式，類似于傳統視圖ImageView的scaleType屬性，它有以下幾種類型

ContentScale.Crop: 居中裁剪，類似于傳統ImageView的ScaleType.CenterCrop

ContentScale.Fit: 類似于傳統ImageView的ScaleType.fitCenter

ContentScale.FillHeight: 充滿高

ContentScale.FillWidth: 充滿寬

ContentScale.None: 不處理

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

colorFilter 參數用于設置一個ColorFilter，它可以通過對繪制的圖片的每個像素顏色進行修改，以實現不同的圖片效果，ColorFilter有三種修改方式，分別是: tint,colorMatrix,lighting.

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

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

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

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

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

讀到這里，這篇“Jetpack Compose圖片組件如何使用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。