Pagination indicator for CandidatesView

Also fixes flicker when repositioning

Author: rocka

app/src/main/java/org/fcitx/fcitx5/android/input/CandidatesView.kt

@@ -6,14 +6,17 @@
 package org.fcitx.fcitx5.android.input
 
 import android.annotation.SuppressLint
+import android.content.res.ColorStateList
 import android.graphics.Color
 import android.graphics.drawable.GradientDrawable
 import android.view.View
 import android.view.ViewGroup
+import android.widget.ImageView
+import androidx.annotation.DrawableRes
 import androidx.annotation.Size
 import androidx.constraintlayout.widget.ConstraintLayout
-import androidx.core.view.isVisible
 import androidx.lifecycle.lifecycleScope
+import com.google.android.flexbox.AlignItems
 import com.google.android.flexbox.FlexDirection
 import com.google.android.flexbox.FlexWrap
 import com.google.android.flexbox.FlexboxLayout
@@ -26,16 +29,24 @@ import org.fcitx.fcitx5.android.data.theme.Theme
 import org.fcitx.fcitx5.android.input.candidates.CandidateItemUi
 import org.fcitx.fcitx5.android.input.preedit.PreeditUi
 import splitties.dimensions.dp
+import splitties.resources.drawable
 import splitties.views.backgroundColor
+import splitties.views.dsl.constraintlayout.before
 import splitties.views.dsl.constraintlayout.below
 import splitties.views.dsl.constraintlayout.bottomOfParent
+import splitties.views.dsl.constraintlayout.centerVertically
+import splitties.views.dsl.constraintlayout.constraintLayout
+import splitties.views.dsl.constraintlayout.endOfParent
 import splitties.views.dsl.constraintlayout.lParams
+import splitties.views.dsl.constraintlayout.matchConstraints
 import splitties.views.dsl.constraintlayout.startOfParent
 import splitties.views.dsl.constraintlayout.topOfParent
 import splitties.views.dsl.core.add
+import splitties.views.dsl.core.imageView
 import splitties.views.dsl.core.withTheme
 import splitties.views.dsl.core.wrapContent
 import splitties.views.horizontalPadding
+import splitties.views.imageDrawable
 import splitties.views.verticalPadding
 
 @SuppressLint("ViewConstructor")
@@ -70,6 +81,8 @@ class CandidatesView(
     private val anchorPosition = floatArrayOf(0f, 0f, 0f)
     private val parentSize = floatArrayOf(0f, 0f)
 
+    private var shouldUpdatePosition = false
+
     private val preeditUi = object : PreeditUi(ctx, theme) {
         override val bkgColor = Color.TRANSPARENT
     }
@@ -84,6 +97,37 @@ class CandidatesView(
         dividerDrawableVertical = GradientDrawable().apply {
             setSize(dp(4), 0)
         }
+        // update position after layout child views and before drawing to avoid flicker
+        viewTreeObserver.addOnPreDrawListener {
+            if (shouldUpdatePosition) {
+                updatePosition()
+            }
+            true
+        }
+    }
+
+    private fun createIcon(@DrawableRes icon: Int) = imageView {
+        imageTintList = ColorStateList.valueOf(theme.keyTextColor)
+        imageDrawable = drawable(icon)
+        scaleType = ImageView.ScaleType.CENTER_CROP
+    }
+
+    private val prevIcon = createIcon(R.drawable.ic_baseline_arrow_left_24)
+    private val nextIcon = createIcon(R.drawable.ic_baseline_arrow_right_24)
+
+    private val paginationLayout = constraintLayout {
+        add(nextIcon, lParams(dp(10), matchConstraints) {
+            centerVertically()
+            endOfParent()
+        })
+        add(prevIcon, lParams(dp(10), matchConstraints) {
+            centerVertically()
+            before(nextIcon)
+        })
+        layoutParams = FlexboxLayout.LayoutParams(wrapContent, wrapContent).apply {
+            flexGrow = 1f
+            alignSelf = AlignItems.STRETCH
+        }
     }
 
     private fun handleFcitxEvent(it: FcitxEvent<*>) {
@@ -109,11 +153,10 @@ class CandidatesView(
 
     private fun updateUI() {
         if (evaluateVisibility()) {
-            visibility = View.VISIBLE
             preeditUi.update(inputPanel)
-            preeditUi.root.isVisible = preeditUi.visible
+            preeditUi.root.visibility = if (preeditUi.visible) View.VISIBLE else View.GONE
             updateCandidates()
-            updatePosition()
+            visibility = View.VISIBLE
         } else {
             visibility = View.GONE
         }
@@ -125,15 +168,24 @@ class CandidatesView(
             FcitxEvent.PagedCandidateEvent.LayoutHint.Vertical -> FlexDirection.COLUMN
             else -> FlexDirection.ROW
         }
-        paged.candidates.forEach {
+        paged.candidates.forEachIndexed { i, it ->
             val item = CandidateItemUi(ctx, theme).apply {
                 text.textSize = 16f
                 // TODO different font for comment
                 text.text = "${it.label}${it.text} ${it.comment}"
+                if (i == paged.cursorIndex) {
+                    root.backgroundColor = theme.genericActiveBackgroundColor
+                    text.setTextColor(theme.genericActiveForegroundColor)
+                }
             }
             candidatesLayout.addView(item.root, FlexboxLayout.LayoutParams(-2, -2))
         }
-        // TODO paging indicator
+        if (paged.hasPrev || paged.hasNext) {
+            prevIcon.alpha = if (paged.hasPrev) 1f else 0.4f
+            nextIcon.alpha = if (paged.hasNext) 1f else 0.4f
+            candidatesLayout.addView(paginationLayout)
+        }
+        shouldUpdatePosition = true
     }
 
     private fun updatePosition() {
@@ -144,6 +196,7 @@ class CandidatesView(
         translationX =
             if (horizontal + selfWidth > parentWidth) parentWidth - selfWidth else horizontal
         translationY = if (bottom + selfHeight > parentHeight) top - selfHeight else bottom
+        shouldUpdatePosition = false
     }
 
     fun updateCursorAnchor(@Size(4) anchor: FloatArray, @Size(2) parent: FloatArray) {

app/src/main/java/org/fcitx/fcitx5/android/input/preedit/PreeditComponent.kt

@@ -20,7 +20,12 @@ class PreeditComponent : UniqueComponent<PreeditComponent>(), Dependent, InputBr
     private val context by manager.context()
     private val theme by manager.theme()
 
-    val ui by lazy { PreeditUi(context, theme) }
+    val ui by lazy {
+        PreeditUi(context, theme).apply {
+            root.alpha = 0.8f
+            root.visibility = View.INVISIBLE
+        }
+    }
 
     override fun onInputPanelUpdate(data: FcitxEvent.InputPanelEvent.Data) {
         ui.update(data)

app/src/main/java/org/fcitx/fcitx5/android/input/preedit/PreeditUi.kt

@@ -65,8 +65,6 @@ open class PreeditUi(override val ctx: Context, private val theme: Theme) : Ui {
         private set
 
     override val root: View = verticalLayout {
-        alpha = 0.8f
-        visibility = View.INVISIBLE
         add(upView, lParams())
         add(downView, lParams())
     }

app/src/main/res/drawable/ic_baseline_arrow_left_24.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <path
+        android:fillColor="#ffffff"
+        android:pathData="M14,7l-5,5 5,5V7z" />
+</vector>

app/src/main/res/drawable/ic_baseline_arrow_right_24.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <path
+        android:fillColor="#ffffff"
+        android:pathData="M10,17l5,-5 -5,-5v10z" />
+</vector>