{"id":397024,"date":"2024-06-29T13:11:47","date_gmt":"2024-06-29T13:11:47","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=397024"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=397024","title":{"rendered":"Custom view \u043d\u0430 Compose<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n
<\/figcaption><\/figure>\n

\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442, \u043c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u041d\u0438\u043a\u043e\u043b\u0430\u0439 \u0428\u0438\u0440\u043e\u0431\u043e\u043a\u043e\u0432, \u044f \u2014 Android-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0432 e-legion. <\/p>\n

\u0412 \u0438\u044e\u043b\u0435 Google \u0432\u044b\u043f\u0443\u0441\u0442\u0438\u043b \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e Compose. \u042d\u0442\u043e \u0432\u044b\u0437\u0432\u0430\u043b\u043e \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u0435\u0441 \u0432 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0435. \u0412\u0441\u0435 \u0432\u043e\u043a\u0440\u0443\u0433 \u0441\u0442\u0430\u043b\u0438 \u043f\u043e\u0433\u043e\u0432\u0430\u0440\u0438\u0432\u0430\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u0430 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f \u0437\u0430\u0445\u0432\u0430\u0442\u0438\u0442 Android-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443, \u0438 \u0441\u043a\u043e\u0440\u043e \u0432\u0441\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430 Compose.<\/p>\n

\u042f \u043f\u0440\u0438\u043d\u044f\u043b\u0441\u044f \u0437\u0430 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435, \u0437\u0430\u0433\u043b\u044f\u043d\u0443\u043b \u043d\u0430 developer.android.com \u0438 \u043d\u0430\u0448\u0435\u043b \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b\u044b \u043f\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u044d\u0442\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439, \u043d\u043e \u043d\u0435 \u0443\u0432\u0438\u0434\u0435\u043b \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 view. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0440\u0435\u0448\u0438\u043b \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u0438 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441 \u0432\u0430\u043c\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u043c.<\/p>\n

\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043f\u043e\u043a\u0430\u0436\u0443, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u044b\u043d\u043e\u0447\u043d\u044b\u0439 \u0433\u0440\u0430\u0444\u0438\u043a \u0441\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u043e\u043c \u0438 \u0437\u0443\u043c\u043e\u043c \u043d\u0430 Compose.<\/p>\n

<\/figcaption><\/figure>\n

\u0420\u0438\u0441\u0443\u0435\u043c \u0441\u0432\u0435\u0447\u0438\u00a0<\/h2>\n

\u041f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c, \u043a\u0430\u043a \u0447\u0442\u043e-\u0442\u043e \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c, \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043c\u043e\u0434\u0435\u043b\u044c.<\/p>\n

class Candle( val time: LocalDateTime, val open: Float, val close: Float, val high: Float, val low: Float )<\/code><\/pre>\n
\u0421\u043f\u0438\u0441\u043e\u043a \u0441\u043e \u0441\u0432\u0435\u0447\u043a\u0430\u043c\u0438 \u044f \u0441\u043e\u0437\u0434\u0430\u043b, \u0441\u043a\u0430\u0447\u0430\u0432 \u0438 \u0440\u0430\u0441\u043f\u0430\u0440\u0441\u0438\u0432 \u0444\u0430\u0439\u043b \u0441 \u0424\u0438\u043d\u0430\u043c\u0430. \u042d\u0442\u043e \u043d\u0435 \u0441\u0430\u043c\u043e\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u044d\u0442\u043e\u043c \u043d\u0435 \u0431\u0443\u0434\u0443.\u00a0\u0415\u0441\u043b\u0438 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043a\u043e\u0434 \u0442\u0443\u0442<\/a>.<\/p>\n
\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043a\u043e\u0434 \u0431\u044b\u043b \u0447\u0438\u0449\u0435 \u0438 \u043b\u0443\u0447\u0448\u0435 \u0447\u0438\u0442\u0430\u043b\u0441\u044f, \u0441\u0434\u0435\u043b\u0430\u043b \u043a\u043b\u0430\u0441\u0441 MarketChartState. \u0412 \u043d\u0435\u043c \u0431\u0443\u0434\u0443 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0433\u0440\u0430\u0444\u0438\u043a\u0430.<\/p>\n
class MarketChartState {    \/\/ \u043e\u0431\u0449\u0438\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0441\u0432\u0435\u0447\u0435\u0439 private var candles = listOf<Candle>()    \/\/ \u0432\u0438\u0434\u0438\u043c\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0432\u0435\u0447\u0435\u0439 private var visibleCandleCount by mutableStateOf(60)    \/\/ \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f private var viewWidth = 0f private var viewHeight = 0f    \/\/ \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0438 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0446\u0435\u043d\u044b \u0432\u0438\u0434\u0438\u043c\u044b\u0445 \u0441\u0432\u0435\u0447\u0435\u0439 private val maxPrice by derivedStateOf { visibleCandles.maxOfOrNull { it.high } ?: 0f } private val minPrice by derivedStateOf { visibleCandles.minOfOrNull { it.low } ?: 0f }    \/\/ \u0432\u0438\u0434\u0438\u043c\u044b\u0435 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0441\u0432\u0435\u0447\u0438 val visibleCandles by derivedStateOf { if (candles.isNotEmpty()) { candles.subList( 0, visibleCandleCount ) } else { emptyList() } }    fun setViewSize(width: Float, height: Float) { viewWidth = width viewHeight = height }    \/\/ \u043e\u0442\u0441\u0442\u0443\u043f \u043e\u0442 \u043b\u0435\u0432\u043e\u0433\u043e \u043a\u0440\u0430\u044f \u044d\u043a\u0440\u0430\u043d\u0430 fun xOffset(candle: Candle) = viewWidth * visibleCandles.indexOf(candle).toFloat() \/ visibleCandleCount.toFloat()    \/\/ \u043e\u0442\u0441\u0442\u0443\u043f \u043e\u0442 \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u043a\u0440\u0430\u044f \u044d\u043a\u0440\u0430\u043d\u0430 fun yOffset(value: Float) = viewHeight * (maxPrice - value) \/ (maxPrice - minPrice)  }<\/code><\/pre>\n
derivedStateOf() \u0441\u043e\u0437\u0434\u0430\u0435\u0442 State, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442\u0441\u044f \u043b\u044f\u043c\u0431\u0434\u0435. \u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u0435\u0448\u0438\u0440\u0443\u0435\u0442\u0441\u044f, \u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u043d\u043e\u0432\u044b\u0439 \u043f\u043e\u0434\u043f\u0438\u0441\u0447\u0438\u043a \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0443\u0436\u0435 \u0437\u0430\u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u0415\u0441\u043b\u0438 \u0432 \u043b\u044f\u043c\u0431\u0434\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u0440\u0443\u0433\u043e\u0439 State, \u0442\u043e \u043f\u0440\u0438 \u0435\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u0430\u043d\u043e.<\/p>\n
\u041f\u0440\u0438\u043c\u0435\u0440.<\/strong> \u0412 \u043b\u044f\u043c\u0431\u0434\u0435 visibleCandles \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f visibleCandleCount. \u041f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 visibleCandleCount \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 visibleCandles \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f.\u00a0<\/p>\n
\u0414\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0433\u0440\u0430\u0444\u0438\u043a\u0430 \u043e\u0431\u0440\u0430\u0442\u0438\u043b\u0441\u044f \u043a Composable \u0444\u0443\u043d\u043a\u0446\u0438\u0438 Canvas. \u0412 \u043d\u0435\u0439 \u0435\u0441\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a DrawScope, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043b\u0438\u043d\u0438\u0438, \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438, \u043e\u0432\u0430\u043b\u044b \u0438\u00a0\u0434\u0440\u0443\u0433\u0438\u0435 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b.<\/p>\n
Canvas( modifier = Modifier .fillMaxSize() .background(Color(0xFF182028)) ) {    \/\/ \u0438\u0437 \u043e\u0431\u0449\u0435\u0439 \u0448\u0438\u0440\u0438\u043d\u044b \u0438 \u0432\u044b\u0441\u043e\u0442\u044b \u0432\u044b\u0447\u0435\u043b \u0437\u0430\u0445\u0430\u0440\u0434\u043a\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f,    \/\/ \u0447\u0442\u043e\u0431\u044b \u0432 \u043e\u0441\u0432\u043e\u0431\u043e\u0434\u0438\u0432\u0448\u0435\u0439\u0441\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u0442\u0443 \u0438 \u0446\u0435\u043d\u0443. val chartWidth = size.width - 128.dp.value val chartHeight = size.height - 64.dp.value    state.setViewSize(chartWidth, chartHeight)    \/\/ \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f drawLine( color = Color.White, strokeWidth = 2.dp.value, start = Offset(0f, chartHeight), end = Offset(chartWidth, chartHeight) )    \/\/ \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f drawLine( color = Color.White, strokeWidth = 2.dp.value, start = Offset(chartWidth, 0f), end = Offset(chartWidth, chartHeight) )    \/\/ \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u0441\u0432\u0435\u0447\u0435\u0439 state.visibleCandles.forEach { candle -> val xOffset = state.xOffset(candle) drawLine( color = Color.White, strokeWidth = 2.dp.value, start = Offset(xOffset, state.yOffset(candle.low)), end = Offset(xOffset, state.yOffset(candle.high)) ) if (candle.open > candle.close) { drawRect( color = Color.Red, topLeft = Offset(xOffset - 6.dp.value, state.yOffset(candle.open)), size = Size(12.dp.value, state.yOffset(candle.close) - state.yOffset(candle.open)) ) } else { drawRect( color = Color.Green, topLeft = Offset(xOffset - 6.dp.value, state.yOffset(candle.close)), size = Size(12.dp.value, state.yOffset(candle.open) - state.yOffset(candle.close)) ) } } }<\/code><\/pre>\n
\u0413\u0440\u0430\u0444\u0438\u043a, \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:\u00a0<\/p>\n
<\/figcaption><\/figure>\n
\u041b\u0438\u043d\u0438\u0438 \u0446\u0435\u043d<\/h2>\n
\u0414\u043e\u0431\u0430\u0432\u043b\u044e 9 \u0446\u0435\u043d\u043e\u0432\u044b\u0445 \u043b\u0438\u043d\u0438\u0439. \u041b\u0438\u043d\u0438\u0438 \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0440\u0430\u0432\u043d\u043e\u043c \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0438 \u0434\u0440\u0443\u0433 \u043e\u0442 \u0434\u0440\u0443\u0433\u0430 \u043f\u043e \u0432\u0441\u0435\u043c\u0443 \u044d\u043a\u0440\u0430\u043d\u0443.<\/p>\n
\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0441\u0442\u0435\u0439\u0442\u0435.<\/p>\n
val priceLines by derivedStateOf { val priceItem = (maxPrice - minPrice) \/ 10 mutableListOf<Float>().apply {      repeat(10) { if (it > 0) add(maxPrice - priceItem * it) }    } }<\/code><\/pre>\n
\u0412 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 Canvas \u043d\u0430\u0440\u0438\u0441\u0443\u044e \u043b\u0438\u043d\u0438\u0438 \u0438 \u0442\u0435\u043a\u0441\u0442. \u0412 DrawScope \u043d\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0441\u044c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435\u043c drawIntoCanvas, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a Canvas \u043a \u0442\u043e\u043c\u0443 \u0441\u0430\u043c\u043e\u043c\u0443, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u043e View, \u0438 \u0443\u0436\u0435 \u043d\u0430 \u043d\u0435\u043c \u043d\u0430\u0440\u0438\u0441\u0443\u044e \u0442\u0435\u043a\u0441\u0442.<\/p>\n
state.priceLines.forEach { value: Float -> val yOffset = state.yOffset(value)   val text = decimalFormat.format(value) drawLine(   color = Color.White, strokeWidth = 1.dp.value, start = Offset(0f, yOffset), end = Offset(chartWidth, yOffset),     pathEffect = PathEffect.dashPathEffect(intervals = floatArrayOf(10f, 20f), phase = 5f) ) drawIntoCanvas { textPaint.getTextBounds(text, 0, text.length, bounds) val textHeight = bounds.height() it.nativeCanvas.drawText( text, chartWidth + 8.dp.value, yOffset + textHeight \/ 2, textPaint ) } }<\/code><\/pre>\n
<\/figcaption><\/figure>\n
\u041c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/h2>\n
\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0441\u044c \u0433\u043e\u0442\u043e\u0432\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u0438\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 Modifier.transformable \u043a Modifier \u0432 Canvas.<\/p>\n
Canvas( modifier = Modifier .fillMaxSize() .background(Color(0xFF182028)) .transformable(state.transformableState) )<\/code><\/pre>\n
\u0412 \u0441\u0442\u0435\u0439\u0442\u0435 \u0432\u044b\u0437\u043e\u0432\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e TransformableState \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u043c \u0442\u0443\u0434\u0430 \u043b\u044f\u043c\u0431\u0434\u0443, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0431\u0443\u0434\u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0434\u043b\u044f \u0437\u0443\u043c\u0430.<\/p>\n
val transformableState = TransformableState { zoomChange, _, _ -> visibleCandleCount = (visibleCandleCount \/ zoomChange).roundToInt() }<\/code><\/pre>\n
\u0422\u0430\u043a \u043a\u0430\u043a \u0432 \u0441\u0442\u0435\u0439\u0442\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 maxPrice \u0438 minPrice \u0437\u0430\u0432\u0438\u0441\u044f\u0442 \u043e\u0442 \u0432\u0438\u0434\u0438\u043c\u044b\u0445 \u0441\u0432\u0435\u0447\u0435\u043a, \u043e\u043d\u0438 \u0441\u0440\u0430\u0437\u0443 \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0438 \u0442\u0430\u043a\u0436\u0435 \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 priceLines.<\/p>\n
<\/figcaption><\/figure>\n
\u0412\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043b\u0438\u043d\u0438\u0438<\/h2>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u0431\u0443\u0434\u0443 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u0430 \u0433\u0440\u0430\u0444\u0438\u043a \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043b\u0438\u043d\u0438\u0438 \u0438 \u0438\u0445 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0437\u0443\u043c\u0430.\u00a0<\/p>\n
\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0441\u0442\u0435\u0439\u0442\u0435.<\/p>\n
\/\/ \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0432\u0435\u0447\u0435\u043a \u043c\u0435\u0436\u0434\u0443 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438 \u043b\u0438\u043d\u0438\u044f\u043c\u0438 private var candleInGrid = Float.MAX_VALUE     \/\/ \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043b\u0438\u043d\u0438\u0438 var timeLines by mutableStateOf(listOf<Candle>())  \/\/ \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u043b\u0438\u043d\u0438\u0439 fun calculateGridWidth() { val candleWidth = viewWidth \/ visibleCandleCount val currentGridWidth = candleInGrid * candleWidth when { currentGridWidth < MIN_GRID_WIDTH -> { candleInGrid = MAX_GRID_WIDTH \/ candleWidth timeLines.value = candles.filterIndexed { index, _ -> index % candleInGrid.roundToInt() == 0 } } currentGridWidth > MAX_GRID_WIDTH -> { candleInGrid = MIN_GRID_WIDTH \/ candleWidth timeLines.value = candles.filterIndexed { index, _ -> index % candleInGrid.roundToInt() == 0 } } } }<\/code><\/pre>\n
\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 Canvas.<\/p>\n
state.timeLines.forEach { candle -> val offset = state.xOffset(candle) if (offset !in 0f..chartWidth) return@forEach drawLine( color = Color.White, strokeWidth = 1.dp.value, start = Offset(offset, 0f), end = Offset(offset, chartHeight), pathEffect = PathEffect.dashPathEffect(intervals = floatArrayOf(10f, 20f), phase = 5f) ) drawIntoCanvas { val text = candle.time.format(timeFormatter) textPaint.getTextBounds(text, 0, text.length, bounds) val textHeight = bounds.height() val textWidth = bounds.width() it.nativeCanvas.drawText( text, offset - textWidth \/ 2, chartHeight + 8.dp.value + textHeight, textPaint ) } }<\/code><\/pre>\n
<\/figcaption><\/figure>\n
\u0421\u043a\u0440\u043e\u043b\u043b<\/h2>\n
\u0413\u0440\u0430\u0444\u0438\u043a \u043f\u043e\u0447\u0442\u0438 \u0433\u043e\u0442\u043e\u0432, \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043a\u0440\u043e\u043b\u043b. \u0421\u043d\u043e\u0432\u0430 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0441\u044c \u0433\u043e\u0442\u043e\u0432\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 Modifier.scrollable \u043a Modifier \u0432 Canvas.<\/p>\n
Canvas( modifier = Modifier .fillMaxSize() .background(Color(0xFF182028)) .scrollable(state.scrollableState, Orientation.Horizontal) .transformable(state.transformableState) )<\/code><\/pre>\n
\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0441\u0442\u0435\u0439\u0442\u0435.<\/p>\n
private val scrollOffset by mutableStateOf(0f)      val scrollableState = ScrollableState { scrollOffset = if (it > 0) { (scrollOffset - it.scrolledCandles).coerceAtLeast(0f) } else { (scrollOffset - it.scrolledCandles).coerceAtMost(candles.lastIndex.toFloat()) } it }  \/\/ \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0441\u043a\u0440\u043e\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432 \u043f\u0440\u043e\u0441\u043a\u0440\u043e\u043b\u0435\u043d\u043d\u044b\u0435 \u0441\u0432\u0435\u0447\u043a\u0438 private val Float.scrolledCandles: Float get() = this * visibleCandleCount.toFloat() \/ viewWidth   \/\/ \u0432\u0438\u0434\u0438\u043c\u044b\u0435 \u0441\u0432\u0435\u0447\u0438 val visibleCandles by derivedStateOf { if (candles.isNotEmpty()) { candles.subList( scrollOffset.roundToInt().coerceAtLeast(0), (scrollOffset.roundToInt() + visibleCandleCount).coerceAtMost(candles.size) ) } else { emptyList() } }<\/code><\/pre>\n
\u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435<\/h2>\n
\u0413\u0440\u0430\u0444\u0438\u043a \u0433\u043e\u0442\u043e\u0432, \u043d\u043e \u043f\u0440\u0438 \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0435 \u044d\u043a\u0440\u0430\u043d\u0430 \u0441\u0442\u0435\u0439\u0442 \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f. \u0414\u043b\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043e\u0431\u0435\u0440\u043d\u0443\u043b \u0441\u0442\u0435\u0439\u0442 \u0432 rememberSaveable \u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043b Saver.<\/p>\n
rememberSaveable(saver = MarketChartState.Saver) { MarketChartState.getState(candles) }  val Saver: Saver<MarketChartState, Any> = listSaver( save = { listOf(it.candles, it.scrollOffset, it.visibleCandleCount) }, restore = { getState( candles = it[0] as List<Candle>, visibleCandleCount = it[2] as Int, scrollOffset = it[1] as Float ) } )<\/code><\/pre>\n
\u041a\u043e\u0434 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043f\u043e \u044d\u0442\u043e\u0439 \u0441\u0441\u044b\u043b\u043a\u0435<\/a>.<\/p>\n
Compose \u043e\u0441\u0442\u0430\u0432\u0438\u043b \u0443 \u043c\u0435\u043d\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0432\u043f\u0435\u0447\u0430\u0442\u043b\u0435\u043d\u0438\u044f, \u0438 \u044f \u0443\u0432\u0435\u0440\u0435\u043d, \u0447\u0442\u043e \u044d\u0442\u043e\u0442 \u043f\u043e\u0434\u0445\u043e\u0434 \u0437\u0430\u0445\u0432\u0430\u0442\u0438\u0442 Android-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443.<\/p>\n
\u0412\u0441\u0435\u043c \u0434\u043e\u0431\u0440\u0430 \u0438 \u043a\u0440\u0443\u0442\u044b\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432 \u0441 Compose.<\/p>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n

 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  https:\/\/habr.com\/ru\/articles\/588657\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
<\/div>\n
\n
\n
\n
\n
<\/figcaption><\/figure>\n
\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442, \u043c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u041d\u0438\u043a\u043e\u043b\u0430\u0439 \u0428\u0438\u0440\u043e\u0431\u043e\u043a\u043e\u0432, \u044f \u2014 Android-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0432 e-legion. <\/p>\n
\u0412 \u0438\u044e\u043b\u0435 Google \u0432\u044b\u043f\u0443\u0441\u0442\u0438\u043b \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e Compose. \u042d\u0442\u043e \u0432\u044b\u0437\u0432\u0430\u043b\u043e \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u0435\u0441 \u0432 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0435. \u0412\u0441\u0435 \u0432\u043e\u043a\u0440\u0443\u0433 \u0441\u0442\u0430\u043b\u0438 \u043f\u043e\u0433\u043e\u0432\u0430\u0440\u0438\u0432\u0430\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u0430 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f \u0437\u0430\u0445\u0432\u0430\u0442\u0438\u0442 Android-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443, \u0438 \u0441\u043a\u043e\u0440\u043e \u0432\u0441\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430 Compose.<\/p>\n
\u042f \u043f\u0440\u0438\u043d\u044f\u043b\u0441\u044f \u0437\u0430 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435, \u0437\u0430\u0433\u043b\u044f\u043d\u0443\u043b \u043d\u0430 developer.android.com \u0438 \u043d\u0430\u0448\u0435\u043b \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b\u044b \u043f\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u044d\u0442\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439, \u043d\u043e \u043d\u0435 \u0443\u0432\u0438\u0434\u0435\u043b \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 view. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0440\u0435\u0448\u0438\u043b \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u0438 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441 \u0432\u0430\u043c\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u043c.<\/p>\n
\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043f\u043e\u043a\u0430\u0436\u0443, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u044b\u043d\u043e\u0447\u043d\u044b\u0439 \u0433\u0440\u0430\u0444\u0438\u043a \u0441\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u043e\u043c \u0438 \u0437\u0443\u043c\u043e\u043c \u043d\u0430 Compose.<\/p>\n
<\/figcaption><\/figure>\n
\u0420\u0438\u0441\u0443\u0435\u043c \u0441\u0432\u0435\u0447\u0438\u00a0<\/h2>\n
\u041f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c, \u043a\u0430\u043a \u0447\u0442\u043e-\u0442\u043e \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c, \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043c\u043e\u0434\u0435\u043b\u044c.<\/p>\n
class Candle( val time: LocalDateTime, val open: Float, val close: Float, val high: Float, val low: Float )<\/code><\/pre>\n
\u0421\u043f\u0438\u0441\u043e\u043a \u0441\u043e \u0441\u0432\u0435\u0447\u043a\u0430\u043c\u0438 \u044f \u0441\u043e\u0437\u0434\u0430\u043b, \u0441\u043a\u0430\u0447\u0430\u0432 \u0438 \u0440\u0430\u0441\u043f\u0430\u0440\u0441\u0438\u0432 \u0444\u0430\u0439\u043b \u0441 \u0424\u0438\u043d\u0430\u043c\u0430. \u042d\u0442\u043e \u043d\u0435 \u0441\u0430\u043c\u043e\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u044d\u0442\u043e\u043c \u043d\u0435 \u0431\u0443\u0434\u0443.\u00a0\u0415\u0441\u043b\u0438 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043a\u043e\u0434 \u0442\u0443\u0442<\/a>.<\/p>\n
\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043a\u043e\u0434 \u0431\u044b\u043b \u0447\u0438\u0449\u0435 \u0438 \u043b\u0443\u0447\u0448\u0435 \u0447\u0438\u0442\u0430\u043b\u0441\u044f, \u0441\u0434\u0435\u043b\u0430\u043b \u043a\u043b\u0430\u0441\u0441 MarketChartState. \u0412 \u043d\u0435\u043c \u0431\u0443\u0434\u0443 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0433\u0440\u0430\u0444\u0438\u043a\u0430.<\/p>\n
class MarketChartState {    \/\/ \u043e\u0431\u0449\u0438\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0441\u0432\u0435\u0447\u0435\u0439 private var candles = listOf<Candle>()    \/\/ \u0432\u0438\u0434\u0438\u043c\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0432\u0435\u0447\u0435\u0439 private var visibleCandleCount by mutableStateOf(60)    \/\/ \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f private var viewWidth = 0f private var viewHeight = 0f    \/\/ \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0438 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0446\u0435\u043d\u044b \u0432\u0438\u0434\u0438\u043c\u044b\u0445 \u0441\u0432\u0435\u0447\u0435\u0439 private val maxPrice by derivedStateOf { visibleCandles.maxOfOrNull { it.high } ?: 0f } private val minPrice by derivedStateOf { visibleCandles.minOfOrNull { it.low } ?: 0f }    \/\/ \u0432\u0438\u0434\u0438\u043c\u044b\u0435 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0441\u0432\u0435\u0447\u0438 val visibleCandles by derivedStateOf { if (candles.isNotEmpty()) { candles.subList( 0, visibleCandleCount ) } else { emptyList() } }    fun setViewSize(width: Float, height: Float) { viewWidth = width viewHeight = height }    \/\/ \u043e\u0442\u0441\u0442\u0443\u043f \u043e\u0442 \u043b\u0435\u0432\u043e\u0433\u043e \u043a\u0440\u0430\u044f \u044d\u043a\u0440\u0430\u043d\u0430 fun xOffset(candle: Candle) = viewWidth * visibleCandles.indexOf(candle).toFloat() \/ visibleCandleCount.toFloat()    \/\/ \u043e\u0442\u0441\u0442\u0443\u043f \u043e\u0442 \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u043a\u0440\u0430\u044f \u044d\u043a\u0440\u0430\u043d\u0430 fun yOffset(value: Float) = viewHeight * (maxPrice - value) \/ (maxPrice - minPrice)  }<\/code><\/pre>\n
derivedStateOf() \u0441\u043e\u0437\u0434\u0430\u0435\u0442 State, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442\u0441\u044f \u043b\u044f\u043c\u0431\u0434\u0435. \u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u0435\u0448\u0438\u0440\u0443\u0435\u0442\u0441\u044f, \u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u043d\u043e\u0432\u044b\u0439 \u043f\u043e\u0434\u043f\u0438\u0441\u0447\u0438\u043a \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0443\u0436\u0435 \u0437\u0430\u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u0415\u0441\u043b\u0438 \u0432 \u043b\u044f\u043c\u0431\u0434\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u0440\u0443\u0433\u043e\u0439 State, \u0442\u043e \u043f\u0440\u0438 \u0435\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u0430\u043d\u043e.<\/p>\n
\u041f\u0440\u0438\u043c\u0435\u0440.<\/strong> \u0412 \u043b\u044f\u043c\u0431\u0434\u0435 visibleCandles \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f visibleCandleCount. \u041f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 visibleCandleCount \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 visibleCandles \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f.\u00a0<\/p>\n
\u0414\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0433\u0440\u0430\u0444\u0438\u043a\u0430 \u043e\u0431\u0440\u0430\u0442\u0438\u043b\u0441\u044f \u043a Composable \u0444\u0443\u043d\u043a\u0446\u0438\u0438 Canvas. \u0412 \u043d\u0435\u0439 \u0435\u0441\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a DrawScope, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043b\u0438\u043d\u0438\u0438, \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438, \u043e\u0432\u0430\u043b\u044b \u0438\u00a0\u0434\u0440\u0443\u0433\u0438\u0435 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b.<\/p>\n
Canvas( modifier = Modifier .fillMaxSize() .background(Color(0xFF182028)) ) {    \/\/ \u0438\u0437 \u043e\u0431\u0449\u0435\u0439 \u0448\u0438\u0440\u0438\u043d\u044b \u0438 \u0432\u044b\u0441\u043e\u0442\u044b \u0432\u044b\u0447\u0435\u043b \u0437\u0430\u0445\u0430\u0440\u0434\u043a\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f,    \/\/ \u0447\u0442\u043e\u0431\u044b \u0432 \u043e\u0441\u0432\u043e\u0431\u043e\u0434\u0438\u0432\u0448\u0435\u0439\u0441\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u0442\u0443 \u0438 \u0446\u0435\u043d\u0443. val chartWidth = size.width - 128.dp.value val chartHeight = size.height - 64.dp.value    state.setViewSize(chartWidth, chartHeight)    \/\/ \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f drawLine( color = Color.White, strokeWidth = 2.dp.value, start = Offset(0f, chartHeight), end = Offset(chartWidth, chartHeight) )    \/\/ \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f drawLine( color = Color.White, strokeWidth = 2.dp.value, start = Offset(chartWidth, 0f), end = Offset(chartWidth, chartHeight) )    \/\/ \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u0441\u0432\u0435\u0447\u0435\u0439 state.visibleCandles.forEach { candle -> val xOffset = state.xOffset(candle) drawLine( color = Color.White, strokeWidth = 2.dp.value, start = Offset(xOffset, state.yOffset(candle.low)), end = Offset(xOffset, state.yOffset(candle.high)) ) if (candle.open > candle.close) { drawRect( color = Color.Red, topLeft = Offset(xOffset - 6.dp.value, state.yOffset(candle.open)), size = Size(12.dp.value, state.yOffset(candle.close) - state.yOffset(candle.open)) ) } else { drawRect( color = Color.Green, topLeft = Offset(xOffset - 6.dp.value, state.yOffset(candle.close)), size = Size(12.dp.value, state.yOffset(candle.open) - state.yOffset(candle.close)) ) } } }<\/code><\/pre>\n
\u0413\u0440\u0430\u0444\u0438\u043a, \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:\u00a0<\/p>\n
<\/figcaption><\/figure>\n
\u041b\u0438\u043d\u0438\u0438 \u0446\u0435\u043d<\/h2>\n
\u0414\u043e\u0431\u0430\u0432\u043b\u044e 9 \u0446\u0435\u043d\u043e\u0432\u044b\u0445 \u043b\u0438\u043d\u0438\u0439. \u041b\u0438\u043d\u0438\u0438 \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0440\u0430\u0432\u043d\u043e\u043c \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0438 \u0434\u0440\u0443\u0433 \u043e\u0442 \u0434\u0440\u0443\u0433\u0430 \u043f\u043e \u0432\u0441\u0435\u043c\u0443 \u044d\u043a\u0440\u0430\u043d\u0443.<\/p>\n
\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0441\u0442\u0435\u0439\u0442\u0435.<\/p>\n
val priceLines by derivedStateOf { val priceItem = (maxPrice - minPrice) \/ 10 mutableListOf<Float>().apply {      repeat(10) { if (it > 0) add(maxPrice - priceItem * it) }    } }<\/code><\/pre>\n
\u0412 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 Canvas \u043d\u0430\u0440\u0438\u0441\u0443\u044e \u043b\u0438\u043d\u0438\u0438 \u0438 \u0442\u0435\u043a\u0441\u0442. \u0412 DrawScope \u043d\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0441\u044c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435\u043c drawIntoCanvas, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a Canvas \u043a \u0442\u043e\u043c\u0443 \u0441\u0430\u043c\u043e\u043c\u0443, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u043e View, \u0438 \u0443\u0436\u0435 \u043d\u0430 \u043d\u0435\u043c \u043d\u0430\u0440\u0438\u0441\u0443\u044e \u0442\u0435\u043a\u0441\u0442.<\/p>\n
state.priceLines.forEach { value: Float -> val yOffset = state.yOffset(value)   val text = decimalFormat.format(value) drawLine(   color = Color.White, strokeWidth = 1.dp.value, start = Offset(0f, yOffset), end = Offset(chartWidth, yOffset),     pathEffect = PathEffect.dashPathEffect(intervals = floatArrayOf(10f, 20f), phase = 5f) ) drawIntoCanvas { textPaint.getTextBounds(text, 0, text.length, bounds) val textHeight = bounds.height() it.nativeCanvas.drawText( text, chartWidth + 8.dp.value, yOffset + textHeight \/ 2, textPaint ) } }<\/code><\/pre>\n
<\/figcaption><\/figure>\n
\u041c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/h2>\n
\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0441\u044c \u0433\u043e\u0442\u043e\u0432\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u0438\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 Modifier.transformable \u043a Modifier \u0432 Canvas.<\/p>\n
Canvas( modifier = Modifier .fillMaxSize() .background(Color(0xFF182028)) .transformable(state.transformableState) )<\/code><\/pre>\n
\u0412 \u0441\u0442\u0435\u0439\u0442\u0435 \u0432\u044b\u0437\u043e\u0432\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e TransformableState \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u043c \u0442\u0443\u0434\u0430 \u043b\u044f\u043c\u0431\u0434\u0443, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0431\u0443\u0434\u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0434\u043b\u044f \u0437\u0443\u043c\u0430.<\/p>\n
val transformableState = TransformableState { zoomChange, _, _ -> visibleCandleCount = (visibleCandleCount \/ zoomChange).roundToInt() }<\/code><\/pre>\n
\u0422\u0430\u043a \u043a\u0430\u043a \u0432 \u0441\u0442\u0435\u0439\u0442\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 maxPrice \u0438 minPrice \u0437\u0430\u0432\u0438\u0441\u044f\u0442 \u043e\u0442 \u0432\u0438\u0434\u0438\u043c\u044b\u0445 \u0441\u0432\u0435\u0447\u0435\u043a, \u043e\u043d\u0438 \u0441\u0440\u0430\u0437\u0443 \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0438 \u0442\u0430\u043a\u0436\u0435 \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 priceLines.<\/p>\n
<\/figcaption><\/figure>\n
\u0412\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043b\u0438\u043d\u0438\u0438<\/h2>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u0431\u0443\u0434\u0443 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u0430 \u0433\u0440\u0430\u0444\u0438\u043a \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043b\u0438\u043d\u0438\u0438 \u0438 \u0438\u0445 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0437\u0443\u043c\u0430.\u00a0<\/p>\n
\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0441\u0442\u0435\u0439\u0442\u0435.<\/p>\n
\/\/ \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0432\u0435\u0447\u0435\u043a \u043c\u0435\u0436\u0434\u0443 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438 \u043b\u0438\u043d\u0438\u044f\u043c\u0438 private var candleInGrid = Float.MAX_VALUE     \/\/ \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043b\u0438\u043d\u0438\u0438 var timeLines by mutableStateOf(listOf<Candle>())  \/\/ \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u043b\u0438\u043d\u0438\u0439 fun calculateGridWidth() { val candleWidth = viewWidth \/ visibleCandleCount val currentGridWidth = candleInGrid * candleWidth when { currentGridWidth < MIN_GRID_WIDTH -> { candleInGrid = MAX_GRID_WIDTH \/ candleWidth timeLines.value = candles.filterIndexed { index, _ -> index % candleInGrid.roundToInt() == 0 } } currentGridWidth > MAX_GRID_WIDTH -> { candleInGrid = MIN_GRID_WIDTH \/ candleWidth timeLines.value = candles.filterIndexed { index, _ -> index % candleInGrid.roundToInt() == 0 } } } }<\/code><\/pre>\n
\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 Canvas.<\/p>\n
state.timeLines.forEach { candle -> val offset = state.xOffset(candle) if (offset !in 0f..chartWidth) return@forEach drawLine( color = Color.White, strokeWidth = 1.dp.value, start = Offset(offset, 0f), end = Offset(offset, chartHeight), pathEffect = PathEffect.dashPathEffect(intervals = floatArrayOf(10f, 20f), phase = 5f) ) drawIntoCanvas { val text = candle.time.format(timeFormatter) textPaint.getTextBounds(text, 0, text.length, bounds) val textHeight = bounds.height() val textWidth = bounds.width() it.nativeCanvas.drawText( text, offset - textWidth \/ 2, chartHeight + 8.dp.value + textHeight, textPaint ) } }<\/code><\/pre>\n
<\/figcaption><\/figure>\n
\u0421\u043a\u0440\u043e\u043b\u043b<\/h2>\n
\u0413\u0440\u0430\u0444\u0438\u043a \u043f\u043e\u0447\u0442\u0438 \u0433\u043e\u0442\u043e\u0432, \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043a\u0440\u043e\u043b\u043b. \u0421\u043d\u043e\u0432\u0430 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0441\u044c \u0433\u043e\u0442\u043e\u0432\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 Modifier.scrollable \u043a Modifier \u0432 Canvas.<\/p>\n
Canvas( modifier = Modifier .fillMaxSize() .background(Color(0xFF182028)) .scrollable(state.scrollableState, Orientation.Horizontal) .transformable(state.transformableState) )<\/code><\/pre>\n
\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0441\u0442\u0435\u0439\u0442\u0435.<\/p>\n
private val scrollOffset by mutableStateOf(0f)      val scrollableState = ScrollableState { scrollOffset = if (it > 0) { (scrollOffset - it.scrolledCandles).coerceAtLeast(0f) } else { (scrollOffset - it.scrolledCandles).coerceAtMost(candles.lastIndex.toFloat()) } it }  \/\/ \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0441\u043a\u0440\u043e\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432 \u043f\u0440\u043e\u0441\u043a\u0440\u043e\u043b\u0435\u043d\u043d\u044b\u0435 \u0441\u0432\u0435\u0447\u043a\u0438 private val Float.scrolledCandles: Float get() = this * visibleCandleCount.toFloat() \/ viewWidth   \/\/ \u0432\u0438\u0434\u0438\u043c\u044b\u0435 \u0441\u0432\u0435\u0447\u0438 val visibleCandles by derivedStateOf { if (candles.isNotEmpty()) { candles.subList( scrollOffset.roundToInt().coerceAtLeast(0), (scrollOffset.roundToInt() + visibleCandleCount).coerceAtMost(candles.size) ) } else { emptyList() } }<\/code><\/pre>\n
\u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435<\/h2>\n
\u0413\u0440\u0430\u0444\u0438\u043a \u0433\u043e\u0442\u043e\u0432, \u043d\u043e \u043f\u0440\u0438 \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0435 \u044d\u043a\u0440\u0430\u043d\u0430 \u0441\u0442\u0435\u0439\u0442 \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f. \u0414\u043b\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043e\u0431\u0435\u0440\u043d\u0443\u043b \u0441\u0442\u0435\u0439\u0442 \u0432 rememberSaveable \u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043b Saver.<\/p>\n
rememberSaveable(saver = MarketChartState.Saver) { MarketChartState.getState(candles) }  val Saver: Saver<MarketChartState, Any> = listSaver( save = { listOf(it.candles, it.scrollOffset, it.visibleCandleCount) }, restore = { getState( candles = it[0] as List<Candle>, visibleCandleCount = it[2] as Int, scrollOffset = it[1] as Float ) } )<\/code><\/pre>\n
\u041a\u043e\u0434 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043f\u043e \u044d\u0442\u043e\u0439 \u0441\u0441\u044b\u043b\u043a\u0435<\/a>.<\/p>\n
Compose \u043e\u0441\u0442\u0430\u0432\u0438\u043b \u0443 \u043c\u0435\u043d\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0432\u043f\u0435\u0447\u0430\u0442\u043b\u0435\u043d\u0438\u044f, \u0438 \u044f \u0443\u0432\u0435\u0440\u0435\u043d, \u0447\u0442\u043e \u044d\u0442\u043e\u0442 \u043f\u043e\u0434\u0445\u043e\u0434 \u0437\u0430\u0445\u0432\u0430\u0442\u0438\u0442 Android-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443.<\/p>\n
\u0412\u0441\u0435\u043c \u0434\u043e\u0431\u0440\u0430 \u0438 \u043a\u0440\u0443\u0442\u044b\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432 \u0441 Compose.<\/p>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n

 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  https:\/\/habr.com\/ru\/articles\/588657\/<\/a>
<\/br><\/br><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-397024","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/397024","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=397024"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/397024\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=397024"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=397024"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=397024"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}