Skip to content

Commit 65eacdb

Browse files
X1ntoX1nto
committed
Improve pinboard ui for different screen sizes
1 parent 15d4b84 commit 65eacdb

File tree

5 files changed

+187
-221
lines changed

5 files changed

+187
-221
lines changed

‎app/src/main/java/com/xinto/mauth/ui/component/pinboard/PinBoard.kt‎

Lines changed: 61 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,20 @@ package com.xinto.mauth.ui.component.pinboard
22

33
import android.content.res.Configuration
44
import androidx.compose.foundation.layout.Arrangement
5+
import androidx.compose.foundation.layout.Column
56
import androidx.compose.foundation.layout.ExperimentalLayoutApi
6-
import androidx.compose.foundation.layout.FlowRow
7+
import androidx.compose.foundation.layout.Row
78
import androidx.compose.foundation.layout.Spacer
89
import androidx.compose.foundation.layout.aspectRatio
910
import androidx.compose.foundation.layout.fillMaxSize
10-
import androidx.compose.foundation.layout.size
11+
import androidx.compose.foundation.layout.sizeIn
1112
import androidx.compose.material3.Icon
1213
import androidx.compose.material3.MaterialTheme
1314
import androidx.compose.material3.Surface
1415
import androidx.compose.material3.Text
1516
import androidx.compose.runtime.Composable
1617
import androidx.compose.runtime.Immutable
1718
import androidx.compose.runtime.remember
18-
import androidx.compose.ui.Alignment
1919
import androidx.compose.ui.Modifier
2020
import androidx.compose.ui.res.painterResource
2121
import androidx.compose.ui.tooling.preview.Preview
@@ -32,57 +32,69 @@ fun PinBoard(
3232
minButtonSize: Dp = PinButtonDefaults.PinButtonNormalMinSize,
3333
state: PinBoardState = rememberPinBoardState()
3434
) {
35-
FlowRow(
35+
val buttonRows = state.buttons.chunked(3)
36+
37+
Column(
3638
modifier = modifier,
37-
verticalArrangement = Arrangement.spacedBy(8.dp, Alignment.CenterVertically),
38-
horizontalArrangement = Arrangement.spacedBy(horizontalButtonSpace, Alignment.CenterHorizontally),
39-
maxItemsInEachRow = 3
39+
verticalArrangement = Arrangement.spacedBy(8.dp)
4040
) {
41-
state.buttons.forEach { button ->
42-
when (button) {
43-
is PinBoardState.PinBoardButton.Number -> {
44-
PinButton(
45-
modifier = Modifier.weight(1f),
46-
onClick = { state.onNumberClick(button.number) },
47-
minButtonSize = minButtonSize
48-
) {
49-
Text(button.toString())
50-
}
51-
}
52-
is PinBoardState.PinBoardButton.Backspace,
53-
is PinBoardState.PinBoardButton.Fingerprint,
54-
is PinBoardState.PinBoardButton.Enter -> {
55-
PrimaryPinButton(
56-
modifier = Modifier.weight(1f),
57-
onClick = when (button) {
58-
is PinBoardState.PinBoardButton.Backspace -> state.onBackspaceClick
59-
is PinBoardState.PinBoardButton.Fingerprint -> state.onFingerprintClick
60-
is PinBoardState.PinBoardButton.Enter -> state.onEnterClick
61-
else -> throw NoSuchElementException()
62-
},
63-
onLongClick =
64-
if (button is PinBoardState.PinBoardButton.Backspace)
65-
state.onBackspaceLongClick
66-
else null,
67-
minButtonSize = minButtonSize
68-
) {
69-
Icon(
70-
modifier = Modifier.fillMaxSize(0.4f).aspectRatio(1f),
71-
painter = painterResource(
72-
id = when (button) {
73-
is PinBoardState.PinBoardButton.Backspace -> R.drawable.ic_backspace
74-
is PinBoardState.PinBoardButton.Fingerprint -> R.drawable.ic_fingerprint
75-
is PinBoardState.PinBoardButton.Enter -> R.drawable.ic_tab
41+
buttonRows.forEach { buttons ->
42+
Row(horizontalArrangement = Arrangement.spacedBy(horizontalButtonSpace)) {
43+
buttons.forEach { button ->
44+
when (button) {
45+
is PinBoardState.PinBoardButton.Number -> {
46+
PinButton(
47+
modifier = Modifier.weight(1f),
48+
onClick = { state.onNumberClick(button.number) },
49+
minButtonSize = minButtonSize
50+
) {
51+
Text(button.toString())
52+
}
53+
}
54+
is PinBoardState.PinBoardButton.Backspace,
55+
is PinBoardState.PinBoardButton.Fingerprint,
56+
is PinBoardState.PinBoardButton.Enter -> {
57+
PrimaryPinButton(
58+
modifier = Modifier.weight(1f),
59+
onClick = when (button) {
60+
is PinBoardState.PinBoardButton.Backspace -> state.onBackspaceClick
61+
is PinBoardState.PinBoardButton.Fingerprint -> state.onFingerprintClick
62+
is PinBoardState.PinBoardButton.Enter -> state.onEnterClick
7663
else -> throw NoSuchElementException()
77-
}
78-
),
79-
contentDescription = null
80-
)
64+
},
65+
onLongClick =
66+
if (button is PinBoardState.PinBoardButton.Backspace)
67+
state.onBackspaceLongClick
68+
else null,
69+
minButtonSize = minButtonSize
70+
) {
71+
Icon(
72+
modifier = Modifier.fillMaxSize(0.4f),
73+
painter = painterResource(
74+
id = when (button) {
75+
is PinBoardState.PinBoardButton.Backspace -> R.drawable.ic_backspace
76+
is PinBoardState.PinBoardButton.Fingerprint -> R.drawable.ic_fingerprint
77+
is PinBoardState.PinBoardButton.Enter -> R.drawable.ic_tab
78+
else -> throw NoSuchElementException()
79+
}
80+
),
81+
contentDescription = null
82+
)
83+
}
84+
}
85+
is PinBoardState.PinBoardButton.Empty -> {
86+
Spacer(
87+
modifier = Modifier
88+
.weight(1f)
89+
.sizeIn(
90+
minWidth = minButtonSize,
91+
minHeight = minButtonSize
92+
)
93+
.aspectRatio(1f)
94+
)
95+
}
8196
}
8297
}
83-
is PinBoardState.PinBoardButton.Empty -> {
84-
Spacer(Modifier.aspectRatio(1f).weight(1f).size(minButtonSize))
85-
}
8698
}
8799
}
88100
}

‎app/src/main/java/com/xinto/mauth/ui/component/pinboard/PinButton.kt‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -79,11 +79,11 @@ fun PinButton(
7979
val contentColor by colors.getForegroundColor(interactionSource)
8080
Box(
8181
modifier = modifier
82-
.aspectRatio(1f)
8382
.sizeIn(
8483
minWidth = minButtonSize,
85-
minHeight = minButtonSize,
84+
minHeight = minButtonSize
8685
)
86+
.aspectRatio(1f)
8787
.graphicsLayer {
8888
clip = true
8989
this.shape = shape
@@ -110,7 +110,7 @@ fun PinButton(
110110

111111
object PinButtonDefaults {
112112

113-
val PinButtonSmallMinSize = 56.dp
113+
val PinButtonSmallMinSize = 48.dp
114114
val PinButtonNormalMinSize = 72.dp
115115
const val AnimationDurationPress = 200
116116
const val AnimationDurationRelease = 150

0 commit comments

Comments
 (0)