Skip to content

Commit 14acc31

Browse files
sreekuttan-ymlsreekuttan-yml
committed
Replaced Row layout with constraint layout in TagView to make text view fit in the tag view.
1 parent aa1ac76 commit 14acc31

File tree

6 files changed

+67
-13
lines changed

6 files changed

+67
-13
lines changed

‎core/ui/src/main/java/co/yml/coreui/core/ui/ytag/TagView.kt‎

Lines changed: 36 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,11 @@ import androidx.compose.foundation.clickable
77
import androidx.compose.foundation.layout.*
88
import androidx.compose.foundation.shape.CircleShape
99
import androidx.compose.foundation.shape.RoundedCornerShape
10-
import androidx.compose.material3.*
10+
import androidx.compose.material3.Icon
11+
import androidx.compose.material3.IconButton
12+
import androidx.compose.material3.Surface
13+
import androidx.compose.material3.Text
1114
import androidx.compose.runtime.Composable
12-
import androidx.compose.ui.Alignment
1315
import androidx.compose.ui.Modifier
1416
import androidx.compose.ui.graphics.Color
1517
import androidx.compose.ui.graphics.RectangleShape
@@ -21,7 +23,8 @@ import androidx.compose.ui.tooling.preview.Preview
2123
import androidx.compose.ui.unit.Dp
2224
import androidx.compose.ui.unit.dp
2325
import androidx.compose.ui.unit.sp
24-
import co.yml.coreui.core.ui.ytag.model.TagViewData
26+
import androidx.constraintlayout.compose.ConstraintLayout
27+
import androidx.constraintlayout.compose.Dimension
2528
import co.yml.coreui.core.ui.ytag.model.TagViewModifiers
2629

2730
/**
@@ -53,8 +56,10 @@ fun TagView(
5356
.width(width = width ?: Dp.Unspecified)
5457
.height(height = height)
5558
) {
56-
Row(
59+
ConstraintLayout(
5760
modifier = Modifier
61+
.width(width = width ?: Dp.Unspecified)
62+
.height(height)
5863
.run {
5964
if (enableBorder) {
6065
border(
@@ -77,10 +82,18 @@ fun TagView(
7782
.background(
7883
color = backgroundColor,
7984
shape = shape
80-
),
81-
verticalAlignment = Alignment.CenterVertically
85+
)
8286
) {
83-
leadingIcon?.invoke(enabled)
87+
val (leading_icon, text_view, trailing_icon) = createRefs()
88+
89+
Box(modifier = Modifier.constrainAs(leading_icon) {
90+
start.linkTo(parent.start)
91+
top.linkTo(parent.top)
92+
bottom.linkTo(parent.bottom)
93+
}
94+
) {
95+
leadingIcon?.invoke(enabled)
96+
}
8497

8598
Text(
8699
text = overFlowText.ifEmpty { text },
@@ -91,10 +104,16 @@ fun TagView(
91104
fontStyle = fontStyle,
92105
letterSpacing = letterSpacing,
93106
modifier = Modifier
107+
.constrainAs(text_view) {
108+
start.linkTo(leading_icon.end)
109+
end.linkTo(trailing_icon.start)
110+
top.linkTo(parent.top)
111+
bottom.linkTo(parent.bottom)
112+
width = Dimension.fillToConstraints
113+
}
94114
.padding(
95115
textPadding
96116
)
97-
.align(Alignment.CenterVertically)
98117
.semantics {
99118
this.contentDescription = semantics
100119
},
@@ -107,7 +126,15 @@ fun TagView(
107126
maxLines = maxLines,
108127
onTextLayout = onTextLayout
109128
)
110-
trailingIcon?.invoke(enabled)
129+
Box(modifier = Modifier.constrainAs(trailing_icon) {
130+
end.linkTo(parent.end)
131+
top.linkTo(parent.top)
132+
bottom.linkTo(parent.bottom)
133+
}
134+
) {
135+
trailingIcon?.invoke(enabled)
136+
}
137+
111138
}
112139
}
113140
}

‎core/ui/src/main/java/co/yml/coreui/core/ui/ytag/TagViewContainer.kt‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -222,7 +222,6 @@ fun showOverFlow(
222222

223223
if (tagViewContainerModifiers.moreTagConfiguration.showOverFlow) {
224224
val moreTagPlaceAble = placeAbles.last()
225-
val remainingTags = placeAbles.lastIndex - 1 - index
226225

227226
if (offset.x + moreTagPlaceAble.first.width < constraints.maxWidth && offset.y + moreTagPlaceAble.first.height < constraints.maxHeight) {
228227
//place more tag
@@ -238,10 +237,13 @@ fun showOverFlow(
238237
val moreTagYOffset = previousOffset.y
239238

240239
if (moreTagXOffset + moreTagPlaceAble.first.width < constraints.maxWidth && moreTagYOffset + moreTagPlaceAble.first.height < constraints.maxHeight) {
240+
val remainingTags = placeAbles.lastIndex - index
241+
tagViewContainerModifiers.moreTagConfiguration.overFlowText.invoke(remainingTags)
241242
return Pair(moreTagPlaceAble.first, IntOffset(moreTagXOffset, moreTagYOffset))
242243
}
243244
}
244-
245+
val remainingTags = placeAbles.lastIndex - index
246+
tagViewContainerModifiers.moreTagConfiguration.overFlowText.invoke(remainingTags)
245247
return moreTagPlaceAble
246248
}
247249
} else {

‎core/ui/src/main/java/co/yml/coreui/core/ui/ytag/model/TagViewContainerModifiers.kt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import androidx.compose.ui.unit.dp
2323
* @param containerPaddingValues define padding for TagViewContainer
2424
* @param tagSpacingHorizontal horizontal padding between tag views
2525
* @param tagSpacingVertical vertical padding between tag views
26-
*
26+
* @param semantics add content description for tag view container
2727
*/
2828
data class TagViewContainerModifiers(
2929
val minWidth: Dp,

‎core/ui/src/main/java/co/yml/coreui/core/ui/ytag/model/TagViewModifiers.kt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ import androidx.compose.ui.unit.sp
5050
* @param shadowElevation The size of the shadow below the surface.
5151
* @param containerPaddingValues define padding for TagView
5252
* @param onClick perform click event
53+
* @param semantics add content description for tag view
5354
*/
5455
data class TagViewModifiers(
5556
val minWidth: Dp,

‎feature/ytag/src/main/java/co/yml/coreui/feature/ytag/ui/YTagActivity.kt‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import androidx.compose.ui.res.stringResource
2727
import androidx.compose.ui.text.TextStyle
2828
import androidx.compose.ui.text.font.FontFamily
2929
import androidx.compose.ui.text.font.FontStyle
30+
import androidx.compose.ui.text.style.TextAlign
3031
import androidx.compose.ui.text.style.TextOverflow
3132
import androidx.compose.ui.unit.dp
3233
import androidx.compose.ui.unit.sp
@@ -104,6 +105,7 @@ fun DefaultTag() {
104105
@Composable
105106
fun CapsuleTag() {
106107
val tagViewModifiers = TagViewModifiers.Builder()
108+
.width(100.dp)
107109
.shape(CircleShape)
108110
.backgroundColor(Color.Black)
109111
.textColor(Color.White)
@@ -119,6 +121,7 @@ fun CapsuleTag() {
119121
@Composable
120122
fun RectangleTag() {
121123
val tagViewModifiers = TagViewModifiers.Builder()
124+
.width(100.dp)
122125
.shape(RectangleShape)
123126
.backgroundColor(Color.Black)
124127
.textColor(Color.White)
@@ -135,6 +138,7 @@ fun RectangleTag() {
135138
fun RoundRectangleTag() {
136139
val tagViewModifiers = TagViewModifiers.Builder()
137140
.shape(RoundedCornerShape(dimensionResource(id = R.dimen.padding_small)))
141+
.width(100.dp)
138142
.backgroundColor(Color.Black)
139143
.textColor(Color.White)
140144
.style(textStyle)
@@ -150,6 +154,9 @@ fun RoundRectangleTag() {
150154
fun TagWithLeadingIcon() {
151155
val context = LocalContext.current
152156
val tagViewModifiers = TagViewModifiers.Builder()
157+
.width(100.dp)
158+
.maxLines(1)
159+
.overFlow(TextOverflow.Ellipsis)
153160
.shape(CircleShape)
154161
.backgroundColor(Color.Black)
155162
.textColor(Color.White)
@@ -178,6 +185,10 @@ fun TagWithLeadingIcon() {
178185
fun TagWithTrailingIcon() {
179186
val context = LocalContext.current
180187
val tagViewModifiers = TagViewModifiers.Builder()
188+
.width(100.dp)
189+
.maxLines(1)
190+
.textAlign(TextAlign.Start)
191+
.overFlow(TextOverflow.Ellipsis)
181192
.shape(CircleShape)
182193
.backgroundColor(Color.Black)
183194
.textColor(Color.White)
@@ -206,6 +217,9 @@ fun TagWithTrailingIcon() {
206217
fun TagWithLeadingTrailingIcon() {
207218
val context = LocalContext.current
208219
val tagViewModifiers = TagViewModifiers.Builder()
220+
.width(100.dp)
221+
.maxLines(1)
222+
.overFlow(TextOverflow.Ellipsis)
209223
.shape(CircleShape)
210224
.backgroundColor(Color.Black)
211225
.maxLines(1)
@@ -258,6 +272,7 @@ fun TagWithLeadingTrailingIcon() {
258272
@Composable
259273
fun BorderTag() {
260274
val tagViewModifiers = TagViewModifiers.Builder()
275+
.width(100.dp)
261276
.textColor(Color.Black)
262277
.enableBorder(true)
263278
.borderColor(Color.Red)
@@ -276,6 +291,7 @@ fun BorderTag() {
276291
@Composable
277292
fun ShadowTag() {
278293
val tagViewModifiers = TagViewModifiers.Builder()
294+
.width(100.dp)
279295
.textColor(colorResource(id = co.yml.coreui.feature.ytag.R.color.tag_text_color))
280296
.backgroundColor(colorResource(id = co.yml.coreui.feature.ytag.R.color.tag_background_color))
281297
.shape(CircleShape)
@@ -295,9 +311,12 @@ fun ShadowTag() {
295311
fun DefaultTagViewContainer() {
296312
val tagViewModifiers = TagViewModifiers.Builder()
297313
.shape(CircleShape)
314+
.width(100.dp)
298315
.backgroundColor(Color.Black)
299316
.textColor(Color.White)
300317
.style(textStyle)
318+
.maxLines(1)
319+
.overFlow(TextOverflow.Ellipsis)
301320
.onCLick {
302321
Log.i("check_click", "tag view clicked")
303322
//remove the current tag view from the list
@@ -307,6 +326,7 @@ fun DefaultTagViewContainer() {
307326
val tagViewData = listOf(
308327
TagViewData("Tag view 1", tagViewModifiers),
309328
TagViewData("Tag 2", TagViewModifiers.Builder()
329+
.width(100.dp)
310330
.shape(CircleShape)
311331
.backgroundColor(Color.Black)
312332
.textColor(Color.White)
@@ -342,9 +362,11 @@ fun DefaultTagViewContainer() {
342362
TagViewData(
343363
text = "more",
344364
overFlowText = { count ->
365+
Log.i("check_over_flow","remaining tags: $count")
345366
"$count more items"
346367
},
347368
tagViewModifiers = TagViewModifiers.Builder().backgroundColor(Color.Gray)
369+
.width(100.dp)
348370
.textColor(Color.White)
349371
.onCLick { Log.i("check_click", "more tag clicked") }.build()
350372
)

‎gradle/libs.versions.toml‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ androidxTestRunner = "1.5.1"
2323
androidxTestMonitor = "1.6.0"
2424
androidxTestCore = "1.4.0"
2525
androidxTestExt = "1.1.4"
26+
constraintlayout = "1.0.1"
2627

2728
#hilt
2829
hilt = "2.44"
@@ -94,6 +95,7 @@ androidx-navigation-compose = { group = "androidx.navigation", name = "navigatio
9495
androidx-lifecycle-viewModelCompose = { group = "androidx.lifecycle", name = "lifecycle-viewmodel-compose", version.ref = "androidxLifecycle" }
9596
androidx-lifecycle-viewModel-ktx = { group = "androidx.lifecycle", name = "lifecycle-viewmodel-ktx", version.ref = "androidxLifecycle" }
9697
androidx-navigation-testing = { group = "androidx.navigation", name = "navigation-testing", version.ref = "androidxNavigation" }
98+
androidx-constraintlayout = { group = "androidx.constraintlayout", name = "constraintlayout-compose", version.ref = "constraintlayout" }
9799

98100
#hilt
99101
hilt_compiler = { module = "com.google.dagger:hilt-android-compiler", version.ref = "hilt" }
@@ -130,7 +132,7 @@ test_runner = { module = "androidx.test:runner", version.ref = "test_runner" }
130132

131133
[bundles]
132134
# Define bundles/groups of libraries
133-
compose = ["androidx.activity.compose", "androidx.compose.foundation", "androidx.navigation.compose", "androidx.compose.material3", "androidx.compose.material3.windowSizeClass", "androidx.compose.runtime","androidx.compose.ui.tooling","androidx.compose.ui.tooling.preview"]
135+
compose = ["androidx.activity.compose", "androidx.compose.foundation", "androidx.navigation.compose", "androidx.compose.material3", "androidx.compose.material3.windowSizeClass", "androidx.compose.runtime","androidx.compose.ui.tooling","androidx.compose.ui.tooling.preview", "androidx.constraintlayout"]
134136
test = ["androidx.test.core","androidx.test.ext","androidx.test.rules","androidx.test.runner", "compose_ui_testing"]
135137
coroutine_test = ["coroutine.test", "coroutine.turbine"]
136138
hilt = ["hilt.compiler","hilt.android","hilt.test"]

0 commit comments

Comments
 (0)