Блог

Главная - Вопросы по программированию - Как создать ввод текстового поля с маской в jetpack compose?

Как создать ввод текстового поля с маской в jetpack compose?

#android #android-jetpack-compose #android-jetpack-compose-text #android-compose-textfield

Вопрос:

Мне нужно текстовое поле в jetpack compose, которое работает с такой маской: NNNNN-NNN где N-целое число от 0 до 9. Мне нужна моя составная функция, чтобы эта маска была в OutlinedTextField :

 @Composable
private fun EditTextField(
    labelText: String,
    value: String,
    keyboardType: KeyboardType = KeyboardType.Text,
    onValueChanged: (String) -> Unit
) {
    OutlinedTextField(
        modifier = Modifier.padding(top = 8.dp),
        label = { Text(text = labelText) },
        keyboardOptions = KeyboardOptions(keyboardType = keyboardType),
        value = value,
        onValueChange = onValueChanged
    )
}

Комментарии:

1. Что вы пробовали до сих пор ?

2. Привет, друг, я только что обновил вопрос фрагментом своего кода, EditTextField это мое текстовое поле, мне нужно, чтобы эта маска была применена к OutlinedTextField внутренней функции compose.

Ответ №1:

Вы можете воспользоваться этой visualTransformation недвижимостью:

 OutlinedTextField(
    value = text,
    onValueChange = { it ->
        text = it.filter { it.isDigit() }
    },
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
    visualTransformation = MaskTransformation()
)

с:

 class MaskTransformation() : VisualTransformation {
    override fun filter(text: AnnotatedString): TransformedText {
        return maskFilter(text)
    }
}


fun maskFilter(text: AnnotatedString): TransformedText {

    // NNNNN-NNN
    val trimmed = if (text.text.length >= 8) text.text.substring(0..7) else text.text
    var out = ""
    for (i in trimmed.indices) {
        out  = trimmed[i]
        if (i==4) out  = "-"
    }

    val numberOffsetTranslator = object : OffsetMapping {
        override fun originalToTransformed(offset: Int): Int {
            if (offset <= 4) return offset
            if (offset <= 8) return offset  1
            return 9

        }

        override fun transformedToOriginal(offset: Int): Int {
            if (offset <=5) return offset
            if (offset <=9) return offset -1
            return 8
        }
    }

    return TransformedText(AnnotatedString(out), numberOffsetTranslator)
}

введите описание изображения здесь

Комментарии:

1. Мило! То, что вы сделали, кажется, работает нормально, хотя это относительно большой код. Знаете ли вы, будет ли он иметь более компактную форму с использованием регулярных выражений?

Ответ №2:

Реализация визуальной информации, которая принимает любой тип маски для текстового поля Jetpack Compose:

 class MaskVisualTransformation(private val mask: String) : VisualTransformation {

    private val specialSymbolsIndices = mask.indices.filter { mask[it] != '#' }

    override fun filter(text: AnnotatedString): TransformedText {
        var out = ""
        var maskIndex = 0
        text.forEach { char ->
            while (specialSymbolsIndices.contains(maskIndex)) {
                out  = mask[maskIndex]
                maskIndex  
            }
            out  = char
            maskIndex  
        }
        return TransformedText(AnnotatedString(out), offsetTranslator())
    }

    private fun offsetTranslator() = object : OffsetMapping {
        override fun originalToTransformed(offset: Int): Int {
            val offsetValue = offset.absoluteValue
            if (offsetValue == 0) return 0
            var numberOfHashtags = 0
            val masked = mask.takeWhile {
                if (it == '#') numberOfHashtags  
                numberOfHashtags < offsetValue
            }
            return masked.length   1
        }

        override fun transformedToOriginal(offset: Int): Int {
            return mask.take(offset.absoluteValue).count { it == '#' }
        }
    }
}

Как им пользоваться:

 @Composable
fun CustomTextField() {
    var text by remember { mutableStateOf("") }
    OutlinedTextField(
        value = text,
        onValueChange = { it ->
            if (it.length <= INPUT_LENGTH) {
                text = it.filter { it.isDigit() }
            }
        },
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
        visualTransformation = MaskVisualTransformation(MASK)
    )
}

object NumberDefaults {
    const val MASK = "#####-###"
    const val INPUT_LENGTH = 8 // Equals to "#####-###".count { it == '#' }
}
Метки: