安卓Design包下的TextInputLayout和FloatingActionButton的简单使用

终于介绍到Design包的最后的东西了。

也很简单,一个是TextInputLayout。

TextInputLayout作为一个父容器,包含一个新的EditText,可以给EditText添加意想不到的效果,特别在注册功能开发中,用处非常广泛。

它可以直接提示输入错误,而不至于像以前一样总是点击按钮后才能检测出输入的错误,当有很多输出框的时候更是难以区分。。

并且还可以把hint 默认提示值放到上面去。

实现界面大概是这样的。

当你输入正确后是这样的。

实现代码也很简单。

添加一个监听焦点事件

  @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_text_input);

        textInput = (TextInputLayout) findViewById(R.id.text_input_layout);
        textInput.getEditText().addTextChangedListener(this);
    }

    @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(s.length()<6){
            textInput.setError("密码不能小于6!");
            textInput.setErrorEnabled(true);
        }else{
            textInput.setErrorEnabled(false);
        }
    }

  

XML文件中的定义

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.nanchen.designcoodinatordemo.TextInputActivity">

    <EditText
        android:layout_width="match_parent"
        android:hint="输入用户名.."
        android:layout_height="wrap_content"/>

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:id="@+id/text_input_layout"
        android:layout_height="wrap_content">
        <EditText
            android:layout_width="match_parent"
            android:hint="输入密码..."
            android:layout_height="wrap_content"/>

    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="邮箱"/>

</LinearLayout>

  

然后再来看一下FloatingActionButton。

其实它就是一个可以悬浮的Button,可以把它放在CoordinatorLayout的容器中并重写FloatingActionButton的Behavior可以达到想要的效果。

这里是下拉隐藏。

package com.example.nanchen.designcoodinatordemo;

import android.content.Context;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.FloatingActionButton;
import android.util.AttributeSet;
import android.view.View;

/**
 * 自定义Behavior
 * Created by 南尘 on 16-7-14.
 */
public class MyBehavior extends FloatingActionButton.Behavior {

    //写了这个构造方法才能在XML文件中直接指定
    public MyBehavior(Context context, AttributeSet attrs) {
        super();
    }

    @Override
    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View directTargetChild, View target, int nestedScrollAxes) {
        return true;//返回true代表我们关心这个滚动事件
    }

    @Override
    public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View target, int dx, int dy, int[] consumed) {
        super.onNestedPreScroll(coordinatorLayout, child, target, dx, dy, consumed);
        if (dy < 0) {//向下滚动
//            ViewCompat.animate(child).scaleX(1).alpha(1).start();
            child.show();
        } else {//向上滚动
//            ViewCompat.animate(child).scaleX(0).alpha(0).start();
            child.hide();
        }
    }
}

  FloatingActionButton是有show和hide显示和隐藏方法的。

具体图就不截了,本人做不来gif动图,略显尴尬,不过抽时间一定好好学学!

时间: 2024-11-05 09:11:06

安卓Design包下的TextInputLayout和FloatingActionButton的简单使用的相关文章

Android学习笔记--design包下的两个控件

今天学习了design包下的两个控件,记录一下,首先需要我们依赖 1 compile 'com.android.support:design:25.0.0' 之后在XML文件中就可以使用了 1 <?xml version="1.0" encoding="utf-8"?> 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 x

安卓Design包之TabLayout控件的使用

转自: 安卓Design包之TabLayout控件的简单使用 Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的Android Design Support Library,在这个support库里面,Google给我们提供了更加规范的MD设计风格的控件.最重要的是,Android Design Support Library的兼容性更广,直接可以向下兼容到Android 2.2.这不得不说是一个良心之作. 使用方法很简单

安卓Design包之TabLayout控件的简单使用

Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的Android Design Support Library,在这个support库里面,Google给我们提供了更加规范的MD设计风格的控件.最重要的是,Android Design Support Library的兼容性更广,直接可以向下兼容到Android 2.2.这不得不说是一个良心之作. 使用方法很简单,只需要添加一句依赖 compile 'com.android

安卓Design包之AppBar和Toolbar的联用

前面讲了Design包的的CoordinatorLayout和SnackBar的混用,现在继续理解Design包的AppBar; AppBarLayout跟它的名字一样,把容器类的组件全部作为AppBar. 如: <android.support.design.widget.AppBarLayout android:layout_width="match_parent" app:theme="@style/Base.ThemeOverlay.AppCompat.Dark

安卓Design包之超强控件CoordinatorLayout与SnackBar的简单使用

在前面的Design中,学习使用了TabLayout,NavigationView与DrawerLayout实现的神奇效果,今天就带来本次Design包中我认为最有意义的控件CoordinatorLayout. 当然还有SnackBar,不过他在实际运用中一般都是和CoordinatorLayout搭配使用的. 先说下SnackBar,这个控件其实我觉得和Toast没什么差别,不过功能上的确有增强.这个控件可以通过setAction方法设置类似按钮一样的东西.而且这个东西可以设置多个. 重点还是

安卓Design包之NavigationView结合DrawerLayout,toolbar的使用,FloatingActionButton

FloatingActionButton 悬浮按钮:FloatingActionButton是重写ImageView的,所有FloatingActionButton拥有ImageView的一切属性. app:backgroundTint - 设置FAB的背景颜色. app:rippleColor - 设置FAB点击时的背景颜色. app:borderWidth - 该属性尤为重要,如果不设置0dp,那么在4.1的sdk上FAB会显示为正方形,而且在5.0以后的sdk没有阴影效果.所以设置为bor

安卓Design包之CollapsingToolbarLayout(可折叠的工具栏布局)的简单使用

转自: CollapsingToolbarLayout的使用 注意:使用前需要添加Design依赖包,使用toolbar时需要隐藏标题头 CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar,它继承至FrameLayout,给它设置layout_scrollFlags,它可以控制包含在CollapsingToolbarLayout中的控件(如:ImageView.Toolbar)在响应layout_behavior事件时作出相应的scrollFlags滚动事件(

安卓Design包之Toolbar控件的使用

转自:ToolBar的使用 ToolBar的出现是为了替换之前的ActionBar的各种不灵活使用方式,相反,ToolBar的使用变得非常灵活,因为它可以让我们自由往里面添加子控件.低版本要使用的话,可以添加support-v7包. * toolabr使用:替代actionBar* 可以自定义布局* 点击事件和加载菜单可以当做view来使用* 位置可以任意* 需要在清单文件中去掉actionBar* toolbar可以当做viewGroup使用xml文件: <?xml version="1

安卓Design之NavigationView的使用

前面讲解了Design包下的TabLayout的使用,下面将带来NavagationView和DrawLayout以及toolbar的联动. NavigationView 通过提供抽屉导航所需的框架让实现更简单,同时它还能够直接通过菜单资源文件直接生成导航元素.把NavigationView作为DrawerLayout的内容视图来使用.NavigationView处理好了和状态栏的关系,可以确保NavigationView在API21+设备上正确的和状态栏交互. 上运行图: 以下代码在前面代码的