Android Material Design新UI控件使用大全 一

序言

自从谷歌在2014年的IO大会上推出了Material Design新的设计规范后,安卓应用的整体美观程度提升了很大的一个层次, 安卓再也不是又黑又丑的界面,取而代之的是拥有丰富的颜色,美观的按钮,好的用户体验;但是刚开始的话这种设计规范只能在Android 5.0以上的手机上运行,导致开发者也只是自己去体验,在国内并没有大范围的推广,App的质量并不能大幅度的提升,但是作为改变世界的Google公司不久就推出了兼容库Android Material Design,这绝对是业界良心了,我们也看到了越来越多的App开始使用这个兼容库,来提升UI效果及用户体验,由于之前只是偶尔体验了一下,并没有认真的去了解使用,导致对这个库的使用懵懵懂懂,现在写下这个总结,也算是对自己的一个交代,也算是对知识的一个总结,如果能帮到其他人,让别人少走弯路,那就更好了;

我们先看一下印象笔记的截图,有个大致的了解

华天动力OA系统，超越想象！

【点击进入】

开放平台、工作流、统计报表全面领先 以魔方架构让管理随需应变，免费试用OA系统

查 看

女用剃毛器

android升级

app设计

码市 - 软件开发众包平台

【点击进入】

网站，App，微信开发...平台级服务 汇集 250,000 专业开发者，品质交付

查 看

如何使用

这个兼容库如果使用的话只需要将其添加到项目依赖中即可:

compile ‘com.android.support:design:23.2.1’

这样的话,Android Studio 就会自动去同步这个库,然后我们就可以愉快的使用了,相信一些老司机用这个简直太简单;

1 侧滑NavigationView

在Materil Design中,NavigationView作为一个抽屉导航来实现app内部的交互,让实现更简单,同时还能直接通过菜单资源元素直接生成导航元素;

它的一般用法是需要配合之前v4包中的DrawLayout,并作为其中的Darwer部分,也就是划出的导航部分,它提供了可选的Header,默认样式,选中项高亮,分组单选,分组子标题等,如图示,左侧即为NavigationView:

中关村软件学院web前端培训

【点击进入】

web前端培训,0基础入学,名师小班授课. 线上线下1:1同步教学,保证月薪8000起。

查 看

我们现在来看一下是怎么用的,外层是一个DrawerLayout，第一个child将作为主页content，第二个child则作为Drawer侧拉面板:<喎�"/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwcmUgY2xhc3M9"brush:java;"> 
**注意:**我们看到NavigationView有两个属性,`app:headerLayout`接受的是一个layout文件,作为导航页的头布局,可选项;`app:menu`接受一个menu,作为导航栏的菜单页,这个是必选项; headerLayout为一个普通的layout文件,我们就不在赘述,我们现在来看一下menu文件怎么写,在`res`目录下新建一个`menu`文件夹,然后新建xml文件:

?

1

?

1	<!--?xml version= "1.0" encoding= "utf-8" ?-->

注意:其中checked=”true”的item将会高亮显示，这可以让用户知道当前选中的菜单项是哪个。当然,item的选中状态可以在代码中设置;

使用subheader来为菜单分组：

?

1 2 3 4 5

<item android:id= "@+id/navigation_subheader" android:title= "@string/navigation_subheader" ><menu>          <item android:icon= "@drawable/ic_android" android:id= "@+id/navigation_sub_item_1" android:title= "@string/navigation_sub_item_1" >          <item android:icon= "@drawable/ic_android" android:id= "@+id/navigation_sub_item_2" android:title= "@string/navigation_sub_item_2" >      </item></item></menu> </item>

最后,就是我们要写的menu菜单中的点击事件了,NavigationView给我们提供了setNavigationItemSelectedListener方法来设置当有菜单项被点击时的回调,OnNavigationItemSelectedListener也会给我们提供被点击的MenuItem,我们可以在这里处理点击事件,改变item的状态,更新界面状态,关闭导航栏等操作;

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

mNavigationView.setNavigationItemSelectedListener( new NavigationView.OnNavigationItemSelectedListener() {      @Override      public boolean onNavigationItemSelected(MenuItem item) {          switch (item.getItemId()){              case R.id.navi_blog:                  Toast.makeText(NavigationViewActivity. this , "Blog" ,Toast.LENGTH_SHORT).show();                  break ;              case R.id.navi_home:                  Toast.makeText(NavigationViewActivity. this , "Home" ,Toast.LENGTH_SHORT).show();                  break ;              case R.id.navi_notify:                  Toast.makeText(NavigationViewActivity. this , "Notify" ,Toast.LENGTH_SHORT).show();                  break ;          }          item.setChecked( true );          mDrawerLayout.closeDrawer(Gravity.LEFT); //外层的DrawerLayout          return false ;      } });

 

2.TextInputLayout 提升用户体验的EditText

我们之前使用EditText的时候,会使用一个hint属性,但是当用户输入的时候,hint属性值就会被清空,但是在Material Design中,谷歌又给我们提供了一个TextInputLayout来优化我们的用户体验,当获取焦点输入时,hint的值会自动缩小并跑到输入栏的上方,具体效果看图示:

当然,使用也非常简单:

?

1 2 3 4 5 6 7 8 9 10 11 12

<!--?xml version= "1.0" encoding= "utf-8" ?--> <linearlayout android:layout_height= "match_parent" android:layout_width= "match_parent" android:orientation= "vertical" tools:context= "com.suericze.myapplication.TestInput" xmlns:android= "http://schemas.android.com/apk/res/android" xmlns:tools= "http://schemas.android.com/tools" >                  <edittext android:hint= "用户名/手机号" android:layout_height= "wrap_content" android:layout_width= "match_parent" >      </edittext></android.support.design.widget.textinputlayout>                  <edittext android:hint= "密码" android:inputtype= "textPassword" android:layout_height= "wrap_content" android:layout_width= "match_parent" >      </edittext></android.support.design.widget.textinputlayout>   </linearlayout>

 

注意: TextInputLayout的颜色来自style中的colorAccent的颜色,除了显示提示信息，还可以通过调用setError()在EditText下面显示一条错误信息。

3.悬浮操作按钮 FloatingActionButton

看字面意思就是悬浮按钮,是一个负责显示界面基本操作的圆形按钮,它实现了一个默认颜色为主题中colorAccent的悬浮操作按钮，它是一个带有阴影的圆形按钮，可以通过fabSize来改变其大小;有以下属性:

默认颜色为colorAccent的颜色值,可以通过app:backgroundTint 属性或者setBackgroundTintList (ColorStateList tint)方法去改变背景颜色。 改变尺寸:通过设置 app:fabSize 属性(mini or normal) android:src 改变drawable app:rippleColor 设置点击时候的颜色(水波纹效果) app:borderWidth 设置button的边框宽度 app:elevation 设置平常阴影状态的深度(默认6dp) app:pressedTranslationZ 设置点击状态的阴影深度(默认12dp)

用法:

?

1	</android.support.design.widget.floatingactionbutton>

实现效果如下:

4 底部Snackbar

SnackBar通过在屏幕底部展示一个简洁的信息,为用户提供一个友好的反馈,用法类似于Toast,区别在于第一个参数不需要上下文而是所依附的父view,而且在同一时间内只能显示一个Snackbar,同时可以为用户提供一个动作操作,用户可以在它消失之前滑动删除; 最简单用法:

Snackbar.make(mParentView, "SnackbarClicked", Snackbar.LENGTH_LONG).show();

我们来看效果图:

OK,我们现在来看一下带有Action的SnackBar怎么使用,

?

1 2 3 4 5 6

Snackbar.make(mRelativeLayout, "SnackbarClicked" , Snackbar.LENGTH_SHORT).setAction( "Test" , new View.OnClickListener() {             @Override             public void onClick(View v) {                 Toast.makeText(TestInput. this , "Clicked" ,Toast.LENGTH_SHORT).show();             }         }).show();

 

这里我们给SnackBar设置了一个Action,当我们点击Test时候,就会弹出吐司,效果如下: