Question

我想将TextView“Deficient”的基线与EditText“10000”的基线对齐。它们都在<android.support.percent.PercentRelativeLayout>

之内

我尝试了以下操作，但无法使其正常工作。

<android.support.percent.PercentRelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/textInputLayout_soil_nitrogen"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        app:layout_widthPercent="63%">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter N of soil"
            tools:text="10000" />

    </android.support.design.widget.TextInputLayout>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toEndOf="@id/textInputLayout_soil_nitrogen"
        android:layout_toRightOf="@id/textInputLayout_soil_nitrogen"
        app:layout_widthPercent="37%"
        tools:text="Deficient" />

</android.support.percent.PercentRelativeLayout>

为TextView提供20dp的顶部填充可以解决这个问题，但是将它们的基线对齐起来会很不错。在这种情况下，这甚至可能吗？

我删除了textAppearance和id属性，顺便说一句。

Answer 1

老问题，但这是我的解决方案。

基本上TextInputLayout没有为其父级提供基线值。我们需要通过扩展EditText来管道TextInputLayout的正确基线。这对我有用，但是，我不确定基线是否会因TextInputLayout的其他事件而发生变化。

public class CTextInputLayout extends TextInputLayout {
    public CTextInputLayout(Context context) {
        super(context);
    }

    public CTextInputLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CTextInputLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    public int getBaseline()
    {
        EditText editText = getEditText();
        return editText.getPaddingTop() + editText.getBaseline();
    }
}

我假设PercentRelativeLayout支持基线对齐。否则，您可以将CTextInputLayout和TextView包含在RelativeLayout内以获得基线对齐。

Answer 2

在TextInputLayout内，将RelativeLayout与EditText和TextView作为子女放置：

         <android.support.design.widget.TextInputLayout
                android:id="@+id/textInputLayout_soil_nitrogen"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:layout_alignParentTop="true"
                android:layout_widthPercent="63%">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <EditText
                        android:id="@+id/edittext_soil_nitrogen"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:hint="Enter N of soil"
                        android:text="10000" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignBaseline="@id/edittext_soil_nitrogen"
                        android:layout_alignParentRight="true"
                        android:layout_widthPercent="37%"
                        android:text="Deficient" />

                </RelativeLayout>

            </android.support.design.widget.TextInputLayout>`

Answer 3

请替换以下代码行

 <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toEndOf="@id/textInputLayout_soil_nitrogen"
        android:layout_toRightOf="@id/textInputLayout_soil_nitrogen"
        app:layout_widthPercent="37%"
        tools:text="Deficient" />

要

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/textInputLayout_soil_nitrogen"
        android:layout_toEndOf="@id/textInputLayout_soil_nitrogen"
        android:layout_toRightOf="@id/textInputLayout_soil_nitrogen"
        tools:text="Deficient" />

希望它能帮到你!!

Answer 4

Check this image for verification

请尝试以下代码

<android.support.design.widget.TextInputLayout
    android:id="@+id/textInputLayout_soil_nitrogen"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_alignParentTop="true"
    app:layout_widthPercent="63%">

    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter N of soil"
        tools:text="10000" />

</android.support.design.widget.TextInputLayout>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@id/textInputLayout_soil_nitrogen"
    android:layout_toEndOf="@id/textInputLayout_soil_nitrogen"
    android:layout_toRightOf="@id/textInputLayout_soil_nitrogen"
    android:gravity="bottom|start"
    android:padding="8dp"
    android:text="Deficient"
    android:textColor="@android:color/black"
    app:layout_widthPercent="37%" />

Answer 5

如果您使用的是 Kotlin，我找到了一个有效的解决方案（有点）。它的程序化解决方案。

我使用了 ConstraintLayout 来包装视图

假设 textViewDeficient 是与 TextInputLayout 布局基线对齐的视图。

这就是我的布局的样子

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/cl_wrapper"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/textInputLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="@string/phone_number"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/textInputEditText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="100000"/>

    </com.google.android.material.textfield.TextInputLayout>

    <TextView
        android:id="@+id/textViewDeficient"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toEndOf="@id/textInputLayout"
        app:layout_constraintLeft_toRightOf="@id/textInputLayout"
        app:layout_constraintTop_toTopOf="@id/textInputLayout"
        android:text="Deficient"/>

</androidx.constraintlayout.widget.ConstraintLayout>

并在您的活动中使用此方法

private fun adjustTextView() {
    fun setTextViewTopMargin() {
        textInputLayout?.post {
            val frameLayout = textInputLayout?.children?.iterator()?.next()
            if (frameLayout is FrameLayout) {
                frameLayout.postIt { fl ->
                    textInputEditText?.postIt { tiet ->
                        val topMargin = fl.marginTop + tiet.marginTop + dpToPx(5)
                        textViewDeficient?.updateLayoutParams<ConstraintLayout.LayoutParams> {
                            updateMargins(top = topMargin)
                        }
                    }
                }
            }
        }
    }

    textInputLayout?.addOnLayoutChangeListener { _, _, _, _, _, _, _, _, _ ->
        setTextViewTopMargin()
    }
    setTextViewTopMargin()
}

将这些扩展功能添加到您的活动或任何文件中

fun View.postIt(postAction: (v: View) -> Unit) { post { postAction.invoke(this) }}

fun Context.dpToPx(dp: Int) = TypedValue.applyDimension(
        TypedValue.COMPLEX_UNIT_DIP, dp.toFloat(), resources.displayMetrics
    ).toInt()

现在打电话

adjustTextView()

在您的活动的 onCreate 方法中

我希望这会有所帮助。让我知道它是否可以改进

将基线与TextView进行对齐，TextView包含在TextInputLayout中

5 个答案: