Material Design以及ToolBar实战
2016-07-14 13:20
471 查看
最近发现越来越多的App使用Material Design主题,最明显的一个特征是状态栏可以变色或者设置成透明,以及根据App的风格定制Color Palette,扁平化的风格,在视觉上给人一种全新的感觉,非常激动,于是决定写这篇博客。
关于Material Design详细介绍,请参考:
https://material.google.com/
https://developer.android.com/training/material/index.html
https://developer.android.com/training/appbar/index.html
https://android-developers.blogspot.com/2015/05/android-design-support-library.html
本次博客主要来讲一下Material Design主题风格以及ToolBar的使用。
1、Material Design的主题
主要有以下几个主题:
@android:style/Theme.Material(深色版本)
@android:style/Theme.Material.Light(浅色版本)
@android:style/Theme.Material.Light.DarkActionBar
与之对应的Compat主题有:
Theme.AppCompat
Theme.AppCompat.Light
Theme.AppCompat.Light.DarkActionBar
(1)定制配色工具
我们可以定义主题的基色以符合个人喜好,可在进行材料主题继承时使用主题属性定义你的定制颜色,重点有以下几个属性,当然还有很多别的属性,看一查看对应的Theme.xml:
colorPrimaryDark对应状态栏的颜色。
colorAccent对应UI控件比如EditText编辑时,RadioButton选中时的颜色。
与之对应的图如下所示:
![](https://img-blog.csdn.net/20160714105409483?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
Material Design主题允许我们定制status bar的颜色。如果你项目的最小支持版本为5.0,那么你可以使用android:Theme.Material,设置android:statusBarColor。当然了这种情况目前来说比较少,所以我们多数使用的是Theme.AppCompat,通过设置android:colorPrimaryDark.来设置status
bar颜色。android:statusBarColor的值继承自android:colorPrimaryDark。
你也可自行将状态栏移到后侧。例如,你想在一个照片上以透明的方式显示状态栏,同时利用细微的深色渐变以确保白色状态图标仍保持可见。如果要执行此操作,请将 android:statusBarColor 属性设置为@android:color/transparent 并根据需要调整窗口标志。你也可以使用 Window.setStatusBarColor() 方法进行动画或淡出设置。
注意:在多数情况下,状态栏与主工具栏之间应该有一个清楚的分割,你在这些栏的后侧显示全屏的丰富图像或媒体内容以及使用颜色渐变以确保图表仍保持可见的情况除外。定制导航栏和状态栏时,您可选择将导航栏和状态栏变透明或仅修改状态栏。在所有其他情况中,导航栏均应保持黑色。
不过对于5.0以下的设备,不支持status bar改变颜色,这个读者可以自己试一下。
(2)测试主题效果
values/styles.xml:
记得在moudle的build.gradle加上appcompat-v7依赖:
![](https://img-blog.csdn.net/20160714114333536?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
可以看到,colorAccent就是上图中的粉红色。
2、ToolBar的使用
我们都用过ActionBar,如下所示:
![](https://img-blog.csdn.net/20160714114718240?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
由于ActionBar的一些问题,官方推出了ToolBar来代替ActionBar,ToolBar其实就是一个ViewGroup,可以放在界面的任何地方,当然主要是用来代替ActionBar,并且提供了support library向下兼容的包。
下面我们来引入ToolBar。
1、增加v7兼容包
2、让Activity继承自AppCompatActivity
3、隐藏原本的ActionBar,设置主题为Theme.AppCompat.Light.NoActionBar,也可以设置一下属性:
4、在布局文件中加入ToolBar:
5、在Activity中设定代码如下所示:
ToolBar还有一些别的属性,比如logo,title,subTitle,background、字体样式、主题等等:
最终界面如下:
![](https://img-blog.csdn.net/20160714131258935?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
关于ToolBar的一些别的操作,比如增加Up Action以及Action View、Action Providers,请参考如下链接:
https://developer.android.com/training/appbar/index.html
代码地址:https://github.com/EasyLiu-Ly/MaterialDesignDemos
我们以后在使用主题、写布局的时候可以尽量参考Material Design的规范。
关于Material Design详细介绍,请参考:
https://material.google.com/
https://developer.android.com/training/material/index.html
https://developer.android.com/training/appbar/index.html
https://android-developers.blogspot.com/2015/05/android-design-support-library.html
本次博客主要来讲一下Material Design主题风格以及ToolBar的使用。
1、Material Design的主题
主要有以下几个主题:
@android:style/Theme.Material(深色版本)
@android:style/Theme.Material.Light(浅色版本)
@android:style/Theme.Material.Light.DarkActionBar
与之对应的Compat主题有:
Theme.AppCompat
Theme.AppCompat.Light
Theme.AppCompat.Light.DarkActionBar
(1)定制配色工具
我们可以定义主题的基色以符合个人喜好,可在进行材料主题继承时使用主题属性定义你的定制颜色,重点有以下几个属性,当然还有很多别的属性,看一查看对应的Theme.xml:
<!-- Base application theme. --> <style name="AppBaseTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style>colorPrimary对应ActionBar的颜色。
colorPrimaryDark对应状态栏的颜色。
colorAccent对应UI控件比如EditText编辑时,RadioButton选中时的颜色。
与之对应的图如下所示:
Material Design主题允许我们定制status bar的颜色。如果你项目的最小支持版本为5.0,那么你可以使用android:Theme.Material,设置android:statusBarColor。当然了这种情况目前来说比较少,所以我们多数使用的是Theme.AppCompat,通过设置android:colorPrimaryDark.来设置status
bar颜色。android:statusBarColor的值继承自android:colorPrimaryDark。
你也可自行将状态栏移到后侧。例如,你想在一个照片上以透明的方式显示状态栏,同时利用细微的深色渐变以确保白色状态图标仍保持可见。如果要执行此操作,请将 android:statusBarColor 属性设置为@android:color/transparent 并根据需要调整窗口标志。你也可以使用 Window.setStatusBarColor() 方法进行动画或淡出设置。
注意:在多数情况下,状态栏与主工具栏之间应该有一个清楚的分割,你在这些栏的后侧显示全屏的丰富图像或媒体内容以及使用颜色渐变以确保图表仍保持可见的情况除外。定制导航栏和状态栏时,您可选择将导航栏和状态栏变透明或仅修改状态栏。在所有其他情况中,导航栏均应保持黑色。
不过对于5.0以下的设备,不支持status bar改变颜色,这个读者可以自己试一下。
(2)测试主题效果
values/styles.xml:
<resources> <style name="AppTheme" parent="AppBaseTheme"> </style> <!-- Base application theme. --> <style name="AppBaseTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> </resources>values-v21/styles.xml:
<?xml version="1.0" encoding="utf-8"?> <resources> <style name="AppTheme" parent="AppBaseTheme"> <item name="android:statusBarColor">@color/colorPrimaryDark</item> </style> </resources>values/colors.xml:
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#3F51B5</color> <color name="colorPrimaryDark">#303F9F</color> <color name="colorAccent">#FF4081</color> </resources>
记得在moudle的build.gradle加上appcompat-v7依赖:
dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) testCompile 'junit:junit:4.12' compile 'com.android.support:appcompat-v7:24.0.0' }
可以看到,colorAccent就是上图中的粉红色。
2、ToolBar的使用
我们都用过ActionBar,如下所示:
由于ActionBar的一些问题,官方推出了ToolBar来代替ActionBar,ToolBar其实就是一个ViewGroup,可以放在界面的任何地方,当然主要是用来代替ActionBar,并且提供了support library向下兼容的包。
下面我们来引入ToolBar。
1、增加v7兼容包
2、让Activity继承自AppCompatActivity
3、隐藏原本的ActionBar,设置主题为Theme.AppCompat.Light.NoActionBar,也可以设置一下属性:
<style name="AppTheme.NoActionBar"> <item name="windowActionBar">false</item> <item name="windowNoTitle">true</item> </style>这里使用Theme.AppCompat.Light.NoActionBar主题:
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style>
4、在布局文件中加入ToolBar:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.easyliu.demo.toolbardemo.MainActivity"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary"/> <EditText android:id="@+id/et_userName" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/toolbar" android:hint="input userName" /> <EditText android:id="@+id/et_passWord" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/et_userName" android:layout_marginTop="10dp" android:hint="input passWord" /> <RadioGroup android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/et_passWord"> <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="male" android:textSize="20sp" /> <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:text="female" android:textSize="20sp" /> </RadioGroup> </RelativeLayout>
5、在Activity中设定代码如下所示:
public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); } }基本上算完成了ToolBar的添加。
ToolBar还有一些别的属性,比如logo,title,subTitle,background、字体样式、主题等等:
<android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" android:theme="@style/ThemeOverlay.AppCompat.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" android:elevation="4dp" app:logo="@mipmap/ic_launcher" app:navigationIcon="@mipmap/ic_launcher" app:subtitle="sub Title" app:title="Title" />还可以往ToolBar中添加菜单,这个跟往ActionBar中添加菜单的操作是一样的。
最终界面如下:
关于ToolBar的一些别的操作,比如增加Up Action以及Action View、Action Providers,请参考如下链接:
https://developer.android.com/training/appbar/index.html
代码地址:https://github.com/EasyLiu-Ly/MaterialDesignDemos
我们以后在使用主题、写布局的时候可以尽量参考Material Design的规范。
相关文章推荐
- 基于Bootstrap实现Material Design风格表单插件 附源码下载
- Android Material设计中列表和卡片的创建方法解析
- 详解Android Material设计中阴影效果的实现方法
- Android应用的Material设计的布局兼容性的一些要点总结
- Android应用的Material设计中图片的相关处理指南
- 详解Android Material Design自定义动画的编写
- Angularjs material 实现搜索框功能
- 【MaterialEditText】 Material Design 的 EditText 3ff8
- 基于Bootstrap实现Material Design风格表单插件 附源码下载
- 一个Demo学会用Android兼容包新控件
- Material Design遇到的坑
- Material Design中文版_极客学院
- 材质与材质脚本
- RecyclerView点击事件OnItemClick的两种实现方式
- MaterialColor 所有色彩对应16进制码以及对应颜色
- 关于4.X系统使用安卓5.0Material风格AlertDialog全屏问题
- Android studio加载 Android design support library 22.2.1
- Eclipse加载 Android design support library 22.2.1
- 原生TabLayout使用
- android开发不可不知的UI知识