A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

序言

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


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



如何使用

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


  • <font color="rgb(85, 85, 85)">compile ‘com.android.support:design:23.2.1’</font>

[color=rgb(51, 51, 51) !important]复制代码



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


1 侧滑NavigationView

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

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



我们现在来看一下是怎么用的,外层是一个DrawerLayout,第一个child将作为主页content,第二个child则作为Drawer侧拉面板:



  • <font color="rgb(85, 85, 85)"><?xml version="1.0" encoding="utf-8"?>
  • <android.support.v4.widget.DrawerLayout
  •     android:id="@+id/drawer_laout"
  •     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"
  •     xmlns:app="http://schemas.android.com/apk/res-auto"
  •     tools:context=".NavigationViewActivity">
  • <LinearLayout
  •     android:orientation="vertical"
  •     android:layout_width="wrap_content"
  •     android:layout_height="wrap_content">
  •     <include layout="@layout/toolbar_actionbar"/>
  •     <TextView
  •         android:layout_gravity="center"
  •         android:layout_marginTop="100dp"
  •         android:textSize="25sp"
  •         android:layout_width="wrap_content"
  •         android:layout_height="wrap_content"
  •         android:text="This is home content"/>
  • </LinearLayout>
  •     <android.support.design.widget.NavigationView
  •         android:id="@+id/navi_all"
  •         android:layout_width="wrap_content"
  •         android:layout_height="match_parent"
  •         android:layout_gravity="start"
  •         app:headerLayout="@layout/head_layout"
  •         app:menu="@menu/navigation_menu">
  •     </android.support.design.widget.NavigationView>
  • </android.support.v4.widget.DrawerLayout>  </font>

[color=rgb(51, 51, 51) !important]复制代码


注意: 我们看到NavigationView有两个属性,`app:headerLayout`接受的是一个layout文件,作为导航页的头布局,可选项;`app:menu`接受一个menu,作为导航栏的菜单页,这个是必选项; headerLayout为一个普通的layout文件,我们就不在赘述,我们现在来看一下menu文件怎么写,在`res`目录下新建一个`menu`文件夹,然后新建xml文件:




  • <font color="rgb(85, 85, 85)"><pre class="java" name="code"><?xml version="1.0" encoding="utf-8"?>
  • <menu xmlns:android="http://schemas.android.com/apk/res/android">
  •     <group android:checkableBehavior="single">
  •         <item
  •             android:id="@+id/navi_home"
  •             android:icon="@mipmap/home"
  •             android:checked="true"
  •             android:title="首页" />
  •         <item
  •             android:id="@+id/navi_notify"
  •             android:icon="@mipmap/notify"
  •             android:title="通知" >
  •         </item>
  •         <item
  •             android:id="@+id/navi_blog"
  •             android:icon="@mipmap/blog"
  •             android:title="我的博客" />
  •     </group>
  • </menu></pre>
  • <br>
  • <br>  </font>

[color=rgb(51, 51, 51) !important]复制代码



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

使用subheader来为菜单分组:



  • <font color="rgb(85, 85, 85)"><item
  •     android:id="@+id/navigation_subheader"
  •     android:title="@string/navigation_subheader">
  •     <menu>
  •         <item
  •             android:id="@+id/navigation_sub_item_1"
  •             android:icon="@drawable/ic_android"
  •             android:title="@string/navigation_sub_item_1"/>
  •         <item
  •             android:id="@+id/navigation_sub_item_2"
  •             android:icon="@drawable/ic_android"
  •             android:title="@string/navigation_sub_item_2"/>
  •     </menu>
  • </item>  </font>

[color=rgb(51, 51, 51) !important]复制代码



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




  • <font color="rgb(85, 85, 85)"> 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;
  •     }
  • });  </font>

[color=rgb(51, 51, 51) !important]复制代码


注意:我们上面实现的是menu菜单的点击事件,我们如果要回调headerLayout的点击事件该怎么写呢,NavigationView并没有提供一个类似于menu的点击监听,而是提供了一个getHeaderView(int index)的api,所以头布局的点击事件应该这么写:



  • <font color="rgb(85, 85, 85)">mNavigationView.getHeaderView(0).setOnClickListener(new View.OnClickListener() {
  •           @Override
  •           public void onClick(View v) {
  •               Toast.makeText(NavigationViewActivity.this,"Pic",Toast.LENGTH_SHORT).show();
  •           }
  •       });
  •         </font>

[color=rgb(51, 51, 51) !important]复制代码



  • 小贴士:NavigationView还提供了一个getHeaderCount()的api返回头布局一共有多少个子view,可以实现任一控件的监听;



2.TextInputLayout 提升用户体验的EditText

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


当然,使用也非常简单:


  • <font color="rgb(85, 85, 85)"><?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.suericze.myapplication.TestInput">
  •     <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>
  •     <android.support.design.widget.TextInputLayout
  •         android:layout_marginTop="20dp"
  •         android:layout_width="match_parent"
  •         android:layout_height="wrap_content">
  •         <EditText
  •             android:layout_width="match_parent"
  •             android:layout_height="wrap_content"
  •             android:inputType="textPassword"
  •             android:hint="密码"/>
  •     </android.support.design.widget.TextInputLayout>
  • </LinearLayout>
  • </font>

[color=rgb(51, 51, 51) !important]复制代码



注意: 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的边框宽度,该属性尤为重要,如果不设置0dp,那么在4.1的sdk上FAB会显示为正方形,而且在5.0以后的sdk没有阴影效果。所以设置为borderWidth=”0dp”
  • app:elevation 设置平常阴影状态的深度(默认6dp)
  • app:pressedTranslationZ 设置点击状态的阴影深度(默认12dp)
  • app:layout_anchor - 设置FAB的锚点,即以哪个控件为参照点设置位置
  • app:layout_anchorGravity - 设置FAB相对锚点的位置,值有 bottom、center、right、left、top等


用法,放在屏幕右下角:


  • <font color="rgb(85, 85, 85)"><android.support.design.widget.FloatingActionButton
  •     android:layout_width="wrap_content"
  •     android:layout_height="wrap_content"
  •     android:layout_margin="20dp"
  •     android:layout_alignParentBottom="true"
  •     android:layout_alignParentRight="true"
  •     android:src="@mipmap/add"
  •     app:rippleColor="#ff0000"
  •     app:borderWidth="0dp"
  •     app:fabSize="normal"
  •     app:layout_anchor="@id/coordinator_layout"
  •     app:layout_anchorGravity="bottom|right"
  •     />  </font>

[color=rgb(51, 51, 51) !important]复制代码



实现效果如下:



4 底部Snackbar

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


  • <font color="rgb(85, 85, 85)">Snackbar.make(mParentView, "SnackbarClicked", Snackbar.LENGTH_LONG).show(); </font>

[color=rgb(51, 51, 51) !important]复制代码


我们来看效果图:


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


  • <font color="rgb(85, 85, 85)">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();  </font>

[color=rgb(51, 51, 51) !important]复制代码



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


ok,我们对部分控件的使用已经有了一定的了解,我们在下篇会介绍AppBarLayout、CollapsingToolbarLayout、TabLayout 的使用,愿大家都有一个美好的生活….


更多学习资料可加qq 1692250804 进行交流互动哟

1 个回复

倒序浏览
多谢分享
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马