自从去年Google推出Material Design这款设计语言后,新的设计规范越来越受开发者们的喜爱,这篇文章包括后续文章就是慢慢的介绍在App中使用Material Design界面主题、动画、及各种UI设计规范,至于今年推出的Design包所有design控件的介绍在以前几篇就一一介绍了。

Material Design设计语言

它的设计思想为:把物理世界的体验带进屏幕,去掉现实中的杂质和随机性,保留其最原始纯净的形态、空间关系、变化与过渡,配合虚拟世界的灵活特性,还原最贴近真实的体验,达到简洁与直观的效果。

所以这款语言最终的目的是让手机内的App界面简洁直观且有着贴近现实世界的体验。

它主要包含四大块内容:

1、主题和布局

2、视图和阴影

3、UI控件

4、动画效果

其中上面每一块内容都值得详细研究,尤其是在视图和动画上面的效果,今天我们主要综合的介绍第一块内容。

使用Material Design主题

目前Material Design的Theme主要有三种:

而且Material Design主题目前只能应用在Android5.0以上的版本。

1、Theme.Material

2、Theme.Material.Light

3、Theme.Material.Light.DarkActionBar

使用Material Design主题有两种方法:

1、在styles.xml样式文件中配置:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="android:Theme.Material.Light.DarkActionBar">
        <!-- Customize your theme here. -->
    </style>
</resources>

2、在manifest文件中配置:

android:theme="@android:style/Theme.Material"

这三种主题效果为:

使用Material Design主题后,各控件就有了默认的Material Design的效果了,当然我们还可以自定义Material Design 主题色调效果:

<resources>

    <style name="AppTheme" parent="android:Theme.Material.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="android:colorPrimary">#03A9F4</item>
        <item name="android:colorPrimaryDark">#673AB7</item>
        <item name="android:colorControlActivated">#03A9F4</item>
        <item name="android:colorControlNormal">#E91E63</item>
        <item name="android:textColorPrimary">#ffffff</item>
    </style>

</resources>

其中常用到的:

1、android:colorControlActivated:表示CheckBox、EditText、Switch、Spinner、RadioButton等控件激活时候的色调,与之相同作用的一个属性:android:colorAccent。作用也是一样的。

2、android:colorControlNormal:表示CheckBox、EditText、Switch、Spinner、RadioButton等控件默认时的色调

3、android:colorPrimary:设置appBar的背景色

4、android:colorPrimaryDark:设置状态栏的颜色

5、android:textColorPrimary:设置appBar上字体的颜色

当然设置状态栏的颜色也只能支持Android 5.0以上的版本。刚刚自定义主题的效果为:



可以看到当我们选中CheckBox或Switch控件等时候,它们的颜色也变成了我们自定义的,其中EditText横线默认的颜色是和colorPrimary AppBar主题的颜色是一样的,这体现了很好的融合。

一般情况下我们在使用Button时为了在点击时候使Button改变颜色,一般做法是在drawable中定义一个selector.xml,而Material Design主题中我们可以轻松在style文件中定义Button默认时候和点击时候的颜色,达到整个应用主题风格一致,如:在5.0以上设置style为:

<item name="android:colorControlHighlight">#00BCD4</item>
<item name="android:colorButtonNormal">#CDDC39</item>

在5.0以下设置style为:

<item name="colorControlHighlight">#00BCD4</item>
<item name="colorButtonNormal">#CDDC39</item>

1、colorControlHighlight: 设置按钮点击时的背景色

2、colorButtonNormal:设置按钮默认状态下的背景色

效果:



可以看到,应用中所有Button的风格都是这种了,从而统一整个应用的Button的主题风格,当然,如果在某些界面上按钮颜色或者其它控件的样式等有特殊的需求,我们可以单独为这个界面设置一个新的style主题,如我要把这个界面的按钮默认颜色改为深蓝色,那么:

定义一个新的style:

<style name="MyTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorControlHighlight">#00BCD4</item>
        <item name="colorButtonNormal">#673AB7</item>
</style>

然后设置给这个界面的layout文件:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:theme="@style/MyTheme">

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:text="Button" />

    <Button
        android:id="@+id/button2"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:text="Button" />

    <Button
        android:id="@+id/button3"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:text="Button" />
</LinearLayout>

效果:

又如果这个界面中第一个Button的字体颜色和默认颜色需求不一样,我们还可以单独给这个Button设置一个Style主题,如:

定义一个新的style:

<style name="ButtonTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorControlHighlight">#00BCD4</item>
        <item name="colorButtonNormal">#CDDC39</item>
        <item name="android:textColor">#ffffff</item>
</style>

然后给Button设置theme:

<Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:theme="@style/ButtonTheme"
        android:text="Button" />

效果:

综上看来,我只要对style文件利用的好,不仅可以统一整个界面主题风格,还可以减少很多代码工作和增加代码复用率,比如可以把多个Button的相同属性(默认颜色、点击颜色、字体等)抽取出来封装成一个style,在定义button时候就只需要把这个style设置给Button的android:theme属性就可以了

Material Design Theme的兼容性

如果我们想要在比Android 5.0版本以下使用Material Design Theme的话:

1、我们可以把Material Design Theme 的styles.xml放置在res/values-v21/目录下,然后使用Theme.AppCompat 并继承Material Design Theme,styles.xml为:

<resources>
    <style name="AppTheme.Theme.AppCompat" parent="android:Theme.Material.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="android:colorPrimary">#03A9F4</item>
        <item name="android:colorPrimaryDark">#673AB7</item>
        <item name="android:colorControlActivated">#03A9F4</item>
        <item name="android:colorControlNormal">#E91E63</item>
        <item name="android:textColorPrimary">#ffffff</item>
    </style>
</resources>

2、然后在res/values/目录下新建一个5.0版本以下用的styles.xml,其中该styles使用Theme.AppCompat主题,因为该主题是在support v7包下的,它兼容了Material Design的大部分风格,所以兼容必须使用Theme.AppCompat 主题,并且Activity要继承自AppCompatActivity,该styles.xml配置为:

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">#03A9F4</item>
        <item name="colorPrimaryDark">#673AB7</item>
        <item name="colorControlActivated">#03A9F4</item>
        <item name="colorControlNormal">#E91E63</item>
    </style>
</resources>

我们可以发现区别,在兼容时候需要把前面的android:前缀去掉,否则会报错,这点注意一下。。。

现在,项目就能在5.0以下的设备也使用Material Design Theme效果了,我们来看看分别运行在5.0以下版本和5.1版本上的效果吧:

在5.0以下版本中:

在5.1以上版本:

我们可以看到,在5.0以下的版本中,虽然不能设置状态栏的颜色,但是其中大部分Material Design 的风格已经保留下来兼容的使用了,还是很炫吧。。。

Material Design布局

布局说起来我就总结一下把:

1、讲究纸工艺,一般典型的界面布局就是由多张纸组成

1、纸片可以伸缩、改变形状

2、纸片变形时可以裁剪内容,比如纸片缩小时,内容大小不变,而是隐3、藏超出部分

4、多张纸片可以拼接成一张

5、一张纸片可以分裂成多张

6、纸片可以在任何位置凭空出现

2、新增Z轴,可以让控件更加具有立体感

3、布局中的“纸”讲究浮动,既可以改变大小满足各种用途

4、文字排版

常用字号:

12sp 小字提示

14sp(桌面端13sp) 正文/按钮文字

16sp(桌面端15sp) 小标题

20sp Appbar文字

24sp 大标题

34sp/45sp/56sp/112sp 超大号文字

长篇幅正文,每行建议60字符(英文)左右。短文本,建议每行30字符(英文)左右。

5、界面布局

所有可操作元素最小点击区域尺寸:48dp X 48dp。

栅格系统的最小单位是8dp,一切距离、尺寸都应该是8dp的整数倍。以下是一些常见的尺寸与距离:

顶部状态栏高度:24dp

Appbar最小高度:56dp

底部导航栏高度:48dp

悬浮按钮尺寸:56x56dp/40x40dp

用户头像尺寸:64x64dp/40x40dp

小图标点击区域:48x48dp

侧边抽屉到屏幕右边的距离:56dp

卡片间距:8dp

分隔线上下留白:8dp

大多元素的留白距离:16dp

屏幕左右对齐基线:16dp

文字左侧对齐基线:72dp

另外注意56dp这个数字,许多尺寸可变的控件,比如对话框、菜单等,宽度都可以按56的整数倍来设计

使用Material Design 应用主题的更多相关文章

  1. Android5.0新特性——Material Design简介

    Material Design Material Design简介 Material Design是谷歌新的设计语言,谷歌希望寄由此来统一各种平台上的用户体验,Material Design的特点是干 ...

  2. Android Material Design-Creating Apps with Material Design(用 Material Design设计App)-(零)

    转载请注明出处:http://blog.csdn.net/bbld_/article/details/40400031 翻译自:http://developer.android.com/trainin ...

  3. 使用Material Design 创建App翻译系列----材料主题的使用(Using Material Theme)

    上一篇是使用Material Design 创建App翻译系列--開始学习篇,进入正题: 新的材料主题提供了下面内容: 1. 提供了同意设置颜色板的系统部件组件. 2. 为这些系统组件提供了触摸反馈动 ...

  4. Android Material Design系列之主题样式介绍说明

    今天这篇文章应该算是Material Design系列的补充篇,因为这篇文章本来应该放到前面讲的,因为讲的是主题嘛,对于一些状态和颜色的介绍,因为我们一新建一个项目时,系统自带了三个属性的颜色,现在就 ...

  5. 创建Material Design风格的Android应用--应用主题

    本人全部文章首先公布于个人博客,欢迎关注,地址:http://blog.isming.me 昨天正式公布了android 5,同一时候android developer站点也更新了,添加了创建Mate ...

  6. Android Material Design 兼容库的使用

    Android Material Design 兼容库的使用 mecury 前言:近来学习了Android Material Design 兼容库,为了把这个弄懂,才有了这篇博客,这里先推荐两篇博客: ...

  7. Material Design学习笔记

    Wiki->移动开发->Android->Material Design-原质化设计 (友情链接:http://wiki.jikexueyuan.com/project/materi ...

  8. ANDROID L——Material Design详解(UI控件)

    转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Android L: Google已经确认Android L就是Android Lolli ...

  9. Android Material Design 学习笔记 - Matrial Theme

    google在2014年 I/O大会上推出了一种新的设计设计语言—Material design,这种设计语言语言旨在为手机.平板电脑.台式机和“其他平台”提供更一致.更广泛的“外观和感觉”(附上官方 ...

随机推荐

  1. Android新建工程步骤(AndroidStudio)

    1.在 Android Studio 中,创建新项目: 如果您未打开项目,请在 Welcome to Android Studio 窗口中,点击 Start a new Android Studio ...

  2. Hadoop介绍

    是适合大数据的分布式存储与计算平台,用java编写的开源系统,能够安排在大规模的计算机平台上,从而长进计算效率:由 HDFS.MapReduce.HBase.Hive 和 ZooKeeper等成员组成 ...

  3. Android布局中ScrollView与ListView的冲突的最简单方法

    看到网上流行的一种使用方法是: public class Utility { public static void setListViewHeightBasedOnChildren(ListView ...

  4. EBS各个应用简称

     模块全称 Banking Center 模块简称 FPT 服务器目录 FPT_TOP Billing Connect CUE CUE_TOP CADView-3D DDD DDD_TOP CPG ...

  5. 4.关于QT中的QFile文件操作,QBuffer,Label上添加QPixmap,QByteArray和QString之间的区别,QTextStream和QDataStream的区别,QT内存映射(

     新建项目13IO 13IO.pro HEADERS += \ MyWidget.h SOURCES += \ MyWidget.cpp QT += gui widgets network CON ...

  6. spring 的OpenSessionInViewFilter简介

    假设在你的应用中Hibernate是通过spring 来管理它的session.如果在你的应用中没有使用OpenSessionInViewFilter或者OpenSessionInViewInterc ...

  7. 6.1、Android Studio的Android Monitor概览

    Android Monitor帮助你监测你的应用的性能,以帮助你合理的进行优化,调试,提升.如下功能: 1. Log消息,系统定义的或者开发者定义的. 2. 内存,CPU和GPU使用情况. 3. 网络 ...

  8. 【环境配置】配置maven

    Maven是基于项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具. Maven 除了以程序构建能力为特色之外,还提供高级项目管理工具.由于 Maven 的缺 ...

  9. Java:使用匿名内部类在方法内部定义并启动线程

    下面的代码展示了在一个方法中,通过匿名内部类定义一个Thread,并Override它的run()方法,之后直接启动该线程. 这样的代码可用于在一个类内部通过另起线程来执行一个支线任务,一般这样的任务 ...

  10. Cocos2D游戏项目CCTableView在Xcode7.2下的无法滚动问题

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 一个RPG游戏转换到Xcode7.2下发现一个问题,原来可以上 ...