文档章节

Android Design Support Library - TextInputLayout使用

口十耳
 口十耳
发布于 2017/01/13 17:12
字数 793
阅读 24
收藏 0

基本使用

通常,单独的EditText会在用户输入第一个字母之后隐藏hint提示信息,但是现在你可以使用TextInputLayout 来将EditText封装起来,提示信息会变成一个显示在EditText之上的floating label,这样用户就始终知道他们现在输入的是什么。同时,如果给EditText增加监听,还可以给它增加更多的floating label。 下面是一个基本布局示例

<android.support.design.widget.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                 <EditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="输入文字" />
</android.support.design.widget.TextInputLayout>

有了TextInputLayout,一个单一的EditText 在输入文字的时候会隐藏hint,而被包含在TextInputLayout中的EditText则会让hint变成一个在EditText上方的浮动标签。同时还包括一个漂亮的material动画。

处理错误

TextInputLayout的错误处理简单快速。需要的方法是setErrorEnabled和setError。

  • setError设置一个红色的错误消息,显示在EditText的下面。如果传入的参数为null,错误消息将清空。并且它会改变整个EditText控件为红色。
  • setErrorEnabled开启错误提醒功能。这直接影响到布局的大小,增加底部padding为错误标签让出空间。在setError设置错误消息之前开启这个功能意味着在显示错误的时候布局不会变化。你可以把这两个方法结合起来验证下我所说的。
  • 另一个有趣的事实是如果错误功能未开启但是你调用了传入非null参数的setError,那么setErrorEnabled(true)将自动被调用。

样式

改变TextInputLayout控件的颜色。默认AppCompact会把它设置成绿色的,但是很有可能这个颜色会和你的颜色主题(color palette)冲突。 谷歌把Design Support Library写的很好。每一个控件的颜色都是直接通过主题颜色绘制的,在 style.xml 中指定。打开它添加colorAccent 到主题以改变表单的颜色。

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorAccent">#3498db</item>
</style>

符:登录样例

package cn.yshye.jsonye.design;

import android.os.Bundle;
import android.support.design.widget.TextInputLayout;
import android.support.v7.app.AppCompatActivity;
import android.text.TextUtils;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.AutoCompleteTextView;
import android.widget.Button;
import android.widget.EditText;

import java.util.regex.Matcher;
import java.util.regex.Pattern;

import cn.yshye.jsonye.R;

import static cn.yshye.jsonye.R.id.email;


/**
 * 登录验证,TextInputLayout的使用
 */
public class LoginActivity extends AppCompatActivity {

    private AutoCompleteTextView mEmailView;
    private EditText mPasswordView;
    TextInputLayout tilEmail, tilPassWord;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);
        mEmailView = (AutoCompleteTextView) findViewById(email);
        mPasswordView = (EditText) findViewById(R.id.password);
        tilEmail = (TextInputLayout) findViewById(R.id.til_email);
        tilPassWord = (TextInputLayout) findViewById(R.id.til_password);


        Button mEmailSignInButton = (Button) findViewById(R.id.email_sign_in_button);
        mEmailSignInButton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                attemptLogin();
            }
        });

    }


    /**
     * 登录
     */
    private void attemptLogin() {

        // 清空错误消息
        tilEmail.setError(null);
        tilPassWord.setError(null);

        // 获取邮箱和密码
        String email = mEmailView.getText().toString();
        String password = mPasswordView.getText().toString();
        // 判断邮箱是否正确
        if (TextUtils.isEmpty(email)) {
            tilEmail.setError("邮箱不能为空");
        } else if (!isEmailValid(email)) {
            tilEmail.setError("邮箱格式不对");
        }

        // 判断密码是否合法
        if (TextUtils.isEmpty(password)){
            tilEmail.setError("密码不能为空");
        }else if(!isPasswordValid(password)) {
            tilPassWord.setError("密码长度小于6位");
        }
    }

    // Wikipedia 上关于邮箱验证的指导
    private static final String EMAIL_PATTERN = "^[a-zA-Z0-9#_~!$&'()*+,;=:.\"(),:;<>@\\[\\]\\\\]+@[a-zA-Z0-9-]+(\\.[a-zA-Z0-9-]+)*$";
    private Pattern pattern = Pattern.compile(EMAIL_PATTERN);
    private Matcher matcher;

    /**
     * 邮箱格式是否正确
     *
     * @param email
     * @return
     */
    private boolean isEmailValid(String email) {
        matcher = pattern.matcher(email);
        return matcher.matches();
    }

    /**
     * 密码长度不得小于6位
     * @param password
     * @return
     */
    private boolean isPasswordValid(String password) {
        return password.length() > 5;
    }


}


效果图

TextInputLayout

© 著作权归作者所有

口十耳
粉丝 6
博文 70
码字总数 66916
作品 0
浦东
高级程序员
私信 提问
Material Design实现的美观的登录界面

官方介绍学习:https://material.google.com/英文版基于Material Design的登录界面:http://sourcey.com/beautiful-android-login-and-signup-screens-with-material-design/翻译版基于Mater......

pearl2015
2016/07/26
330
0
android开发中TextInputLayout使用方法

android开发中TextInputLayout使用方法,TextInputLayout其实是一个容器,他继承自LinearLayout,该容器是作用于TextView的,TextInputLayout只能包裹一个子节点,类似于ScrollView。 本文以...

android开发
2017/12/13
0
0
Android 5.x新增控件之-TextInputLayout控件

本文系转载,原文地址http://blog.csdn.net/caihongdao123/article/details/51579366 hello,大家好! 今天给大家更新的博客是有关TextInputLayout的简单介绍。 TextInputLayout简介 TextIn...

jdfkldjlkjdl
2017/11/22
0
0
创建Material Design风格的Android应用--应用主题

昨天正式发布了android 5,同时android developer网站也更新了,增加了创建Material Design风格的Android应用指南,也更新了Support Library,在support library增加了一些Material Design风格...

码农明明
2014/10/19
9.7K
8
TextInputLayout

TextInputLayout TextInputLayout 是一个布局,仅可以添加一个子View且必须为ExitText。 TextInputLayout 为用户提供了两个比较有意思的方法 1.hint是EditText的一个很好的属性,当用户输入数...

冰色
2016/01/07
754
0

没有更多内容

加载失败,请刷新页面

加载更多

一、docker 入坑(win10和Ubuntu 安装)

前言 终究还是绕不过去了,要学的知识真的是太多了,好在我们还有时间,docker 之前只闻其声,不曾真正的接触过,现在docker 越来越火,很多公司也都开始使用了。所以对于我们程序员而言,又...

quellanan2
14分钟前
4
0
AutoCompleteTextView

小技巧按菜单键 当菜单打开之前会调用onMenuOpened(int featereId,Menu menu),可以重写这个方法,弹出对话框或者Popmenu 再布局中添加控件AutoCompleteTextView. <AutoCompleteTextVie...

逆天游云
17分钟前
4
0
谷歌软件商店:推出5美元会员 可用数百个软件

腾讯科技讯,谷歌和苹果是全球两大智能手机操作系统的运营者,两家公司旗下分别拥有占据行业垄断地位的谷歌软件商店和苹果软件商店。据外媒最新消息,手机软件商店的商业模式正在发生一些变化...

linuxCool
39分钟前
3
0
RocketMQ 多副本前置篇:初探raft协议

Raft协议是分布式领域解决一致性的又一著名协议,主要包含Leader选举、日志复制两个部分。 温馨提示: 本文根据raft官方给出的raft动画进行学习,其动画展示地址:http://thesecretlivesofda...

中间件兴趣圈
39分钟前
3
0
elasticsearch 6.8.0 添加认证

1. 修改elasticsearch-6.8.0/config/elasticsearch.yml 最后添加一行:xpack.security.enabled: true 2. 初始化用户和密码 ./bin/elasticsearch-setup-passwords interactive 我这里初始化为......

coord
41分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部