Android Compose實現(xiàn)伸縮ToolBar的思路詳解
ScrollableAppBar
效果圖
- 當(dāng)列表向上移動時,會先帶動ToolBar向上位移,等ToolBar向上移動到最大位移量時列表向上滑動
- 當(dāng)列表向下移動時,會先帶動ToolBar向下位移,等ToolBar向下移動到最大位移量時列表向下滑動
主要思路
布局預(yù)覽
伸縮前布局:
伸縮后布局:
實現(xiàn)過程
布局實現(xiàn)
首先我們要定義兩個尺寸變量
// 應(yīng)用欄高度 private val toolBarHeight = 56.dp // 導(dǎo)航圖標(biāo)大小 private val navigationIconSize = 50.dp
我們采用Box作為根布局,里面主要包含三個部分,背景圖片,頂部的TooBar以及下面的Title部分,其實現(xiàn)如下
//整體布局實現(xiàn) Box(modifier = Modifier .height(scrollableAppBarHeight) //scrollableAppBarHeight 為高度參數(shù),為外部獲取 .fillMaxWidth() ) { Image(painter = painterResource(id = backgroundImageId), contentDescription = "background", contentScale = ContentScale.FillBounds) // 自定義應(yīng)用欄 Row( modifier = modifier .height(toolBarHeight) //設(shè)置高度為toolBarHeight .fillMaxWidth(), verticalAlignment = Alignment.CenterVertically //設(shè)置垂直方向為居中對齊 ) { // 導(dǎo)航圖標(biāo) Box(modifier = Modifier.size(navigationIconSize),contentAlignment = Alignment.Center) { navigationIcon() } } // title定義 Box( modifier = Modifier .height(toolBarHeight) //和ToolBar同高 .fillMaxWidth() .align(Alignment.BottomStart), contentAlignment = Alignment.CenterStart ) { Text(text = title, color = Color.White, modifier = Modifier.padding(start = 20.dp).matchParentSize(), // 使用 matchParentSize 修飾符保證不影響父 Box尺寸 fontSize = 20.sp ) } }
我們主要講解title部分
// title定義 Box( modifier = Modifier .height(toolBarHeight) //和ToolBar同高 .fillMaxWidth() .align(Alignment.BottomStart), contentAlignment = Alignment.CenterStart ) { Text(text = title, color = Color.White, modifier = Modifier.padding(start = 20.dp).matchParentSize(), // 使用 matchParentSize 修飾符保證不影響父 Box尺寸 fontSize = 20.sp ) }
首先為了保證title部分在完全收縮后高度和toolBar部分一致,我們設(shè)置Box布局高度為toolBarHeight
modifier = Modifier .height(toolBarHeight) //和ToolBar同高 .fillMaxWidth()
然后定義Box在根布局里面的對齊方式為Alignment.BottomStart
modifier = Modifier .height(toolBarHeight) //和ToolBar同高 .fillMaxWidth() .align(Alignment.BottomStart)
之所以這樣設(shè)置,是因為我們通過觀察伸縮前和伸縮后的預(yù)覽圖可以知道如果保證此部分是底部左邊對齊,那么在根布局向上移動的過程中我們便可以只關(guān)心此部分在水平方向的位移即可
接著設(shè)置文本部分的對齊方式,保證title是居中靠左對齊的
contentAlignment = Alignment.CenterStart
位移實現(xiàn)
首先,我們要明確ScrollableAppBar最大向上偏移量等于其定義的高度和收縮后的高度,即toolBarHeight的差值,即:
// 應(yīng)用欄最大向上偏移量 val maxOffsetHeightPx = with(LocalDensity.current) { scrollableAppBarHeight.roundToPx().toFloat() - toolBarHeight.roundToPx().toFloat() }
其次,title部分在水平方向的位移距離其實就是導(dǎo)航圖標(biāo)的寬度,即:
// Title 偏移量參考值 val titleOffsetWidthReferenceValue = with(LocalDensity.current) { navigationIconSize.roundToPx().toFloat() }
同時需要定義從外部獲取到的偏移量
val toolbarOffsetHeightPx: MutableState<Float> //向上偏移量
最外層布局位移定義
為根布局添加垂直方向上的位移
@Composable fun ScrollableAppBar( modifier: Modifier = Modifier, title: String = stringResource(id = R.string.app_name), //默認(rèn)為應(yīng)用名 navigationIcon: @Composable () -> Unit, //導(dǎo)航圖標(biāo) @DrawableRes backgroundImageId: Int, // 背景圖片 scrollableAppBarHeight: Dp, //定義的ScrollableAppBar高度 toolbarOffsetHeightPx: MutableState<Float> //向上偏移量 ) { Box(modifier = Modifier .height(scrollableAppBarHeight) .offset { IntOffset( x = 0, y = toolbarOffsetHeightPx.value.roundToInt() //設(shè)置偏移量 ) } .fillMaxWidth() ) { .... // 背景圖等內(nèi)容 } }
toolBar垂直方向位置不變的實現(xiàn)
設(shè)置和父布局相反的位移量保證toolBar處于原位置,即:
// 自定義應(yīng)用欄 Row( modifier = modifier .offset { IntOffset( x = 0, y = -toolbarOffsetHeightPx.value.roundToInt() //保證應(yīng)用欄是始終不動的 ) } .height(toolBarHeight) .fillMaxWidth(), verticalAlignment = Alignment.CenterVertically ) { ... // 導(dǎo)航圖標(biāo) }
title水平位移的實現(xiàn)
為了保證title均勻向右位移,用根布局此時向上位移量和最大位移量的商再乘以水平方向上的總位移即可:
x = -((toolbarOffsetHeightPx.value / maxOffsetHeightPx) * titleOffsetWidthReferenceValue).roundToInt()
完整實現(xiàn)
// title部分 Box( modifier = Modifier .height(toolBarHeight) //和ToolBar同高 .fillMaxWidth() .align(Alignment.BottomStart) .offset { IntOffset( x = -((toolbarOffsetHeightPx.value / maxOffsetHeightPx) * titleOffsetWidthReferenceValue).roundToInt(), //水平方向位移 y = 0 ) }, contentAlignment = Alignment.CenterStart ) { ... //title部分 }
項目地址
ScrollableAppBar 如果項目對你有所幫助,如果有改進(jìn)意見還可以提交 issue
到此這篇關(guān)于Android Compose實現(xiàn)伸縮ToolBar的思路詳解的文章就介紹到這了,更多相關(guān)Android 伸縮ToolBar內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android 自動化測試經(jīng)驗分享 深入UiScrollable
UiScrollable是一個UiCollection(這東西還沒搞懂),我們可以使用它,在可滑動的頁面(水平滑動或上下滑動都可以)上查找我們想要的控件(item)2013-05-05Android中監(jiān)聽判斷網(wǎng)絡(luò)連接狀態(tài)的方法
這篇文章主要介紹了Android中監(jiān)聽判斷網(wǎng)絡(luò)連接狀態(tài)的方法,介紹了是否有網(wǎng)絡(luò)連接判斷、連接的類型和監(jiān)聽網(wǎng)絡(luò)狀態(tài)的方法,需要的朋友可以參考下2014-06-06Android中ViewPager組件的基本用法及實現(xiàn)圖片切換的示例
這篇文章主要介紹了Android中ViewPager組件的基本用法及實現(xiàn)圖片切換的示例,ViewPager主要被用來實現(xiàn)滑動切換效果,需要的朋友可以參考下2016-03-03android 左右滑動+索引圖標(biāo)實現(xiàn)方法與代碼
使用Gallery和ImageView實現(xiàn)android左右滑動+索引圖標(biāo)效果,接下來詳細(xì)介紹,有需要的朋友可以參考下2012-12-12