@apexnative/navigation 1.0.0-alpha.5 → 1.0.0-alpha.7

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

@@ -2,11 +2,12 @@ package dev.apexnative.navigation.views.stack.topbar
 
 import android.annotation.SuppressLint
 import android.content.Context
-import android.graphics.Bitmap
 import android.graphics.Canvas
 import android.graphics.Color
+import android.graphics.Picture
 import android.graphics.Rect
 import android.graphics.drawable.ColorDrawable
+import android.graphics.drawable.PictureDrawable
 import android.os.Build
 import android.view.ContextThemeWrapper
 import android.view.Gravity
@@ -16,10 +17,11 @@ import android.view.ViewGroup
 import android.widget.FrameLayout
 import android.widget.ImageView
 import android.widget.LinearLayout
-import com.google.android.material.appbar.MaterialToolbar
+import androidx.appcompat.widget.AppCompatImageView
 import dev.apexnative.navigation.R
 import dev.apexnative.navigation.utils.MaterialTheme
 import dev.apexnative.navigation.utils.UiUtils
+import dev.apexnative.navigation.views.stack.topbar.titlebar.ButtonRow
 
 /**
  * The top bar of a stack: one per stack, showing what its screen on top sets. Top to bottom: the strip under the status
@@ -47,7 +49,7 @@ class TopBar(context: Context) : FrameLayout(themed(context)) {
     private val largeTitleHolder = FrameLayout(this.context)
     private val searchHolder = FrameLayout(this.context)
     private val border = View(this.context)
-    private val snapshot = ImageView(this.context)
+    private val snapshot = Snapshot(this.context)
     private var searchArea: View? = null
     private var barHeight = UiUtils.dpToPx(this.context, DEFAULT_HEIGHT_DP)
     private var searchTakesBar = false
@@ -58,12 +60,12 @@ class TopBar(context: Context) : FrameLayout(themed(context)) {
     // `topBar.elevation`, in pixels: the bar's elevation unless it is flat.
     private var shadow = 0f
 
-    /** The toolbar of the right buttons: its menu holds them, the overflow items and the search's magnifier. */
-    val rightButtonBar: MaterialToolbar
+    /** The right buttons, the search's magnifier and "⋮". */
+    val rightButtonBar: ButtonRow
         get() = titleBar.rightButtonBar
 
-    /** The toolbar of the back button and the left buttons. */
-    val leftButtonBar: MaterialToolbar
+    /** The back button and the left buttons. */
+    val leftButtonBar: ButtonRow
         get() = titleBar.leftButtonBar
 
     /** The strip under the status bar at the top of the bar, in pixels: the bar is under the status bar. */
@@ -305,32 +307,27 @@ class TopBar(context: Context) : FrameLayout(themed(context)) {
         layoutParams = params
     }
 
-    // The row's picture in a transition.
+    // The row's picture in a transition: the drawing commands of the row as it is, not its pixels. Nothing as large
+    // as the bar is allocated or filled in on the main thread, and the renderer plays the commands each frame.
 
     /**
-     * Lays a picture of the row and the large title over them, laid out at once; false when the bar can't be drawn in
-     * software: no picture then.
+     * Lays a picture of the row and the large title over them, laid out at once; false when the bar can't be recorded:
+     * no picture then.
      */
     fun takeRowSnapshot(withLargeTitle: Boolean = true): Boolean {
         val width = rowArea.width
         val large = withLargeTitle && isLargeTitleShown
         val height = rowArea.height + if (large) largeTitleHolder.height else 0
         if (width <= 0 || height <= 0) return false
-        val picture = try {
-            Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888).also {
-                val canvas = Canvas(it)
-                rowArea.draw(canvas)
-                if (large) {
-                    canvas.translate(0f, rowArea.height.toFloat())
-                    largeTitleHolder.draw(canvas)
-                }
+        val picture = record(width, height) { canvas ->
+            rowArea.draw(canvas)
+            if (large) {
+                canvas.translate(0f, rowArea.height.toFloat())
+                largeTitleHolder.draw(canvas)
             }
-        } catch (e: IllegalArgumentException) {
-            // A HARDWARE bitmap in the bar: it can't be drawn on a software canvas.
-            return false
-        }
+        } ?: return false
         val top = content.top + rowArea.top
-        snapshot.setImageBitmap(picture)
+        snapshot.setImageDrawable(PictureDrawable(picture))
         snapshot.alpha = 1f
         snapshot.translationX = 0f
         snapshot.translationY = rowArea.translationY
@@ -348,29 +345,43 @@ class TopBar(context: Context) : FrameLayout(themed(context)) {
 
     /**
      * A picture of the bar under its row — the background, the large title, the search, the line — and where it starts
-     * in the bar, for a push to a screen without a large title; none when the bar can't be drawn in software.
+     * in the bar, for a push to a screen without a large title; none when the bar can't be recorded. Its intrinsic
+     * size is its size; it draws at the top left of its bounds.
      */
-    fun pictureUnderRow(): Pair<Bitmap, Int>? = pictureFrom(content.top + rowArea.bottom)
+    fun pictureUnderRow(): Pair<PictureDrawable, Int>? = pictureFrom(content.top + rowArea.bottom)
 
     /**
      * A picture of the whole bar, for the screen it leaves with in a transition of the stack's own; none when the bar
-     * can't be drawn in software.
+     * can't be recorded.
      */
-    fun picture(): Bitmap? = pictureFrom(0)?.first
+    fun picture(): PictureDrawable? = pictureFrom(0)?.first
 
-    private fun pictureFrom(top: Int): Pair<Bitmap, Int>? {
+    private fun pictureFrom(top: Int): Pair<PictureDrawable, Int>? {
         val width = width
         val height = height - top
         if (width <= 0 || height <= 0) return null
-        return try {
-            val bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)
-            val canvas = Canvas(bitmap)
+        val picture = record(width, height) { canvas ->
             canvas.translate(0f, -top.toFloat())
             draw(canvas)
-            bitmap to top
-        } catch (e: IllegalArgumentException) {
-            null
+        } ?: return null
+        return PictureDrawable(picture) to top
+    }
+
+    // The commands [draw] gives, cut to [width] × [height]. A hardware bitmap in the bar is kept as it is from Android
+    // 9 on (the picture then plays only on the screen's hardware canvas, where the bar's pictures are drawn); Android 8
+    // can't record one, and there is no picture then.
+    private fun record(width: Int, height: Int, draw: (Canvas) -> Unit): Picture? = try {
+        Picture().also {
+            val canvas = it.beginRecording(width, height)
+            try {
+                canvas.clipRect(0, 0, width, height)
+                draw(canvas)
+            } finally {
+                it.endRecording()
+            }
         }
+    } catch (e: IllegalArgumentException) {
+        null
     }
 
     /** The row's picture goes. */
@@ -410,6 +421,12 @@ class TopBar(context: Context) : FrameLayout(themed(context)) {
         heightChanged = true
     }
 
+    // The row's picture: it fades as one image. Its commands overlap (a button's background under its icon), and drawn
+    // one by one at the view's opacity each would show through the next.
+    private class Snapshot(context: Context) : AppCompatImageView(context) {
+        override fun hasOverlappingRendering(): Boolean = true
+    }
+
     // The area of the row: it takes the touches without passing them on while the row is transparent.
     private class RowArea(context: Context) : FrameLayout(context) {
         var blocksTouches = false

package/android/src/main/java/dev/apexnative/navigation/views/stack/topbar/titlebar/BarButtonComponentCell.kt

@@ -8,12 +8,12 @@ import dev.apexnative.navigation.utils.UiUtils
 import kotlin.math.max
 
 /**
- * The cell of a React button in the bar (`topBar.leftButtons[].component`): the action view of the button's menu item,
- * as an icon's: 12 dp on each side, at least 48 dp wide, as high as the row, the content in its middle. The content (a
- * React root, or later a view of the screen's own tree) measures `AT_MOST` — the width at most what the row gives, the
- * height at most the row's — or exactly its `component.width` / `component.height` when the options give them
- * ([contentWidth], [contentHeight], pixels). The cell takes the menu's id; the content never gets one (React Native
- * rejects a root with an id). It never looks inside the content.
+ * The cell of a React button in the bar (`topBar.leftButtons[].component`), in the row of its side as an icon button
+ * stands there: 12 dp on each side, at least 48 dp wide, as high as the row gives, the content in its middle. The
+ * content (a React root, or later a view of the screen's own tree) measures `AT_MOST` — the width at most what the row
+ * gives, the height at most the row's — or exactly its `component.width` / `component.height` when the options give
+ * them ([contentWidth], [contentHeight], pixels). The cell takes the button's `testID`; the content never gets one
+ * (React Native rejects a root with an id). It never looks inside the content.
  */
 @SuppressLint("ViewConstructor")
 internal class BarButtonComponentCell(context: Context) : ViewGroup(context) {

package/android/src/main/java/dev/apexnative/navigation/views/stack/topbar/titlebar/BarButtonView.kt

@@ -0,0 +1,113 @@
+package dev.apexnative.navigation.views.stack.topbar.titlebar
+
+import android.annotation.SuppressLint
+import android.content.Context
+import android.content.res.TypedArray
+import android.graphics.drawable.Drawable
+import android.view.Gravity
+import android.widget.Button
+import androidx.appcompat.R as AppCompatR
+import androidx.appcompat.widget.AppCompatTextView
+import androidx.appcompat.widget.TooltipCompat
+import androidx.core.widget.TextViewCompat
+import dev.apexnative.navigation.utils.UiUtils
+import kotlin.math.roundToInt
+
+/**
+ * A button of the bar with an icon or a text, drawn as a toolbar draws the items of its menu: the theme's
+ * `actionButtonStyle` (48 dp at least, 12 dp at the sides, the bar's ripple), its `actionMenuTextAppearance` and
+ * `actionMenuTextColor`, the icon at most 32 dp and in the middle. With an icon the text doesn't show; it labels the
+ * button for accessibility and is its tooltip instead, unless the button has a label of its own. Main thread only.
+ */
+@SuppressLint("ViewConstructor")
+internal class BarButtonView(context: Context) :
+    AppCompatTextView(context, null, AppCompatR.attr.actionButtonStyle) {
+    private val minimumWidth = minWidth
+    private val maxIconSize = UiUtils.dpToPx(context, MAX_ICON_DP).roundToInt()
+    private val sidePadding = UiUtils.dpToPx(context, SIDE_DP).roundToInt()
+    private var icon: Drawable? = null
+
+    init {
+        gravity = Gravity.CENTER
+        isFocusable = true
+        val vertical = UiUtils.dpToPx(context, VERTICAL_DP).roundToInt()
+        setPaddingRelative(sidePadding, vertical, sidePadding, vertical)
+        restyle()
+    }
+
+    /** The text appearance and color of the theme as it is now: a light/dark switch changes them. */
+    fun restyle() {
+        themed(AppCompatR.attr.actionMenuTextAppearance) { getResourceId(0, 0) }
+            .takeIf { it != 0 }
+            ?.let { TextViewCompat.setTextAppearance(this, it) }
+        themed(AppCompatR.attr.actionMenuTextColor) { getColorStateList(0) }?.let(::setTextColor)
+    }
+
+    private fun <T> themed(attr: Int, read: TypedArray.() -> T): T {
+        val values = context.obtainStyledAttributes(intArrayOf(attr))
+        return try {
+            values.read()
+        } finally {
+            values.recycle()
+        }
+    }
+
+    /**
+     * What the button shows: [icon], or [title] without one. [label] is its accessibility label, else the title when
+     * only the icon shows; that title is its tooltip too. [tooltip] false leaves the long press to the caller.
+     */
+    fun show(title: CharSequence, icon: Drawable?, label: CharSequence?, tooltip: Boolean) {
+        this.icon = icon?.also { fit(it) }
+        setCompoundDrawablesRelative(icon, null, null, null)
+        text = if (icon == null) title else null
+        val hidden = title.takeIf { icon != null && it.isNotEmpty() }
+        contentDescription = label?.takeIf { it.isNotEmpty() } ?: hidden
+        TooltipCompat.setTooltipText(this, if (tooltip) hidden else null)
+        requestLayout()
+    }
+
+    // TalkBack and UI tests see a button, as they see a toolbar's item.
+    override fun getAccessibilityClassName(): CharSequence = Button::class.java.name
+
+    // An icon larger than the bar's item takes keeps its shape at 32 dp.
+    private fun fit(icon: Drawable) {
+        var width = icon.intrinsicWidth.coerceAtLeast(0)
+        var height = icon.intrinsicHeight.coerceAtLeast(0)
+        if (width > maxIconSize) {
+            height = (height * maxIconSize.toFloat() / width).roundToInt()
+            width = maxIconSize
+        }
+        if (height > maxIconSize) {
+            width = (width * maxIconSize.toFloat() / height).roundToInt()
+            height = maxIconSize
+        }
+        icon.setBounds(0, 0, width, height)
+    }
+
+    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+        val centered = icon?.takeIf { text.isNullOrEmpty() }
+        if (centered == null) setPaddingRelative(sidePadding, paddingTop, sidePadding, paddingBottom)
+        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
+        // At least the theme's width, within what the row gives.
+        val mode = MeasureSpec.getMode(widthMeasureSpec)
+        val target = if (mode == MeasureSpec.AT_MOST) {
+            minOf(MeasureSpec.getSize(widthMeasureSpec), minimumWidth)
+        } else {
+            minimumWidth
+        }
+        if (mode != MeasureSpec.EXACTLY && minimumWidth > 0 && measuredWidth < target) {
+            super.onMeasure(MeasureSpec.makeMeasureSpec(target, MeasureSpec.EXACTLY), heightMeasureSpec)
+        }
+        // The icon alone stands in the middle of the button.
+        if (centered != null) {
+            val start = (measuredWidth - centered.bounds.width()) / 2
+            setPaddingRelative(start, paddingTop, paddingEnd, paddingBottom)
+        }
+    }
+
+    private companion object {
+        const val MAX_ICON_DP = 32f
+        const val SIDE_DP = 12f
+        const val VERTICAL_DP = 4f
+    }
+}

package/android/src/main/java/dev/apexnative/navigation/views/stack/topbar/titlebar/BarMenu.kt

@@ -0,0 +1,219 @@
+package dev.apexnative.navigation.views.stack.topbar.titlebar
+
+import android.content.Context
+import android.content.res.ColorStateList
+import android.graphics.drawable.ColorDrawable
+import android.graphics.drawable.Drawable
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import android.widget.BaseAdapter
+import android.widget.CompoundButton
+import android.widget.FrameLayout
+import android.widget.ImageView
+import android.widget.PopupWindow
+import android.widget.TextView
+import androidx.appcompat.widget.ListPopupWindow
+import androidx.core.graphics.ColorUtils
+import androidx.core.widget.ImageViewCompat
+import dev.apexnative.navigation.R
+import dev.apexnative.navigation.utils.TestIds
+import kotlin.math.max
+
+/**
+ * A menu of the top bar, the menu of a button or "⋮": a popup list under [anchor] as AppCompat shows a popup menu, with
+ * the theme's style of [styleAttr] (`popupMenuStyle`, or `actionOverflowMenuStyle` for "⋮": its background, shadow,
+ * offsets and place over the anchor) and [gravity] against the anchor. A submenu takes the menu's place, under its title.
+ * Its [Colors] go over the theme's. Main thread only.
+ */
+internal class BarMenu(
+    val context: Context,
+    private val anchor: View,
+    private val gravity: Int,
+    private val styleAttr: Int,
+    val colors: Colors,
+) {
+    /** The menu's colors over the theme's; none keeps the theme's. */
+    class Colors(val background: Int?, val text: Int?)
+
+    /** How an item shows its check: none, a check box, or a radio button of a single selection. */
+    enum class Check { None, Box, Radio }
+
+    /**
+     * An item of the menu: [title], [icon] (tinted already), [enabled], its [check] and whether it is [checked], and
+     * either [submenu] (its items, under its title) or [onPick]. [testId] goes on the item's view, [label] is its
+     * accessibility label.
+     */
+    class Entry(
+        val title: CharSequence,
+        val icon: Drawable?,
+        val enabled: Boolean = true,
+        val check: Check = Check.None,
+        val checked: Boolean = false,
+        val submenu: List<Entry>? = null,
+        val testId: String? = null,
+        val label: CharSequence? = null,
+        val onPick: () -> Unit = {},
+    )
+
+    private var popup: ListPopupWindow? = null
+    // The level that shows is the top one, not a submenu.
+    private var atTop = false
+    // The text color of the options, dimmed as Material 3 dims a disabled item.
+    private val itemTextColors = colors.text?.let {
+        ColorStateList(
+            arrayOf(intArrayOf(-android.R.attr.state_enabled), intArrayOf()),
+            intArrayOf(ColorUtils.setAlphaComponent(it, DISABLED_ALPHA), it),
+        )
+    }
+    // The menu goes from one level to the next: the level that closes doesn't close the menu.
+    private var switching = false
+
+    /** The menu closed: picked, dismissed, or taken away. */
+    var onDismiss: (() -> Unit)? = null
+
+    /** The menu shows. */
+    val isShowing: Boolean
+        get() = popup?.isShowing == true
+
+    /** Shows [entries], the top level, with their icons when [icons]. */
+    fun show(entries: List<Entry>, icons: Boolean = entries.any { it.icon != null }) =
+        showLevel(entries, null, icons)
+
+    /** The top level, while it shows, holds [entries] now; a submenu that shows stays. */
+    fun update(entries: List<Entry>, icons: Boolean = entries.any { it.icon != null }) {
+        val popup = popup?.takeIf { atTop && it.isShowing } ?: return
+        val adapter = Adapter(entries, icons)
+        popup.setAdapter(adapter)
+        popup.setContentWidth(contentWidth(adapter))
+        popup.show()
+    }
+
+    /** Closes the menu. */
+    fun dismiss() {
+        popup?.dismiss()
+    }
+
+    private fun showLevel(entries: List<Entry>, title: CharSequence?, icons: Boolean) {
+        val adapter = Adapter(entries, icons)
+        val popup = ListPopupWindow(context, null, styleAttr)
+        popup.anchorView = anchor
+        popup.setDropDownGravity(gravity)
+        popup.isModal = true
+        // As AppCompat's menus: the menu goes over an open keyboard, which stays.
+        popup.inputMethodMode = PopupWindow.INPUT_METHOD_NOT_NEEDED
+        popup.setAdapter(adapter)
+        popup.setContentWidth(contentWidth(adapter))
+        colors.background?.let { color ->
+            val background = popup.background?.mutate()
+            if (background != null) {
+                background.setTint(color)
+                popup.setBackgroundDrawable(background)
+            } else {
+                popup.setBackgroundDrawable(ColorDrawable(color))
+            }
+        }
+        popup.setOnItemClickListener { parent, _, position, _ ->
+            val entry = parent.adapter.getItem(position) as? Entry ?: return@setOnItemClickListener
+            val submenu = entry.submenu
+            if (submenu != null) {
+                // The submenu shows where the menu was, as AppCompat shows it.
+                switching = true
+                popup.dismiss()
+                switching = false
+                showLevel(submenu, entry.title, submenu.any { it.icon != null })
+            } else {
+                popup.dismiss()
+                entry.onPick()
+            }
+        }
+        popup.setOnDismissListener {
+            if (this.popup === popup) this.popup = null
+            if (!switching) onDismiss?.invoke()
+        }
+        this.popup = popup
+        atTop = title == null
+        popup.show()
+        if (title != null) {
+            // The list exists once the popup shows; a header added then shows at once.
+            popup.listView?.let { list ->
+                list.addHeaderView(header(title, list), null, false)
+                popup.show()
+            }
+        }
+    }
+
+    // As wide as the widest item, at most half the screen or 320 dp (AppCompat's rule for its menus).
+    private fun contentWidth(adapter: Adapter): Int {
+        val parent = FrameLayout(context)
+        val spec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED)
+        val metrics = context.resources.displayMetrics
+        val most = max(metrics.widthPixels / 2, (MAX_WIDTH_DP * metrics.density).toInt())
+        var width = 0
+        for (index in 0 until adapter.count) {
+            val view = adapter.getView(index, null, parent)
+            view.measure(spec, spec)
+            width = max(width, view.measuredWidth)
+            if (width >= most) return most
+        }
+        return width
+    }
+
+    private fun header(title: CharSequence, parent: ViewGroup): View {
+        val view = LayoutInflater.from(context).inflate(R.layout.apex_navigation_menu_header, parent, false)
+        view.findViewById<TextView>(R.id.apex_navigation_menu_title).apply {
+            text = title
+            itemTextColors?.let(::setTextColor)
+        }
+        return view
+    }
+
+    // The icons show when [icons], as in AppCompat's menus with optional icons shown.
+    private inner class Adapter(private val entries: List<Entry>, private val icons: Boolean) : BaseAdapter() {
+        override fun getCount(): Int = entries.size
+
+        override fun getItem(position: Int): Entry = entries[position]
+
+        override fun getItemId(position: Int): Long = position.toLong()
+
+        override fun areAllItemsEnabled(): Boolean = false
+
+        override fun isEnabled(position: Int): Boolean = entries[position].enabled
+
+        override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
+            val view = convertView
+                ?: LayoutInflater.from(context).inflate(R.layout.apex_navigation_menu_item, parent, false)
+            val entry = entries[position]
+            view.isEnabled = entry.enabled
+            view.findViewById<TextView>(R.id.apex_navigation_menu_title).apply {
+                text = entry.title
+                itemTextColors?.let(::setTextColor)
+            }
+            view.findViewById<ImageView>(R.id.apex_navigation_menu_icon).apply {
+                setImageDrawable(entry.icon)
+                visibility = if (icons && entry.icon != null) View.VISIBLE else View.GONE
+            }
+            view.findViewById<ImageView>(R.id.apex_navigation_menu_arrow).apply {
+                visibility = if (entry.submenu != null) View.VISIBLE else View.GONE
+                ImageViewCompat.setImageTintList(this, colors.text?.let(ColorStateList::valueOf))
+            }
+            check(view.findViewById(R.id.apex_navigation_menu_check), entry, Check.Box)
+            check(view.findViewById(R.id.apex_navigation_menu_radio), entry, Check.Radio)
+            view.contentDescription = entry.label
+            TestIds.apply(view, entry.testId)
+            return view
+        }
+
+        private fun check(button: CompoundButton, entry: Entry, kind: Check) {
+            val shown = entry.check == kind
+            button.visibility = if (shown) View.VISIBLE else View.GONE
+            if (shown) button.isChecked = entry.checked
+        }
+    }
+
+    private companion object {
+        // AppCompat's `abc_config_prefDialogWidth`.
+        const val MAX_WIDTH_DP = 320
+        const val DISABLED_ALPHA = 97
+    }
+}