Android5.0中Material Design的新特性

 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的新特性,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • 详解Android Material Design自定义动画的编写

    新的动画Api,让你在UI控件里能创建触摸反馈,改变View的状态,切换activity的一系列自定义动画 具体有: 响应View的touch事件的触摸反馈动画 隐藏和显示View的循环展示动画 两个Activity间的切换动画 更自然的曲线运动的动画 使用View的状态更改动画,能改变一个或多个View的属性 在View的状态更改时显示状态列表动画 这些new animations Api,已内置在标准Widget中,如Button.在自定义view时也可使用这些api 动画在Material

  • Material Design系列之Behavior实现Android知乎首页

    本博客目的:仿知乎首页向上滑动时动画隐藏Toolbar.FlocationActionButton.Tab导航,下滑时显示,如果和你的期望不同,那么你可以不需要看了,免的浪费你的宝贵时间噢. 效果预览 知乎效果: 本博客实现效果: 今天效果的源代码下载链接在文章末尾. 实现分析 这个效果其实并不难实现,但是它的用处很大,当用户手指上滑,屏幕上显示下方内容的时候,隐藏Toolbar.Tab导航.FAB来腾出更大的空间显示内容,让用户爽.简单粗暴,但这就是我们的目的. 首先就是头部的Toolbar,

  • 学习Android Material Design(RecyclerView代替ListView)

    本文实例实现一下 RecyclerView,代码比较简单,适合初学者,如有错误,欢迎指出. 复习 ListView 可以查看这篇文章深入浅出学习Android ListView基础,了解关于ListView 的基础知识. 实现过程中需要复写BaseAdapter,主要是这4个方法 public int getCount() :适配器中数据集中 数据的个数,即ListView需要显示的数据个数 public Object getItem(int position) : 获取数据集中与指定索引对应的

  • Android App仿QQ制作Material Design风格沉浸式状态栏

    一.概述 近期注意到QQ新版使用了沉浸式状态栏,ok,先声明一下效果图: 恩,接下来正题. 首先只有大于等于4.4版本支持这个半透明状态栏的效果,但是4.4和5.0的显示效果有一定的差异,所有本文内容为: 1.如何实现半透明状态栏效果在大于4.4版本之上. 2.如何让4.4的效果与5.0的效果尽可能一致. 先贴下模拟器效果图,以便和实现过程中做下对比 4.4 模拟器 5.x 真机 二.实现半透明状态栏 因为本例使用了NavigationView,所以布局代码稍多,当然如果你不需要,可以自己进行筛

  • Android构建Material Design应用详解

    长久以来.Android的UI并不算美观,以至于很多IT公司在进行界面设计的时候,为了保证双平台的统一性,强烈要求Android端的界面风格必须与iOS端一致,我认为这里非常不合理的,同一操作系统中各个应用之间的界面统一性要远比一个应用在双平台的界面统一性重要的多,只有这样,才能给使用者带来更好的用户体验.为了解决这个问题,Google公司在2014年IO大会上推出了一套全新的界面设计语言--Material Design(材料设计语言),这次Google在界面设计上确实下足了功夫,一个词,好看

  • 学习使用Material Design控件(四)Android实现标题栏自动缩放、放大效果

    本文要实现内容移动时,标题栏自动缩放/放大的效果,效果如下: 控件介绍 这次需要用到得新控件比较多,主要有以下几个: CoordinatorLayout 组织它的子views之间协作的一个Layout,它可以给子View切换提供动画效果. AppBarLayout 可以让包含在其中的控件响应被标记了ScrollingViewBehavior的View的滚动事件 CollapsingToolbarLayout 可以控制包含在CollapsingToolbarLayout其中的控件,在响应colla

  • Android5.0中Material Design的新特性

     Material Design简介 Material Design是谷歌新的设计语言,谷歌希望寄由此来统一各种平台上的用户体验,Material Design的特点是干净的排版和简单的布局,以此来突出内容. Material Design对排版.材质.配色.光效.间距.文字大小.交互方式.动画轨迹都做出了建议,以帮助设计者设计出符合Material Design风格的应用. Material Design设计语言鼓励大家使用充满活力的鲜艳色彩,并在同一界面建议使用三种色调,并保障有一个强色调,

  • C#9.0推出的4个新特性介绍

    在 .NET 5.0 的发布中,不仅统一了框架,微软还在C#9.0中推出了一些新特性. 本版本中,印象深刻的功能: Init-only setters (初始化设置器) Records (记录) Top-level statements (顶级语句) Pattern matching (模式匹配) Init-only setters (初始化设置器) 以前,使用不可变数据实例化对象必须在构造函数中通过将值作为参数传递来完成.现在,它已被简化为使用语法 init.它在对象创建期间初始化不可变数据,

  • ES6中非常实用的新特性介绍

    ECMAScript 6离我们越来越近了,作为它最重要的方言,Javascript也即将迎来语法上的重大变革,InfoQ特开设"深入浅出ES6"专栏,来看一下ES6将给我们带来哪些新内容. 写在前面 ES6 已经提交给 Ecma 大会审查了,也就是说,我们将迎来一大波 javascript 的最新标准,还有一些语法糖.ES6 中有很多值得我们关注的东西,下面是我发现的一些我们最常用的一些新特性,进行记录一下. 1. for-of循环 这个东西用来循环数组很爽,原因呢,是因为它弥补了目前

  • 深入讲解Java 9中的九个新特性

    本文主要跟大家分享了Java 9中的九个新特性,对大家具有一定的参考学习价值,下面来看看详细的介绍: 一. Java 平台级模块系统 Java 9 的定义功能是一套全新的模块系统.当代码库越来越大,创建复杂,盘根错节的"意大利面条式代码"的几率呈指数级的增长.这时候就得面对两个基础的问题: 很难真正地对代码进行封装, 而系统并没有对不同部分(也就是 JAR 文件)之间的依赖关系有个明确的概念.每一个公共类都可以被类路径之下任何其它的公共类所访问到, 这样就会导致无意中使用了并不想被公开

  • Android5.0中JobScheduler的使用方法

    在Android 5.0中使用JobScheduler •原文链接 : using-the-jobscheduler-api-on-android-lollipop •译者 : Mr.Simple •校对者 : Mr.Simple 在这篇文章中,你会学习到在Android 5.0中如何使用JobScheduler API.JobScheduler API允许开发者在符合某些条件时创建执行在后台的任务. 介绍 在android开发中,会存在这么些场景 : 你需要在稍后的某个时间点或者当满足某个特定

  • Android5.0中多种水波纹效果的实现代码

    水波纹效果已经不是什么稀罕的东西了,用过5.0新控件的小伙伴都知道这个效果,可是如果使用一个TextView或者Button或者其它普通控件的话,你是否知道如何给它设置水波纹效果呢?OK,我们今天就来看看这个水波纹效果的实现.水波纹效果的实现有系统自带属性可以实现,我们也可以自定义实现效果. 1.系统自带水波纹实现方式 有界水波纹 水波纹效果大致上可以分为两种,一种是有界的,一种无界,我们先来看看有界水波纹效果: 效果: 代码: <TextView android:layout_width=&quo

  • PHP6 中可能会出现的新特性预览

    这些特性包括: 集成OpCache(OPcache通过对PHP的opcode进行缓存和优化,可以提高PHP程序的执行速度)    改善对64位环境的支持    支持Unicode    清理内部API    提升代码质量,做到Warning-Free    改善OPcodes.编译器.运行时    JIT编译器(LibJIT?)    支持Annotation(注解?)    命名自变量(Named argument)    不同等级的类型提示    支持HTTP 2.0协议(可能会使用nght

  • JavaScript ES2019中的8个新特性详解

    前言 JavaScript 不断改进和添加更多功能.TC39 已经完成并批准了 ES2019 的这 8 个功能,它有 4 个阶段,这些阶段是: Stage 0: Strawman Stage 1: Proposals Stage 2: Drafts Stage 3: Candidates Stage 4: Finished/Approved 以下链接可以查看Stage 0,Stage 1 – 3和Final Stage 可选的 Catch 绑定 能够在不使用 catch 绑定的地方选择性地删除它

  • Vue 3.0 前瞻Vue Function API新特性体验

    最近 Vue 官方公布了 Vue 3.0 最重要的RFC:Function-based component API,并发布了兼容 Vue 2.0 版本的 plugin:vue-function-api,可用于提前体验 Vue 3.0 版本的 Function-based component API.笔者出于学习的目的,提前在项目中尝试了vue-function-api. 笔者计划写两篇文章,本文为笔者计划的第一篇,主要为笔者在体验 Vue Function API 的学习心得.第二篇计划写阅读v

  • Android5.0新控件实例详解

    谷歌在推出Android5.0的同时推出了一些新控件,Android5.0中最常用的新控件有下面5种. 1. CardView(卡片视图) CardView顾名思义是卡片视图,它继承FrameLayout.它是一个带圆角的背景和阴影FrameLayout.CardView被包装为一种布局,并且经常在ListView和RecyclerView的Item布局中,作为容器使用. CardView的使用非常简单: <android.support.v7.widget.CardView android:l

随机推荐