@apexnative/navigation 1.0.0-alpha.1 → 1.0.0-alpha.11

package/android/src/main/java/dev/apexnative/navigation/views/element/animators/SharedAnimatorFactory.kt

@@ -1,70 +1,85 @@
 package dev.apexnative.navigation.views.element.animators
 
-import android.animation.Animator
 import android.view.View
 import android.widget.ImageView
-import com.facebook.react.views.image.ReactImageView
 import com.facebook.react.views.text.ReactTextView
-import com.facebook.react.views.view.ReactViewGroup
 import dev.apexnative.navigation.options.SharedElementTransitionOptions
 import dev.apexnative.navigation.views.animations.AnimationRules
 import dev.apexnative.navigation.views.animations.Curves
-import dev.apexnative.navigation.views.element.TransitionLayer
+import dev.apexnative.navigation.views.element.elementSkipped
+import dev.apexnative.navigation.views.element.pairName
 
 /**
- * The animator of a shared element by the kinds of its two views, chosen by explicit classes, never by reflection:
- * texts (`TextChangeAnimator`, the module), React views with children (`ViewChangeAnimator`, the module; a failed
- * picture flies as a view without children), React images ([ReactImageAnimator]), other images ([ImageMatrixAnimator]),
- * any other view ([PlainViewAnimator]). The animator gets the pair's duration (else the fallback, the screen's fade),
- * its delay and its curve here, each of its own (a spring in real time); an `AnimatorSet` around it never sets them.
- * Main thread only.
+ * The flight of a shared pair, as on iOS: a copy drawn in the transition's layer, chosen by the kinds of the two views,
+ * by explicit classes, never by reflection — texts ([TextMorph]), images ([ImageMorph]; one without an image to fit
+ * flies as a view), any other views ([ViewMorph]). The views themselves are neither moved nor changed. The animator
+ * gets the pair's duration (else the fallback, the screen's fade), its delay and its curve here, each of its own (a
+ * spring in real time); an `AnimatorSet` around it never sets them. Main thread only.
  */
 internal object SharedAnimatorFactory {
-    /**
-     * A pair's animator, and how it shows the pair: by pictures in the layer's overlay while `to` is hidden (the
-     * modules), or by moving `to` itself, which shows from the start of the flight.
-     */
-    class Flight(val animator: Animator, val drawsPictures: Boolean)
+    /** A pair's animator and the copy it moves. */
+    class Flight(val animator: MoveAnimator, val picture: FlightPicture)
 
     /**
-     * The flight of the pair [from] → [to]; [to] is in [layer] at its margins, at its real alpha (the pictures are
-     * taken now). [toParent] is the parent [to] had in its screen. None: the pair doesn't fly (a text that didn't
-     * change, a picture that can't be taken, no place).
+     * The flight of the pair [from] → [to] in [layer], its pictures taken now; a view or an image shows only the part
+     * its parents up to the view of its screen ([fromRoot], [toRoot]) leave visible, a text shows whole, as on iOS.
+     * None: the pair doesn't fly — a text that doesn't change, or, with a line in [log], a view without a size or a
+     * picture that can't be taken.
      */
     fun create(
         from: View,
         to: View,
-        toParent: View?,
-        layer: TransitionLayer,
+        fromRoot: View?,
+        toRoot: View?,
+        layer: View,
         options: SharedElementTransitionOptions,
         fallbackDuration: Long,
         log: (String) -> Unit,
     ): Flight? {
-        val flight = when {
-            from is ReactTextView && to is ReactTextView -> pictures(
-                TextChangeAnimator(from, to).takeIf { it.shouldAnimate() }?.create(options),
-            )
-            hasChildren(from) || hasChildren(to) -> pictures(
-                ViewChangeAnimator(from, to).takeIf { it.shouldAnimate() }?.create(options),
-            ) ?: moves(PlainViewAnimator(from, to, layer).create())
-            from is ReactImageView && to is ReactImageView -> moves(ReactImageAnimator(from, to, layer).create())
-            from is ImageView && to is ImageView -> moves(
-                ImageMatrixAnimator(from, to, layer, from.parent as? View, toParent, options.toId.get(""), log)
-                    .create(),
-            )
-            else -> moves(PlainViewAnimator(from, to, layer).create())
-        } ?: return null
-        val animator = flight.animator
+        val name = pairName(options.fromId.get(""), options.toId.get(""))
+        if (from.width <= 0 || from.height <= 0 || to.width <= 0 || to.height <= 0) {
+            elementSkipped(name, "a view of the pair has no size, it isn't laid out", log)
+            return null
+        }
+        val picture = if (from is ReactTextView && to is ReactTextView) {
+            val text = TextMorph.of(from, to, layer) ?: return noPicture(name, log)
+            if (!text.changes) return null
+            text
+        } else {
+            val image = if (from is ImageView && to is ImageView) {
+                ImageMorph.of(from, to, fromRoot, toRoot, layer)
+            } else {
+                null
+            }
+            image ?: ViewMorph.of(from, to, fromRoot, toRoot, layer) ?: return noPicture(name, log)
+        }
+        val animator = MoveAnimator().apply {
+            element = name
+            onStart {
+                picture.shown = true
+                picture.update(0f, curve.getInterpolation(0f))
+                layer.invalidate()
+            }
+            onFrame {
+                picture.update(it, curve.getInterpolation(it))
+                layer.invalidate()
+            }
+            // A flight that landed keeps its last frame until the transition takes the layer away: the screens may
+            // still move. A stopped one draws nothing more.
+            onEnd {
+                if (!landed) picture.shown = false
+                layer.invalidate()
+            }
+        }
         val duration = AnimationRules.durationOf(options.duration.get(null), fallbackDuration)
         animator.duration = duration
         animator.startDelay = AnimationRules.delayOf(options.startDelay.get(null))
         animator.interpolator = Curves.of(options.interpolation, duration)
-        return flight
+        return Flight(animator, picture)
     }
 
-    private fun pictures(animator: Animator?): Flight? = animator?.let { Flight(it, drawsPictures = true) }
-
-    private fun moves(animator: Animator?): Flight? = animator?.let { Flight(it, drawsPictures = false) }
-
-    private fun hasChildren(view: View): Boolean = view is ReactViewGroup && view.childCount > 0
+    private fun noPicture(name: String, log: (String) -> Unit): Flight? {
+        elementSkipped(name, "no picture of a view of the pair can be taken", log)
+        return null
+    }
 }

package/android/src/main/java/dev/apexnative/navigation/views/element/animators/TextMorph.kt

@@ -0,0 +1,176 @@
+package dev.apexnative.navigation.views.element.animators
+
+import android.graphics.Canvas
+import android.graphics.Picture
+import android.graphics.PointF
+import android.text.Layout
+import android.view.View
+import android.widget.TextView
+import com.facebook.react.views.text.ReactTextView
+import dev.apexnative.navigation.utils.TextViewUtils
+import dev.apexnative.navigation.views.animations.ValueInterpolation
+import kotlin.math.abs
+import kotlin.math.min
+import kotlin.math.roundToInt
+
+/**
+ * The text moves as two pictures of itself, of the text that goes away and of the text that comes, the same text or
+ * another. Both keep their proportions, scaled by the font size from a point of the first line, and one turns into the
+ * other in a quarter of the move: at its start when the text grows, at its end when it shrinks, so the larger picture
+ * shows most of the way (as on iOS). Each text is where it is drawn, at the scale and angle its parents and its own
+ * properties give it; the angle goes along the shorter arc ([FlightGeometry]). The pictures are drawing commands, not
+ * pixels: they stay sharp at any scale and keep the colors, emoji and background of the text.
+ */
+internal class TextMorph private constructor(private val start: TextPicture, private val end: TextPicture) :
+    FlightPicture() {
+    /** Whether the text changes on the way: another text, another size, or drawn elsewhere. */
+    val changes: Boolean
+        get() = start.text != end.text || start.fontSize != end.fontSize || start.drawnElsewhere(end)
+
+    private val grows = end.shownSize >= start.shownSize
+    private var progress = 0f
+    private var time = 0f
+    private var changeOver = 0f
+    private var mirrorX = 1f
+    private var mirrorY = 1f
+
+    override fun update(time: Float, progress: Float) {
+        this.progress = progress
+        this.time = time
+        val changeOverStart = if (grows) 0f else 1f - CHANGE_OVER
+        changeOver = ((time - changeOverStart) / CHANGE_OVER).coerceIn(0f, 1f)
+    }
+
+    override fun draw(canvas: Canvas) {
+        val x = start.position.x + (end.position.x - start.position.x) * progress
+        val y = start.position.y + (end.position.y - start.position.y) * progress
+        val fontSize = start.shownSize + (end.shownSize - start.shownSize) * progress
+        val rotation = ValueInterpolation.angle(start.rotation, end.rotation, progress, time)
+        mirrorX = ValueInterpolation.number(start.mirrorX, end.mirrorX, progress, time)
+        mirrorY = ValueInterpolation.number(start.mirrorY, end.mirrorY, progress, time)
+        draw(canvas, start, x, y, fontSize, rotation, 1f - changeOver)
+        draw(canvas, end, x, y, fontSize, rotation, changeOver)
+    }
+
+    private fun draw(
+        canvas: Canvas,
+        text: TextPicture,
+        x: Float,
+        y: Float,
+        fontSize: Float,
+        rotation: Float,
+        shown: Float,
+    ) {
+        val alpha = (shown * text.alpha * 255).roundToInt().coerceIn(0, 255)
+        if (alpha == 0) return
+        val scale = fontSize / text.fontSize
+        val count = canvas.save()
+        canvas.translate(x, y)
+        canvas.rotate(rotation)
+        canvas.scale(scale * mirrorX, scale * mirrorY)
+        canvas.translate(-text.anchor.x, -text.anchor.y)
+        // The picture fades as a whole: its letters and background don't show through each other.
+        if (alpha < 255) {
+            canvas.saveLayerAlpha(0f, 0f, text.picture.width.toFloat(), text.picture.height.toFloat(), alpha)
+        }
+        canvas.drawPicture(text.picture)
+        canvas.restoreToCount(count)
+    }
+
+    companion object {
+        private const val CHANGE_OVER = 0.25f
+
+        /**
+         * The morph of [from] into [to] in [layer]; none when a text isn't laid out or its picture can't be taken.
+         * Texts that line up the same way go from that point of their first lines (the same text lies over itself);
+         * others from the start of the line, as on iOS: a centered text no longer sticks out of a text at the start.
+         */
+        fun of(from: ReactTextView, to: ReactTextView, layer: View): TextMorph? {
+            val fromLayout = from.layout ?: return null
+            val toLayout = to.layout ?: return null
+            val edge = lineEdge(fromLayout).takeIf { it == lineEdge(toLayout) } ?: LineEdge.START
+            val start = TextPicture.of(from, LayerPlace.of(from, layer), edge) ?: return null
+            val end = TextPicture.of(to, LayerPlace.of(to, layer), edge) ?: return null
+            return TextMorph(start, end)
+        }
+    }
+}
+
+// A text's picture and its text, the point of its first line it is scaled from (in the view) and where that point is
+// drawn in the transition layer, its font size, the scale and angle it is drawn at, and its opacity.
+private class TextPicture(
+    val text: String,
+    val picture: Picture,
+    val anchor: PointF,
+    val position: PointF,
+    val fontSize: Float,
+    val scale: Float,
+    val rotation: Float,
+    val mirrorX: Float,
+    val mirrorY: Float,
+    val alpha: Float
+) {
+    /** The font size it shows at. */
+    val shownSize: Float get() = fontSize * scale
+
+    /** Whether [other] is drawn elsewhere, larger or smaller, or turned. */
+    fun drawnElsewhere(other: TextPicture): Boolean =
+        abs(position.x - other.position.x) > SAME_PLACE || abs(position.y - other.position.y) > SAME_PLACE ||
+            abs(scale - other.scale) > SAME_SCALE || abs(rotation - other.rotation) > SAME_ANGLE ||
+            mirrorX != other.mirrorX || mirrorY != other.mirrorY
+
+    companion object {
+        // Within half a pixel, a thousandth of the scale and a tenth of a degree: the same.
+        private const val SAME_PLACE = 0.5f
+        private const val SAME_SCALE = 0.001f
+        private const val SAME_ANGLE = 0.1f
+
+        fun of(view: TextView, place: LayerPlace, edge: LineEdge): TextPicture? {
+            val layout = view.layout ?: return null
+            val fontSize = TextViewUtils.getTextSize(view).takeIf { it > 0 } ?: view.textSize
+            if (view.width <= 0 || view.height <= 0 || layout.lineCount == 0 || fontSize <= 0) return null
+            // Without a picture (recording failed) the text goes to its place at once, as a different text does.
+            val picture = recordPicture(view) ?: return null
+            val anchor = PointF(
+                view.totalPaddingLeft + edgeX(layout, edge),
+                view.totalPaddingTop + layout.getLineBaseline(0).toFloat()
+            )
+            val position = place.point(anchor.x, anchor.y)
+            val scale = min(abs(place.scaleX), abs(place.scaleY))
+            return TextPicture(
+                view.text.toString(), picture, anchor, PointF(position[0], position[1]), fontSize, scale,
+                place.rotation,
+                mirrorX = if (place.scaleX < 0) -1f else 1f,
+                mirrorY = if (place.scaleY < 0) -1f else 1f,
+                alpha = view.alpha,
+            )
+        }
+
+        // That point of the first line, in the direction of the text.
+        private fun edgeX(layout: Layout, edge: LineEdge): Float {
+            val left = layout.getLineLeft(0)
+            val right = layout.getLineRight(0)
+            val rightToLeft = layout.getParagraphDirection(0) == Layout.DIR_RIGHT_TO_LEFT
+            return when (edge) {
+                LineEdge.CENTER -> (left + right) / 2
+                LineEdge.START -> if (rightToLeft) right else left
+                LineEdge.END -> if (rightToLeft) left else right
+            }
+        }
+    }
+}
+
+// Where the lines of a text line up: their start, center or end, in the direction of the text.
+private enum class LineEdge { START, CENTER, END }
+
+// ALIGN_LEFT and ALIGN_RIGHT are hidden constants, for Gravity.LEFT and RIGHT.
+private fun lineEdge(layout: Layout): LineEdge {
+    val rightToLeft = layout.getParagraphDirection(0) == Layout.DIR_RIGHT_TO_LEFT
+    return when (layout.getParagraphAlignment(0).name) {
+        "ALIGN_CENTER" -> LineEdge.CENTER
+        "ALIGN_OPPOSITE" -> LineEdge.END
+        "ALIGN_LEFT" -> if (rightToLeft) LineEdge.END else LineEdge.START
+        "ALIGN_RIGHT" -> if (rightToLeft) LineEdge.START else LineEdge.END
+        else -> LineEdge.START
+    }
+}

package/android/src/main/java/dev/apexnative/navigation/views/element/animators/ViewMorph.kt

@@ -0,0 +1,108 @@
+package dev.apexnative.navigation.views.element.animators
+
+import android.graphics.Canvas
+import android.graphics.Paint
+import android.graphics.Picture
+import android.graphics.PorterDuff
+import android.graphics.PorterDuffXfermode
+import android.graphics.RectF
+import android.view.View
+import dev.apexnative.navigation.utils.borderRadius
+import kotlin.math.roundToInt
+
+/**
+ * A shared view moves as two pictures of itself, as on iOS: of the view that goes away and of the one that comes, each
+ * with its children. The copy goes from where the one is drawn — its center, its size at the scale it is drawn at, its
+ * angle and corner radius — to where the other is drawn in its screen ([FlightGeometry]), the angle along the shorter
+ * arc; both pictures fill it, and the picture of the destination shows over the other on the way. Where a parent cuts
+ * a view (`overflow: hidden`, a scroll view, the screen's edge), only the part that shows flies, the mask going from
+ * one end's part to the other's ([FlightMask]), as on iOS. The pictures are drawing commands, taken before the views
+ * hide: an avatar's letter grows sharp, and what changes in the views meanwhile shows when they are back.
+ */
+internal class ViewMorph private constructor(
+    private val start: ViewPicture,
+    private val end: ViewPicture,
+) : FlightPicture() {
+    private val flight = FlightGeometry(start.end, end.end)
+    private val cut = FlightMask.of(start.visible, end.visible)?.let(::MaskCut)
+    private var at = start.end
+    private var progress = 0f
+    private val rect = RectF()
+    private val maskPaint = Paint(Paint.ANTI_ALIAS_FLAG)
+    // What is drawn over the mask keeps only the mask's pixels: the corners stay smooth (a clip path on the hardware
+    // canvas is not anti-aliased).
+    private val contentPaint = Paint().apply { xfermode = PorterDuffXfermode(PorterDuff.Mode.SRC_IN) }
+
+    override fun update(time: Float, progress: Float) {
+        this.progress = progress
+        at = flight.at(progress, time)
+        cut?.update(time, progress)
+    }
+
+    override fun draw(canvas: Canvas) {
+        rect.set(-at.width / 2, -at.height / 2, at.width / 2, at.height / 2)
+        if (rect.isEmpty) return
+        val radius = lerp(start.radius, end.radius)
+        // The copy turns about its center, mirrored where a view is.
+        canvas.translate(at.centerX, at.centerY)
+        canvas.rotate(at.rotation)
+        canvas.scale(at.mirrorX, at.mirrorY)
+        canvas.saveLayer(rect, null)
+        canvas.drawRoundRect(rect, radius, radius, maskPaint)
+        cut?.draw(canvas, rect)
+        canvas.saveLayer(rect, contentPaint)
+        draw(canvas, start, start.alpha)
+        draw(canvas, end, end.alpha * progress)
+    }
+
+    // A picture fills the copy, as on iOS.
+    private fun draw(canvas: Canvas, view: ViewPicture, shown: Float) {
+        val alpha = (shown * 255).roundToInt().coerceIn(0, 255)
+        if (alpha == 0) return
+        val width = view.picture.width.toFloat()
+        val height = view.picture.height.toFloat()
+        val count = canvas.save()
+        canvas.translate(rect.left, rect.top)
+        canvas.scale(rect.width() / width, rect.height() / height)
+        // The picture fades as a whole: its children and background don't show through each other.
+        if (alpha < 255) canvas.saveLayerAlpha(0f, 0f, width, height, alpha)
+        canvas.drawPicture(view.picture)
+        canvas.restoreToCount(count)
+    }
+
+    private fun lerp(from: Float, to: Float) = from + (to - from) * progress
+
+    companion object {
+        /**
+         * The morph of [from] into [to] in [layer], each cut by its parents up to the view of its screen ([fromRoot],
+         * [toRoot]); none when a picture of either can't be taken.
+         */
+        fun of(from: View, to: View, fromRoot: View?, toRoot: View?, layer: View): ViewMorph? {
+            val start = ViewPicture.of(from, LayerPlace.of(from, layer, fromRoot)) ?: return null
+            val end = ViewPicture.of(to, LayerPlace.of(to, layer, toRoot)) ?: return null
+            return ViewMorph(start, end)
+        }
+    }
+}
+
+// A view's picture, where it is drawn in the transition layer, its corner radius there, its opacity and the part of it
+// that shows.
+private class ViewPicture(
+    val picture: Picture,
+    val end: FlightEnd,
+    val radius: Float,
+    val alpha: Float,
+    val visible: VisiblePart,
+) {
+    companion object {
+        fun of(view: View, place: LayerPlace): ViewPicture? {
+            if (view.width <= 0 || view.height <= 0) return null
+            val picture = recordPicture(view) ?: return null
+            val end = place.end(view.width, view.height)
+            val radius = view.borderRadius
+            return ViewPicture(
+                picture, end, radius * end.scale, view.alpha, place.visible(view.width, view.height, radius),
+            )
+        }
+    }
+}

package/android/src/main/java/dev/apexnative/navigation/views/sidemenu/SideMenuView.kt

@@ -48,15 +48,24 @@ internal class SideMenuView(context: Context) : DrawerLayout(context), SideMenuM
         center.addView(content, FrameLayout.LayoutParams(MATCH_PARENT, MATCH_PARENT))
     }
 
-    /** The part of [side], holding [content]: a drawer at that edge, the whole height of the side menu. */
-    fun addPart(side: Side, content: View): FrameLayout {
+    /**
+     * The part of [side], empty until [fillPart]: a drawer at that edge, the whole height of the side menu. It opens,
+     * closes and takes its width and lock without its content.
+     */
+    fun addPart(side: Side): FrameLayout {
         val part = FrameLayout(context)
-        part.addView(content, FrameLayout.LayoutParams(MATCH_PARENT, MATCH_PARENT))
         addView(part, LayoutParams(MATCH_PARENT, MATCH_PARENT, gravityOf(side)))
         parts[side.ordinal] = part
         return part
     }
 
+    /** [content] fills the part of [side], once. */
+    fun fillPart(side: Side, content: View) {
+        val part = partOf(side) ?: return
+        if (content.parent === part) return
+        part.addView(content, FrameLayout.LayoutParams(MATCH_PARENT, MATCH_PARENT))
+    }
+
     /** The part of [side]; none when the layout has no menu there. */
     fun partOf(side: Side): FrameLayout? = parts[side.ordinal]
 

package/android/src/main/java/dev/apexnative/navigation/views/stack/ScreenEdge.kt

@@ -0,0 +1,45 @@
+package dev.apexnative.navigation.views.stack
+
+import android.graphics.Bitmap
+import android.graphics.Canvas
+import android.graphics.drawable.BitmapDrawable
+import android.graphics.drawable.Drawable
+import android.view.View
+
+/**
+ * What fills the room beside a moving screen in a transition (`StackLayout.extendEdge`), where the system's
+ * transitions between activities stretch a window's edge (`<extend>` of `activity_open_*` and `activity_close_*`): the
+ * column of pixels at the screen's edge, stretched across the room, as the system stretches the window's. What the
+ * screen shows there goes on beside it — a gradient its content draws, not only its own background. Taken at the start
+ * of every push and pop. Main thread only.
+ */
+internal object ScreenEdge {
+    /**
+     * The column of pixels at [view]'s left edge ([left]) or right edge, made to be stretched; its background when the
+     * screen isn't laid out as it shows ([laidOut]: not after a rotation while it was out of the stack) or can't be drawn
+     * in software (a `HARDWARE` bitmap in it, a view that fails to draw), none without one either.
+     */
+    fun pictureOf(view: View, left: Boolean, laidOut: Boolean): Drawable? =
+        (if (laidOut) columnOf(view, left) else null) ?: backgroundOf(view)
+
+    // One pixel wide and as tall as the screen: the view draws itself into a canvas that keeps that column only. Any
+    // view of the screen may fail to draw in software (a hardware bitmap, a view that wants a hardware canvas): the
+    // screen's background stands in then, as the transition must go on.
+    private fun columnOf(view: View, left: Boolean): Drawable? {
+        val width = view.width
+        val height = view.height
+        if (width <= 0 || height <= 0) return null
+        return try {
+            val column = Bitmap.createBitmap(1, height, Bitmap.Config.ARGB_8888)
+            val canvas = Canvas(column)
+            if (!left) canvas.translate(-(width - 1).toFloat(), 0f)
+            view.draw(canvas)
+            BitmapDrawable(view.resources, column)
+        } catch (e: RuntimeException) {
+            null
+        }
+    }
+
+    private fun backgroundOf(view: View): Drawable? =
+        view.background?.constantState?.newDrawable(view.resources)?.mutate()
+}

package/android/src/main/java/dev/apexnative/navigation/views/stack/StackLayout.kt

@@ -2,6 +2,8 @@ package dev.apexnative.navigation.views.stack
 
 import android.annotation.SuppressLint
 import android.content.Context
+import android.graphics.Canvas
+import android.graphics.drawable.Drawable
 import android.view.Gravity
 import android.view.View
 import android.view.ViewGroup
@@ -18,7 +20,8 @@ import java.util.WeakHashMap
  * moves between its places without leaving it, so it doesn't leave and join the window again; a covered screen that
  * comes back gets the last window insets the stack got before it joins, and nothing asks the window to send them again
  * (CoordinatorLayout asks for insets only as it joins the window itself and only with `fitsSystemWindows`, which this
- * view doesn't set). Main thread only.
+ * view doesn't set). In a transition of the stack's own the bar is drawn with the screen it goes with
+ * ([barTravels]). Main thread only.
  */
 @SuppressLint("ViewConstructor")
 class StackLayout(context: Context) : CoordinatorLayout(context) {
@@ -134,4 +137,140 @@ class StackLayout(context: Context) : CoordinatorLayout(context) {
         requestLayout()
         invalidate()
     }
+
+    // The edges of the screens in a transition: drawn beside each, under it, where it moves and as transparent as it.
+    private val edges = HashMap<View, Edge>()
+
+    private class Edge(val picture: Drawable, val width: Int, val atStart: Boolean)
+
+    /**
+     * [view] extends its start edge ([atStart]) or its end edge by [width] pixels while it moves, as the system's
+     * transitions between activities extend a window: the pixels at its edge, stretched, fill the room it moves away
+     * from, so the screen under it never shows at its edge. [dropEdge] ends it. Each frame of the move calls
+     * [edgesMoved].
+     */
+    fun extendEdge(view: View, atStart: Boolean, width: Int) {
+        val left = atStart != (layoutDirection == LAYOUT_DIRECTION_RTL)
+        // A screen put back for a pop keeps the size of its last layout until the next one: after a rotation while it was
+        // out of the stack, its pixels are of another width.
+        val picture = ScreenEdge.pictureOf(view, left, laidOut = view.width == this.width) ?: return
+        edges[view] = Edge(picture, width, left)
+        invalidate()
+    }
+
+    /** [view] moves no more: its edge goes. */
+    fun dropEdge(view: View) {
+        if (edges.remove(view) != null) invalidate()
+    }
+
+    /** A screen with an extended edge moved: the edges are drawn again where the screens are now. */
+    fun edgesMoved() {
+        if (edges.isNotEmpty()) invalidate()
+    }
+
+    // The bar's travel in a transition of the stack's own: the screen the bar goes with, the screen that leaves with the
+    // picture of the bar as it was, and whether that one lies over the bar (a pop).
+    private var barScreen: View? = null
+    private var barLeaving: View? = null
+    private var barPicture: Drawable? = null
+    private var leavingOver = false
+
+    /**
+     * The bar goes with [screen] in a transition of the stack's own: it is drawn as [screen] moves (its translation,
+     * scale and rotation around its pivot, its alpha). [picture], laid where the bar is, goes the same way with
+     * [leaving]: it is drawn right over that screen, outside its bounds too (a screen laid out under the bar). With
+     * [over] the leaving screen and its picture lie over the bar (a pop), else under it. Only the drawing moves: the
+     * bar's views and touches stay in place. [endBarTravel] ends it.
+     */
+    fun barTravels(screen: View, leaving: View?, picture: Drawable?, over: Boolean) {
+        barScreen = screen
+        barLeaving = leaving
+        barPicture = picture
+        leavingOver = over && leaving != null
+        invalidate()
+    }
+
+    /** The bar is drawn in its place again, over the screens; the picture goes. */
+    fun endBarTravel() {
+        if (barScreen == null) return
+        barScreen = null
+        barLeaving = null
+        barPicture = null
+        leavingOver = false
+        invalidate()
+    }
+
+    override fun dispatchDraw(canvas: Canvas) {
+        super.dispatchDraw(canvas)
+        // The screens' animators change only their own properties, which don't draw this view again: each frame of
+        // the bar's travel asks for the next.
+        if (barScreen != null) postInvalidateOnAnimation()
+    }
+
+    override fun drawChild(canvas: Canvas, child: View, drawingTime: Long): Boolean {
+        edges[child]?.let { drawEdge(canvas, child, it) }
+        val screen = barScreen ?: return super.drawChild(canvas, child, drawingTime)
+        // The leaving screen, while it is still here, and its picture; on a pop the bar right under them.
+        val leaving = barLeaving?.takeIf(::holds)
+        val under = leaving.takeIf { leavingOver }
+        if (child === topBar) {
+            if (under != null) return false
+            return drawWith(canvas, screen, topBar.left.toFloat(), topBar.top + topBar.translationY,
+                topBar.right.toFloat(), topBar.bottom + topBar.translationY) {
+                super.drawChild(canvas, topBar, drawingTime)
+            }
+        }
+        if (child === under && topBar.visibility == VISIBLE) {
+            drawWith(canvas, screen, topBar.left.toFloat(), topBar.top + topBar.translationY,
+                topBar.right.toFloat(), topBar.bottom + topBar.translationY) {
+                super.drawChild(canvas, topBar, drawingTime)
+            }
+        }
+        val drawn = super.drawChild(canvas, child, drawingTime)
+        val picture = barPicture
+        if (child === leaving && picture != null) {
+            val bounds = picture.bounds
+            drawWith(canvas, child, bounds.left.toFloat(), bounds.top.toFloat(), bounds.right.toFloat(),
+                bounds.bottom.toFloat()) {
+                picture.draw(canvas)
+                false
+            }
+        }
+        return drawn
+    }
+
+    // Draws with [screen]'s transform and alpha what [draw] draws within the bounds given, in this view's coordinates.
+    private fun drawWith(
+        canvas: Canvas,
+        screen: View,
+        left: Float,
+        top: Float,
+        right: Float,
+        bottom: Float,
+        draw: () -> Boolean,
+    ): Boolean {
+        val alpha = if (screen.visibility == VISIBLE) screen.alpha else 0f
+        if (alpha <= 0f) return false
+        val saved = canvas.save()
+        canvas.translate(screen.left.toFloat(), screen.top.toFloat())
+        canvas.concat(screen.matrix)
+        canvas.translate(-screen.left.toFloat(), -screen.top.toFloat())
+        if (alpha < 1f) canvas.saveLayerAlpha(left, top, right, bottom, (alpha * 255).toInt())
+        val drawn = draw()
+        canvas.restoreToCount(saved)
+        return drawn
+    }
+
+    // At the child's place to the fraction of a pixel, as its own translation draws it, and one pixel under it: no seam
+    // of the screen below shows between them.
+    private fun drawEdge(canvas: Canvas, child: View, edge: Edge) {
+        if (child.visibility != VISIBLE || child.alpha <= 0f) return
+        val x = if (edge.atStart) child.left + child.translationX - edge.width else child.right + child.translationX - 1f
+        val saved = canvas.save()
+        canvas.translate(x, child.top + child.translationY)
+        edge.picture.setBounds(0, 0, edge.width + 1, child.height)
+        edge.picture.alpha = (child.alpha * 255).toInt()
+        edge.picture.draw(canvas)
+        canvas.restoreToCount(saved)
+    }
 }