提示在 TextInputLayout 中的位置太高

Posted 2023-04-18

【中文标题】提示在 TextInputLayout 中的位置太高

【英文标题】：Hint's Position in TextInputLayout too high

【发布时间】：2021-11-03 09:41:51

【问题描述】：

我正在尝试在我的登录表单中使用 TextInputLayout 来使我的 EditText 看起来像这样：

但是，我的 EditText 变成了这样：

下划线看起来太低，提示看起来太高 这很奇怪，因为我其他项目中的 TextInputLayout 看起来不错

我已经尝试在 EditText 中添加填充，但它只是使输入与提示重叠。 这是损坏的 TextInputLayout 的 xml：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_
    android:layout_
    tools:context=".Login">

    <ImageView
        android:layout_
        android:layout_
        android:src="@drawable/background_login"
        android:scaleType="centerCrop"/>

    <LinearLayout
        android:layout_
        android:layout_
        android:background="@drawable/login_form"
        android:layout_marginTop="125dp"
        android:layout_marginBottom="100dp"
        android:layout_marginEnd="50dp"
        android:layout_marginStart="50dp"
        android:elevation="1dp"
        android:paddingStart="50dp"
        android:paddingEnd="50dp"
        android:orientation="vertical"
        android:gravity="center_vertical">

        <TextView
            android:layout_
            android:layout_
            android:textAlignment="center"
            android:textStyle="bold"
            android:textColor="#641C28"
            android:text="@string/login"
            android:textSize="20sp"
            android:layout_marginBottom="15dp"/>

        <com.google.android.material.textfield.TextInputLayout
            android:layout_
            android:layout_>

            <EditText
                android:id="@+id/edt_userlogin"
                android:layout_
                android:layout_
                android:background="#FCC858"
                android:hint="@string/username"
                android:layout_marginBottom="15dp"
                android:drawableStart="@drawable/username" />
        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            android:layout_
            android:layout_
            app:passwordToggleEnabled="true">

            <EditText
                android:id="@+id/edt_passlogin"
                android:layout_
                android:layout_
                android:background="#FCC858"
                android:hint="@string/password"
                android:drawableStart="@drawable/password"
                android:layout_marginBottom="40dp"
                android:inputType="textPassword"/>
        </com.google.android.material.textfield.TextInputLayout>

        <Button
            android:id="@+id/btn_login"
            android:layout_
            android:layout_
            android:background="@drawable/custom_btnlogin"
            android:theme="@style/btnLoginStyle"
            android:text="Sign In"/>
    </LinearLayout>

    <ImageButton
        android:layout_
        android:layout_
        android:background="@drawable/background_logo"
        android:elevation="1dp"
        android:scaleType="fitCenter"
        android:src="@drawable/logo_borderless"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="75dp"/>

</RelativeLayout>

编辑：

所以，我尝试从我以前的 xml 中复制代码，以防我遗漏了什么，但问题仍然存在

我已经尝试过新建一个项目并使用TextInputLayout，但问题仍未解决

我认为问题不在于 xml。这是我的模块 gradle，我在这里没有发现任何问题，但也许你们会这样做：

plugins 
    id 'com.android.application'


android 
    compileSdkVersion 30
    buildToolsVersion "30.0.2"

    defaultConfig 
        applicationId "com.itats.huwenakapp"
        minSdkVersion 22
        targetSdkVersion 30
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    

    buildTypes 
        release 
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        
    
    compileOptions 
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    


dependencies 

    implementation 'androidx.appcompat:appcompat:1.3.1'
    implementation 'com.google.android.material:material:1.4.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.1.0'
    implementation 'androidx.navigation:navigation-fragment:2.3.5'
    implementation 'androidx.navigation:navigation-ui:2.3.5'
    implementation 'androidx.lifecycle:lifecycle-livedata-ktx:2.3.1'
    implementation 'androidx.lifecycle:lifecycle-viewmodel-ktx:2.3.1'
    testImplementation 'junit:junit:4.+'
    androidTestImplementation 'androidx.test.ext:junit:1.1.3'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'

【问题讨论】：

尝试在 TextInputLayout 中使用 android:hint="@string/username"。

不工作，没有任何改变

【参考方案1】：

从您的 EditText 中删除 android:layout_marginBottom="15dp"。

如果您想要 marginBottom，请将其添加到 TextInputLayout。

【讨论】：

不工作，TextInputLayout中的margin和EditText中的margin效果一样

然后查看你正在使用的drawables

drawable 看起来很好，当我尝试使用没有 TextInputLayout 的 EditText 时，视图看起来很好这个问题只有在我用 TextInputLayout 包装我的 EditText 时才会发生

【参考方案2】：

我找到了一个可行的解决方案：我没有在EditText 中使用DrawableStart，而是使用以下代码将drawable 放在TextInputLayout 中：

app:startIconDrawable="@drawable/your_drawable"

结果是这个视图：

如您所见，尽管下划线看起来仍然太靠下，但可绘制对象和提示看起来彼此一致。这不是一个完美的解决方案，但至少看起来更好。