Makussu/subtracks
1
0
Fork 0
mirror of https://github.com/austinried/subtracks.git synced 2026-11-11 07:29:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

revert the tab overlay clip measurement

Browse Source 
Tracking the content position per frame made the inactive-tab colour split chase the layout instead of only following the indicator, so the icons jittered on a swipe. Go back to the stable tab-relative offset.
This commit is contained in:
austinried
2026-10-04 00:29:57 +00:00
parent 5b88792f72
commit ef349f0346
1 changed files with 30 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/main/kotlin/com/subtracks/ui/library/LibraryScreen.kt
+30 -37
View File
@@ -90,7 +90,6 @@ import androidx.compose.ui.layout.boundsInParent
import androidx.compose.ui.layout.layout import androidx.compose.ui.layout.layout
import androidx.compose.ui.layout.onGloballyPositioned import androidx.compose.ui.layout.onGloballyPositioned
import androidx.compose.ui.layout.onSizeChanged import androidx.compose.ui.layout.onSizeChanged
import androidx.compose.ui.layout.positionInRoot
import androidx.compose.ui.platform.LocalDensity import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.semantics.clearAndSetSemantics import androidx.compose.ui.semantics.clearAndSetSemantics
import androidx.compose.ui.unit.Constraints import androidx.compose.ui.unit.Constraints
@@ -772,53 +771,47 @@ private fun TabButton(
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
) { ) {
val selectedContent = artwork?.scheme?.onPrimary ?: MaterialTheme.colorScheme.background val selectedContent = artwork?.scheme?.onPrimary ?: MaterialTheme.colorScheme.background
val paddingStart = with(LocalDensity.current) { 8.dp.toPx() }
var tabLeft by remember { mutableFloatStateOf(0f) } var tabLeft by remember { mutableFloatStateOf(0f) }
var tabRootX by remember { mutableFloatStateOf(0f) } val clipStart = indicatorLeft?.minus(tabLeft + paddingStart)
var contentRootX by remember { mutableFloatStateOf(0f) } val clipEnd = indicatorRight?.minus(tabLeft + paddingStart)
val contentLeft = tabLeft + (contentRootX - tabRootX)
val clipStart = indicatorLeft?.minus(contentLeft)
val clipEnd = indicatorRight?.minus(contentLeft)
Box( Box(
modifier = modifier =
modifier modifier
.onGloballyPositioned { .onGloballyPositioned { tabLeft = it.boundsInParent().left }
tabLeft = it.boundsInParent().left .clickable(onClick = onClick)
tabRootX = it.positionInRoot().x
}.clickable(onClick = onClick)
.minimumInteractiveComponentSize() .minimumInteractiveComponentSize()
.padding(start = 8.dp, end = 12.dp, top = TAB_VERTICAL_PADDING, bottom = TAB_VERTICAL_PADDING), .padding(start = 8.dp, end = 12.dp, top = TAB_VERTICAL_PADDING, bottom = TAB_VERTICAL_PADDING),
) { ) {
Box(Modifier.onGloballyPositioned { contentRootX = it.positionInRoot().x }) { if (clipStart != null && clipEnd != null) {
if (clipStart != null && clipEnd != null) { Box(
Box( modifier =
modifier = Modifier.drawWithContent {
Modifier.drawWithContent { val hole =
val hole = Path().apply {
Path().apply { addRect(Rect(clipStart, 0f, clipEnd, size.height))
addRect(Rect(clipStart, 0f, clipEnd, size.height)) }
} clipPath(hole, clipOp = ClipOp.Difference) {
clipPath(hole, clipOp = ClipOp.Difference) { this@drawWithContent.drawContent()
}
},
) {
TabContent(tab, progress, MaterialTheme.colorScheme.onBackground)
}
Box(
modifier =
Modifier
.clearAndSetSemantics {}
.drawWithContent {
clipRect(clipStart, 0f, clipEnd, size.height) {
this@drawWithContent.drawContent() this@drawWithContent.drawContent()
} }
}, },
) { ) {
TabContent(tab, progress, MaterialTheme.colorScheme.onBackground) TabContent(tab, progress, selectedContent)
}
Box(
modifier =
Modifier
.clearAndSetSemantics {}
.drawWithContent {
clipRect(clipStart, 0f, clipEnd, size.height) {
this@drawWithContent.drawContent()
}
},
) {
TabContent(tab, progress, selectedContent)
}
} else {
TabContent(tab, progress, MaterialTheme.colorScheme.onBackground)
} }
} else {
TabContent(tab, progress, MaterialTheme.colorScheme.onBackground)
} }
} }
} }