mirror of
https://github.com/BetterAndroid/FlexiUI.git
synced 2025-09-07 19:14:12 +08:00
feat: add Tab
This commit is contained in:
@@ -23,4 +23,469 @@
|
||||
|
||||
package com.highcapable.flexiui.component
|
||||
|
||||
// TODO: To be implemented
|
||||
import androidx.compose.animation.animateColorAsState
|
||||
import androidx.compose.animation.core.FastOutSlowInEasing
|
||||
import androidx.compose.animation.core.animateDpAsState
|
||||
import androidx.compose.animation.core.tween
|
||||
import androidx.compose.foundation.ScrollState
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.horizontalScroll
|
||||
import androidx.compose.foundation.interaction.MutableInteractionSource
|
||||
import androidx.compose.foundation.layout.Arrangement
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.PaddingValues
|
||||
import androidx.compose.foundation.layout.Row
|
||||
import androidx.compose.foundation.layout.RowScope
|
||||
import androidx.compose.foundation.layout.fillMaxWidth
|
||||
import androidx.compose.foundation.layout.height
|
||||
import androidx.compose.foundation.layout.offset
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.width
|
||||
import androidx.compose.foundation.layout.wrapContentSize
|
||||
import androidx.compose.foundation.pager.PagerState
|
||||
import androidx.compose.foundation.rememberScrollState
|
||||
import androidx.compose.foundation.selection.selectableGroup
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.CompositionLocalProvider
|
||||
import androidx.compose.runtime.Immutable
|
||||
import androidx.compose.runtime.ReadOnlyComposable
|
||||
import androidx.compose.runtime.Stable
|
||||
import androidx.compose.runtime.compositionLocalOf
|
||||
import androidx.compose.runtime.getValue
|
||||
import androidx.compose.runtime.remember
|
||||
import androidx.compose.runtime.rememberCoroutineScope
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.composed
|
||||
import androidx.compose.ui.draw.clip
|
||||
import androidx.compose.ui.draw.clipToBounds
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.graphics.Shape
|
||||
import androidx.compose.ui.layout.SubcomposeLayout
|
||||
import androidx.compose.ui.layout.layout
|
||||
import androidx.compose.ui.platform.debugInspectorInfo
|
||||
import androidx.compose.ui.semantics.Role
|
||||
import androidx.compose.ui.unit.Constraints
|
||||
import androidx.compose.ui.unit.Density
|
||||
import androidx.compose.ui.unit.Dp
|
||||
import androidx.compose.ui.unit.dp
|
||||
import androidx.compose.ui.unit.lerp
|
||||
import com.highcapable.flexiui.LocalColors
|
||||
import com.highcapable.flexiui.LocalShapes
|
||||
import com.highcapable.flexiui.LocalSizes
|
||||
import com.highcapable.flexiui.extension.horizontal
|
||||
import com.highcapable.flexiui.extension.orElse
|
||||
import com.highcapable.flexiui.extension.status
|
||||
import com.highcapable.flexiui.interaction.rippleClickable
|
||||
import kotlinx.coroutines.CoroutineScope
|
||||
import kotlinx.coroutines.launch
|
||||
|
||||
@Immutable
|
||||
data class TabColors(
|
||||
val indicatorColor: Color,
|
||||
val selectedContentColor: Color,
|
||||
val unselectedContentColor: Color
|
||||
)
|
||||
|
||||
@Immutable
|
||||
data class TabStyle(
|
||||
val contentPadding: PaddingValues,
|
||||
val contentShape: Shape,
|
||||
val indicatorWidth: Dp,
|
||||
val indicatorHeight: Dp,
|
||||
val indicatorShape: Shape
|
||||
)
|
||||
|
||||
@Composable
|
||||
fun TabRow(
|
||||
selectedTabIndex: Int = 0,
|
||||
modifier: Modifier = Modifier,
|
||||
colors: TabColors = Tab.colors,
|
||||
style: TabStyle = Tab.style,
|
||||
tabs: @Composable () -> Unit
|
||||
) {
|
||||
TabRow(
|
||||
selectedTabIndex = selectedTabIndex,
|
||||
modifier = modifier,
|
||||
colors = colors,
|
||||
style = style,
|
||||
pagerState = null,
|
||||
tabs = tabs
|
||||
)
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun TabRow(
|
||||
selectedTabIndex: Int = 0,
|
||||
modifier: Modifier = Modifier,
|
||||
colors: TabColors = Tab.colors,
|
||||
style: TabStyle = Tab.style,
|
||||
pagerState: PagerState?,
|
||||
tabs: @Composable () -> Unit
|
||||
) {
|
||||
TabStyleBox(modifier, colors, style) {
|
||||
SubcomposeLayout(Modifier.fillMaxWidth().selectableGroup()) { constraints ->
|
||||
val maximumConstraints = Constraints()
|
||||
val tabRowWidth = constraints.maxWidth
|
||||
val tabMeasurables = subcompose(TabSlots.Tabs, tabs)
|
||||
val tabAverageMeasurables = subcompose(TabSlots.TabsAverage, tabs)
|
||||
val tabCount = tabAverageMeasurables.size
|
||||
val tabAverageWidth = (tabRowWidth / tabCount)
|
||||
val tabPlaceables = tabMeasurables.map { it.measure(maximumConstraints) }
|
||||
val tabAveragePlaceables = tabAverageMeasurables.map {
|
||||
it.measure(constraints.copy(minWidth = tabAverageWidth, maxWidth = tabAverageWidth))
|
||||
}
|
||||
val tabRowHeight = tabAveragePlaceables.maxByOrNull { it.height }?.height ?: 0
|
||||
val tabPositions = List(tabCount) { index ->
|
||||
val tabWidth = tabPlaceables[index].width - style.contentPadding.horizontal.toPx()
|
||||
TabPosition(tabAverageWidth.toDp() * index, tabAverageWidth.toDp(), tabWidth.toDp())
|
||||
}
|
||||
layout(tabRowWidth, tabRowHeight) {
|
||||
tabAveragePlaceables.forEachIndexed { index, placeable ->
|
||||
placeable.placeRelative(x = index * tabAverageWidth, y = 0)
|
||||
}
|
||||
subcompose(TabSlots.Indicator) {
|
||||
TabIndicator(selectedTabIndex, colors, style, pagerState, tabPositions)
|
||||
}.forEach {
|
||||
it.measure(Constraints.fixed(tabRowWidth, tabRowHeight)).placeRelative(x = 0, y = 0)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun ScrollableTabRow(
|
||||
selectedTabIndex: Int = 0,
|
||||
modifier: Modifier = Modifier,
|
||||
colors: TabColors = Tab.colors,
|
||||
style: TabStyle = Tab.style,
|
||||
scrollState: ScrollState = rememberScrollState(),
|
||||
tabs: @Composable () -> Unit
|
||||
) {
|
||||
ScrollableTabRow(
|
||||
selectedTabIndex = selectedTabIndex,
|
||||
modifier = modifier,
|
||||
colors = colors,
|
||||
style = style,
|
||||
pagerState = null,
|
||||
scrollState = scrollState,
|
||||
tabs = tabs
|
||||
)
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun ScrollableTabRow(
|
||||
selectedTabIndex: Int = 0,
|
||||
modifier: Modifier = Modifier,
|
||||
colors: TabColors = Tab.colors,
|
||||
style: TabStyle = Tab.style,
|
||||
pagerState: PagerState?,
|
||||
scrollState: ScrollState = rememberScrollState(),
|
||||
tabs: @Composable () -> Unit
|
||||
) {
|
||||
TabStyleBox(modifier, colors, style) {
|
||||
val scrollableTabData = rememberScrollableTabData(scrollState)
|
||||
SubcomposeLayout(
|
||||
modifier = Modifier.fillMaxWidth()
|
||||
.wrapContentSize(align = Alignment.CenterStart)
|
||||
.horizontalScroll(scrollState)
|
||||
.selectableGroup()
|
||||
.clipToBounds()
|
||||
) { constraints ->
|
||||
val maximumConstraints = Constraints()
|
||||
val tabMeasurables = subcompose(TabSlots.Tabs, tabs)
|
||||
val tabAverageMeasurables = subcompose(TabSlots.TabsAverage, tabs)
|
||||
val tabPlaceables = tabMeasurables.map { it.measure(maximumConstraints) }
|
||||
val tabAveragePlaceables = tabAverageMeasurables.map { it.measure(constraints) }
|
||||
var layoutWidth = 0
|
||||
var layoutHeight = 0
|
||||
tabAveragePlaceables.forEach {
|
||||
layoutWidth += it.width
|
||||
layoutHeight = maxOf(layoutHeight, it.height)
|
||||
}
|
||||
layout(layoutWidth, layoutHeight) {
|
||||
var tabLeft = 0
|
||||
val tabPositions = mutableListOf<TabPosition>()
|
||||
tabAveragePlaceables.forEachIndexed { index, placeables ->
|
||||
val tabWidth = tabPlaceables[index].width - style.contentPadding.horizontal.toPx()
|
||||
placeables.placeRelative(x = tabLeft, y = 0)
|
||||
tabPositions.add(TabPosition(tabLeft.toDp(), placeables.width.toDp(), tabWidth.toDp()))
|
||||
tabLeft += placeables.width
|
||||
}
|
||||
subcompose(TabSlots.Indicator) {
|
||||
TabIndicator(selectedTabIndex, colors, style, pagerState, tabPositions)
|
||||
}.forEach {
|
||||
it.measure(Constraints.fixed(layoutWidth, layoutHeight)).placeRelative(x = 0, y = 0)
|
||||
}
|
||||
scrollableTabData.onLaidOut(
|
||||
density = this@SubcomposeLayout,
|
||||
tabPositions = tabPositions,
|
||||
selectedTab = selectedTabIndex
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun Tab(
|
||||
selected: Boolean,
|
||||
onClick: () -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
selectedContentColor: Color = Color.Unspecified,
|
||||
unselectedContentColor: Color = Color.Unspecified,
|
||||
contentPadding: PaddingValues? = null,
|
||||
contentShape: Shape? = null,
|
||||
enabled: Boolean = true,
|
||||
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
|
||||
content: @Composable RowScope.() -> Unit
|
||||
) {
|
||||
val currentSelectedContentColor = selectedContentColor.orElse()
|
||||
?: LocalTabSelectedContentColor.current.orElse() ?: Tab.colors.selectedContentColor
|
||||
val currentUnselectedContentColor = unselectedContentColor.orElse()
|
||||
?: LocalTabUnselectedContentColor.current.orElse() ?: Tab.colors.unselectedContentColor
|
||||
val currentContentPadding = contentPadding ?: LocalTabContentPadding.current ?: Tab.style.contentPadding
|
||||
val currentContentShape = contentShape ?: LocalTabContentShape.current ?: Tab.style.contentShape
|
||||
val contentColor by animateColorAsState(if (selected) currentSelectedContentColor else currentUnselectedContentColor)
|
||||
val contentStyle = LocalTextStyle.current.default(contentColor)
|
||||
CompositionLocalProvider(
|
||||
LocalIconTint provides contentColor,
|
||||
LocalTextStyle provides contentStyle
|
||||
) {
|
||||
Row(
|
||||
modifier = Modifier.status(enabled)
|
||||
.clip(currentContentShape)
|
||||
.then(modifier)
|
||||
.rippleClickable(
|
||||
enabled = enabled,
|
||||
onClick = onClick,
|
||||
role = Role.Tab,
|
||||
interactionSource = interactionSource
|
||||
)
|
||||
.padding(currentContentPadding),
|
||||
horizontalArrangement = Arrangement.Center,
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
content = content
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun TabIndicator(
|
||||
selectedTabIndex: Int,
|
||||
colors: TabColors,
|
||||
style: TabStyle,
|
||||
pagerState: PagerState?,
|
||||
tabPositions: List<TabPosition>
|
||||
) {
|
||||
val indicatorModifier = pagerState?.let { Modifier.pagerTabIndicatorOffset(it, tabPositions, style.indicatorWidth) }
|
||||
?: Modifier.tabIndicatorOffset(tabPositions[selectedTabIndex], style.indicatorWidth)
|
||||
Box(
|
||||
modifier = Modifier.then(indicatorModifier)
|
||||
.height(style.indicatorHeight)
|
||||
.background(colors.indicatorColor, style.indicatorShape)
|
||||
)
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun TabStyleBox(
|
||||
modifier: Modifier,
|
||||
colors: TabColors,
|
||||
style: TabStyle,
|
||||
content: @Composable () -> Unit
|
||||
) {
|
||||
Box(modifier = modifier) {
|
||||
CompositionLocalProvider(
|
||||
LocalTabSelectedContentColor provides colors.selectedContentColor,
|
||||
LocalTabUnselectedContentColor provides colors.unselectedContentColor,
|
||||
LocalTabContentPadding provides style.contentPadding,
|
||||
content = content
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun rememberScrollableTabData(scrollState: ScrollState): ScrollableTabData {
|
||||
val coroutineScope = rememberCoroutineScope()
|
||||
return remember(scrollState, coroutineScope) { ScrollableTabData(scrollState, coroutineScope) }
|
||||
}
|
||||
|
||||
private fun Modifier.tabIndicatorOffset(
|
||||
currentTabPosition: TabPosition,
|
||||
indicatorWidth: Dp
|
||||
) = composed(
|
||||
inspectorInfo = debugInspectorInfo {
|
||||
name = "tabIndicatorOffset"
|
||||
properties["currentTabPosition"] = currentTabPosition
|
||||
properties["indicatorWidth"] = indicatorWidth
|
||||
}
|
||||
) {
|
||||
val currentWidth = indicatorWidth.orElse() ?: currentTabPosition.tabWidth
|
||||
val animatedWidh by animateDpAsState(
|
||||
targetValue = currentWidth,
|
||||
animationSpec = tween(DefaultTabIndicatorDuration, easing = FastOutSlowInEasing)
|
||||
)
|
||||
val animatedOffsetX by animateDpAsState(
|
||||
targetValue = currentTabPosition.calculateCenter(currentWidth),
|
||||
animationSpec = tween(DefaultTabIndicatorDuration, easing = FastOutSlowInEasing)
|
||||
)
|
||||
fillMaxWidth()
|
||||
.wrapContentSize(Alignment.BottomStart)
|
||||
.offset(x = animatedOffsetX)
|
||||
.width(animatedWidh)
|
||||
}
|
||||
|
||||
private fun Modifier.pagerTabIndicatorOffset(
|
||||
pagerState: PagerState,
|
||||
tabPositions: List<TabPosition>,
|
||||
indicatorWidth: Dp
|
||||
) = composed(
|
||||
inspectorInfo = debugInspectorInfo {
|
||||
name = "pagerTabIndicatorOffset"
|
||||
properties["pagerState"] = pagerState
|
||||
properties["tabPositions"] = tabPositions
|
||||
properties["indicatorWidth"] = indicatorWidth
|
||||
}
|
||||
) {
|
||||
layout { measurable, constraints ->
|
||||
// If there are no pages, nothing to show.
|
||||
if (tabPositions.isEmpty()) return@layout layout(constraints.maxWidth, 0) {}
|
||||
val currentPage = minOf(tabPositions.lastIndex, pagerState.currentPage)
|
||||
val currentTab = tabPositions[currentPage]
|
||||
val previousTab = tabPositions.getOrNull(currentPage - 1)
|
||||
val nextTab = tabPositions.getOrNull(currentPage + 1)
|
||||
val currentWidth = indicatorWidth.orElse() ?: currentTab.tabWidth
|
||||
val nextWidth = indicatorWidth.orElse() ?: nextTab?.tabWidth ?: currentWidth
|
||||
val previousWidth = indicatorWidth.orElse() ?: previousTab?.tabWidth ?: currentWidth
|
||||
val fraction = pagerState.currentPageOffsetFraction
|
||||
// Calculate the width of the indicator from the current and next / previous tab.
|
||||
val movableWidth = when {
|
||||
fraction > 0 && nextTab != null -> lerp(currentWidth, nextWidth, fraction)
|
||||
fraction < 0 && previousTab != null -> lerp(currentWidth, previousWidth, -fraction)
|
||||
else -> currentWidth
|
||||
}.roundToPx()
|
||||
// Calculate the offset X of the indicator from the current and next / previous tab.
|
||||
val movableOffsetX = when {
|
||||
fraction > 0 && nextTab != null ->
|
||||
lerp(currentTab.calculateCenter(currentWidth), nextTab.calculateCenter(nextWidth), fraction)
|
||||
fraction < 0 && previousTab != null ->
|
||||
lerp(currentTab.calculateCenter(currentWidth), previousTab.calculateCenter(previousWidth), -fraction)
|
||||
else -> currentTab.calculateCenter(currentWidth)
|
||||
}.roundToPx()
|
||||
val placeable = measurable.measure(
|
||||
Constraints(
|
||||
minWidth = movableWidth,
|
||||
maxWidth = movableWidth,
|
||||
minHeight = 0,
|
||||
maxHeight = constraints.maxHeight
|
||||
)
|
||||
)
|
||||
val offsetY = maxOf(constraints.minHeight - placeable.height, 0)
|
||||
val measureWidth = constraints.maxWidth
|
||||
val measureHeight = maxOf(placeable.height, constraints.minHeight)
|
||||
layout(measureWidth, measureHeight) { placeable.placeRelative(movableOffsetX, offsetY) }
|
||||
}
|
||||
}
|
||||
|
||||
@Stable
|
||||
private class ScrollableTabData(private val scrollState: ScrollState, private val coroutineScope: CoroutineScope) {
|
||||
|
||||
private var selectedTab: Int? = null
|
||||
|
||||
fun onLaidOut(density: Density, tabPositions: List<TabPosition>, selectedTab: Int) {
|
||||
// Animate if the new tab is different from the old tab, or this is called for the first
|
||||
// time (i.e selectedTab is `null`).
|
||||
if (this.selectedTab != selectedTab) {
|
||||
this.selectedTab = selectedTab
|
||||
tabPositions.getOrNull(selectedTab)?.let {
|
||||
// Scrolls to the tab with [tabPosition], trying to place it in the center of the
|
||||
// screen or as close to the center as possible.
|
||||
val calculatedOffset = it.calculateTabOffset(density, tabPositions)
|
||||
if (scrollState.value != calculatedOffset)
|
||||
coroutineScope.launch {
|
||||
scrollState.animateScrollTo(
|
||||
value = calculatedOffset,
|
||||
animationSpec = tween(DefaultTabIndicatorDuration, easing = FastOutSlowInEasing)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @return the offset required to horizontally center the tab inside this TabRow.
|
||||
* If the tab is at the start / end, and there is not enough space to fully centre the tab, this
|
||||
* will just clamp to the min / max position given the max width.
|
||||
*/
|
||||
private fun TabPosition.calculateTabOffset(density: Density, tabPositions: List<TabPosition>): Int =
|
||||
with(density) {
|
||||
val totalTabRowWidth = tabPositions.last().right.roundToPx()
|
||||
val visibleWidth = totalTabRowWidth - scrollState.maxValue
|
||||
val tabOffset = left.roundToPx()
|
||||
val scrollerCenter = visibleWidth / 2
|
||||
val tabWidth = tabWidth.roundToPx()
|
||||
val centeredTabOffset = tabOffset - (scrollerCenter - tabWidth / 2)
|
||||
// How much space we have to scroll. If the visible width is <= to the total width, then
|
||||
// we have no space to scroll as everything is always visible.
|
||||
val availableSpace = (totalTabRowWidth - visibleWidth).coerceAtLeast(0)
|
||||
return centeredTabOffset.coerceIn(0, availableSpace)
|
||||
}
|
||||
}
|
||||
|
||||
@Immutable
|
||||
private data class TabPosition(val left: Dp, val width: Dp, val tabWidth: Dp) {
|
||||
|
||||
val right get() = left + width
|
||||
|
||||
fun calculateCenter(currentWidth: Dp) = left + width / 2 - currentWidth / 2
|
||||
}
|
||||
|
||||
@Stable
|
||||
private enum class TabSlots { Tabs, TabsAverage, Indicator }
|
||||
|
||||
object Tab {
|
||||
val colors: TabColors
|
||||
@Composable
|
||||
@ReadOnlyComposable
|
||||
get() = defaultTabColors()
|
||||
val style: TabStyle
|
||||
@Composable
|
||||
@ReadOnlyComposable
|
||||
get() = defaultTabStyle()
|
||||
}
|
||||
|
||||
private val LocalTabSelectedContentColor = compositionLocalOf { Color.Unspecified }
|
||||
|
||||
private val LocalTabUnselectedContentColor = compositionLocalOf { Color.Unspecified }
|
||||
|
||||
private val LocalTabContentPadding = compositionLocalOf<PaddingValues?> { null }
|
||||
|
||||
private val LocalTabContentShape = compositionLocalOf<Shape?> { null }
|
||||
|
||||
@Composable
|
||||
@ReadOnlyComposable
|
||||
private fun defaultTabColors() = TabColors(
|
||||
indicatorColor = LocalColors.current.themePrimary,
|
||||
selectedContentColor = LocalColors.current.themePrimary,
|
||||
unselectedContentColor = LocalColors.current.textSecondary
|
||||
)
|
||||
|
||||
@Composable
|
||||
@ReadOnlyComposable
|
||||
private fun defaultTabStyle() = TabStyle(
|
||||
contentPadding = PaddingValues(
|
||||
horizontal = LocalSizes.current.spacingPrimary,
|
||||
vertical = LocalSizes.current.spacingSecondary,
|
||||
),
|
||||
contentShape = when (LocalInAreaBox.current) {
|
||||
true -> LocalAreaBoxShape.current
|
||||
else -> LocalShapes.current.secondary
|
||||
},
|
||||
indicatorWidth = Dp.Unspecified,
|
||||
indicatorHeight = DefaultTabIndicatorHeight,
|
||||
indicatorShape = LocalShapes.current.tertiary
|
||||
)
|
||||
|
||||
private const val DefaultTabIndicatorDuration = 250
|
||||
private val DefaultTabIndicatorHeight = 3.dp
|
||||
Reference in New Issue
Block a user