Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[RFC] Swipe ReadingPage #468

Closed
wants to merge 5 commits into from
Closed

[RFC] Swipe ReadingPage #468

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1a583f2
Bump Dependency for Swipeable to include bugfix for Android 12
boun Sep 18, 2023
d73e8ed
Add a previous element in the ReadingViewModel for two-way list trans…
boun Sep 18, 2023
b00c34a
Implement a Modifier which allows flipping through articles
boun Sep 15, 2023
bb23a8a
Slide In / Out based on the direction of the swipe
boun Sep 19, 2023
e594c7a
DO NOT MERGE: Debug build with red icon
boun Sep 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions app/build.gradle
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,11 +58,24 @@ android {
}
buildTypes {
release {
manifestPlaceholders = [
appIcon: "@mipmap/ic_launcher",
appIconRound: "@mipmap/ic_launcher_round"
]
minifyEnabled true
shrinkResources true
proguardFiles getDefaultProguardFile("proguard-android-optimize.txt"), "proguard-rules.pro"
signingConfig signingConfigs.release
}
debug {
manifestPlaceholders = [
appIcon: "@mipmap/ic_launcher_debug",
appIconRound: "@mipmap/ic_launcher_round_debug"
]
applicationIdSuffix ".debug"
versionNameSuffix "-debug"
debuggable true
}
}
applicationVariants.all { variant ->
variant.outputs.each { output ->
Expand Down
4 changes: 2 additions & 2 deletions app/src/main/AndroidManifest.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@
<application
android:name=".RYApp"
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:icon="${appIcon}"
android:label="@string/read_you"
android:roundIcon="@mipmap/ic_launcher_round"
android:roundIcon="${appIconRound}"
android:supportsRtl="true"
android:theme="@style/Theme.Reader"
android:usesCleartextTraffic="true">
Expand Down
103 changes: 102 additions & 1 deletion app/src/main/java/me/ash/reader/ui/ext/ModifierExt.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,45 @@ package me.ash.reader.ui.ext
import android.annotation.SuppressLint
import android.view.HapticFeedbackConstants
import android.view.SoundEffectConstants
import androidx.compose.animation.core.snap
import androidx.compose.foundation.*
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.PressInteraction
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.FractionalThreshold
import androidx.compose.material.rememberSwipeableState
import androidx.compose.material.swipeable
import androidx.compose.runtime.Composable
import androidx.compose.runtime.DisposableEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.composed
import androidx.compose.ui.draw.clip
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.input.nestedscroll.NestedScrollConnection
import androidx.compose.ui.input.nestedscroll.NestedScrollSource
import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.layout.onSizeChanged
import androidx.compose.ui.platform.LocalView
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.Velocity
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.lerp
import com.google.accompanist.pager.ExperimentalPagerApi
import com.google.accompanist.pager.PagerScope
import com.google.accompanist.pager.calculateCurrentOffsetForPage
import kotlinx.coroutines.launch
import kotlin.math.absoluteValue

@OptIn(ExperimentalPagerApi::class)
Expand Down Expand Up @@ -126,4 +146,85 @@ fun Modifier.combinedFeedbackClickable(
},
)
}
}
}

@OptIn(ExperimentalMaterialApi::class)
fun Modifier.swipeableUpDown(onUp: () -> Unit, onDown: () -> Unit): Modifier = composed {
var screenHeight by rememberSaveable { mutableStateOf(0f) }
val swipeableState = rememberSwipeableState(
SwipeDirection.Initial,
animationSpec = snap()
)
val connection = remember {
object: NestedScrollConnection {
// Let the children eat first, we consume nothing
override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset { return Offset.Zero }

// Let it scroll...
override suspend fun onPreFling(available: Velocity): Velocity { return Velocity.Zero }

// We consume the rest
override fun onPostScroll(
consumed: Offset,
available: Offset,
source: NestedScrollSource,
): Offset {
// use leftover delta to swipe parent
return Offset(0f, swipeableState.performDrag(available.y))
}

// We fling but with zero speed (needed to trigger the event, but too fast will overshoot)
override suspend fun onPostFling(consumed: Velocity, available: Velocity): Velocity {
// perform fling on parent to trigger state change
swipeableState.performFling(velocity = 0f)
return available
}
}
}
val anchorHeight = remember(screenHeight) {
if (screenHeight == 0f) {
1f
} else {
screenHeight
}
}
val scope = rememberCoroutineScope()
if (swipeableState.isAnimationRunning) {
DisposableEffect(Unit) {
onDispose {
when (swipeableState.currentValue) {
SwipeDirection.Up -> {
onUp()
}
SwipeDirection.Down -> {
onDown()
}
else -> {
return@onDispose
}
}
scope.launch {
swipeableState.snapTo(SwipeDirection.Initial)
}
}
}
}
return@composed Modifier
.onSizeChanged { screenHeight = it.height.toFloat() }
.nestedScroll(connection)
.swipeable(
state = swipeableState,
anchors = mapOf(
0f to SwipeDirection.Up,
anchorHeight / 2 to SwipeDirection.Initial,
anchorHeight to SwipeDirection.Down,
),
thresholds = { _, _ -> FractionalThreshold(0.3f) },
orientation = Orientation.Vertical,
)
}
enum class SwipeDirection(val raw: Int) {
Initial(0),
Up(1),
Down(2),
}
151 changes: 84 additions & 67 deletions app/src/main/java/me/ash/reader/ui/page/home/reading/ReadingPage.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,9 @@ import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel
Expand All @@ -18,6 +21,7 @@ import me.ash.reader.data.model.preference.LocalReadingPageTonalElevation
import me.ash.reader.ui.component.base.RYScaffold
import me.ash.reader.ui.ext.collectAsStateValue
import me.ash.reader.ui.ext.isScrollDown
import me.ash.reader.ui.ext.swipeableUpDown
import me.ash.reader.ui.page.home.HomeViewModel

@OptIn(ExperimentalAnimationApi::class)
Expand All @@ -35,7 +39,7 @@ fun ReadingPage(
} else {
true
}

var slideDirection = remember { mutableStateOf(1) }
val pagingItems = homeUiState.pagingData.collectAsLazyPagingItems().itemSnapshotList
readingViewModel.recorderNextArticle(pagingItems)

Expand All @@ -59,79 +63,92 @@ fun ReadingPage(
}

RYScaffold(
topBarTonalElevation = tonalElevation.value.dp,
containerTonalElevation = tonalElevation.value.dp,
content = {
Log.i("RLog", "TopBar: recomposition")
topBarTonalElevation = tonalElevation.value.dp,
containerTonalElevation = tonalElevation.value.dp,
content = {
Log.i("RLog", "TopBar: recomposition")

Box(modifier = Modifier.fillMaxSize()) {
// Top Bar
TopBar(
navController = navController,
isShow = isShowToolBar,
title = readingUiState.articleWithFeed?.article?.title,
link = readingUiState.articleWithFeed?.article?.link,
onClose = {
navController.popBackStack()
},
)
Box(modifier = Modifier.fillMaxSize().swipeableUpDown({
Log.d("Swipe", "Up")
slideDirection.value = 1
if (readingUiState.nextArticleId.isNotEmpty()) {
readingViewModel.initData(readingUiState.nextArticleId)
}
}, {
Log.d("Swipe", "Down")
slideDirection.value = -1
if (readingUiState.previousArticleId.isNotEmpty()) {
readingViewModel.initData(readingUiState.previousArticleId)
}
})) {
// Top Bar
TopBar(
navController = navController,
isShow = isShowToolBar,
title = readingUiState.articleWithFeed?.article?.title,
link = readingUiState.articleWithFeed?.article?.link,
onClose = {
navController.popBackStack()
},
)

// Content
if (readingUiState.articleWithFeed != null) {
AnimatedContent(
targetState = readingUiState.content ?: "",
transitionSpec = {
slideInVertically(
spring(
dampingRatio = Spring.DampingRatioNoBouncy,
stiffness = Spring.StiffnessLow,
)
) { height -> height / 2 } with slideOutVertically { height -> -(height / 2) } + fadeOut(
spring(
dampingRatio = Spring.DampingRatioNoBouncy,
stiffness = Spring.StiffnessLow,
)
// Content
if (readingUiState.articleWithFeed != null) {
AnimatedContent(
targetState = readingUiState.content ?: "",
transitionSpec = {
slideInVertically(
spring(
dampingRatio = Spring.DampingRatioNoBouncy,
stiffness = Spring.StiffnessLow,
)
) { height -> slideDirection.value * (height / 2) } with slideOutVertically { height -> slideDirection.value * -(height / 2)} + fadeOut(
spring(
dampingRatio = Spring.DampingRatioNoBouncy,
stiffness = Spring.StiffnessLow,
)
)
}
) { target ->
Content(
content = target,
feedName = readingUiState.articleWithFeed.feed.name,
title = readingUiState.articleWithFeed.article.title,
author = readingUiState.articleWithFeed.article.author,
link = readingUiState.articleWithFeed.article.link,
publishedDate = readingUiState.articleWithFeed.article.date,
isLoading = readingUiState.isLoading,
listState = readingUiState.listState,
isShowToolBar = isShowToolBar,
)
}
) { target ->
Content(
content = target,
feedName = readingUiState.articleWithFeed.feed.name,
title = readingUiState.articleWithFeed.article.title,
author = readingUiState.articleWithFeed.article.author,
link = readingUiState.articleWithFeed.article.link,
publishedDate = readingUiState.articleWithFeed.article.date,
isLoading = readingUiState.isLoading,
listState = readingUiState.listState,
isShowToolBar = isShowToolBar,
}
// Bottom Bar
if (readingUiState.articleWithFeed != null) {
BottomBar(
isShow = isShowToolBar,
isUnread = readingUiState.articleWithFeed.article.isUnread,
isStarred = readingUiState.articleWithFeed.article.isStarred,
isFullContent = readingUiState.isFullContent,
onUnread = {
readingViewModel.markUnread(it)
},
onStarred = {
readingViewModel.markStarred(it)
},
onNextArticle = {
if (readingUiState.nextArticleId.isNotEmpty()) {
readingViewModel.initData(readingUiState.nextArticleId)
}
slideDirection.value = 1
},
onFullContent = {
if (it) readingViewModel.renderFullContent()
else readingViewModel.renderDescriptionContent()
},
)
}
}
// Bottom Bar
if (readingUiState.articleWithFeed != null) {
BottomBar(
isShow = isShowToolBar,
isUnread = readingUiState.articleWithFeed.article.isUnread,
isStarred = readingUiState.articleWithFeed.article.isStarred,
isFullContent = readingUiState.isFullContent,
onUnread = {
readingViewModel.markUnread(it)
},
onStarred = {
readingViewModel.markStarred(it)
},
onNextArticle = {
if (readingUiState.nextArticleId.isNotEmpty()) {
readingViewModel.initData(readingUiState.nextArticleId)
}
},
onFullContent = {
if (it) readingViewModel.renderFullContent()
else readingViewModel.renderDescriptionContent()
},
)
}
}
}
)
}
5 changes: 4 additions & 1 deletion app/src/main/java/me/ash/reader/ui/page/home/reading/ReadingViewModel.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,20 +140,22 @@ class ReadingViewModel @Inject constructor(
val cur = _readingUiState.value.articleWithFeed?.article
if (cur != null) {
var found = false
var prev = ""
for (item in pagingItems) {
if (item is ArticleFlowItem.Article) {
val itemId = item.articleWithFeed.article.id
if (itemId == cur.id) {
found = true
_readingUiState.update {
it.copy(nextArticleId = "")
it.copy(previousArticleId = prev, nextArticleId = "")
}
} else if (found) {
_readingUiState.update {
it.copy(nextArticleId = itemId)
}
break
}
prev = itemId
}
}
}
Expand All @@ -168,4 +170,5 @@ data class ReadingUiState(
val isLoading: Boolean = true,
val listState: LazyListState = LazyListState(),
val nextArticleId: String = "",
val previousArticleId: String = "",
)
2 changes: 1 addition & 1 deletion app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="@color/ic_launcher_background"/>
<background android:drawable="@color/ic_launcher_background_debug"/>
<foreground android:drawable="@drawable/ic_launcher_foreground"/>
<monochrome android:drawable="@drawable/ic_launcher_foreground"/>
</adaptive-icon>
Loading