From ceeaea19395942908057319ee4490a8d5b7c1b88 Mon Sep 17 00:00:00 2001 From: Igor Demin Date: Wed, 1 Dec 2021 15:21:01 +0300 Subject: [PATCH] Update README.md --- tutorials/Tab_Navigation/README.md | 65 +++++++++++++++--------------- 1 file changed, 32 insertions(+), 33 deletions(-) diff --git a/tutorials/Tab_Navigation/README.md b/tutorials/Tab_Navigation/README.md index 4f72904f2b..3251aa68a6 100644 --- a/tutorials/Tab_Navigation/README.md +++ b/tutorials/Tab_Navigation/README.md @@ -6,13 +6,12 @@ In this tutorial, we will show you how to use tabbing navigation between compone ## Default `Next/Previous` tabbing navigation -By default, `Next/Previous` tabbed navigation moves focus in composition order (in order of appearance), to see how this works, we can use some of the components that are already focusable by default:`TextField`, `OutlinedTextField`, `BasicTextField`, `CircularProgressIndicator`, `LinearProgressIndicator`. +By default, `Next/Previous` tabbed navigation moves focus in composition order (in order of appearance), to see how this works, we can use some of the components that are already focusable by default: `TextField`, `OutlinedTextField`, `BasicTextField`, components with `Modifier.clickable` (`Button`, `IconButton`, `MenuItem`). ```kotlin import androidx.compose.ui.window.application import androidx.compose.ui.window.Window import androidx.compose.ui.window.WindowState -import androidx.compose.ui.window.WindowSize import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxSize @@ -24,11 +23,12 @@ import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.unit.DpSize import androidx.compose.ui.unit.dp fun main() = application { Window( - state = WindowState(size = WindowSize(350.dp, 500.dp)), + state = WindowState(size = DpSize(350.dp, 500.dp)), onCloseRequest = ::exitApplication ) { Box( @@ -58,12 +58,10 @@ fun main() = application { To make a non-focusable component focusable, you need to apply `Modifier.focusable()` modifier to the component. ```kotlin +import androidx.compose.foundation.background import androidx.compose.ui.window.application import androidx.compose.ui.window.Window import androidx.compose.ui.window.WindowState -import androidx.compose.ui.window.WindowSize -import androidx.compose.material.Button -import androidx.compose.material.ButtonDefaults import androidx.compose.material.MaterialTheme import androidx.compose.material.Text import androidx.compose.foundation.focusable @@ -76,6 +74,7 @@ import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.runtime.Composable import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember @@ -84,17 +83,17 @@ import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.lerp import androidx.compose.ui.ExperimentalComposeUiApi import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.input.key.* +import androidx.compose.ui.input.pointer.PointerEventType +import androidx.compose.ui.input.pointer.onPointerEvent import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.IntSize -import androidx.compose.ui.input.key.KeyEventType -import androidx.compose.ui.input.key.type -import androidx.compose.ui.input.key.key -import androidx.compose.ui.input.key.Key -import androidx.compose.ui.input.key.onPreviewKeyEvent +import androidx.compose.ui.unit.DpSize fun main() = application { Window( - state = WindowState(size = WindowSize(350.dp, 450.dp)), + state = WindowState(size = DpSize(350.dp, 450.dp)), onCloseRequest = ::exitApplication ) { MaterialTheme( @@ -114,7 +113,7 @@ fun main() = application { Text(text = "Clicks: ${clicks.value}") Spacer(modifier = Modifier.height(20.dp)) for (x in 1..5) { - FocusableButton("Button $x", { clicks.value++ }) + FocusableBox("Button $x", { clicks.value++ }) Spacer(modifier = Modifier.height(20.dp)) } } @@ -125,27 +124,27 @@ fun main() = application { @OptIn(ExperimentalComposeUiApi::class) @Composable -fun FocusableButton( +fun FocusableBox( text: String = "", onClick: () -> Unit = {}, size: IntSize = IntSize(200, 35) ) { val keyPressedState = remember { mutableStateOf(false) } val interactionSource = remember { MutableInteractionSource() } - val colors = ButtonDefaults.buttonColors( - backgroundColor = if (interactionSource.collectIsFocusedAsState().value) { - if (keyPressedState.value) - lerp(MaterialTheme.colors.secondary, Color(64, 64, 64), 0.3f) - else - MaterialTheme.colors.secondary - } else { - MaterialTheme.colors.primary - } - ) - Button( - onClick = onClick, - interactionSource = interactionSource, - modifier = Modifier.size(size.width.dp, size.height.dp) + val backgroundColor = if (interactionSource.collectIsFocusedAsState().value) { + if (keyPressedState.value) + lerp(MaterialTheme.colors.secondary, Color(64, 64, 64), 0.3f) + else + MaterialTheme.colors.secondary + } else { + MaterialTheme.colors.primary + } + Box( + modifier = Modifier + .clip(RoundedCornerShape(4.dp)) + .background(backgroundColor) + .size(size.width.dp, size.height.dp) + .onPointerEvent(PointerEventType.Press) { onClick() } .onPreviewKeyEvent { if ( it.key == Key.Enter || @@ -164,9 +163,9 @@ fun FocusableButton( false } .focusable(interactionSource = interactionSource), - colors = colors + contentAlignment = Alignment.Center ) { - Text(text = text) + Text(text = text, color = Color.White) } } ``` @@ -185,7 +184,6 @@ In the example below, we simply create a `FocusRequester` list and create text f import androidx.compose.ui.window.application import androidx.compose.ui.window.Window import androidx.compose.ui.window.WindowState -import androidx.compose.ui.window.WindowSize import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxSize @@ -199,11 +197,12 @@ import androidx.compose.ui.focus.FocusRequester import androidx.compose.ui.focus.focusOrder import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.unit.DpSize import androidx.compose.ui.unit.dp fun main() = application { Window( - state = WindowState(size = WindowSize(350.dp, 500.dp)), + state = WindowState(size = DpSize(350.dp, 500.dp)), onCloseRequest = ::exitApplication ) { val itemsList = remember { List(5) { FocusRequester() } } @@ -309,4 +308,4 @@ fun main() = application { } ``` -reverse-order \ No newline at end of file +reverse-order