Y.A.M の雑記帳: Jetpack Compose : キーボードが表示されたときに scrollable な Column 内の TextField が見えるようにスクロールする

2021年6月30日水曜日

Jetpack Compose : キーボードが表示されたときに scrollable な Column 内の TextField が見えるようにスクロールする

1. accompanist-insets を入れる


implementation "com.google.accompanist:accompanist-insets:$accompanist_version"

2. Activity に android:windowSoftInputMode="adjustResize" をセットする

* accompanist-insets がちゃんと動くために必要


<activity
    android:name=".RelocationRequesterSampleActivity"
    android:windowSoftInputMode="adjustResize">

3. Activity で WindowCompat.setDecorFitsSystemWindows(window, false) する

* accompanist-insets がちゃんと動くために必要


class RelocationRequesterSampleActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        WindowCompat.setDecorFitsSystemWindows(window, false)

        setContent {
            MaterialTheme {
                ProvideWindowInsets {
                    RelocationRequesterSample()
                }
            }
        }
    }
}

4. RelocationRequester を使う


@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun RelocationRequesterSample() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .statusBarsPadding()
            .navigationBarsWithImePadding()
            .verticalScroll(rememberScrollState())
            .padding(24.dp)
    ) {
        Spacer(
            modifier = Modifier
                .fillMaxSize()
                .height(600.dp)
                .background(color = Color.LightGray)
        )

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

        val relocationRequester = remember { RelocationRequester() }
        val interactionSource = remember { MutableInteractionSource() }
        val isFocused by interactionSource.collectIsFocusedAsState()

        val ime = LocalWindowInsets.current.ime
        if (ime.isVisible && !ime.animationInProgress && isFocused) {
            LaunchedEffect(Unit) {
                relocationRequester.bringIntoView()
            }
        }

        var value by remember { mutableStateOf("") }

        OutlinedTextField(
            value = value,
            onValueChange = { value = it },
            interactionSource = interactionSource,
            modifier = Modifier.relocationRequester(relocationRequester)
        )
    }
}