Skip to content

Commit

Permalink
Merge pull request #1194 from andkulikov/main
Browse files Browse the repository at this point in the history
[Pager] Fix Modifier.pagerTabIndicatorOffset()
  • Loading branch information
andkulikov committed Jun 10, 2022
2 parents 33dd940 + 92b142e commit 568be72
Show file tree
Hide file tree
Showing 3 changed files with 211 additions and 106 deletions.
@@ -0,0 +1,172 @@
/*
* Copyright 2022 The Android Open Source Project
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* https://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

package com.google.accompanist.pager

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material.ScrollableTabRow
import androidx.compose.material.Tab
import androidx.compose.material.TabRowDefaults
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.test.getBoundsInRoot
import androidx.compose.ui.test.junit4.createComposeRule
import androidx.compose.ui.test.onNodeWithTag
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.height
import androidx.compose.ui.unit.lerp
import androidx.compose.ui.unit.times
import androidx.compose.ui.unit.width
import androidx.test.ext.junit.runners.AndroidJUnit4
import com.google.common.truth.Truth.assertThat
import kotlinx.coroutines.runBlocking
import org.junit.Rule
import org.junit.Test
import org.junit.runner.RunWith

@OptIn(ExperimentalPagerApi::class)
@RunWith(AndroidJUnit4::class)
class TabIndicatorTest {
@get:Rule
val rule = createComposeRule()

private val IndicatorTag = "indicator"
private val TabRowTag = "TabRow"

@Test
fun emptyPager() {
rule.setContent {
val pagerState = rememberPagerState()
TabRow(pagerState)
}
}

@Test
fun scrollOffsetIsPositive() {
lateinit var pagerState: PagerState
rule.setContent {
pagerState = rememberPagerState()
Column {
TabRow(pagerState)
HorizontalPager(count = 4, state = pagerState) {
Box(Modifier.fillMaxSize())
}
}
}

rule.runOnIdle {
runBlocking { pagerState.scrollToPage(1, 0.25f) }
}

val tab1Bounds = rule.onNodeWithTag("1").getBoundsInRoot()
val tab2Bounds = rule.onNodeWithTag("2").getBoundsInRoot()
val indicatorBounds = rule.onNodeWithTag(IndicatorTag).getBoundsInRoot()

with(rule.density) {
assertThat(indicatorBounds.left.roundToPx())
.isEqualTo(lerp(tab1Bounds.left, tab2Bounds.left, 0.25f).roundToPx())
assertThat(indicatorBounds.width.roundToPx())
.isEqualTo(lerp(tab1Bounds.width, tab2Bounds.width, 0.25f).roundToPx())
}
}

@Test
fun scrollOffsetIsNegative() {
lateinit var pagerState: PagerState
rule.setContent {
pagerState = rememberPagerState()
Column {
TabRow(pagerState)
HorizontalPager(count = 4, state = pagerState) {
Box(Modifier.fillMaxSize())
}
}
}

rule.runOnIdle {
runBlocking { pagerState.scrollToPage(0, 0.75f) }
}

val tab1Bounds = rule.onNodeWithTag("1").getBoundsInRoot()
val tab0Bounds = rule.onNodeWithTag("0").getBoundsInRoot()
val indicatorBounds = rule.onNodeWithTag(IndicatorTag).getBoundsInRoot()

with(rule.density) {
assertThat(indicatorBounds.left.roundToPx())
.isEqualTo(lerp(tab1Bounds.left, tab0Bounds.left, 0.25f).roundToPx())
assertThat(indicatorBounds.width.roundToPx())
.isEqualTo(lerp(tab1Bounds.width, tab0Bounds.width, 0.25f).roundToPx())
}
}

@Test
fun indicatorIsAtBottom() {
lateinit var pagerState: PagerState
rule.setContent {
pagerState = rememberPagerState()
Column {
TabRow(pagerState)
HorizontalPager(count = 4, state = pagerState) {
Box(Modifier.fillMaxSize())
}
}
}

rule.runOnIdle {
runBlocking { pagerState.scrollToPage(1, 0.25f) }
}

val tabRowBounds = rule.onNodeWithTag(TabRowTag).getBoundsInRoot()

val indicatorBounds = rule.onNodeWithTag(IndicatorTag).getBoundsInRoot()

with(rule.density) {
assertThat(indicatorBounds.height.roundToPx()).isEqualTo(2.dp.roundToPx())
assertThat(indicatorBounds.bottom).isEqualTo(tabRowBounds.bottom)
}
}

@Composable
private fun TabRow(pagerState: PagerState) {
ScrollableTabRow(
selectedTabIndex = pagerState.currentPage,
indicator = { tabPositions ->
TabRowDefaults.Indicator(
Modifier
.pagerTabIndicatorOffset(pagerState, tabPositions)
.testTag(IndicatorTag),
height = 2.dp
)
},
modifier = Modifier.testTag(TabRowTag)
) {
// Add tabs for all of our pages
(0 until pagerState.pageCount).forEach { index ->
Tab(
text = { Text("Tab $index", Modifier.padding(horizontal = index * 5.dp)) },
selected = pagerState.currentPage == index,
modifier = Modifier.testTag("$index"),
onClick = {}
)
}
}
}
}
Expand Up @@ -16,21 +16,13 @@

package com.google.accompanist.pager

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material.ScrollableTabRow
import androidx.compose.material.TabPosition
import androidx.compose.material.TabRow
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.composed
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.layout.layout
import androidx.compose.ui.unit.Constraints
import androidx.compose.ui.unit.lerp
import kotlin.math.absoluteValue
import kotlin.math.max

/**
* This indicator syncs up a [TabRow] or [ScrollableTabRow] tab indicator with a
Expand All @@ -42,37 +34,43 @@ import kotlin.math.max
fun Modifier.pagerTabIndicatorOffset(
pagerState: PagerState,
tabPositions: List<TabPosition>,
): Modifier = composed {
// If there are no pages, nothing to show
if (pagerState.pageCount == 0) return@composed this

val targetIndicatorOffset: Dp
val indicatorWidth: Dp

val currentTab = tabPositions[minOf(tabPositions.lastIndex, pagerState.currentPage)]
val targetPage = pagerState.targetPage
val targetTab = tabPositions.getOrNull(targetPage)

if (targetTab != null) {
// The distance between the target and current page. If the pager is animating over many
// items this could be > 1
val targetDistance = (targetPage - pagerState.currentPage).absoluteValue
// Our normalized fraction over the target distance
val fraction = (pagerState.currentPageOffset / max(targetDistance, 1)).absoluteValue

targetIndicatorOffset = lerp(currentTab.left, targetTab.left, fraction)
indicatorWidth = lerp(currentTab.width, targetTab.width, fraction).absoluteValue
): Modifier = layout { measurable, constraints ->
if (tabPositions.isEmpty()) {
// If there are no pages, nothing to show
layout(constraints.maxWidth, 0) {}
} else {
// Otherwise we just use the current tab/page
targetIndicatorOffset = currentTab.left
indicatorWidth = currentTab.width
val currentPage = minOf(tabPositions.lastIndex, pagerState.currentPage)
val currentTab = tabPositions[currentPage]
val previousTab = tabPositions.getOrNull(currentPage - 1)
val nextTab = tabPositions.getOrNull(currentPage + 1)
val fraction = pagerState.currentPageOffset
val indicatorWidth = if (fraction > 0 && nextTab != null) {
lerp(currentTab.width, nextTab.width, fraction).roundToPx()
} else if (fraction < 0 && previousTab != null) {
lerp(currentTab.width, previousTab.width, -fraction).roundToPx()
} else {
currentTab.width.roundToPx()
}
val indicatorOffset = if (fraction > 0 && nextTab != null) {
lerp(currentTab.left, nextTab.left, fraction).roundToPx()
} else if (fraction < 0 && previousTab != null) {
lerp(currentTab.left, previousTab.left, -fraction).roundToPx()
} else {
currentTab.left.roundToPx()
}
val placeable = measurable.measure(
Constraints(
minWidth = indicatorWidth,
maxWidth = indicatorWidth,
minHeight = 0,
maxHeight = constraints.maxHeight
)
)
layout(constraints.maxWidth, maxOf(placeable.height, constraints.minHeight)) {
placeable.place(
indicatorOffset,
maxOf(constraints.minHeight - placeable.height, 0)
)
}
}

fillMaxWidth()
.wrapContentSize(Alignment.BottomStart)
.offset(x = targetIndicatorOffset)
.width(indicatorWidth)
}

private inline val Dp.absoluteValue: Dp
get() = value.absoluteValue.dp

This file was deleted.

0 comments on commit 568be72

Please sign in to comment.