AndroidStudyDemo之Android6.x新控件介绍

2016-04-21 本文已影响3888人 diygreen

Android6.x新控件介绍（一）

作者：李旺成

时间：2016年4月21日

接上篇：AndroidStudyDemo之Android6.x新API介绍（二）

前言

关于 Android 6.x 新控件有哪些？

2015 Google I/O 带来 Design Support Library

Android M 是 2015 Google I/O 上出现的，这个大家没有异议吧！那看下这个 “Design Support Library” 中有哪些新控件：

Design Support Library 中的新控件

一、FloatingActionButton

先看效果：

FloatingActionButton 效果演示

简介

FloatingActionButton 就是浮动按钮，是兼容包中提供的一个控件，先来看看官方介绍：

FloatingActionButton 类

看下继承结构，这个很熟悉吧！继承自 ImageView，那么好办 ImageView 所拥有的属性 FloatingActionButton 应该都有（是不是都可以用那就有待考验了）。

FloatingActionButton 提供了几个特有的属性：

app:fabSize：控制 FloatingActionButton 的大小（PS：可以试一下设置 layout_width 的大小是否有作用），有两个取值

fabSize 的取值

app:backgroundTint：设置 FloatingActionButton 的背景色，默认为 Theme 主题中的 “colorAccent”（PS：可以试一下设置 background 是否有作用）
app:elevation ：设置 FloatingActionButton 阴影的深度，默认有阴影

对应的 Java 方法：

--（fabSize 没找到）
setBackgroundTintList()
setElevation()

简单使用

1、导入兼容库

compile 'com.android.support:design:23.3.0'

2、在 Layout 中使用

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fabtn_test2"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_alignBottom="@+id/fabtn_test1"
    android:src="@mipmap/ic_alarm_add_black"
    app:fabSize="normal"
    app:backgroundTint="@color/colorPrimary"
    app:elevation="4dp"
    android:layout_centerHorizontal="true" />

3、代码中使用
除了那几个特有的属性，可以直接把 FloatingActionButton 当作 ImageView 用即可。

注意事项

主要是属性设置方法的：

android:background 设置背景不管用，得用 app:backgroundTint
大小是 app:fabSize 控制的，layout_width 和 layout_height 不起作用

TextInputLayout

先看看效果：

TextInputLayout 演示

简介

从上面的演示动画图中就可以看到，在 EditView 获取焦点的时候，EditView 上的 hint 提示文本通过一个动画显示到了 EditView 的左上角。其实该控件就是用于配合 EditView 的，主要为了解决 EditView 获得焦点后 hint 提示文本消失的问题。

来看下官方的介绍：

TextInputLayout 类

还是先看继承结构，继承自 LinearLayout，这个很熟悉啦！如果是 LinearLayout 的升级版那也没什么好介绍的了，在官方文档上有很简洁的介绍，抓住两个关键的地方（上图使用红色框圈出来了），再就是 xml 中新增的属性，也没有几个。

直接用起来，看看效果不就清楚了，来看如何使用。

简单使用

1、导入兼容包
和上面的一样

2、在 Layout 中使用

<android.support.design.widget.TextInputLayout
    android:id="@+id/til_test1"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/tv_textinputlayout_tip"
    android:layout_alignParentStart="true">
    <EditText
        android:id="@+id/et_test1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</android.support.design.widget.TextInputLayout>

“注意：”这里没有在 Layout 中使用 TextInputLayout 中所特有的属性，是在代码中设置的。

3、在代码中使用

private void initData() {
        // 设置提示文本
    mTestTIL.setHint("请输入你的邮箱：");
    mTestET1.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) {
            if (s.length() > 10){
                                // 设置错误提示
                mTestTIL.setErrorEnabled(true);
                mTestTIL.setError("邮箱名过长！");
            }else{
                mTestTIL.setErrorEnabled(false);
            }
        }

        @Override
        public void afterTextChanged(Editable s) {
        }
    });
}

** 4、常用属性 **
Layout 中：

android:hint="Hint" ：设置提示文本
app:hintAnimationEnabled="true" ：设置是否动画显示提示文本
app:hintEnabled="true" ：设置提示是否可用
app:errorEnabled="true" ：设置错误提示是否可用

Java 代码中：

setHint()：设置提示文本
setHintAnimationEnabled()：设置是否动画显示提示文本
setHintEnabled()：设置提示是否可用
setErrorEnabled()：设置错误提示是否可用
setError()：设置错误信息
getEditText()：获取 TextInputLayout 中的 EditView

注意事项

TextInputLayout 是为了配合 EditText 来使用的，也就是说单独使用是没什么意义的
TextInputLayout 可以设置错误提示，EditText 也可以设置错误提示，两者并不冲突，建议只选择设置其中一种错误提示（TextInputLayout 的要漂亮，不是吗）

错误提示对比

Snackbar

先看效果：

Snackbar 演示

简介

Snackbar 是 design support library 中的一个组件，使用 Snackbar 可以在屏幕底部(大多时候)快速弹出消息，它与 Toast 非常相似，但是更灵活一些。

介于Toast和AlertDialog之间轻量级控件
可以很方便的提供消息的提示和动作反馈
当它显示一段时间后或用户与屏幕交互时它会自动消失
它是 context sensitive message，显示在所在屏幕最顶层

来看下官方介绍：

Snackbar 类

继承自 Object，有点意外，继承结构的可参考性不大，那老老实实的看官方的介绍吧！

看到那几个常量有没有很眼熟的感觉，下面两个的命名和 Toast 中的一模一样。

来看看它提供的方法：

Snackbar 提供的方法

很眼熟，再看看这个会更眼熟：

Toast 常用方法

看到了吧！这货就是个“盗版”的Toast（汗，应该说是“山寨版”，还不对，官方的说法是类似升级版的 Toast，性能更高）。

那看看怎么用吧！

简单使用

1、导入兼容包
和上面一样

**2、显示普通的 Snackbar **

private void showCommonSB() {
    Snackbar snackbar = Snackbar.make(mRootRL,
            "我是普通 Snackbar", Snackbar.LENGTH_LONG);
    snackbar.show();
}

**3、显示带 Action 的 Snackbar **

private void showWithActionSB() {
    final Snackbar snackbar = Snackbar.make(mRootRL,
            "我是带 Action 的 Snackbar", Snackbar.LENGTH_LONG);
    snackbar.setAction("撤销", new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Toast.makeText(SnackBarActivity.this, "撤销成功", Toast.LENGTH_SHORT).show();
            snackbar.dismiss();
        }
    });
    snackbar.show();
}

**4、使用 Snackbar 的 Callback **

private void setCallbackTest() {
    final Snackbar snackbar = Snackbar.make(mRootRL,
            "我是带 Action 的 Snackbar", Snackbar.LENGTH_LONG);
    snackbar.setAction("撤销", new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Toast.makeText(SnackBarActivity.this, "撤销成功", Toast.LENGTH_SHORT).show();
            snackbar.dismiss();
        }
    });
    snackbar.setCallback(new Snackbar.Callback() {
        @Override
        public void onDismissed(Snackbar snackbar, int event) {
            super.onDismissed(snackbar, event);
            mShowResultTV.setText("Snackbar - onDismissed()");
        }
        @Override
        public void onShown(Snackbar snackbar) {
            super.onShown(snackbar);
            mShowResultTV.setText("Snackbar - onShown()");
        }
    });
    snackbar.show();
}

5、设置背景色

private void changeBackground() {
    Snackbar snackbar = Snackbar.make(mRootRL,
            "我是普通 Snackbar", Snackbar.LENGTH_LONG);
    snackbar.getView().setBackgroundColor(getResources().getColor(android.R.color.holo_blue_bright));
    snackbar.show();
}

6、添加 CoordinatiorLayout
Layout 中：

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/cl_test"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentTop="true"
    android:layout_alignParentStart="true">
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fabtn_test"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:src="@mipmap/ic_alarm_add_black"
        app:fabSize="normal"
        app:borderWidth="0dp"
        android:layout_marginBottom="@dimen/activity_vertical_margin"
        android:layout_marginRight="@dimen/activity_vertical_margin"/>
</android.support.design.widget.CoordinatorLayout>

Java 代码中：

private void addCoordinatiorLayout() {
    mTestCL.setVisibility(View.VISIBLE);
    Snackbar snackbar = Snackbar.make(mTestCL,
            "我是普通 Snackbar", Snackbar.LENGTH_LONG);
    snackbar.getView().setBackgroundColor(getResources().getColor(android.R.color.holo_blue_bright));
    snackbar.show();
}

使用很简单，虽然没有使用 Builder 内部类，但是和使用 Buidler 的调用方式一样，这也是一个 Builder 模式的使用。

常用方法简介

[make()](http://android.xsoftlab.net/reference/android/support/design/widget/Snackbar.html#make(android.view.View, int, int)) 方法：生成Snackbar消息，第一个参数是一个 View, Snackbar 会试着寻找一个父 View 来 hold 这个 View。Snackbar 将遍历整个 View tree 来寻找一个合适的父 View，它可能是一个 coordinatorLayout 也可能是 window decor’s content view，随便哪一个都行。
setDuration() 方法：设置显示持续时间
[setAction()](http://android.xsoftlab.net/reference/android/support/design/widget/Snackbar.html#setAction(int, android.view.View.OnClickListener)) 方法：设置 Action，第一个参数会作为按钮（Actiong）的文本，第二个参数是按钮的点击事件
setCallback() 方法：Snackbar 的显示和消失会回调 Snackbar.Callback的 onDismissed()和 onShown()方法
getView()：获取 Snackbar 的 View

注意事项

利用好 getView() 方法来定制 Snackbar
要支持 Snackbar 的更多特性（例如：向右滑动退出，适配 FloatingActionButton），那么需要使用 CoordinatorLayout

小结

Android 6.x 的新控件介绍还有一篇，
未完待续...

接下篇：AndroidStudyDemo之Android6.x新控件介绍（二）

项目地址

GitHub

附件

Andoid6思维导图

参考

Android M新控件之FloatingActionButton，TextInputLayout，Snackbar，TabLayout的使用
 还在用Toast？你Out啦，试试Snackbar吧！
Android SnackBar
Snackbar使用及其注意事项
 design support library第二部分：放弃Toast吧，用Snackbar
Design Support Library第三部分：Snackbar样式
 Android应用Design Support Library完全使用实例
 Android Design Support Library使用详解

AndroidStudyDemo之Android6.x新控件介绍

作者：李旺成

时间：2016年4月21日

前言

一、FloatingActionButton

简介

简单使用

注意事项

TextInputLayout

简介

简单使用

注意事项

Snackbar

简介

简单使用

常用方法简介

注意事项

小结

项目地址

附件

参考

猜你喜欢

热点阅读