Android TextInputLayout使用及显示设置

TextInputLayout控件是一个容器,他和ScrollView一样只接受一个子元素,并且这个子元素是EditText,优点:更加友好的显示提示,可以友好的显示错误信息

1.实现布局
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".MainActivity"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
    <android.support.design.widget.TextInputLayout
        android:layout_margin="16dp"
        android:id="@+id/tl_username"
        android:layout_centerInParent="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
       
        >
        <EditText
            android:textSize="22sp"
            android:id="@+id/et_username"
            android:hint="username"
            android:maxLength="25"
            android:maxLines="1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </android.support.design.widget.TextInputLayout>
    <android.support.design.widget.TextInputLayout
        android:layout_below="@id/tl_username"
        android:id="@+id/tl_password"
        android:layout_gravity="center"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_centerHorizontal="true"
        android:layout_margin="16dp"
      >
        <EditText
            android:textSize="22sp"
            android:inputType="textPassword"
            android:id="@+id/et_password"
            android:hint="password"
            android:maxLength="25"
            android:maxLines="1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </android.support.design.widget.TextInputLayout>
    <Button
        android:onClick="loginClick"
        android:id="@+id/btn_login"
        android:layout_below="@id/tl_password"
        android:text="登  录"
        android:layout_margin="16dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</RelativeLayout>

请注意一个问题:
1.如果使用默认的TextInputLayout的风格,hint字体和提示字体以及水平线的
颜色都不太合适,所以我们需要进行修改。

在styles.xml文件中添加几个style

<style name="errorAppearance" parent="TextAppearance.AppCompat">
        <item name="android:textSize">18sp</item>
        <item name="android:textColor">@android:color/holo_red_light</item>
    </style>
    //这个是错误提示字体的大小和颜色
    <style name="hintAppearance" parent="TextAppearance.AppCompat">
        <item name="android:textSize">18sp</item>
        <item name="android:textColor">@color/colorPrimary</item>
    </style>
    //这个是浮动提示字体的大小和颜色

还可以修改水平线的颜色,修改color.xml文件中的colorAccent的色值即可

代码如下:

public class MainActivity extends AppCompatActivity {
    private TextInputLayout tl_username,tl_password;
    private EditText et_username,et_password;
    private static final  int PERMISSION_REQUEST_CALL_PHONE=1;//设置请求码
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        InitView();


    }

    private void InitView() {
        tl_username=findViewById(R.id.tl_username);
        tl_password=findViewById(R.id.tl_password);
        et_username=findViewById(R.id.et_username);
        et_password=findViewById(R.id.et_password);
    }


    private boolean vaildate(String string){
        return string.length()>6;
   }
    public void loginClick(View view) {
        String username=et_username.getText().toString();
        String password=et_password.getText().toString();
        if(!vaildate(username)){
            tl_username.setErrorEnabled(true);
            tl_username.setError("please input correct username");

        }
        else if(!vaildate(password)){
            tl_password.setErrorEnabled(true);
            tl_password.setError("please input correct password");
        }else{
            tl_username.setErrorEnabled(false);
            tl_password.setErrorEnabled(false);
            Snackbar.make(view,"login right" , Snackbar.LENGTH_SHORT).show();
        }
    }
}

效果图

在这里插入图片描述

发布了123 篇原创文章 · 获赞 74 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/weixin_43927892/article/details/100934752