Jetpack Compose中的常用圖片組件有兩個：Icon和Image。從命名上就不難看出這兩個組件在內(nèi)容呈現(xiàn)上就是負責(zé)圖形和圖片相關(guān)。

需要說明的是，Compose獲取資源方式有四種：

• 文本 -> stringResource(R.string.hello_world)

• 顏色 -> colorResource(R.color.black)

• 尺寸 -> dimensionResource(R.dimen.padding)

• 圖片 -> painterResource(R.drawable.head_icon)

而Icon和Image毫無疑問都是圖片資源。

Icon

image.gif

Icon共有三種構(gòu)造函數(shù)：

fun Icon(
    bitmap: ImageBitmap,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
) 
fun Icon(
    imageVector: ImageVector,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
)
fun Icon(
    painter: Painter,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
) 

三種函數(shù)僅第一個參數(shù)類型不一致月匣，但均是Icon的實際內(nèi)容。其他三個參數(shù)奋姿，分別為：

· contentDescription: 內(nèi)容含義描述锄开，用于 無障礙服務(wù)(考慮到一些視覺障礙的人使用,所以有個這個屬性,會使用TTS語音播放將contentDescription屬性讀出來,告知用戶此按鈕的作用) ，如果這個Icon可以被觸發(fā)称诗，就需要解釋它的含義萍悴，如果僅僅是裝飾性質(zhì)，可以忽略掉寓免。

· modifier: 修飾器癣诱。

· tint: 著色器，可以直接修改Icon實質(zhì)內(nèi)容的顏色袜香。(跟View體系的一個道理)

另外三個有區(qū)別的參數(shù)即：

· ImageBitmap： 位圖撕予。

· Painter： 抽象類，表示可被繪制的內(nèi)容蜈首，類似于Android中的 Drawable实抡。

· ImageVector： 矢量圖欠母。

Compose內(nèi)置了幾十個常用的圖標，Icons里面定了5種MaterialDesign類型風(fēng)格Outlined吆寨、Filled赏淌、Sharp、TwoTone啄清、Rounded,可以根據(jù)自己的需要選擇不同的類型六水。

下例我們引用官方提供的矢量圖資源來顯示五種類型Icon：

Row {
    Icon(Icons.Outlined.CheckCircle, contentDescription = null, tint = Color.Red)
    Icon(Icons.Filled.CheckCircle, contentDescription = null, tint = Color.Black)
    Icon(Icons.Sharp.CheckCircle, contentDescription = null, tint = Color.Blue)
    Icon(Icons.TwoTone.CheckCircle, contentDescription = null, tint = Color.Green)
    Icon(Icons.Rounded.CheckCircle, contentDescription = null, tint = Color.Red)
} 

對應(yīng)效果為：

image.gif

不難看出，這五種風(fēng)格分別對應(yīng)：

· Filled 默認類型辣卒，圖形是內(nèi)容填充風(fēng)格掷贾。

· Outlined 輪廓型，只有描邊荣茫，不做填充胯盯。

· Rounded 圓形，例如圓形啟動圖標计露。

· TwoTone 雙調(diào)，不確定翻譯doc是否寫錯憎乙，和Sharp完全一致票罐。

· Sharp 例如直角圖標。

這里需要提一下泞边，代碼中的圖片資源文件是Compose內(nèi)置的该押，除此之外默認常用的多達40+個，如果想用其他內(nèi)置圖標阵谚，可以在gradle中通過導(dǎo)入material-icons-extended依賴來使用：

dependencies {
    ···
    implementation "androidx.compose.material:material-icons-extended:$compose_version"
} 

但是全套圖標會導(dǎo)致打包后的apk文件會過大蚕礼，所以官方推薦使用導(dǎo)入圖標文件的方法,詳情可參考官方文檔。

Painter

我們拿Painter寫個簡單的Icon：

Icon(painter = painterResource(id = R.mipmap.ic_launcher), null) 

一運行梢什，發(fā)現(xiàn)：

image.gif

image.gif

錯誤原因?qū)懙煤芮宄耍@里painter對象只只支持.png或.jpg格式圖片嗡午，而原圖片是.webp格式囤躁。

這回我們換個圖片，如下：

Icon(painter = painterResource(id = R.mipmap.icon_text), null) 

運行發(fā)現(xiàn)：

image.gif

顯示成黑色了荔睹，原圖不是這樣的啊狸演。

這里需要說明的是，tint著色器默認模式是AmbientContentColor.current僻他，我們要顯示出原圖色彩需要更換模式宵距，設(shè)置tint的屬性設(shè)置為Color.Unspecified。

代碼可以修改為：

Icon(painter = painterResource(id = R.mipmap.icon_text), null, tint = Color.Unspecified) 

對應(yīng)的Icon也正常顯示了：

image.gif

Image

按照慣例吨拗，我們先看引用Image控件需要的參數(shù)满哪。

image.gif

image.gif

不難看出Image參數(shù)與Icon的基礎(chǔ)參數(shù)幾乎一致婿斥。使用方式事實上也一致，這里主要說下其他區(qū)別參數(shù)：

alignment：對齊方向

Image使用alignment的前提是設(shè)置了寬高翩瓜。alignment對應(yīng)的取值如下：

image.gif

看詞義就能猜到具體位置受扳，這里不做贅述。

contentScale：縮放設(shè)置

其效果類似View體系中的ImageView scaleType屬性兔跌，具體縮放值在ContentScale中：

image.gif

其中這一項默認值為ContentScale.Fit勘高。其余各參數(shù)解釋如下：

· ContentScale.Crop： 裁剪；

· ContentScale.FillBounds： 拉伸圖片寬高填滿形狀坟桅；

· ContentScale.FillHeight： 拉伸圖片高度填滿高度华望；

· ContentScale.FillWidth： 拉伸圖片寬度填滿寬度；

· ContentScale.Fit： 均勻縮放源(保持源的長寬比)仅乓，以便源的兩個維度(寬度和高度)都等于或小于目標的相應(yīng)維度赖舟；

· ContentScale.Inside： 如果源大于目標，則縮放源以保持長寬比在目標邊界內(nèi)夸楣。 如果源在兩個維度中都小于或等于目標宾抓，則此行為類似于None；

· ContentScale.None： 不縮放豫喧。

alpha透明度

數(shù)值范圍為0f-1f之間石洗，默認是1f，這沒什么好講的紧显。

colorFilter：著色效果

將某種顏色應(yīng)用到圖片上讲衫，即使用顏色對圖片進行混合加工，有如下三種設(shè)置方法：

· ColorFilter.tint(Color, BlendMode) ：修改著色效果孵班；

· ColorFilter.lighting(Color,AddColor) ：在著色圖片上添加AddColor顏色涉兽；

· ColorFilter.colorMatrix(colorMatrix) ：修改著色矩陣。

一般來說篙程，都是用在圖片不變的基礎(chǔ)上修改圖片顏色枷畏。

Row {
    Image(modifier = Modifier
        .size(60.dp, 45.dp),
        painter = painterResource(id = R.drawable.icon_text),
        contentDescription = null,
        alpha = 1f,
        colorFilter = null
    )
    Image(modifier = Modifier
        .size(60.dp, 45.dp),
        painter = painterResource(id = R.drawable.icon_text),
        contentDescription = null,
        alpha = 1f,
        colorFilter = ColorFilter.tint(color = Color.Blue, BlendMode.SrcAtop)
    )
    Image(modifier = Modifier
        .size(60.dp, 45.dp),
        painter = painterResource(id = R.drawable.icon_text),
        contentDescription = null,
        alpha = 1f,
        colorFilter = ColorFilter.lighting(multiply = Color.Blue,add = Color.Black)
    )
} 

對應(yīng)的效果為：

image.gif

colorMatrix涉及到色彩矩陣，使用場景也較少虱饿，這里不再贅述矿辽。

最后

如果想要成為架構(gòu)師或想突破20~30K薪資范疇，那就不要局限在編碼郭厌，業(yè)務(wù)袋倔，要會選型、擴展折柠，提升編程思維宾娜。此外，良好的職業(yè)規(guī)劃也很重要扇售，學(xué)習(xí)的習(xí)慣很重要前塔，但是最重要的還是要能持之以恒嚣艇，任何不能堅持落實的計劃都是空談。

一华弓、面試合集

image

image

在這里插入圖片描述