refactor(symbol): improve liquid keyboard displaying

Author: WhiredPlanck

app/src/main/assets/shared/tongwenfeng.trime.yaml

@@ -861,7 +861,7 @@ liquid_keyboard:
   key_height_land: 40 #横屏模式按键高度
   single_width: 60    #single类型的按键宽度
   vertical_gap: 8     #纵向按键间隙
-  margin_x: 2       #左右按键间隙的1/2
+  margin_x: 5       #左右按键间隙的1/2
   fixed_key_bar: # 固定按键条
     position: bottom  # 摆放位置（在滚动区域的……） top|bottom|left|right
     keys: # 按键（显示名称为对应的label，不能放太多）

app/src/main/assets/shared/trime.yaml

@@ -679,7 +679,7 @@ liquid_keyboard:
   key_height_land: 40 #横屏模式按键高度
   single_width: 60    #single类型的按键宽度
   vertical_gap: 1     #纵向按键间隙
-  margin_x: 0.5         #左右按键间隙的1/2
+  margin_x: 5         #左右按键间隙的1/2
   fixed_key_bar:  # 固定按键条
     position: bottom  # 摆放位置（在滚动区域的……） top|bottom|left|right
     keys:  # 按键（显示名称为对应的label，不能放太多）

app/src/main/java/com/osfans/trime/data/theme/mapper/LiquidKeyboardMapper.kt

@@ -48,9 +48,9 @@ class LiquidKeyboardMapper(
                                 if (map.containsKey("click")) {
                                     val clickText = map["click"] ?: ""
                                     val labelText = map["label"] ?: ""
-                                    LiquidKeyboard.KeyItem(clickText, labelText)
+                                    keys.add(LiquidKeyboard.KeyItem(clickText, labelText))
                                 } else {
-                                    map.forEach { keys.add(LiquidKeyboard.KeyItem(it.value, it.key)) }
+                                    map.forEach { keys.add(LiquidKeyboard.KeyItem(it.key, it.value)) }
                                 }
                             } else if (item is YamlScalar) {
                                 keys.add(LiquidKeyboard.KeyItem(item.content))

app/src/main/java/com/osfans/trime/ime/symbol/LiquidAdapter.kt

@@ -7,10 +7,15 @@ package com.osfans.trime.ime.symbol
 
 import android.content.Context
 import android.view.ViewGroup
+import androidx.constraintlayout.widget.ConstraintLayout
+import androidx.core.view.updateLayoutParams
 import androidx.recyclerview.widget.RecyclerView
 import com.chad.library.adapter4.BaseQuickAdapter
 import com.osfans.trime.data.theme.Theme
 import com.osfans.trime.data.theme.model.LiquidKeyboard
+import com.osfans.trime.ime.core.AutoScaleTextView
+import splitties.dimensions.dp
+import splitties.views.gravityCenter
 
 class LiquidAdapter(
     private val theme: Theme,
@@ -24,7 +29,17 @@ class LiquidAdapter(
         context: Context,
         parent: ViewGroup,
         viewType: Int,
-    ): ViewHolder = ViewHolder(LiquidItemUi(context, theme))
+    ): ViewHolder {
+        val ui = LiquidItemUi(context, theme)
+        ui.mainText.apply {
+            scaleMode = AutoScaleTextView.Mode.Proportional
+            gravity = gravityCenter
+            updateLayoutParams {
+                width = context.dp(theme.liquidKeyboard.singleWidth)
+            }
+        }
+        return ViewHolder(ui)
+    }
 
     override fun onBindViewHolder(
         holder: ViewHolder,

app/src/main/java/com/osfans/trime/ime/symbol/LiquidItemUi.kt

@@ -10,12 +10,15 @@ import com.osfans.trime.data.theme.ColorManager
 import com.osfans.trime.data.theme.FontManager
 import com.osfans.trime.data.theme.Theme
 import com.osfans.trime.ime.core.AutoScaleTextView
+import com.osfans.trime.ime.keyboard.GestureFrame
 import splitties.dimensions.dp
 import splitties.views.dsl.constraintlayout.centerInParent
 import splitties.views.dsl.constraintlayout.constraintLayout
 import splitties.views.dsl.constraintlayout.lParams
 import splitties.views.dsl.core.Ui
 import splitties.views.dsl.core.add
+import splitties.views.dsl.core.lParams
+import splitties.views.dsl.core.matchParent
 import splitties.views.dsl.core.view
 import splitties.views.dsl.core.wrapContent
 import splitties.views.setPaddingDp
@@ -34,18 +37,21 @@ class LiquidItemUi(
         setTextColor(ColorManager.getColor("key_text_color"))
     }
 
-    override val root = constraintLayout {
-        background = ColorManager.getDecorDrawable(
-            "key_back_color",
-            "key_border_color",
-            dp(theme.generalStyle.keyBorder),
-            dp(theme.generalStyle.roundCorner),
-        )
-        add(
-            mainText,
-            lParams(wrapContent, wrapContent) {
-                centerInParent()
-            },
-        )
+    override val root = view(::GestureFrame) {
+        val content = constraintLayout {
+            background = ColorManager.getDecorDrawable(
+                "key_back_color",
+                "key_border_color",
+                dp(theme.generalStyle.keyBorder),
+                dp(theme.generalStyle.roundCorner),
+            )
+            add(
+                mainText,
+                lParams(wrapContent, wrapContent) {
+                    centerInParent()
+                },
+            )
+        }
+        add(content, lParams(matchParent, matchParent))
     }
 }

app/src/main/java/com/osfans/trime/ime/symbol/LiquidLayout.kt

@@ -125,7 +125,7 @@ class LiquidLayout(
 
     val liquidView =
         recyclerView {
-            val space = dp(3)
+            val space = dp(theme.liquidKeyboard.marginX.toInt())
             addItemDecoration(SpacesItemDecoration(space))
             setPadding(space)
         }

app/src/main/java/com/osfans/trime/ime/symbol/LiquidTabsUi.kt

@@ -44,6 +44,7 @@ class LiquidTabsUi(
 
         override val root =
             view(::GestureFrame) {
+                minimumWidth = dp(40)
                 add(
                     text,
                     lParams {

app/src/main/java/com/osfans/trime/ime/symbol/LiquidWindow.kt

@@ -12,6 +12,7 @@ import androidx.lifecycle.lifecycleScope
 import androidx.recyclerview.widget.StaggeredGridLayoutManager
 import com.google.android.flexbox.AlignItems
 import com.google.android.flexbox.FlexDirection
+import com.google.android.flexbox.FlexWrap
 import com.google.android.flexbox.FlexboxLayoutManager
 import com.google.android.flexbox.JustifyContent
 import com.osfans.trime.daemon.RimeSession
@@ -56,7 +57,7 @@ class LiquidWindow(
     private val mainAdapter by lazy {
         LiquidAdapter(theme) {
             when (currentDataType) {
-                LiquidData.Type.SYMBOL -> triggerSymbolInput(this.text)
+                LiquidData.Type.SYMBOL -> triggerSymbolInput(this.altText)
                 LiquidData.Type.TABS -> {
                     val realPosition = LiquidData.getTagList()
                         .indexOfFirst { it.label == this.text }
@@ -80,8 +81,7 @@ class LiquidWindow(
     private val mainLayoutManager by lazy {
         FlexboxLayoutManager(context).apply {
             flexDirection = FlexDirection.ROW
-            justifyContent = JustifyContent.SPACE_AROUND
-            alignItems = AlignItems.BASELINE
+            flexWrap = FlexWrap.WRAP
         }
     }