@apexnative/navigation 0.0.0-stage → 1.0.0-alpha.0

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

@@ -0,0 +1,179 @@
+package dev.apexnative.navigation.views.element.animators
+
+import android.animation.Animator
+import android.graphics.Canvas
+import android.graphics.ColorFilter
+import android.graphics.Picture
+import android.graphics.PixelFormat
+import android.graphics.PointF
+import android.graphics.drawable.Drawable
+import android.text.Layout
+import android.view.View
+import android.view.ViewGroup
+import android.widget.TextView
+import androidx.core.animation.doOnEnd
+import androidx.core.animation.doOnStart
+import com.facebook.react.views.text.ReactTextView
+import dev.apexnative.navigation.options.SharedElementTransitionOptions
+import dev.apexnative.navigation.utils.TextViewUtils
+import dev.apexnative.navigation.utils.ViewUtils
+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). The pictures are drawing commands, not pixels: they stay sharp at any scale and
+// keep the colors, emoji and background of the text. They are drawn in the overlay of the transition layer while `to`
+// is hidden.
+class TextChangeAnimator(from: View, to: View) : PropertyAnimatorCreator<ReactTextView>(from, to, ReactTextView::class.java) {
+    private val pictures by lazy { pictures() }
+
+    override fun shouldAnimateProperty(fromChild: ReactTextView, toChild: ReactTextView): Boolean {
+        val fromPlace = ViewUtils.getLocationOnScreen(from)
+        val toPlace = ViewUtils.getLocationOnScreen(to)
+        return (fromChild.text.toString() != toChild.text.toString() ||
+                TextViewUtils.getTextSize(fromChild) != TextViewUtils.getTextSize(toChild) || fromPlace != toPlace
+                ) && pictures != null
+    }
+
+    override fun create(options: SharedElementTransitionOptions): Animator {
+        val (start, end) = checkNotNull(pictures)
+        val layer = to.parent as ViewGroup
+        val drawable = TextMorphDrawable(start, end)
+        // Everything changes between the start and the end of the animation: a cancelled one ends too.
+        return MoveAnimator().apply {
+            doOnStart {
+                drawable.setBounds(0, 0, layer.width, layer.height)
+                layer.overlay.add(drawable)
+                to.alpha = 0f
+            }
+            addUpdateListener {
+                drawable.update(it.animatedFraction, curve.getInterpolation(it.animatedFraction))
+                layer.invalidate()
+            }
+            doOnEnd {
+                layer.overlay.remove(drawable)
+                layer.invalidate()
+                to.alpha = end.alpha
+            }
+        }
+    }
+
+    // `to` is in the transition layer already, at its margins (the coordinates of the other animators); `from` is where
+    // it is on the screen. 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.
+    private fun pictures(): Pair<TextPicture, TextPicture>? {
+        if (to.parent !is ViewGroup) return null
+        val toPlace = to.layoutParams as? ViewGroup.MarginLayoutParams ?: return null
+        val fromLayout = (from as TextView).layout ?: return null
+        val toLayout = (to as TextView).layout ?: return null
+        val edge = lineEdge(fromLayout).takeIf { it == lineEdge(toLayout) } ?: LineEdge.START
+        val fromPlace = ViewUtils.getLocationOnScreen(from)
+            .apply { ViewUtils.getLocationOnScreen(to.parent as View).let { offset(-it.x, -it.y) } }
+        val start = TextPicture.of(from, fromPlace.x, fromPlace.y, edge) ?: return null
+        val end = TextPicture.of(to, toPlace.leftMargin, toPlace.topMargin, edge) ?: return null
+        return start to end
+    }
+}
+
+// A text's picture, the point of its first line it is scaled from (in the view) and where that point is in the
+// transition layer, its font size and opacity.
+private class TextPicture(
+    val picture: Picture,
+    val anchor: PointF,
+    val position: PointF,
+    val fontSize: Float,
+    val alpha: Float
+) {
+    companion object {
+        fun of(view: TextView, left: Int, top: Int, 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()
+            )
+            return TextPicture(picture, anchor, PointF(left + anchor.x, top + anchor.y), fontSize, 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
+    }
+}
+
+// Both pictures where the move has brought the text: the font size and the point of the first line go from the start
+// to the end along the transition's curve, the pictures change over by the clock.
+private class TextMorphDrawable(private val start: TextPicture, private val end: TextPicture) : Drawable() {
+    private val grows = end.fontSize >= start.fontSize
+    private var progress = 0f
+    private var changeOver = 0f
+
+    fun update(time: Float, progress: Float) {
+        this.progress = progress
+        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.fontSize + (end.fontSize - start.fontSize) * progress
+        draw(canvas, start, x, y, fontSize, 1f - changeOver)
+        draw(canvas, end, x, y, fontSize, changeOver)
+    }
+
+    private fun draw(canvas: Canvas, text: TextPicture, x: Float, y: Float, fontSize: 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.scale(scale, scale)
+        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)
+    }
+
+    override fun setAlpha(alpha: Int) = Unit
+
+    override fun setColorFilter(colorFilter: ColorFilter?) = Unit
+
+    @Deprecated("Deprecated in Java")
+    override fun getOpacity(): Int = PixelFormat.TRANSLUCENT
+
+    private companion object {
+        const val CHANGE_OVER = 0.25f
+    }
+}

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

@@ -0,0 +1,139 @@
+package dev.apexnative.navigation.views.element.animators
+
+import android.animation.Animator
+import android.graphics.Canvas
+import android.graphics.ColorFilter
+import android.graphics.Paint
+import android.graphics.Picture
+import android.graphics.PixelFormat
+import android.graphics.PorterDuff
+import android.graphics.PorterDuffXfermode
+import android.graphics.RectF
+import android.graphics.drawable.Drawable
+import android.view.View
+import android.view.ViewGroup
+import androidx.core.animation.doOnEnd
+import androidx.core.animation.doOnStart
+import com.facebook.react.views.view.ReactViewGroup
+import dev.apexnative.navigation.options.SharedElementTransitionOptions
+import dev.apexnative.navigation.utils.ViewUtils
+import dev.apexnative.navigation.utils.borderRadius
+import dev.apexnative.navigation.utils.computeInheritedScale
+import kotlin.math.roundToInt
+
+// A view with children 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 the place, size and corner radius of the one to those of the other,
+// both pictures fill it, and the picture of the destination shows over the other on the way. The pictures are drawing
+// commands: an avatar's letter grows sharp. They are drawn in the overlay of the transition layer while `to` is hidden,
+// and nothing else moves the pair. A view without children moves itself, its outline growing, as before.
+class ViewChangeAnimator(from: View, to: View) : PropertyAnimatorCreator<ReactViewGroup>(from, to, ReactViewGroup::class.java) {
+    private val pictures by lazy { pictures() }
+
+    override fun shouldAnimateProperty(fromChild: ReactViewGroup, toChild: ReactViewGroup): Boolean =
+            (fromChild.childCount > 0 || toChild.childCount > 0) && pictures != null
+
+    override fun create(options: SharedElementTransitionOptions): Animator {
+        val (start, end) = checkNotNull(pictures)
+        val layer = to.parent as ViewGroup
+        val drawable = ViewMorphDrawable(start, end)
+        // Everything changes between the start and the end of the animation: a cancelled one ends too.
+        return MoveAnimator().apply {
+            doOnStart {
+                drawable.setBounds(0, 0, layer.width, layer.height)
+                layer.overlay.add(drawable)
+                to.alpha = 0f
+            }
+            addUpdateListener {
+                drawable.progress = curve.getInterpolation(it.animatedFraction)
+                layer.invalidate()
+            }
+            doOnEnd {
+                layer.overlay.remove(drawable)
+                layer.invalidate()
+                to.alpha = end.alpha
+            }
+        }
+    }
+
+    // `to` is in the transition layer already, at its margins (the coordinates of the other animators); `from` is where
+    // it is on the screen, at the scale of its parents.
+    private fun pictures(): Pair<ViewPicture, ViewPicture>? {
+        if (to.parent !is ViewGroup) return null
+        val toPlace = to.layoutParams as? ViewGroup.MarginLayoutParams ?: return null
+        val fromPlace = ViewUtils.getLocationOnScreen(from)
+            .apply { ViewUtils.getLocationOnScreen(to.parent as View).let { offset(-it.x, -it.y) } }
+        val (scaleX, scaleY) = computeInheritedScale(from)
+        val fromRect = RectF(0f, 0f, from.width * scaleX, from.height * scaleY).apply {
+            offset(fromPlace.x.toFloat(), fromPlace.y.toFloat())
+        }
+        val toRect = RectF(0f, 0f, to.width.toFloat(), to.height.toFloat()).apply {
+            offset(toPlace.leftMargin.toFloat(), toPlace.topMargin.toFloat())
+        }
+        val start = ViewPicture.of(from as ReactViewGroup, fromRect, scaleX) ?: return null
+        val end = ViewPicture.of(to as ReactViewGroup, toRect, 1f) ?: return null
+        return start to end
+    }
+}
+
+// A view's picture, its place in the transition layer, its corner radius there and its opacity.
+private class ViewPicture(val picture: Picture, val rect: RectF, val radius: Float, val alpha: Float) {
+    companion object {
+        fun of(view: ReactViewGroup, rect: RectF, scale: Float): ViewPicture? {
+            if (view.width <= 0 || view.height <= 0) return null
+            val picture = recordPicture(view) ?: return null
+            return ViewPicture(picture, rect, view.borderRadius * scale, view.alpha)
+        }
+    }
+}
+
+// The copy where the move has brought it: its place, size and corner radius go from the start to the end along the
+// transition's curve, and so does the picture of the end over the picture of the start.
+private class ViewMorphDrawable(private val start: ViewPicture, private val end: ViewPicture) : Drawable() {
+    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 draw(canvas: Canvas) {
+        rect.set(
+            lerp(start.rect.left, end.rect.left),
+            lerp(start.rect.top, end.rect.top),
+            lerp(start.rect.right, end.rect.right),
+            lerp(start.rect.bottom, end.rect.bottom)
+        )
+        if (rect.isEmpty) return
+        val radius = lerp(start.radius, end.radius)
+        val count = canvas.saveLayer(rect, null)
+        canvas.drawRoundRect(rect, radius, radius, maskPaint)
+        canvas.saveLayer(rect, contentPaint)
+        draw(canvas, start, start.alpha)
+        draw(canvas, end, end.alpha * progress)
+        canvas.restoreToCount(count)
+    }
+
+    // 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
+
+    override fun setAlpha(alpha: Int) = Unit
+
+    override fun setColorFilter(colorFilter: ColorFilter?) = Unit
+
+    @Deprecated("Deprecated in Java")
+    override fun getOpacity(): Int = PixelFormat.TRANSLUCENT
+}

package/android/src/main/java/dev/apexnative/navigation/views/externalcomponent/ExternalComponentLayout.kt

@@ -0,0 +1,44 @@
+package dev.apexnative.navigation.views.externalcomponent
+
+import android.annotation.SuppressLint
+import android.content.Context
+import android.view.View
+import android.view.ViewGroup
+import android.widget.FrameLayout
+import dev.apexnative.navigation.views.component.Renderable
+
+/**
+ * The view of a native screen (`ExternalComponentViewController`): the container the app's view fills. It takes the
+ * window insets itself and passes nothing on to the app's view; it keeps the room for the bars as its margins and what
+ * the system covers as its padding, as a React screen does. It is rendered once it has the app's view.
+ */
+@SuppressLint("ViewConstructor")
+class ExternalComponentLayout(context: Context) : FrameLayout(context), Renderable {
+    /** Runs as the view joins a window. */
+    internal var onAttached: (() -> Unit)? = null
+
+    override val isRendered: Boolean
+        get() = childCount > 0
+
+    /** Puts the app's [view] in, filling the container. */
+    fun setContent(view: View) {
+        (view.parent as? ViewGroup)?.removeView(view)
+        addView(contentOf(view), LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT))
+    }
+
+    override fun onAttachedToWindow() {
+        super.onAttachedToWindow()
+        onAttached?.invoke()
+    }
+
+    internal companion object {
+        /**
+         * What goes into the container for the app's [view]: the view itself when it is a `ViewGroup`, else a
+         * `FrameLayout` it fills (a lone `TextView` failed as the container measured it).
+         */
+        fun contentOf(view: View): ViewGroup = view as? ViewGroup
+            ?: FrameLayout(view.context).apply {
+                addView(view, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT))
+            }
+    }
+}

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

@@ -0,0 +1,183 @@
+package dev.apexnative.navigation.views.sidemenu
+
+import android.annotation.SuppressLint
+import android.content.Context
+import android.view.Gravity
+import android.view.KeyEvent
+import android.view.View
+import android.view.ViewGroup.LayoutParams.MATCH_PARENT
+import android.widget.FrameLayout
+import androidx.drawerlayout.widget.DrawerLayout
+import dev.apexnative.navigation.viewcontrollers.sidemenu.SideMenuMotion
+import dev.apexnative.navigation.viewcontrollers.sidemenu.SideMenuMotion.Side
+import dev.apexnative.navigation.viewcontrollers.sidemenu.SideMenuRules
+
+/**
+ * The view of a side menu on Android: the Material drawer (`DrawerLayout`) with a part for each side the layout has —
+ * [center] filling it, the left menu at the left edge and the right one at the right edge, in RTL too (physical sides)
+ * —, each holding the view of its node. The drawer draws its default dimming (black 60 %) and shadow, keeps an open
+ * menu open as its size changes, and handles the edge swipe, the tap on the dimming and the drag back itself; the side
+ * menu's node drives it ([SideMenuMotion]).
+ *
+ * It isn't fit to the system windows: it draws no band under the status bar and leaves the insets to the screens,
+ * whose safe area keeps their content off the status bar. It keeps no saved state: a recreated activity doesn't open a
+ * menu behind the node. `DrawerLayout` needs an exact size: a container that measures it otherwise gets the size it
+ * offers as exact. Main thread only.
+ */
+@SuppressLint("ViewConstructor")
+internal class SideMenuView(context: Context) : DrawerLayout(context), SideMenuMotion.Drawer {
+    /** The part of the center. */
+    val center = FrameLayout(context)
+
+    private val parts = arrayOfNulls<FrameLayout>(Side.entries.size)
+    // The width each side wants, in pixels; none: the drawer's own (the width less 64 dp).
+    private val wantedWidths = arrayOfNulls<Int>(Side.entries.size)
+    // `DrawerLayout`'s least gap between an open drawer and the far edge, as it computes it.
+    private val minDrawerMargin = (MIN_DRAWER_MARGIN_DP * resources.displayMetrics.density + 0.5f).toInt()
+    private var listener: DrawerListener? = null
+
+    init {
+        fitsSystemWindows = false
+        setStatusBarBackground(null)
+        isSaveEnabled = false
+        addView(center, LayoutParams(MATCH_PARENT, MATCH_PARENT))
+    }
+
+    /** [content] fills the center. */
+    fun setCenter(content: View) {
+        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 {
+        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
+    }
+
+    /** The part of [side]; none when the layout has no menu there. */
+    fun partOf(side: Side): FrameLayout? = parts[side.ordinal]
+
+    /** The width the menu on [side] wants, in pixels; none for the drawer's own. It applies at the next layout. */
+    fun setWantedWidth(side: Side, width: Int?) {
+        if (wantedWidths[side.ordinal] == width) return
+        wantedWidths[side.ordinal] = width
+        requestLayout()
+    }
+
+    /** The height of the menu on [side], in pixels, pinned to the top; none for the whole height. */
+    fun setPartHeight(side: Side, height: Int?) {
+        val part = partOf(side) ?: return
+        part.layoutParams.height = height ?: MATCH_PARENT
+        part.requestLayout()
+    }
+
+    /** How far the menu on [side] is from where it rests open, along the width. */
+    fun offsetFromRest(side: Side): Int {
+        val part = partOf(side) ?: return 0
+        return SideMenuRules.offsetFromRest(side, width, part.left, part.right)
+    }
+
+    /** The drawer's callbacks reach [motion] from now on. */
+    fun follow(motion: SideMenuMotion) {
+        unfollow()
+        val drawerListener = Listener(motion)
+        listener = drawerListener
+        addDrawerListener(drawerListener)
+    }
+
+    /** The drawer's callbacks reach nobody. */
+    fun unfollow() {
+        listener?.let(::removeDrawerListener)
+        listener = null
+    }
+
+    // A given width is measured as it is by the drawer: it is clamped here to the width less the drawer's gap, at
+    // every measure (the first, a rotation, a split screen).
+    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+        val width = MeasureSpec.getSize(widthMeasureSpec)
+        for (side in Side.entries) {
+            val part = partOf(side) ?: continue
+            part.layoutParams.width = SideMenuRules.drawerWidth(wantedWidths[side.ordinal], width, minDrawerMargin)
+        }
+        super.onMeasure(exactly(widthMeasureSpec), exactly(heightMeasureSpec))
+    }
+
+    // Back is the navigation's: a focused drawer would close a visible menu itself before the activity's back callback,
+    // the modals over it and JavaScript's `BackHandler` hear it.
+    override fun onKeyDown(keyCode: Int, event: KeyEvent): Boolean =
+        if (SideMenuRules.leavesKeyToActivity(keyCode)) false else super.onKeyDown(keyCode, event)
+
+    override fun onKeyUp(keyCode: Int, event: KeyEvent): Boolean =
+        if (SideMenuRules.leavesKeyToActivity(keyCode)) false else super.onKeyUp(keyCode, event)
+
+    // The drawer of the motion.
+
+    override fun has(side: Side): Boolean = partOf(side) != null
+
+    override val callsBack: Boolean
+        get() = isAttachedToWindow && isLaidOut
+
+    override fun open(side: Side, animate: Boolean) {
+        partOf(side)?.let { openDrawer(it, animate) }
+    }
+
+    override fun close(side: Side, animate: Boolean) {
+        partOf(side)?.let { closeDrawer(it, animate) }
+    }
+
+    override fun lock(side: Side, locked: Boolean) {
+        if (partOf(side) == null) return
+        val mode = if (locked) LOCK_MODE_LOCKED_CLOSED else LOCK_MODE_UNLOCKED
+        val gravity = gravityOf(side)
+        if (getDrawerLockMode(gravity) != mode) setDrawerLockMode(mode, gravity)
+    }
+
+    override fun isVisible(side: Side): Boolean = partOf(side)?.let(::isDrawerVisible) == true
+
+    override fun hide(side: Side) {
+        partOf(side)?.visibility = INVISIBLE
+    }
+
+    private fun sideOf(view: View): Side? = Side.entries.firstOrNull { parts[it.ordinal] === view }
+
+    private inner class Listener(private val motion: SideMenuMotion) : DrawerListener {
+        override fun onDrawerSlide(drawerView: View, slideOffset: Float) {
+            sideOf(drawerView)?.let { motion.slid(it, slideOffset) }
+        }
+
+        override fun onDrawerOpened(drawerView: View) {
+            sideOf(drawerView)?.let(motion::opened)
+        }
+
+        override fun onDrawerClosed(drawerView: View) {
+            sideOf(drawerView)?.let(motion::closed)
+        }
+
+        override fun onDrawerStateChanged(newState: Int) {
+            motion.stateChanged(
+                when (newState) {
+                    DrawerLayout.STATE_IDLE -> SideMenuMotion.DrawerState.Idle
+                    DrawerLayout.STATE_DRAGGING -> SideMenuMotion.DrawerState.Dragging
+                    else -> SideMenuMotion.DrawerState.Settling
+                },
+            )
+        }
+    }
+
+    private companion object {
+        // `DrawerLayout`'s MIN_DRAWER_MARGIN.
+        const val MIN_DRAWER_MARGIN_DP = 64
+
+        fun gravityOf(side: Side): Int = if (side == Side.Left) Gravity.LEFT else Gravity.RIGHT
+
+        fun exactly(spec: Int): Int =
+            if (View.MeasureSpec.getMode(spec) == View.MeasureSpec.EXACTLY) {
+                spec
+            } else {
+                View.MeasureSpec.makeMeasureSpec(View.MeasureSpec.getSize(spec), View.MeasureSpec.EXACTLY)
+            }
+    }
+}

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

@@ -0,0 +1,137 @@
+package dev.apexnative.navigation.views.stack
+
+import android.annotation.SuppressLint
+import android.content.Context
+import android.view.Gravity
+import android.view.View
+import android.view.ViewGroup
+import androidx.coordinatorlayout.widget.CoordinatorLayout
+import androidx.core.view.ViewCompat
+import androidx.core.view.WindowInsetsCompat
+import dev.apexnative.navigation.views.stack.topbar.TopBar
+import java.util.Collections
+import java.util.WeakHashMap
+
+/**
+ * The view of a stack: its screens fill it, bottom to top; its [topBar] lies over them at the top; the FAB, its menu
+ * and the menu's scrim lie over everything. A screen that comes in goes right under the bar. A screen in the container
+ * 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.
+ */
+@SuppressLint("ViewConstructor")
+class StackLayout(context: Context) : CoordinatorLayout(context) {
+    /** The bar over the screens. */
+    val topBar = TopBar(context)
+
+    /** The window insets the stack got last; none before the first. */
+    var lastInsets: WindowInsetsCompat? = null
+        private set
+
+    /** Runs after each new window insets: the bar and the FAB take their places again. */
+    internal var onInsets: (() -> Unit)? = null
+
+    init {
+        addView(topBar, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT).apply {
+            gravity = Gravity.TOP
+        })
+        // The insets go on to every child as they came: each screen takes what concerns it itself; the bar's strip is
+        // its stack's to count, from these insets and the options of its screen on top.
+        ViewCompat.setOnApplyWindowInsetsListener(this) { _, insets ->
+            lastInsets = insets
+            onInsets?.invoke()
+            insets
+        }
+    }
+
+    // The views of the screens in the container: the others (the search's scrim and suggestions, which lie between the
+    // screens and the bar) stay over a screen that comes in.
+    private val screenViews: MutableSet<View> = Collections.newSetFromMap(WeakHashMap())
+
+    // Where the screens end: right over the topmost screen view, under anything else between them and the bar.
+    private val screensEnd: Int
+        get() {
+            var end = 0
+            for (index in 0 until childCount) {
+                if (getChildAt(index) in screenViews) end = index + 1
+            }
+            return end
+        }
+
+    /** [view] is a child of this container. */
+    fun holds(view: View): Boolean = view.parent === this
+
+    /** [view] goes right under the bar, over the screens. */
+    fun placeUnderBar(view: View) {
+        if (holds(view)) {
+            detachViewFromParent(view)
+            screenViews += view
+            attachViewToParent(view, screensEnd, view.layoutParams)
+            moved()
+        } else {
+            addScreen(view, screensEnd)
+        }
+    }
+
+    /** [view] goes right under [anchor]; under the bar when [anchor] isn't in the container. */
+    fun placeUnder(view: View, anchor: View?) {
+        if (anchor == null || !holds(anchor) || anchor === view) return placeUnderBar(view)
+        if (holds(view)) {
+            detachViewFromParent(view)
+            attachViewToParent(view, indexOfChild(anchor), view.layoutParams)
+            moved()
+        } else {
+            addScreen(view, indexOfChild(anchor))
+        }
+    }
+
+    /** [view] goes under every screen. */
+    fun placeAtBottom(view: View) {
+        if (holds(view)) {
+            detachViewFromParent(view)
+            attachViewToParent(view, 0, view.layoutParams)
+            moved()
+        } else {
+            addScreen(view, 0)
+        }
+    }
+
+    /** [view] goes over everything: the FAB or its menu. */
+    fun addOverAll(view: View, params: LayoutParams) {
+        (view.parent as? ViewGroup)?.removeView(view)
+        addView(view, params)
+    }
+
+    /** [view] leaves the container, alive. */
+    fun take(view: View) {
+        screenViews -= view
+        if (holds(view)) removeView(view)
+    }
+
+    // A screen joins the container: with the stack's last insets first, when it missed some while it was out of it.
+    private fun addScreen(view: View, index: Int) {
+        (view.parent as? ViewGroup)?.removeView(view)
+        val params = (view.layoutParams as? MarginLayoutParams)?.let(::LayoutParams)
+            ?: LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
+        params.width = LayoutParams.MATCH_PARENT
+        params.height = LayoutParams.MATCH_PARENT
+        screenViews += view
+        addView(view, index, params)
+    }
+
+    /**
+     * Gives [view] the stack's last window insets before it joins the container, when they differ from [kept], the
+     * last it got: it lays out once, in its place. Never asks the window to send them again.
+     */
+    fun giveInsets(view: View, kept: WindowInsetsCompat?) {
+        val last = lastInsets ?: return
+        if (kept == last) return
+        ViewCompat.dispatchApplyWindowInsets(view, last)
+    }
+
+    private fun moved() {
+        requestLayout()
+        invalidate()
+    }
+}