标签:
自从谷歌在2014年的IO大会上推出了Material Design
新的设计规范后,安卓应用的整体美观程度提升了很大的一个层次, 安卓再也不是又黑又丑的界面,取而代之的是拥有丰富的颜色,美观的按钮,好的用户体验;但是刚开始的话这种设计规范只能在Android 5.0以上的手机上运行,导致开发者也只是自己去体验,在国内并没有大范围的推广,App的质量并不能大幅度的提升,但是作为改变世界的Google公司不久就推出了兼容库Android Material Design,这绝对是业界良心了,我们也看到了越来越多的App开始使用这个兼容库,来提升UI效果及用户体验,由于之前只是偶尔体验了一下,并没有认真的去了解使用,导致对这个库的使用懵懵懂懂,现在写下这个总结,也算是对自己的一个交代,也算是对知识的一个总结,如果能帮到其他人,让别人少走弯路,那就更好了;
这个兼容库如果使用的话只需要将其添加到项目依赖中即可:
compile ‘com.android.support:design:23.2.1’
这样的话,Android Studio 就会自动去同步这个库,然后我们就可以愉快的使用了,相信一些老司机用这个简直太简单;
在Materil Design中,NavigationView作为一个抽屉导航来实现app内部的交互,让实现更简单,同时还能直接通过菜单资源元素直接生成导航元素;
它的一般用法是需要配合之前v4包中的DrawLayout
,并作为其中的Darwer部分,也就是划出的导航部分,它提供了可选的Header,默认样式,选中项高亮,分组单选,分组子标题等,如图示,左侧即为NavigationView
:
我们现在来看一下是怎么用的,外层是一个DrawerLayout,第一个child将作为主页content,第二个child则作为Drawer侧拉面板:
<?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>
<?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>
注意:其中checked=”true”的item将会高亮显示,这可以让用户知道当前选中的菜单项是哪个。当然,item的选中状态可以在代码中设置;
使用subheader来为菜单分组:
<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>
最后,就是我们要写的menu菜单中的点击事件了,NavigationView
给我们提供了setNavigationItemSelectedListener
方法来设置当有菜单项被点击时的回调,OnNavigationItemSelectedListener
也会给我们提供被点击的MenuItem
,我们可以在这里处理点击事件,改变item的状态,更新界面状态,关闭导航栏等操作;
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; } });
我们之前使用EditText的时候,会使用一个hint
属性,但是当用户输入的时候,hint属性值就会被清空,但是在Material Design
中,谷歌又给我们提供了一个TextInputLayout
来优化我们的用户体验,当获取焦点输入时,hint的值会自动缩小并跑到输入栏的上方,具体效果看图示:
当然,使用也非常简单:
<?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>
注意: TextInputLayout的颜色来自style中的colorAccent的颜色,除了显示提示信息,还可以通过调用setError()在EditText下面显示一条错误信息。
看字面意思就是悬浮按钮,是一个负责显示界面基本操作的圆形按钮,它实现了一个默认颜色为主题中colorAccent的悬浮操作按钮,它是一个带有阴影的圆形按钮,可以通过fabSize来改变其大小;有以下属性:
用法:
<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="3dp" app:fabSize="normal" />
实现效果如下:
SnackBar通过在屏幕底部展示一个简洁的信息,为用户提供一个友好的反馈,用法类似于Toast,区别在于第一个参数不需要上下文而是所依附的父view,而且在同一时间内只能显示一个Snackbar,同时可以为用户提供一个动作操作,用户可以在它消失之前滑动删除; 最简单用法:
Snackbar.make(mParentView, "SnackbarClicked", Snackbar.LENGTH_LONG).show();
我们来看效果图:
OK,我们现在来看一下带有Action的SnackBar怎么使用,
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
时候,就会弹出吐司,效果如下:
ok,我们对部分控件的使用已经有了一定的了解,我们在下篇会介绍AppBarLayout、CollapsingToolbarLayout、TabLayout 的使用,愿大家都有一个美好的生活….
Android Material Design新UI控件使用大全 一
标签:
原文地址:http://blog.csdn.net/smallcheric/article/details/51205295