[英]How to remove floating label from TextInputLayout with OutlinedBox style?
Is there way to remove floating label (hint) when the TextInputLayout
is in focused mode?当
TextInputLayout
处于聚焦模式时,有没有办法删除浮动标签(提示)?
When I try to set app:hintEnabled="false"
and hint inside TextInputeEditText
, the TextInputLayout
behaves weird by hiding top stroke.当我尝试在
TextInputeEditText
设置app:hintEnabled="false"
和提示时, TextInputLayout
通过隐藏顶部笔触表现app:hintEnabled="false"
奇怪。
<com.google.android.material.textfield.TextInputLayout
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Text">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
Important thing is that I use Material Components in version 1.1.0-alpha01.
重要的是我在
1.1.0-alpha01.
版本中使用 Material Components 1.1.0-alpha01.
Edit编辑
This is what it looks like (when input is not focused):这是它的样子(当输入未聚焦时):
Top stroke is cut.顶部行程被切断。
只需以编程方式为EditText
设置提示,然后从TextInputLayout
删除app:hintEnabled="false"
(如果有),就我而言是有效的:)
Yes there's a rather simple way to remove the floating label hint and only have a hint inside your TextInputLayout
.是的,有一种相当简单的方法可以删除浮动标签提示,并且在
TextInputLayout
只有一个提示。
This can be easily achieved by disabling the hint in the TextInputLayout
, and setting the hint on the TextInputEditText
instead of the TextInputLayout
like this:这可以通过禁用
TextInputLayout
的提示轻松实现,并在TextInputEditText
而不是TextInputLayout
上设置提示,如下所示:
<com.google.android.material.textfield.TextInputLayout
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:hintEnabled="false">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="hint text comes here" />
</com.google.android.material.textfield.TextInputLayout>
The result looks something like this:结果如下所示:
And when some text is added, it will look like this:添加一些文本后,它将如下所示:
I tried this out in Material Components v1.2.0我在 Material Components v1.2.0 中试过了
Try to set hint empty of both text layout and edit text:-尝试将文本布局和编辑文本的提示设置为空:-
<com.google.android.material.textfield.TextInputLayout
app:boxBackgroundMode="outline"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:hint=""
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
If you want to use hint then you can use custom drawable as background of EditText :-如果你想使用提示,那么你可以使用自定义 drawable 作为 EditText 的背景:-
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="10dp"/>
<solid android:color="#ffffff"/>
<stroke android:color="#000000"
android:width="2dp"/>
</shape>
You should use this style in first :你应该首先使用这种风格:
<style name="TextInputLayoutOutlinedBoxStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="android:textColorHint">#F5F5F5</item>
<item name="hintTextAppearance">@style/HintTextAppearance</item>
<item name="boxCornerRadiusBottomEnd">20dp</item>
<item name="boxCornerRadiusBottomStart">20dp</item>
<item name="boxCornerRadiusTopEnd">20dp</item>
<item name="boxCornerRadiusTopStart">20dp</item>
</style>
And you should have textinputlayout that contain this style like this :你应该有包含这种样式的 textinputlayout ,如下所示:
<com.google.android.material.textfield.TextInputLayout
style="@style/TextInputLayoutOutlinedBoxStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/relativelayout_activatetoken_main"
android:layout_marginStart="20dp"
android:layout_marginTop="30dp"
android:layout_marginEnd="20dp"
android:hint="@string/activatetoken_passwordhint"
android:textColorHint="@color/colorText"
app:helperText="@string/activatetoken_passwordhelpertext"
app:helperTextTextAppearance="@style/TextAppearanceHelper"
app:hintTextAppearance="@style/TextAppearanceBase"
app:passwordToggleTint="@color/text_50">
And for the border color use this in colors :对于边框颜色,在颜色中使用它:
<color name="mtrl_textinput_default_box_stroke_color" tools:override="true">#F5F5F5</color>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.