欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android5.0中Material Design的新特性

程序员文章站 2024-03-06 19:11:38
 material design简介 material design是谷歌新的设计语言,谷歌希望寄由此来统一各种平台上的用户体验,material desi...

 material design简介

material design是谷歌新的设计语言,谷歌希望寄由此来统一各种平台上的用户体验,material design的特点是干净的排版和简单的布局,以此来突出内容。

material design对排版、材质、配色、光效、间距、文字大小、交互方式、动画轨迹都做出了建议,以帮助设计者设计出符合material design风格的应用。

material design设计语言鼓励大家使用充满活力的鲜艳色彩,并在同一界面建议使用三种色调,并保障有一个强色调,强色一般处于处于视图最底层,例如状态栏或者actionbar。通过强色调形成鲜明的对比,更容易突出内容的重要性。对于文字色彩的取值,material design建议在浅色背景上采用黑色,在深色背景上采用白色。重要信息和标题采用87%透明度,次要文字采用54%透明度,而更次要的说明文字可以采用26%的透明度。对于想特别突出或者可点击的文字,建议使用强色调。不同层级的视图,可以通过阴影来凸显。对于带有操作且内容突出的区域,可以使用cardview进行隔离,对于内容不太重要或者操作比较单一的区域,可以使用分割线进行隔离。

最近项目中需要用到material design,整理了下面几个常用的控件,以便记忆。

一、snackbar

1.作用:与toast类似,但是可以点击监听;

2.使用:

(1)snackbar调用静态类make(),传入三个参数:view父组件,文本,显示时间;

(2)snackbar调用setaction(),传入两个参数:文本,点击监听事件实现onclicklistener接口;

(3)显示show()与隐藏dismiss();

二、textinputlayout

1.作用:包裹在edittext外边,可以将文本在edittext上方提示,同时可以设置错误提示;

2.使用:

(1)textinputlayout对象调用seterrorenable(),传入boolean类型参数表示是否显示错误信息;

(2)textinputlayout对象调用seterror(),设置错误信息;

三、floationgactionbutton

1.作用:悬浮在页面上方的按钮;

2.特有属性:

app:elevation="5dp" //阴影效果
app:pressedtranslationz="10dp" //按压时显示效果
app:ripplecolor="@color" //颜色

四、drawerlayout

1.作用:作为布局的子布局,实现左右两侧的侧滑效果,用于添加菜单;

2.使用:(1)以drawelayout作为根布局,内部可以包含三个及三个以下布局;

(2)为作为菜单的布局设置android:layout_gravity属性,在左侧显示值为”left”,在右侧显示值为”right”;

(3)动态打开或关闭drawerlayout中的布局:

      drawelayout对象调用opendrawer(),传入gravity.left或者gravity.right两种参数值打开关闭布局;

      drawerlayout对象调用closedrawer(),传入两种参数值关闭布局;

五、navigationview

1.作用 :作为导航栏或者菜单栏的menu视图添加;

2.使用:(1)静态属性:app:headerlayout添加头布局文件;

  (2)静态属性:app:menu添加菜单文件;

  (3)设置头视图监听:

  (3-1)得到头视图:navigationview对象调用getheaderview(),传入索引号0;

     注意:如果没有getheaderview(),可以使用findviewbyid()得到头视图;

   (3-2)找控件:头视图调用findviewbyid()得到头视图中的控件;

  (3-3)设置监听事件:得到的控件调用setonclicklistener();

  (4)设置menu按钮监听:

     navigationview对象调用setnavigationitemselectedlistener(),

      传入navigationview. onnavigationviewintemselectedlistener接口,

      重写onnavigationitemselected()接口;

六、tablayout

1.作用:与viewpager结合,达到联动导航效果;

2. 静态属性:

1 app:tabindicatorcolor="@color/coloraccent"

2 app:tabindicatorheight="5dp"

3 app:tabselectedtextcolor="@color/coloraccent"

4 app:tabtextcolor="#ffffff"

3.动态使用:

(1)声明并实例化tablayout,viewpager;

(2)为viewpager控件设置适配器;

(3)设置tablayout与viewpager的联动:

   (3-1)tablayout对象调用setupwithviewpager()传入要联动的viewpager对象;

    (3-2)在自定义viewpager的适配器中,重写getpagetitle(),返回当前标题;

   (3-3)tablayout对象调用settabmode(),传入tablayout.mode_scrollable常量,设置tablayout的滚动;

七、nestedscrollview

1.作用:替代scrollview;

2.使用:与scrollview相同,内部只能有一个子控件;

八、toolbar

1.作用:

  注意:使用toolbar时必须将该activity的主题设置为noactionbar属性值;

2.使用:toolbar控件必须放在appbarlayout控件中,而appbarlayout最好放在coordinatorlayout控件(协同布局)中;

3.静态属性:

1 app:layout_scrollflags=”scroll|enteralways” //toolbar控件中,设置滑动响应事件;

2 app:title=”” //为toolbar设置标题名;

3 app:layout_behavior="@string/appbar_scrolling_view_behavior" //nestedscrollview控件中,设置控件行为

4.动态方法:

(4-1)声明并实例化toolbar控件实例;

(4-2)将actionbar设置为toolbar:在当前activity中调用setsupportactionbar(),传入新创建的toolbar对象;

(4-3)当前activity主题修改为noactionbar模式:在清单文件中设置当前activity标签下的属性android:theme="@style/theme.appcompat.noactionbar";

注意:只有当前activity主题为noactionbar时,才会显示toolbar;

九、collapsingtoolbar

1.作用:实现toolbar的折叠效果;

2.使用:

  collapsingtoolbar必须放在appbarlayout中,

  而appbarlayout最好放在协同布局coordinatorlayout控件中;

  而toolbar作为collapsingtoolbar的不折叠控件使用;

注意:collapsingtoolbar控件之下必须有且只有两个控件;

3.静态属性:

app:title=”标题” //设置标题内容
app:layout_scrollflags="scroll|exituntilcollapsed" //设置滚动标记
app:expandedtitlegravity="right|bottom" //设置标题位置
app:expandedtitlemarginbottom="@dimen/activity_vertical_margin" //设置标题到底部的距离
app:expandedtitlemarginend="@dimen/activity_horizontal_margin" //设置标题距底部的距离
app:contentscrim="#00ff00" //设置折叠时上方控件的颜色
//注意:下边两条属性必须设置;
app:layout_collapsemode="parallax" //在其需要被折叠的子控件中;
app:layout_collapsemode="pin": //在需要留下来的子控件中;

4.动态设置:

//(1)设置展开状态下标题颜色
collapsingtoolbarlayout.setexpandedtitlecolor(color.white);
//(2)设置折叠后标题颜色
collapsingtoolbarlayout.setcollapsedtitletextcolor(color.blue);

以上所述是小编给大家介绍的android5.0中material design的新特性,希望对大家有所帮助