Android?Jetpack?Compose開發(fā)實(shí)用小技巧
前言
在Compose開發(fā)的過程中,我們會(huì)經(jīng)常遇到一些看起來很簡單卻不知道如何處理的小問題,比如去除點(diǎn)擊陰影、Dialog全屏等問題,本文記錄了這些常見小問題的處理方式。如有更好方案歡迎大佬們交流探討~
實(shí)用小技巧
如何移除View點(diǎn)擊陰影
這里的View指的是除了Button系列的之外,如Button、TextButton等,也就是自身沒有onClick屬性的。這個(gè)后面會(huì)再次提到。
我們編寫一個(gè)高度為60dp,寬度滿屏的TextView,使用Modifier的clickable屬性為其添加點(diǎn)擊事件
(注意:如果不使用clickable屬性添加,而是使用pointerInput屬性可不處理,但簡單的點(diǎn)擊事件一般不使用此方法)
代碼如下所示:
@Composable fun UITest() { Text(text = "點(diǎn)擊我", modifier = Modifier .background(Color.Red) .height(60.dp) .fillMaxWidth() .clickable { //點(diǎn)擊事件 } ) }
運(yùn)行程序,效果如下圖所示。
從效果圖中可以看出點(diǎn)擊陰影還是非常明顯的,如果我們想去掉陰影效果,只需要設(shè)置indication為null即可,修改后的代碼如下所示。
@Composable fun UITest() { Text(text = "點(diǎn)擊我", modifier = Modifier .background(Color.Red) .height(60.dp) .fillMaxWidth() .clickable(indication = null, interactionSource = remember { MutableInteractionSource() }) { } ) }
上面實(shí)現(xiàn)的Text文字不是垂直居中的,我們該如何使其內(nèi)容垂直居中呢?
Text文本如何垂直居中
你可能嘗試過textAlign屬性,但是很遺憾,textAlign屬性只能達(dá)到水平居中的效果,如果想要達(dá)到垂直居中的效果,需要在其外層包一層父組件,一般推薦Box。代碼如下所示。
@Composable fun UITest() { Box(contentAlignment = Alignment.Center, modifier = Modifier .height(60.dp) .fillMaxWidth()) { Text( text = "點(diǎn)擊我", modifier = Modifier .background(Color.Red) .align(Alignment.Center) ) } }
如何移除Button的點(diǎn)擊陰影
這里的Button指的是具有onClick屬性的組件系列,因?yàn)檫@類組件有自己的onClick屬性,點(diǎn)擊時(shí)不會(huì)進(jìn)入clickable方法,所以不能使用Text組件的方式去處理。這里以TextButton為例,編寫代碼如下所示。
@Composable fun ButtonTest() { TextButton(onClick = { }, modifier = Modifier .height(60.dp) .fillMaxWidth() .background(Color.Green)) { Text(text = "按鈕點(diǎn)擊") } }
運(yùn)行程序代碼效果如下所示。
從圖可以看出有明顯水波紋效果。有這個(gè)效果的原因是在MaterialTheme主題中LocalRippleTheme使用了MaterialRippleTheme的效果,源碼如下所示。
CompositionLocalProvider( LocalColors provides rememberedColors, LocalContentAlpha provides ContentAlpha.high, LocalIndication provides rippleIndication, LocalRippleTheme provides MaterialRippleTheme, LocalShapes provides shapes, LocalTextSelectionColors provides selectionColors, LocalTypography provides typography )
我們修改這個(gè)Theme即可,自定義Theme名為NoRippleTheme代碼如下所示。
object NoRippleTheme : RippleTheme { @Composable override fun defaultColor(): Color { return Color.Transparent } @Composable override fun rippleAlpha(): RippleAlpha { return RippleAlpha(0f, 0f, 0f, 0f) } }
然后應(yīng)用這個(gè)theme即可,修改代碼如下所示。
ComposeDoTheme { CompositionLocalProvider(LocalRippleTheme provides NoRippleTheme) { // } }
這樣該主題下的按鈕點(diǎn)擊陰影效果便移除了。
Dialog寬度如何全屏
編寫一個(gè)Dialog,代碼如下所示。
@Composable fun DialogDemo() { Dialog( onDismissRequest = { } ) { Column( modifier = Modifier .height(100.dp) .fillMaxWidth() .background(Color.White)) { Text(text = "我是標(biāo)題1111") Button(onClick = { //取消彈窗顯示 }) { Text(text = "知道了") } } } }
運(yùn)行程序效果如下圖所示。(請(qǐng)忽略他的丑~)
這里代碼中已經(jīng)設(shè)置了寬度為
fillMaxWidth(),Dialog的寬度依然不是全屏的,我們可以設(shè)置Dialog的properties屬性來達(dá)到全屏的效果。修改后的代碼如下所示。
Dialog( onDismissRequest = { }, properties = DialogProperties( usePlatformDefaultWidth = false ), )
修改后的效果如下圖所示。
這樣我們就達(dá)到Dialog寬度全屏的效果了,但之前有大佬說這種方式修改屏幕寬度后會(huì)有不可預(yù)期的問題,但我測試并未發(fā)現(xiàn)這個(gè)問題。
如何提升編碼效率
許多開發(fā)者說用Compose寫頁面感覺很慢,這是因?yàn)橐环矫鎸?duì)Compose的掌握不熟悉需要多寫多練,另一方面是沒有合理的利用Compose的Live Templates。
比如我們新建一個(gè)Compose函數(shù),如果你是從@Compose開始寫就會(huì)很慢,可以嘗試comp快捷鍵,創(chuàng)建新的函數(shù),如下圖所示。
還有諸如WR、WC等模版,如圖所示。
更多實(shí)時(shí)模板可以從Android Studio中查詢
我們也可以根據(jù)自己的編碼習(xí)慣創(chuàng)建自己的模板。
以上就是Android Jetpack Compose開發(fā)實(shí)用小技巧的詳細(xì)內(nèi)容,更多關(guān)于Android Jetpack Compose開發(fā)技巧的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
一個(gè)吸頂Item的簡單實(shí)現(xiàn)方法分享
這篇文章主要給大家介紹了一個(gè)吸頂Item的簡單實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)各位Android開發(fā)者們具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09Android開發(fā)之Parcel機(jī)制實(shí)例分析
這篇文章主要介紹了Android開發(fā)之Parcel機(jī)制,實(shí)例分析了Parcel機(jī)制的原理與實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-05-05Android編程之動(dòng)態(tài)壁紙實(shí)例分析
這篇文章主要介紹了Android編程之動(dòng)態(tài)壁紙實(shí)現(xiàn)方法,以實(shí)例形式分析了Android動(dòng)態(tài)壁紙的原理與實(shí)現(xiàn)步驟,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12Android將項(xiàng)目導(dǎo)出為Library并在項(xiàng)目中使用教程
這篇文章主要介紹了Android將項(xiàng)目導(dǎo)出為Library并在項(xiàng)目中使用教程,本文圖文并茂給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07Android自定義View實(shí)現(xiàn)水波紋擴(kuò)散效果
這篇文章主要為大家詳細(xì)介紹了Android如何通過自定義View實(shí)現(xiàn)水波紋擴(kuò)散效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2022-08-08詳解Android跨進(jìn)程IPC通信AIDL機(jī)制原理
本篇文章主要介紹了詳解Android跨進(jìn)程IPC通信AIDL機(jī)制原理,詳細(xì)的介紹了AIDL的概念和使用,具有一定的參考價(jià)值,有興趣的可以了解一下2018-01-01Android實(shí)現(xiàn)簡單的popupwindow提示框
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)簡單的popupwindow提示框,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-10-10Android編程實(shí)現(xiàn)3D旋轉(zhuǎn)效果實(shí)例
這篇文章主要介紹了Android編程實(shí)現(xiàn)3D旋轉(zhuǎn)效果的方法,基于Android的Camera類實(shí)現(xiàn)坐標(biāo)變換達(dá)到圖片3D旋轉(zhuǎn)效果,需要的朋友可以參考下2016-01-01