Material Design之TextInputLayout、Snackbar的使用

这两个控件也是Google在2015 I/O大会上公布的Design Library包下的控件,使用比較简单,就放在一起讲了,但有的地方也是须要特别注意一下。

  • TextInputLayout

TextInputLayout功能很easy,就是用于用户在EditText中输入时hint的提示和错误的提示。

先来看看效果图吧:

从上图非常明显的看出:

1、当EditText获得焦点时候。TextInputLayout会在左上角默认的生成一个Label用来显示EditText中hint的内容,所以当用户输入时候hint内容会浮动到左上角,这极大便利了用户输入提交数据的体验。

2、当EditText中输入的内容不合法时,TextInputLayout便会在EditText的左下角用红色显示错误的提示信息。这是怎么回事呢?我们来看看TextInputLayout的源代码。发现TextInputLayout中有个setErrorEnabled(boolean enabled)方法,意思就是是否设置错误提示信息:

从源代码中我们非常清晰的看到TextInputLayout的错误提示的工作原理了。总结就是:假设传入true,则TextInputLayout会在左下角生成一个TextView用来显示错误信息。假设传入false,则移除TextView从而不显示错误信息。从源代码中我们还能够看到setError(CharSequence error);这种方法,顾名思义,这种方法就是当我们设置须要显示错误提示信息setErrorEnabled(true),我们再使用setError()方法把我们须要设置的错误提示信息传入到TextView中显示出来。

以下来看看怎么用代码实现:

布局activity_main.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

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

    <android.support.design.widget.TextInputLayout
        android:id="@+id/textInput_layout_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:hint="user_password" />
    </android.support.design.widget.TextInputLayout>

</LinearLayout>

在代码中实现:

 TextInputLayout mTextInputLayoutName = (TextInputLayout) findViewById(R.id.textInput_layout_name);
        TextInputLayout mTextInputLayoutPassword = (TextInputLayout) findViewById(R.id.textInput_layout_password);
        //mTextInputLayoutName.getEditText()返回的是它的子EditText控件,一个TextInputLayout仅仅能包括一个EditText控件
        mTextInputLayoutName.getEditText().addTextChangedListener(new MyTextWatcher(mTextInputLayoutName, "username长度不能小于6位"));
        mTextInputLayoutPassword.getEditText().addTextChangedListener(new MyTextWatcher(mTextInputLayoutPassword, "密码长度不能小于6位"));

MyTextWatcher代码:

class MyTextWatcher implements TextWatcher {
        private TextInputLayout mTextInputLayout;
        private String errorInfo;

        public MyTextWatcher(TextInputLayout textInputLayout, String errorInfo) {
            this.mTextInputLayout = textInputLayout;
            this.errorInfo = errorInfo;
        }

        @Override
        public void beforeTextChanged(CharSequence s, int start, int count, int after) {

        }

        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {

        }

        @Override
        public void afterTextChanged(Editable s) {
            if (mTextInputLayout.getEditText().getText().toString().length() < 6) {
                mTextInputLayout.setErrorEnabled(true);//是否设置错误提示信息
                mTextInputLayout.setError(errorInfo);//设置错误提示信息
            } else {
                mTextInputLayout.setErrorEnabled(false);//不设置错误提示信息
            }
        }
    }

当中,须要注意两点:

1、TextInputLayout布局中仅仅能包括一个EditText子View,不能包括多个EditText。

2、TextInputLayout中有个方法getEditText();该方法返回的是它的子EditText对象,所以我们可通过mTextInputLayout.getEditText();来得到EditText对象。不须要findViewById找了。

3、设置错误提示信息时一定要先setErrorEnabled(true);再设置setError(...);由于TextView仅仅在setErrorEnabled()方法中创建。必须创建好TextView才干往TextView上设置信息。而不须要设置时直接setErrorEnabled(false);就可以,由于它自身会remove移除TextView。

  • Snackbar

Snackbar是带有动画效果的提示条,它极具美观效果,它出如今屏幕的底部。它和Toast类似,只是却有的地方和Toast不同,Snackbar能够加入button。能够支持滑动删除,也能够不作不论什么操作自身会在几秒(1.5s或2.75s)后消失。

最值得注意的一点就是Snackbar不能同一时候显示多个,仅仅能一次显示一个。而Toast能够同一时候显示多个这和Toast不同。

如今来看看怎么实现吧:

1、普通Snackbar:

代码实现:

Snackbar.make(rootView, "This is a SnackBar", Snackbar.LENGTH_SHORT).show();//第一个參数是SnackBar显示在哪个视图上,必须设置,不能为null,一个界面也不能同一时候显示两个SnackBar

当中特别须要注意第一个參数。它表示Snackbar是显示在哪个视图上,不可为null,比方我们能够通过页面中其他的view.getRootView()得到根视图,再把rooView设置进去就可以。

2、带有button的Snackbar:

代码实现:

//带button的SnackBar
            Snackbar.make(rootView,"带button的SnackBar",Snackbar.LENGTH_SHORT).setAction("UNDO", new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    //do something ...
                }
            }).show();

好了,这两个控件就讲完了。。。

当中别忘记加入对design Library的依赖哦!

因为比較简单。就不上传源代码了。

时间: 2024-10-21 08:07:25

Material Design之TextInputLayout、Snackbar的使用的相关文章

Material Design之TextInputLayout使用示例

使用TextInputLayout创建一个登陆界面 1.导入支持库 使用TextInputLayout 控件需要导入两个库,一个是appcompat-v7,保证material styles可以向下兼容.另一个是Design Support Library. 在项目的build.gradle文件中,添加下面的依赖(dependencies): dependencies { compile fileTree(dir: ‘libs‘, include: [‘*.jar‘]) compile ‘com

Android Material Design 系列之 SnackBar详解

SnackBar是google Material Design提供的一种轻量级反馈组件.支持从布局的底部显示一个简洁的提示信息,支持手动滑动取消操作,同时在同一个时间内只能显示一个SnackBar. 那Snackbar是如何实现的呢?我们主要讨论Snackbar的显示逻辑,包括:延迟消失和同一时间只支持一个Snackbar显示 首先我们先看下Snackbar用到的两个类 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "PingFang

用户登录(Material Design + Data-Binding + MVP架构模式)实现

转载请注明出处: http://www.cnblogs.com/cnwutianhao/p/6772759.html MVP架构模式 大家都不陌生,Google 也给出过相应的参考 Sample, 但是有的人会有疑问为啥 GitHub 上面大神写的 MVP架构模式 和 Google 的不太一样. Google MVP架构模式 Sample 地址 https://github.com/googlesamples/android-architecture/tree/todo-mvp/ 下面我们就仿照

Material Design: NavigationView FlaotingActionBar SnackBar采用

转载 请明确说明 MingsangAndroid 本文介绍了Design Support Library的引入 拥抱Android Design Support Library新变化(导航视图.悬浮ActionBar..).今天则重点介绍当中三个控件:NavigationView和 FloatingActionBar以及 SnackBar的基本使用方法. 本文代码地址:DesignSupportDemo 为了便于各位练习,这是代码中会用到的全部图片素材 图片素材.zip 作为三者的综合练习,我们

Material Design (二),TextInputLayout的使用

前言 ?一般登录注冊界面都须要EditText这个控件来让用户输入信息,同一时候我们通常会设置一个标签(使用TextView)和EditText的hint属性来提示用户输入的内容,而设计库中高级组件TextInputLayout则专门为EditText设计的.即通过使用TextInputLayout包裹EditText实现当用户開始输入时hint属性值将显示在EditText上面作为一个提示标签,这个过程还带有动画效果,这样就避免了用户输入时输入提示消失的情况,同一时候.还能够更好地向用户提示错

Material Design 开发利器:Android Design Support Library 介绍

转自:https://blog.leancloud.cn/3306/ Android 5.0 Lollipop 是迄今为止最重大的一次发布,很大程度上是因为 material design —— 这是一门新的设计语言,它刷新了整个 Android 的用户体验.但是对于开发者来说,要设计出完全符合 material design 哲学的应用,是一个很大的挑战.Android Design Support Library 对此提供了很好的支持,里面汇集了很多重要的 material design 控

Android控件使用 — 12个Material Design风格控件的使用

项目在GitHub上的地址: https://github.com/Hebin320/MaterialDesignUse 1.AppBarLayout.ToolBar AppBarLayout 是继承LinerLayout实现的一个ViewGroup容器组件,它是为了Material Design设计的App Bar,支持手势滑动操作. AppBarLayout必须作为Toolbar的父布局容器,也可以配合CoordinatorLayout一起使用. ToolBar是谷歌新推出的代替Action

Android Material Design(一)史上最全的材料设计控件大全

主要内容: 本文将要介绍Material design和Support library控件,主要包括TextInputLayout.SwitchCompat.SnackBar.FloatingActionButton.Shadows.Ripples.TabLayout.RecyclerView.Card.NavigationView.BottomSheet.Palette控件. 转载请注明出处,谢谢!! http://blog.csdn.net/johnny901114/article/deta

Material Design使用总结

Material Design是在Android5.0时新推出的一种设计规范,现在绝大部分的app都已经使用这种新的设计规范来进行界面设计.其主要是强调材质和层次感在设计中的应用,Android中也做了一些原生态的支持,但是要使用这些都必须最小兼容到Android5.0,也就是API 21,或者是添加Material Design的一个支持库. 关于详细的Material Design的解释和说明,可以参考这本书: 电子书下载地址 推荐两个Material Design的配色和图标网站: 一个是