如何将国家代码选择器添加到 material 设计编辑文本布局中？

Question

我正在为国家/地区代码选择器使用 https://github.com/hbb20/CountryCodePickerProject 库。 UI 设计师就是这样做的。但不幸的是，任何人都可以 XML 解决这个问题吗？您必须使用 hbb20 国家代码选择器 & material 设计文本布局 + material 设计编辑文本。

Answer 1

在您的项目中创建这个 class。

class CustomTextInputLayout @JvmOverloads
    /**
     * Constructor
     * @param context Context
     * @param attrs Attribute Set for view
     * @param defStyleAttr Int style from attr
     */
    constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0) : TextInputLayout(context, attrs, defStyleAttr) {
    
        private var bounds: Rect? = null
        private var recalculateMethod: Method? = null
        private var collapsingTextHelper: Any? = null
    
        /**
         * Companion Object
         */
        companion object {
            const val COLLAPSING_HELPER = "collapsingTextHelper"
            const val COLLAPSED_BOUNDS = "collapsedBounds"
            const val RECALCULATE = "recalculate"
        }
    
        /**
         * Init constructors
         */
        init {
            init()
        }
    
        /**
         * On layout changes
         * @param changed Boolean
         * @param left Int
         * @param top Int
         * @param right Int
         * @param bottom Int
         */
        override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
            super.onLayout(changed, left, top, right, bottom)
            adjustBounds()
        }
    
        /**
         * Init function call the TextInputLayout class and the secondary internal class CollapsingTextHelper
         * @see TextInputLayout
         */
        private fun init() {
            try {
                //Search internal and private class over object called as variable
                val cthField = TextInputLayout::class.java.getDeclaredField(COLLAPSING_HELPER)
                cthField.isAccessible = true
                collapsingTextHelper = cthField.get(this)
    
                //Search in private class the other component to create a view
                val boundsField = collapsingTextHelper?.javaClass?.getDeclaredField(COLLAPSED_BOUNDS)
                boundsField?.isAccessible = true
                bounds = boundsField?.get(collapsingTextHelper) as Rect
                recalculateMethod = collapsingTextHelper?.javaClass?.getDeclaredMethod(RECALCULATE)
    
            } catch (e: NoSuchFieldException) {
                collapsingTextHelper = null
                bounds = null
                recalculateMethod = null
                e.printStackTrace()
            } catch (e: IllegalAccessException) {
                collapsingTextHelper = null
                bounds = null
                recalculateMethod = null
                e.printStackTrace()
            } catch (e: NoSuchMethodException) {
                collapsingTextHelper = null
                bounds = null
                recalculateMethod = null
                e.printStackTrace()
            }
        }
    
        /**
         * Adjust Bounds of the view for padding
         * and changes for the view
         */
        private fun adjustBounds() {
            if (collapsingTextHelper == null)
                return
            try {
                bounds?.left = editText?.left!! + editText?.paddingLeft!!
                recalculateMethod?.invoke(collapsingTextHelper)
            } catch (e: InvocationTargetException) {
                e.printStackTrace()
            } catch (e: IllegalAccessException) {
                e.printStackTrace()
            } catch (e: IllegalArgumentException) {
                e.printStackTrace()
            }
    
        }
    }

现在您可以在设计文件中将此 class 作为 XML 组件使用。然后使用约束或您正在使用的任何父布局将您的国家/地区代码选择器 XML 组件放在此编辑文本的顶部。

<com.xxx.xxx.utils.CustomTextInputLayout
    android:id="@+id/userNameLayout"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:errorEnabled="true"
    android:layout_marginStart="@dimen/_20sdp"
    android:layout_marginEnd="@dimen/_20sdp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/imageView2">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/inputText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="@string/emailOrMobile"
        android:inputType="textEmailAddress"
        android:theme="@style/customUnderLinePrimary" />

</com.xxx.xxx.utils.CustomTextInputLayout>

将此代码添加到您的 activity 或片段中。请确保您使用的 drawable 是透明的或与背景颜色相同。

 inputText.setCompoundDrawablesWithIntrinsicBounds(R.drawable.transparent, 0, 0, 0)
 inputText.compoundDrawablePadding = 80

如何将国家代码选择器添加到 material 设计编辑文本布局中？

How to add country code picker into material design edit text layout?

android

material-design

mobile-country-code