Android實現(xiàn)繪制LocationMarkerView圖的示例代碼
LocationMarker是運動軌跡上Start、End, 以及整公里點上筆者自定義繪制的一個MarkerView, 當時之所以沒有用設計給的icon是這個MarkerView里需要填充動態(tài)的數(shù)字,自定義的話自主性比較大些也方面做動畫,之前的Android 傳統(tǒng)自定義View的實現(xiàn)可以看這篇文章介紹 運動App自定義LocationMarker。
這里先看下gif動圖:
LocationMarkerView圖的繪制
繪制方面基本沒有太多的邏輯,通過Compose的自定義繪制Canvas() 繪制 一個構(gòu)建的Path,生成View的Path其實是主要的實現(xiàn)過程。
Canvas(modifier = Modifier.size(0.dp)){ drawPath(AndroidPath(markerViewPath), color = color) drawPath(AndroidPath(bottomOval), color = colorOval) }
這里Compose的path,還有好些接口對不上以及缺少API,所以通過AndroidPath(nativepath)接口進行轉(zhuǎn)化進行繪制,bottomOval是 Start、End點底部陰影的Path。生成markerViewPath以及bottomOval的邏輯都在LocationMarker類中,LocationMarker主要包含了上下兩套點 p1、p3(HPoint), 左右兩套點p2、p4(VPoint), 以及繪制View的參數(shù)屬性集合類MarkerParams.
獲取markerViewPath, 首先給p1、p3(HPoint),p2、p4(VPoint)中8個點設置Value值,circleModel(radius),然后從底部p1底部點逆時針轉(zhuǎn)圈依次調(diào)用三階貝塞爾函數(shù)接口,最后close實現(xiàn)水滴倒置狀態(tài)的Path,見實現(xiàn):
fun getPath(radius: Float): Path{ circleModel(radius) val path = Path() p1.setYValue(p1.y + radius * 0.2f * 1.05f) //設置 p1 底部左右兩個點的y值 p1.y += radius * 0.2f * 1.05f //設置 p1 自己的y值 path.moveTo(p1.x, p1.y) path.cubicTo(p1.right.x, p1.right.y, p2.bottom.x, p2.bottom.y, p2.x, p2.y) path.cubicTo(p2.top.x, p2.top.y, p3.right.x, p3.right.y, p3.x, p3.y) path.cubicTo(p3.left.x, p3.left.y, p4.top.x, p4.top.y, p4.x, p4.y) path.cubicTo(p4.bottom.x, p4.bottom.y, p1.left.x, p1.left.y, p1.x, p1.y) path.close() val circle = Path() circle.addCircle(p3.x, p3.y + radius, markerParams.circleRadius.value, Path.Direction.CCW) path.op(circle, Path.Op.DIFFERENCE) return path }
拿到相應的Path后,在Composeable函數(shù)里進行如上所述的繪制Path即可:
val locationMarker = LocationMarker(markerParams) val markerViewPath = locationMarker.getPath(markerParams.radius.value) val bottomOval = locationMarker.getBottomOval() val color = colorResource(id = markerParams.wrapperColor) val colorOval = colorResource(R.color.location_bottom_shader) ? Canvas(modifier = Modifier.size(0.dp)){ drawPath(AndroidPath(markerViewPath), color = color) drawPath(AndroidPath(bottomOval), color = colorOval) }
繪制整公里的文字
Compose的Canvas 里目前的Version并不支持drawText的繪制,不過開放了一個調(diào)用原始drawText的轉(zhuǎn)換API, 原始的drawText 是需要Paint參數(shù)的, 同時依賴Paint來計算Text 對應RectF的Height值,這里Paint()是Compose的一個Paint,需要調(diào)用asFrameworkPaint() 進行轉(zhuǎn)化
val paint = Paint().asFrameworkPaint().apply { setColor(-0x1) style = android.graphics.Paint.Style.FILL strokeWidth = 1f isAntiAlias = true typeface = Typeface.DEFAULT_BOLD textSize = markerParams.txtSize.toFloat() }
計算Text 繪制依賴的RectF,并將rectF.left作為drawText的X值,同時計算drawText的基線 baseLineY,最后傳入nativeCanvas.drawText() 接口進行繪制。
val rectF = createTextRectF(locationMarker, paint, markerParams) val baseLineY = getTextBaseY(rectF, paint) Canvas(modifier = Modifier.size(0.dp)){ drawIntoCanvas { it.nativeCanvas.drawText(markerParams.markerStr, rectF.left, baseLineY, paint) } }
drawText獲取繪制基線 baseLineY的工具類方法:
fun getTextBaseY(rectF: RectF, paint: Paint): Float { val fontMetrics = paint.fontMetrics return rectF.centerY() - fontMetrics.top / 2 - fontMetrics.bottom / 2 }
添加動畫
這里簡單的用一個放大的動畫實現(xiàn),跟原始的高德地圖、Mapbox地圖的一個growth過程的一個動畫有些差距的,暫且先這樣實現(xiàn)吧。首先是定義兩個radius相關(guān)的State對象,具體來說是Proxy, 以及一個動畫生長的大小控制的Float的變量Fraction,再通過自定義animateDpAsState作為 animation值的對象,最終給到MarkParams作為參數(shù),animation值的變化,會導致MarkParams的變化,最后導致Recompose,形成動畫。
val circleRadius by rememberSaveable{ mutableStateOf(25) } val radius by rememberSaveable{ mutableStateOf(60) } var animatedFloatFraction by remember { mutableStateOf(0f) } val radiusDp by animateDpAsState( targetValue = (radius * animatedFloatFraction).dp, animationSpec = tween( durationMillis = 1000, delayMillis = 500, easing = LinearOutSlowInEasing ) ) ? val circleRadiusDp by animateDpAsState( targetValue = (circleRadius * animatedFloatFraction).dp, animationSpec = tween( durationMillis = 1000, delayMillis = 500, easing = LinearOutSlowInEasing ) ) ? val markerParams by remember { derivedStateOf { MarkerParams(radiusDp, circleRadiusDp, wrapperColor = wrapperColor) } }
Compose 自定義View LocationMarkerView 主要通過drawPath,以及調(diào)用原生的drawText, 最后添加了一個scale類似的動畫實現(xiàn),最終實現(xiàn)運動軌跡里的一個小小的View的實現(xiàn)。
代碼見:https://github.com/yinxiucheng/compose-codelabs/ 下的CustomerComposeView
到此這篇關(guān)于Android實現(xiàn)繪制LocationMarkerView圖的示例代碼的文章就介紹到這了,更多相關(guān)Android繪制LocationMarkerView圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android UI體驗之全屏沉浸式透明狀態(tài)欄樣式
這篇文章主要介紹了Android UI體驗之全屏沉浸式透明狀態(tài)欄效果的相關(guān)資料,需要的朋友可以參考下2017-01-01Android 超詳細講解fitsSystemWindows屬性的使用
fitsSystemWindows屬性可以讓view根據(jù)系統(tǒng)窗口來調(diào)整自己的布局;簡單點說就是我們在設置應用布局時是否考慮系統(tǒng)窗口布局,這里系統(tǒng)窗口包括系統(tǒng)狀態(tài)欄、導航欄、輸入法等,包括一些手機系統(tǒng)帶有的底部虛擬按鍵2022-03-03Android中 webView調(diào)用JS出錯的解決辦法
這篇文章主要介紹了Android中 webView調(diào)用JS出錯的解決辦法,需要的朋友可以參考下2015-01-01Android中的sqlite查詢數(shù)據(jù)時去掉重復值的方法實例
今天小編就為大家分享一篇關(guān)于Android中的sqlite查詢數(shù)據(jù)時去掉重復值的方法實例,小編覺得內(nèi)容挺不錯的,現(xiàn)在分享給大家,具有很好的參考價值,需要的朋友一起跟隨小編來看看吧2019-01-01詳解Android使GridView橫向水平滾動的實現(xiàn)方式
Android為我們提供了豎直方向的滾動控件GridView,這篇文章主要介紹了Android使GridView橫向水平滾動的實現(xiàn)方式,有興趣的可以了解一下2017-05-05