From 7c055efbf259e4f0048a02223fcdffb528f7948a Mon Sep 17 00:00:00 2001 From: Allan Wang Date: Tue, 27 Jun 2023 14:14:46 -0700 Subject: [PATCH 1/3] Add docs for compose --- .idea/misc.xml | 14 ++++++++++++-- .idea/vcs.xml | 34 ++++++++++++++++++++++++++++++++++ docs/Compose.md | 44 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 90 insertions(+), 2 deletions(-) create mode 100644 docs/Compose.md diff --git a/.idea/misc.xml b/.idea/misc.xml index 1afe3663e..08bf1e487 100644 --- a/.idea/misc.xml +++ b/.idea/misc.xml @@ -1,3 +1,4 @@ + + diff --git a/.idea/vcs.xml b/.idea/vcs.xml index 35eb1ddfb..fd7702ec9 100644 --- a/.idea/vcs.xml +++ b/.idea/vcs.xml @@ -1,5 +1,39 @@ + + + diff --git a/docs/Compose.md b/docs/Compose.md new file mode 100644 index 000000000..bb866744d --- /dev/null +++ b/docs/Compose.md @@ -0,0 +1,44 @@ +# Jetpack Compose + +Below are some findings and demos for jetpack compose during my explorations in this project. As with most implementation, I believe that anything is possible. This holds true with view implementations of the design below, though we will see that compose makes some elements considerably easier. + +All links to code snippets are permalinks, but feel free to view changes at HEAD in case there are updates. + +## Settings + +> [Settings code](https://github.com/AllanWang/Frost-for-Facebook/tree/f5b003298ee91056e86a63c1f50c25285af45c9b/app-compose/src/main/kotlin/com/pitchedapps/frost/compose/settings) + +Compose does not have any settings library, but it is actually very easy to do with [material `ListItem`s](https://m3.material.io/components/lists). This would also be easy with views + recyclerviews, though it seems like it is not being planned for MDC. With list items, we simply change the trailing content to provide what we need, be it a switch, checkbox, text, color selector, etc. + + + +For most older apps, the standard is to use android preference xmls to build layouts. There are some downsides: +1. They are primarily built to use shared preferences, which we may not use +2. Custom views require some more wrapping to integrate with preferences +3. We don't control the base layouts at all (though we can modify some via themes) +4. Material no longer supports them + +By converting to our own full implementation like in the snippet above, we have full control over the layouts, can add custom ones, and have all the benefits of compose to build relations between preferences, or between pages through the nav graph. + +## Animations + +### Stateless Animations + +Compose makes it easy to animate from one state value to another. For instance, if scale is 1.0 by default, but should be 1.5 when pressed, we simply use `animateFloatAsState` and provide the expected value. However, there are cases where we may want to start and stop at the same value. This is pretty straightforward with views (`View.animate()`, `ValueAnimator`, etc), though compose supports this too: + +We can look at the [overview graph](https://developer.android.com/jetpack/compose/animation/introduction#overview) and see some more basic building blocks, including `Animation` and `Animatable`. Both of these allow for initial values + velocity. Even if the initial and target values are the same, we can include velocity (or keyframes) to keep an animation going. + +You can see an example through our [shake](https://github.com/AllanWang/Frost-for-Facebook/blob/f5b003298ee91056e86a63c1f50c25285af45c9b/app-compose/src/main/kotlin/com/pitchedapps/frost/compose/effects/Shake.kt) effect. `shake()` is called on click, and shakes that happen before the animation ends will smoothly restart the effect, but from the current rotation value using spring animations. + +### Drag & Drop + +Dragging between two visual elements is done similarly with views and compose: + +* Replicate the element being dragged, and optionally hiding the original layout +* Ensure that the drag element can be drawn across the entire draggable region +* Provide reactions to the drag element when it hovers over other elements +* Make space for the dropped element and build the new layout after the transition is complete + +With compose, it is extremely easy to listen to global coordinates, and to add/alter visual elements immediately in the next frame. We simply have listeners for all offsets, and a composable that optionally draws content. The same is possible with views, but takes a bit more coordination to actually add and remove the views. For dragging specifically, compose provides helpers including `detectDragGesturesAfterLongPress`, which does most of the work needed. No need for a `SimpleOnGestureListener`. + +![Demo](https://user-images.githubusercontent.com/6251823/247897796-83a1ed67-d21a-4a4a-bef6-98c171fca655.mp4) \ No newline at end of file From 0f7369c75777c126949167571a4feac34000eb5f Mon Sep 17 00:00:00 2001 From: Allan Wang Date: Tue, 27 Jun 2023 14:21:08 -0700 Subject: [PATCH 2/3] Update Compose.md --- docs/Compose.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/Compose.md b/docs/Compose.md index bb866744d..5d053b131 100644 --- a/docs/Compose.md +++ b/docs/Compose.md @@ -41,4 +41,5 @@ Dragging between two visual elements is done similarly with views and compose: With compose, it is extremely easy to listen to global coordinates, and to add/alter visual elements immediately in the next frame. We simply have listeners for all offsets, and a composable that optionally draws content. The same is possible with views, but takes a bit more coordination to actually add and remove the views. For dragging specifically, compose provides helpers including `detectDragGesturesAfterLongPress`, which does most of the work needed. No need for a `SimpleOnGestureListener`. -![Demo](https://user-images.githubusercontent.com/6251823/247897796-83a1ed67-d21a-4a4a-bef6-98c171fca655.mp4) \ No newline at end of file +https://github.com/AllanWang/Frost-for-Facebook/assets/6251823/0cef497c-cbdc-4597-870f-a38ef8d23b35 + From 15799aaef9e8b415e968c7891a48b051e5bbf857 Mon Sep 17 00:00:00 2001 From: Allan Wang Date: Thu, 14 Dec 2023 20:53:57 -0800 Subject: [PATCH 3/3] Update README.md --- README.md | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/README.md b/README.md index 8865e028a..fa405cadb 100644 --- a/README.md +++ b/README.md @@ -11,16 +11,7 @@ alt="Get it on F-Droid" height="80">](https://f-droid.org/packages/com.pitchedapps.frost) -**This project is undergoing a full rewrite**. The latest snapshot of the old project is available at https://github.com/AllanWang/Frost-for-Facebook/tree/legacy. - -While a rewrite isn't necessary to keep the project going, I wanted to take some time to learn new things, and also to support some big features: - -* Views to compose. This will make things a lot more structured, and will simplify dynamic colors/themes, which I've included in my projects well before Material You. -* WebView to GeckoView. This will add support for web extensions, and provide more functionality. Admittedly, this has been a huge pain to learn, and there are things that are far easier with webviews, but I think I'm at a point where I've answered my main questions. - * Web extensions allows for actual ad blocks, and theme updates without pushing new apks -* I intend on adding notification support for friend requests, though that could have been done with the old build - -The direction I'm taking Frost v4.0.0 is to simplify a lot of things, and to leverage other extensions/libraries where possible. GeckoView also makes it easier to support multi account, in case I want to extend this beyond Facebook at some point in the future. +**This project is not actively maintained**. I'm occassionally updating the code to test things out, but the latest 'usable' snapshot of the old project is available at https://github.com/AllanWang/Frost-for-Facebook/tree/legacy. Until this is updated, the dev branch is not usable. ---