【问题标题】:Android EditText view Floating Hint in Material Design材料设计中的Android EditText视图浮动提示
【发布时间】:2014-12-15 00:13:51
【问题描述】:

API 21 是否提供使用以下功能的方法:

http://www.google.com/design/spec/components/text-fields.html#text-fields-floating-labels

我正在尝试浮动 EditText 提示。

谢谢!

【问题讨论】:

  • 我在搜索过程中也遇到了这个问题,但想知道 Android 是否提供了本机方法。
  • 这让我们认为Android有问题。 Material Design API 有几个缺失的地方。另一个例子是浮动操作按钮。

标签: android text edit hint


【解决方案1】:

浮动提示EditText:

在 gradle 中添加以下依赖项:

compile 'com.android.support:design:22.2.0'

在布局中:

<android.support.design.widget.TextInputLayout
    android:id="@+id/text_input_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

        <EditText
            android:id="@+id/editText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="UserName"/>
    </android.support.design.widget.TextInputLayout>

【讨论】:

【解决方案2】:

是的,自 2015 年 5 月 29 日起,此功能现已在 Android Design Support Library 中提供

这个库包括对

的支持
  • 浮动标签
  • 浮动操作按钮
  • 小吃店
  • 导航抽屉
  • 等等

【讨论】:

【解决方案3】:

Android 支持库可以在依赖项中的 gradle 中导入:

    compile 'com.android.support:design:22.2.0'

它应该包含在 GradlePlease 中!并作为使用它的示例:

 <android.support.design.widget.TextInputLayout
    android:id="@+id/to_text_input_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <AutoCompleteTextView
        android:id="@+id/autoCompleteTextViewTo"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="To"
        android:layout_marginTop="45dp"
        />
</android.support.design.widget.TextInputLayout>

顺便说一句,编辑器可能不理解在 TextInputLayout 中允许使用 AutoCompleteTextView。

【讨论】:

    【解决方案4】:

    Android 没有提供原生方法。也不是 AppCompat。

    试试这个库:https://github.com/rengwuxian/MaterialEditText

    这可能是你想要的。

    【讨论】:

    • 我在 gradle 同步时收到错误:(1)“属性“颜色”已被定义”,可能是因为 appcompat-v7。我无法摆脱它。有什么建议吗?
    • MaterialEditText 没有定义名为“color”的属性,所以肯定是别处有问题。
    【解决方案5】:

    导入支持库,在项目的 build.gradle 文件中,在项目的依赖项中添加以下行:

    dependencies {
        compile fileTree(dir: 'libs', include: ['*.jar'])
    
        compile 'com.android.support:design:22.2.0'
        compile 'com.android.support:appcompat-v7:22.2.0'
    }
    

    在您的 UI 布局中使用以下 TextInputLayout:

    <android.support.design.widget.TextInputLayout
        android:id="@+id/usernameWrapper"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    
        <EditText
            android:id="@+id/username"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textEmailAddress"
            android:hint="Username"/>
    
    </android.support.design.widget.TextInputLayout>
    

    然后,在 setContentView 调用之后在 TextInputLayout 上调用 setHint,因为要为浮动标签设置动画,您只需要使用 setHint 方法设置一个提示。

    final TextInputLayout usernameWrapper = (TextInputLayout) findViewById(R.id.usernameWrapper);
    usernameWrapper.setHint("Username");
    

    【讨论】:

    • 至少使用 23.1.1,您不需要显式调用 setHint()。它适用于布局 xml 中 EditText 上设置的提示。
    【解决方案6】:

    您需要将以下内容添加到您的模块 build.gradle 文件中:

    implementation 'com.google.android.material:material:1.0.0'
    

    并在您的 XML 中使用 com.google.android.material.textfield.TextInputLayout:

           <com.google.android.material.textfield.TextInputLayout
                android:id="@+id/text_input_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/my_hint">
    
            <EditText
                android:id="@+id/editText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="UserName"/>
       </com.google.android.material.textfield.TextInputLayout>
    

    【讨论】:

      【解决方案7】:

      @andruboy 对https://gist.github.com/chrisbanes/11247418 的建议可能是你最好的选择。

      https://github.com/thebnich/FloatingHintEditText 类适用于 appcompat-v7 v21.0.0,但由于 v21.0.0 不支持带有 EditText 子类的强调色,FloatingHintEditText 的下划线将是默认的纯黑色或纯白色。此外,填充未针对 Material 样式 EditText 进行优化,因此您可能需要对其进行调整。

      【讨论】:

      • 谢谢。我猜谷歌也没有提供用于创建材料风格的编辑文本警告的 api,就像在google.com/design/spec/components/… 抱歉业余问题,我正在尝试使用谷歌的 api/libraries 尽可能多地适应材料设计并试图找出与任何外部库相比已提供的所有内容。再次感谢!
      【解决方案8】:

      不,它没有。我希望在未来的 api 版本中做到这一点,但现在我们被 EditText 困住了。另一个选择是这个库:
      https://github.com/marvinlabs/android-floatinglabel-widgets

      【讨论】:

        【解决方案9】:

        为了更简单地使用 InputTextLayout,我创建了这个库,它将您的 XML 代码减少到一半以下,并且还为您提供了设置错误消息和提示消息的能力以及一种简单的方法做你的验证。 https://github.com/TeleClinic/SmartEditText

        只需添加

        compile 'com.github.TeleClinic:SmartEditText:0.1.0'
        

        然后你可以这样做:

        <com.teleclinic.kabdo.smartmaterialedittext.CustomViews.SmartEditText
            android:id="@+id/emailSmartEditText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:setLabel="Email"
            app:setMandatoryErrorMsg="Mandatory field"
            app:setRegexErrorMsg="Wrong email format"
            app:setRegexType="EMAIL_VALIDATION" />
        
        <com.teleclinic.kabdo.smartmaterialedittext.CustomViews.SmartEditText
            android:id="@+id/passwordSmartEditText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:setLabel="Password"
            app:setMandatoryErrorMsg="Mandatory field"
            app:setPasswordField="true"
            app:setRegexErrorMsg="Weak password"
            app:setRegexType="MEDIUM_PASSWORD_VALIDATION" />
        
        <com.teleclinic.kabdo.smartmaterialedittext.CustomViews.SmartEditText
            android:id="@+id/ageSmartEditText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:setLabel="Age"
            app:setMandatory="false"
            app:setRegexErrorMsg="Is that really your age :D?"
            app:setRegexString=".*\\d.*" />
        

        【讨论】:

          【解决方案10】:

          使用Material Components Library提供的TextInputLayout

              <com.google.android.material.textfield.TextInputLayout
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  android:hint="Label">
          
                  <com.google.android.material.textfield.TextInputEditText
                      android:layout_width="match_parent"
                      android:layout_height="match_parent" />
          
              </com.google.android.material.textfield.TextInputLayout>
          

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2015-07-15
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2021-08-08
            相关资源
            最近更新 更多