- Material Design风格文本输入样式TextInput
- Material Design之TextInputLayout
- android TextInputLayout setError
- Andorid - Material Design之TextIn
- Android Material Design 之 TextIn
- 带有字数统计的 TextInputLayout
- android design 学习1:TextInputLayo
- Material Design系列之BottomNavigati
- Material Design实战之可折叠式标题栏
- Material design library系列——TextI
引言
TextInputLayout是Material Design的控件之一,继承自LinearLayout。
参考文章:
- Material Design 之 TextInputLayout和TextInputEditText
- Android TextInputLayout,打造 Material Design 风格的文本输入框
1.几种属性
- app:counterEnabled:字符计数是否可用
- app:counterMaxLength计数最大的长度
- app:counterOverflowTextAppearance:计数超过最大长度时显示的文本样式
- app:counterTextAppearance:显示的计数的文本样式
- app:errorEnabled:显示错误信息是否可用
- app:errorTextAppearance:显示错误信息的文本样式
- android:hint 浮动标签
- app:hintAnimationEnabled 控制是否需要浮动标签的动画
- app:hintEnabled 控制是否显示浮动标签
- app:hintTextAppearance 浮动标签的文本样式
- app:passwordToggleDrawable 密码可见切换图标
- app:passwordToggleEnabled 控制是否显示密码可见切换图标
2. 使用示例
(1)带浮动标签的文本框
效果图:
布局文件:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<android.support.design.widget.TextInputLayout
android:id="@+id/text_input_layout_user"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:scrollbarAlwaysDrawHorizontalTrack="true"
android:textColorHint="@color/colorHint"
>
<EditText
android:id="@+id/text_input_user"
android:layout_width="match_parent"
android:layout_height="48dp"
android:hint="用户名"
android:inputType="text"
android:textColor="@color/black"
/>
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="@+id/text_input_layout_phone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:paddingLeft="15dp"
android:paddingRight="15dp"
app:counterOverflowTextAppearance="@style/TextOverCount"
android:scrollbarAlwaysDrawHorizontalTrack="true"
android:textColorHint="@color/colorHint"
>
<EditText
android:id="@+id/text_input_phone"
android:layout_width="match_parent"
android:layout_height="48dp"
android:hint="手机号码"
android:inputType="number"
android:textColor="@color/black"
/>
</android.support.design.widget.TextInputLayout>
</LinearLayout>
(2)带字符计数的文本框
效果图:
在上面的基础上添加以下属性:
app:counterOverflowTextAppearance="@style/TextOverCount"
app:counterTextAppearance="@style/TextCount"
app:counterMaxLength="10"
app:counterEnabled="true"
用到的样式
<style name="TextOverCount" parent="Base.TextAppearance.AppCompat.Light.Widget.PopupMenu.Small">
<item name="android:textColor">@color/color_red</item>
</style>
<style name="TextCount" parent="Base.TextAppearance.AppCompat.Light.Widget.PopupMenu.Small">
<item name="android:textColor">@color/color_blue</item>
</style>
(3)修改浮动标签的字体大小
效果图:
我们可以利用上面说到的app:hintTextAppearance 属性:
app:hintTextAppearance="@style/HintTextStyle"
样式:
<style name="HintTextStyle" parent="Base.TextAppearance.AppCompat.Light.Widget.PopupMenu.Small">
<item name="android:textSize">18sp</item>
<item name="android:textColor">@color/color_blue</item>
</style>
(4)显示密码可见和隐藏的切换按钮
效果图:
添加以下属性即可:
app:passwordToggleEnabled="true"
app:passwordToggleTint="@color/colorPrimary"
(5)显示错误信息
效果图:
代码如下:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_text_input_layout);
ButterKnife.bind(this);
setTitle("TextInputLayout的学习");
mTextInputPassword.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
}
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
mTextInputLayoutPassword.setErrorEnabled(false);
}
@Override
public void afterTextChanged(Editable s) {
}
});
}
@OnClick(R.id.login)
public void onViewClicked() {
String password = mTextInputPassword.getText().toString();
if(TextUtils.isEmpty(password)||password.length()<6){
mTextInputLayoutPassword.setError("密码错误不能少于6个字符");
}
}
3. 完整的demo
效果图:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusableInTouchMode="true"
android:orientation="vertical">
<android.support.design.widget.TextInputLayout
android:id="@+id/til_mobile"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/dp_16"
android:layout_marginLeft="@dimen/dp_16"
android:layout_marginRight="@dimen/dp_16"
app:counterEnabled="true"
app:counterMaxLength="11"
app:counterOverflowTextAppearance="@style/TextOverCount">
<android.support.design.widget.TextInputEditText
android:id="@+id/et_mobile"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="@mipmap/ic_mobile"
android:drawableStart="@mipmap/ic_mobile"
android:drawablePadding="@dimen/dp_4"
android:gravity="center_vertical"
android:inputType="number"
android:hint="请输入手机号"/>
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="@+id/til_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="@dimen/dp_16"
android:layout_marginLeft="@dimen/dp_16"
app:passwordToggleEnabled="true">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="@mipmap/ic_password"
android:drawableStart="@mipmap/ic_password"
android:drawablePadding="@dimen/dp_4"
android:gravity="center_vertical"
android:hint="请输入密码"
android:inputType="textPassword"/>
</android.support.design.widget.TextInputLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/dp_16"
android:onClick="onClickLogin"
android:text="登录"
android:textColor="@color/white"
android:textSize="@dimen/sp_16"
android:background="@color/color_blue"/>
</LinearLayout>
网友评论