Android Studio Compose Kotlin – Как размещать маркеры на изображениях, таких как карты Google ⇐ Android

[Anonymous]

Привет, я работаю над проектом, в котором пытаюсь размещать маркеры на изображениях, что-то вроде карт Google.
Для каждого маркера я сохраняю координаты и подробную информацию в базе данных. и всякий раз, когда пользователь нажимает на маркер, он показывает соответствующие данные, хотя сейчас я использую только статические выборочные данные. Я новичок в студии Android, но мне удалось кое-что собрать, но у меня возникла пара проблем.
Моя основная проблема — получить правильное смещение относительно изображения. Кроме того, из-за разных размеров экрана и автоматического изменения размера изображений я пытаюсь выяснить, как решить эту проблему. Текущее смещение при щелчке показывает большие числа, примерно до 1200, из-за чего маркеры появляются за пределами экрана. Текущее устройство эмулятора имеет ширину всего около 200F. Поэтому я не знаю, как обрабатывать это динамически для всех устройств.
Еще одна проблема, с которой я столкнулся, — (примерные) данные не отображаются, когда я нажимаю аннотацию.
ImageScreen.kt -
@Composable
fun ImageScreen(
navController: NavController
) {
//val configuration = LocalConfiguration.current
//val screenHeight = configuration.screenHeightDp.dp
//val screenWidth = configuration.screenWidthDp.dp

val context = LocalContext.current
var xyCoordinates by remember { mutableStateOf(Offset.Zero) }
val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
val scope = rememberCoroutineScope()
var showBottomSheet by remember { mutableStateOf(false) }

val imgAnnotations = remember {
mutableStateListOf()
.apply {
add(
ImgAnnotation(
uid = "45224",
coordinateX = 10f,
coordinateY = 10f,
note = "Sample text 1"
)
)
add(
ImgAnnotation(
uid = "6454",
coordinateX = 50f,
coordinateY = 50f,
note = "Sample text 2"
)
)
add(
ImgAnnotation(
uid = "211111",
coordinateX = 200f,
coordinateY = 90f,
note = "Sample text 3"
)
)
add(
ImgAnnotation(
uid = "21555",
coordinateX = 32f,
coordinateY = 93f,
note = "Sample text 4"
)
)
}
}

var currentAnnotationSelected = ImgAnnotation()
var showAnnotation by remember { mutableStateOf(false) }

Column(
modifier = Modifier
.fillMaxSize(),
verticalArrangement = Arrangement.Bottom,
horizontalAlignment = Alignment.CenterHorizontally
) {

Box(
contentAlignment = Alignment.Center,
modifier = Modifier.fillMaxSize()
) {

Image(
painter = painterResource(R.drawable.hair_picture),
contentDescription = "Record image",
contentScale = ContentScale.Fit,
modifier = Modifier
.align(Alignment.BottomCenter)
.pointerInput(Unit) {
detectTapGestures(
onPress = { offset ->
xyCoordinates = offset
showBottomSheet = true
}
)
}
)

Box(
contentAlignment = Alignment.Center,
modifier = Modifier.fillMaxSize()
) {
imgAnnotations.forEach { item ->
// val itemX = item.coordinateX
/* Text(
"$itemX",
modifier = Modifier
.offset(item.coordinateX.dp, item.coordinateY.dp)
)*/
MakeShape(
modifier = Modifier
.offset(item.coordinateX.dp, item.coordinateY.dp)
.clickable {
currentAnnotationSelected = item
showAnnotation = true
showBottomSheet = true
},
shape = CircleShape,
size = 20.dp,
bg = Color.Yellow
)
}
}

if (showBottomSheet) {
ModalBottomSheet(
onDismissRequest = {
showBottomSheet = false
showAnnotation = false
currentAnnotationSelected = ImgAnnotation()
},
sheetState = sheetState,
windowInsets = WindowInsets(0, 0, 0, 0)
) {
IconButton(
onClick = {
scope.launch { sheetState.hide() }.invokeOnCompletion {
if (!sheetState.isVisible) {
showBottomSheet = false
showAnnotation = false
currentAnnotationSelected = ImgAnnotation()
}
}
},
modifier = Modifier
.align(Alignment.End)
) {
Icon(
painterResource(R.drawable.close_icon),
contentDescription = "Close icon",
modifier = Modifier.height(18.dp)
)
}

AnnotationNote(
xy = xyCoordinates,
annotationData = currentAnnotationSelected,
show = showAnnotation
)

Spacer(modifier = Modifier.height(16.dp))
}
}
}
}
}

Компонуемая аннотация –
@Composable
fun AnnotationNote(
xy: Offset = Offset.Zero,
show: Boolean = false,
annotationData: ImgAnnotation = ImgAnnotation()
) {
var annotationNote by remember {
mutableStateOf(annotationData.note ?: "")
}

Column(
modifier = Modifier
.fillMaxWidth(),
verticalArrangement = Arrangement.SpaceBetween,
horizontalAlignment = Alignment.CenterHorizontally
) {
if (show) {
Text(annotationNote)
} else {
//Text("$xy")
TextField(
modifier = Modifier.fillMaxWidth(),
value = annotationNote,
onValueChange = {
annotationNote = it
},
label = {
Text(text = "Annotation Note")
}
)

Spacer(modifier = Modifier.height(24.dp))

ActionButton(
onClick = { },
contentColor = Color.Black,
disabledContentColor = Color.Black,
text = stringResource(R.string.save_btn),
)

Spacer(modifier = Modifier.height(24.dp))
}
}
}


Подробнее здесь: https://stackoverflow.com/questions/788 ... oogle-maps