3 |
2 |
3 |
6 |
7 | # StackLayoutManager
8 | StackLayoutManager is a lightweight and highly-customizable layout manager for RecyclerView which lays out views by using a [`TimeInterpolator`](https://developer.android.com/reference/android/animation/TimeInterpolator) object. This makes the views travel along the path that the interpolator provides, thus allowing us to create sophisticated transitions. Additionally, it supports setting a custom view transformation callback, which allows more elaborate transitions to be made through direct access to all transformation properties a view can have.
9 |
10 | 
11 |
12 | # Demo app
13 | You can download the demo APK from [here](https://github.com/DarkionAvey/StackLayoutManager/releases/download/v1/app-release.apk)
14 |
15 | # Installation
16 | StackLayoutManager is a single Kotlin file, so you just need to copy the [`StackLayoutManager.kt`](https://raw.githubusercontent.com/DarkionAvey/StackLayoutManager/master/stacklayoutmanager/src/main/java/library/StackLayoutManager.kt) file to your project and change the `package` declaration. That's it!
17 |
18 |
20 | * Since path approximate is only public on Oreo+, we use a backport
21 | * courtesy of alexjlockwood
22 | */
23 | public class FreePathInterpolator implements android.view.animation.Interpolator {
24 | // This governs how accurate the approximation of the Path is.
25 | private static final float PRECISION = 0.002f;
26 | private float[] mX;
27 | private float[] mY;
28 | private float mArcLength;
29 | /**
30 | * Create an interpolator for an arbitrary Path.
31 | *
32 | * @param path The Path to use to make the line representing the interpolator.
33 | */
34 | public FreePathInterpolator(Path path) {
35 | initPath(path);
36 | }
37 |
38 | private float[] approximate(Path p, float PRECISION) {
39 | if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
40 | return p.approximate(PRECISION);
41 | } else
42 | return PathCompat.approximate(p, PRECISION);
43 | }
44 |
45 | private void initPath(Path path) {
46 | float[] pointComponents = approximate(path, PRECISION);
47 |
48 | int numPoints = pointComponents.length / 3;
49 |
50 | mX = new float[numPoints];
51 | mY = new float[numPoints];
52 | mArcLength = 0;
53 | float prevX = 0;
54 | float prevY = 0;
55 | float prevFraction = 0;
56 | int componentIndex = 0;
57 | for (int i = 0; i < numPoints; i++) {
58 | float fraction = pointComponents[componentIndex++];
59 | float x = pointComponents[componentIndex++];
60 | float y = pointComponents[componentIndex++];
61 | if (fraction == prevFraction && x != prevX) {
62 | throw new IllegalArgumentException(
63 | "The Path cannot have discontinuity in the X axis.");
64 | }
65 | if (x < prevX) {
66 | throw new IllegalArgumentException("The Path cannot loop back on itself.");
67 | }
68 | mX[i] = x;
69 | mY[i] = y;
70 | mArcLength += Math.hypot(x - prevX, y - prevY);
71 | prevX = x;
72 | prevY = y;
73 | prevFraction = fraction;
74 | }
75 | }
76 |
77 | /**
78 | * Using the line in the Path in this interpolator that can be described as
79 | * y = f(x), finds the y coordinate of the line given t
80 | * as the x coordinate.
81 | *
82 | * @param t Treated as the x coordinate along the line.
83 | * @return The y coordinate of the Path along the line where x = t.
84 | */
85 | @Override
86 | public float getInterpolation(float t) {
87 | int startIndex = 0;
88 | int endIndex = mX.length - 1;
89 |
90 | // Return early if out of bounds
91 | if (t <= 0) {
92 | return mY[startIndex];
93 | } else if (t >= 1) {
94 | return mY[endIndex];
95 | }
96 |
97 | // Do a binary search for the correct x to interpolate between.
98 | while (endIndex - startIndex > 1) {
99 | int midIndex = (startIndex + endIndex) / 2;
100 | if (t < mX[midIndex]) {
101 | endIndex = midIndex;
102 | } else {
103 | startIndex = midIndex;
104 | }
105 | }
106 |
107 | float xRange = mX[endIndex] - mX[startIndex];
108 | if (xRange == 0) {
109 | return mY[startIndex];
110 | }
111 |
112 | float tInRange = t - mX[startIndex];
113 | float fraction = tInRange / xRange;
114 |
115 | float startY = mY[startIndex];
116 | float endY = mY[endIndex];
117 | return startY + (fraction * (endY - startY));
118 | }
119 |
120 | /**
121 | * Finds the x that provides the given y = f(x).
122 | *
123 | * @param y a value from (0,1) that is in this path.
124 | */
125 | public float getX(float y) {
126 | int startIndex = 0;
127 | int endIndex = mY.length - 1;
128 |
129 | // Return early if out of bounds
130 | if (y <= 0) {
131 | return mX[endIndex];
132 | } else if (y >= 1) {
133 | return mX[startIndex];
134 | }
135 |
136 | // Do a binary search for index that bounds the y
137 | while (endIndex - startIndex > 1) {
138 | int midIndex = (startIndex + endIndex) / 2;
139 | if (y < mY[midIndex]) {
140 | startIndex = midIndex;
141 | } else {
142 | endIndex = midIndex;
143 | }
144 | }
145 |
146 | float yRange = mY[endIndex] - mY[startIndex];
147 | if (yRange == 0) {
148 | return mX[startIndex];
149 | }
150 |
151 | float tInRange = y - mY[startIndex];
152 | float fraction = tInRange / yRange;
153 |
154 | float startX = mX[startIndex];
155 | float endX = mX[endIndex];
156 | return startX + (fraction * (endX - startX));
157 | }
158 |
159 | /**
160 | * Returns the arclength of the path we are interpolating.
161 | */
162 | public float getArcLength() {
163 | return mArcLength;
164 | }
165 |
166 | //https://gist.github.com/alexjlockwood/7d3685fe9ce7dcfde33112c4e6c5ce4f
167 | private static final class PathCompat {
168 | private static final int MAX_NUM_POINTS = 100;
169 | private static final int FRACTION_OFFSET = 0;
170 | private static final int X_OFFSET = 1;
171 | private static final int Y_OFFSET = 2;
172 | private static final int NUM_COMPONENTS = 3;
173 |
174 | private PathCompat() {
175 | }
176 |
177 | /**
178 | * Approximate the Path with a series of line segments.
179 | * This returns float[] with the array containing point components.
180 | * There are three components for each point, in order:
181 | *
Two points may share the same fraction along its length when there is 187 | * a move action within the Path.
188 | * 189 | * @param acceptableError The acceptable error for a line on the 190 | * Path. Typically this would be 0.5 so that 191 | * the error is less than half a pixel. 192 | * @return An array of components for points approximating the Path. 193 | */ 194 | @NonNull 195 | public static float[] approximate(@NonNull Path path, @FloatRange(from = 0f) float acceptableError) { 196 | if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) { 197 | return path.approximate(acceptableError); 198 | } 199 | if (acceptableError < 0) { 200 | throw new IllegalArgumentException("acceptableError must be greater than or equal to 0"); 201 | } 202 | // Measure the total length the whole pathData. 203 | final PathMeasure measureForTotalLength = new PathMeasure(path, false); 204 | float totalLength = 0; 205 | // The sum of the previous contour plus the current one. Using the sum here 206 | // because we want to directly subtract from it later. 207 | final List
8 | * Preview: https://raw.githubusercontent.com/DarkionAvey/StackLayoutManager/master/Showcase/gifs/log_decelerate_60_interpolator.webp
9 | */
10 | public class LogDecelerateInterpolator implements TimeInterpolator {
11 | private final float mBase;
12 | private final float mDrift;
13 | private final float mTimeScale;
14 | private final float mOutputScale;
15 |
16 | public LogDecelerateInterpolator(float base, int drift) {
17 | mBase = base;
18 | mDrift = drift;
19 | mTimeScale = 1f;
20 | mOutputScale = 1f / computeLog(1f);
21 | }
22 |
23 | private float computeLog(float t) {
24 | return 1f - (float) Math.pow(mBase, -t * mTimeScale) + (mDrift * t);
25 | }
26 |
27 | @Override
28 | public float getInterpolation(float t) {
29 | return computeLog(t) * mOutputScale;
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/stacklayoutmanager-extras/src/main/java/library/stacklayoutmanager/extras/layoutinterpolators/OvershootingInterpolator.kt:
--------------------------------------------------------------------------------
1 | package library.stacklayoutmanager.extras.layoutinterpolators
2 |
3 | import android.graphics.Path
4 |
5 | /**
6 | * Similar to OvershootInterpolator but this implementation
7 | * makes sure that the view stays inside the screen when
8 | * the interpolation reaches 1
9 | *
10 | * Preview: https://raw.githubusercontent.com/DarkionAvey/StackLayoutManager/master/Showcase/gifs/overshooting_interpolator.webp
11 | */
12 | class OvershootingInterpolator : FreePathInterpolator(layoutPath) {
13 | companion object {
14 | private val layoutPath: Path = Path().apply {
15 | //y is -1 to make sure that that the view doesn't remain
16 | // static at the bottom of the screen when vertical mode is activated
17 | // it basically means the view is displaced 1x its length offscreen
18 | moveTo(0f, -1f)
19 | //y = 1.05f means the overshoot should be 0.05f of the view's length
20 | quadTo(0.4f, 0.5f, 0.7f, 1.05f)
21 | lineTo(1f, 1f)
22 | }
23 | }
24 | }
--------------------------------------------------------------------------------
/stacklayoutmanager-extras/src/main/java/library/stacklayoutmanager/extras/layoutinterpolators/ReverseStackInterpolator.kt:
--------------------------------------------------------------------------------
1 | package library.stacklayoutmanager.extras.layoutinterpolators
2 |
3 | import android.content.res.Resources
4 | import android.graphics.Path
5 | import android.os.Build
6 | import android.util.TypedValue
7 | import android.view.View
8 | import android.view.animation.LinearInterpolator
9 | import library.StackLayoutManager
10 | import kotlin.math.max
11 |
12 | /**
13 | * This interpolator draws views in reverse
14 | *
15 | * Preview: https://raw.githubusercontent.com/DarkionAvey/StackLayoutManager/master/Showcase/gifs/reverse_interpolator.webp
16 | */
17 |
18 | class ReverseStackInterpolator : LinearInterpolator() {
19 | private val path = FreePathInterpolator(Path().apply {
20 | moveTo(0f, 0.9f)
21 | lineTo(1f, 0.95f)
22 | lineTo(2f, 3f)
23 | })
24 |
25 | object ReverseStackTransformer {
26 | private val maxTranslationZ by lazy {
27 | TypedValue.applyDimension(
28 | TypedValue.COMPLEX_UNIT_DIP,
29 | 20f,
30 | Resources.getSystem().displayMetrics
31 | )
32 | }
33 |
34 | fun transform(x: Float, v: View, stackLayoutManager: StackLayoutManager) {
35 | if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
36 | v.elevation = maxTranslationZ
37 | v.translationZ = (1f - x) * 2f
38 | }
39 | }
40 | }
41 |
42 | override fun getInterpolation(input: Float): Float {
43 | return max((0.95f + input * 0.05f).coerceAtLeast(0.95f), input)
44 | }
45 | }
--------------------------------------------------------------------------------
/stacklayoutmanager-extras/src/main/java/library/stacklayoutmanager/extras/transformers/RotationTransformer.kt:
--------------------------------------------------------------------------------
1 | package library.stacklayoutmanager.extras.transformers
2 |
3 | import android.graphics.Path
4 | import android.os.Build
5 | import android.view.View
6 | import library.StackLayoutManager
7 | import library.stacklayoutmanager.extras.layoutinterpolators.FreePathInterpolator
8 |
9 | /**
10 | * This transformer gives the same effect as the AOSP gallery home screen widget
11 | *
12 | * Preview: https://raw.githubusercontent.com/DarkionAvey/StackLayoutManager/master/Showcase/gifs/3d_transform.webp
13 | */
14 | object RotationTransformer {
15 | private val scalePath =
16 | FreePathInterpolator(
17 | Path().apply {
18 | moveTo(0f, 0.4f)
19 | lineTo(0.6f, 1f)
20 | lineTo(1f, 1f)
21 | })
22 |
23 | private val rotationPath =
24 | FreePathInterpolator(
25 | Path().apply {
26 | moveTo(0f, 0f)
27 | //rotation is stopped past 60%
28 | lineTo(0.6f, 1f)
29 | lineTo(1f, 1f)
30 | })
31 |
32 | fun transform(x: Float, v: View, stackLayoutManager: StackLayoutManager) {
33 | if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
34 | v.translationZ = 0f
35 | }
36 | val scale = scalePath.getInterpolation(1f - x)
37 | val rotation = 1f - rotationPath.getInterpolation(1f - x)
38 | v.pivotY = v.height.toFloat() / 2f
39 | v.pivotX = v.width.toFloat() / 2f
40 | //using rotation to reduce scale
41 | //ensures that all of the view remains
42 | //inside the screen while transforming
43 | v.scaleX = scale * (1f - rotation)
44 | v.scaleY = scale * (1f - rotation)
45 | if (stackLayoutManager.horizontalLayout)
46 | v.rotationY = rotation * 90f
47 | else v.rotationX = -rotation * 90f
48 | }
49 | }
--------------------------------------------------------------------------------
/stacklayoutmanager-extras/src/main/java/library/stacklayoutmanager/extras/transformers/ScaleInOnlyTransformer.kt:
--------------------------------------------------------------------------------
1 | package library.stacklayoutmanager.extras.transformers
2 |
3 | import android.graphics.Path
4 | import android.view.View
5 | import library.StackLayoutManager
6 | import library.stacklayoutmanager.extras.layoutinterpolators.FreePathInterpolator
7 |
8 | /**
9 | * This transformer scales the view only during entry
10 | *
11 | * Preview: https://raw.githubusercontent.com/DarkionAvey/StackLayoutManager/master/Showcase/gifs/scale_in_transform.webp
12 | */
13 | object ScaleInOnlyTransformer {
14 | private val scalePath =
15 | FreePathInterpolator(
16 | Path().apply {
17 | //0.7f is the minimum scale
18 | moveTo(0f, 0.7f)
19 | lineTo(1f, 1f)
20 | })
21 |
22 | fun transform(x: Float, v: View, stackLayoutManager: StackLayoutManager) {
23 | StackLayoutManager.ElevationTransformer.transform(x, v, stackLayoutManager)
24 | val scale = if (x <= 0f) 1f else scalePath.getInterpolation(1f - kotlin.math.abs(x))
25 | v.scaleX = scale
26 | v.scaleY = scale
27 | }
28 | }
--------------------------------------------------------------------------------
/stacklayoutmanager-extras/src/main/java/library/stacklayoutmanager/extras/transformers/ScaleOutOnlyTransformer.kt:
--------------------------------------------------------------------------------
1 | package library.stacklayoutmanager.extras.transformers
2 |
3 | import android.graphics.Path
4 | import android.view.View
5 | import library.StackLayoutManager
6 | import library.stacklayoutmanager.extras.layoutinterpolators.FreePathInterpolator
7 |
8 | /**
9 | * This transformer gives the same effect as the Shazam android app (an old version, global chart cards)
10 | *
11 | * Preview: https://raw.githubusercontent.com/DarkionAvey/StackLayoutManager/master/Showcase/gifs/scale_out_transform.webp
12 | */
13 | object ScaleOutOnlyTransformer {
14 | private val scalePath =
15 | FreePathInterpolator(
16 | Path().apply {
17 | //0.7f is the minimum scale
18 | moveTo(0f, 0.7f)
19 | lineTo(1f, 1f)
20 | })
21 |
22 | fun transform(x: Float, v: View, stackLayoutManager: StackLayoutManager) {
23 | StackLayoutManager.ElevationTransformer.transform(x, v, stackLayoutManager)
24 | val scale = if (x > 0f) 1f else scalePath.getInterpolation(1f - kotlin.math.abs(x))
25 | v.scaleX = scale
26 | v.scaleY = scale
27 | }
28 | }
--------------------------------------------------------------------------------
/stacklayoutmanager-extras/src/main/java/library/stacklayoutmanager/extras/transformers/ScaleTransformer.kt:
--------------------------------------------------------------------------------
1 | package library.stacklayoutmanager.extras.transformers
2 |
3 | import android.graphics.Path
4 | import android.view.View
5 | import library.StackLayoutManager
6 | import library.stacklayoutmanager.extras.layoutinterpolators.FreePathInterpolator
7 |
8 | /**
9 | * This transformer scales the view during entry and exit
10 | *
11 | * Preview: https://raw.githubusercontent.com/DarkionAvey/StackLayoutManager/master/Showcase/gifs/scale_in_out.webp
12 | */
13 | object ScaleTransformer {
14 | private val scalePath =
15 | FreePathInterpolator(
16 | Path().apply {
17 | //0.7f is the minimum scale
18 | moveTo(0f, 0.7f)
19 | lineTo(1f, 1f)
20 | })
21 |
22 | fun transform(x: Float, v: View, stackLayoutManager: StackLayoutManager) {
23 | StackLayoutManager.ElevationTransformer.transform(x, v, stackLayoutManager)
24 | val scale = if (x == 0f) 1f else scalePath.getInterpolation(1f - kotlin.math.abs(x))
25 | v.scaleX = scale
26 | v.scaleY = scale
27 | }
28 | }
--------------------------------------------------------------------------------
/stacklayoutmanager/.gitignore:
--------------------------------------------------------------------------------
1 | /build
--------------------------------------------------------------------------------
/stacklayoutmanager/build.gradle:
--------------------------------------------------------------------------------
1 | plugins {
2 | id 'com.android.library'
3 | }
4 | apply plugin: 'kotlin-android'
5 |
6 | android {
7 | compileSdkVersion 30
8 | buildToolsVersion "30.0.3"
9 |
10 | defaultConfig {
11 | minSdkVersion 16
12 | targetSdkVersion 30
13 | versionCode 1
14 | versionName "1.0"
15 | consumerProguardFiles "consumer-rules.pro"
16 | }
17 |
18 | buildTypes {
19 | release {
20 | minifyEnabled false
21 | proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
22 | }
23 | }
24 | compileOptions {
25 | sourceCompatibility JavaVersion.VERSION_1_7
26 | targetCompatibility JavaVersion.VERSION_1_7
27 | }
28 |
29 | }
30 |
31 | dependencies {
32 | compileOnly 'androidx.appcompat:appcompat:1.3.1'
33 | compileOnly "androidx.recyclerview:recyclerview:1.2.1"
34 | compileOnly "androidx.core:core-ktx:1.6.0"
35 | compileOnly "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
36 |
37 | }
38 | repositories {
39 | mavenCentral()
40 | }
--------------------------------------------------------------------------------
/stacklayoutmanager/consumer-rules.pro:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DarkionAvey/StackLayoutManager/983fb34c0459633723c230b88221f60730cf60a9/stacklayoutmanager/consumer-rules.pro
--------------------------------------------------------------------------------
/stacklayoutmanager/proguard-rules.pro:
--------------------------------------------------------------------------------
1 | # Add project specific ProGuard rules here.
2 | # You can control the set of applied configuration files using the
3 | # proguardFiles setting in build.gradle.
4 | #
5 | # For more details, see
6 | # http://developer.android.com/guide/developing/tools/proguard.html
7 |
8 | # If your project uses WebView with JS, uncomment the following
9 | # and specify the fully qualified class name to the JavaScript interface
10 | # class:
11 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview {
12 | # public *;
13 | #}
14 |
15 | # Uncomment this to preserve the line number information for
16 | # debugging stack traces.
17 | #-keepattributes SourceFile,LineNumberTable
18 |
19 | # If you keep the line number information, uncomment this to
20 | # hide the original source file name.
21 | #-renamesourcefileattribute SourceFile
--------------------------------------------------------------------------------
/stacklayoutmanager/src/main/AndroidManifest.xml:
--------------------------------------------------------------------------------
1 |
2 |