8126人阅读
Android5.x 6.x（4）
最近学习了一下md设计风格和相对应的控件觉得挺棒的,真希望以后能做安卓设计风格的app,只是心有鱼而力不足,虽身为安卓程序员但由于公司设计成本却每天做着ios风格的app,这感觉真是(此处省略一万字)…,既然公司的项目没法过把瘾,那就自己做的玩,本篇博客要实现的效果如下,由于上传图片大小2m的限制效果非常不好但是效果基本显示了
要完成如上效果需要掌握的新控件
2.CollapsingToolbarLayout
3.AppBarLayout
4.CoordinatorLayout
5.DrawerLayout
6.NavigationView
7.ActionBarDrawerToggle
8.Recyclerview
9.CardView
看来要想实现需要掌握的东西挺多的,不过别担心下面我会一一介绍每个控件的使用并逐步实现该效果
万里长征第一步开始啦
用toolbar之前首先要将主题改为md风格的
Material Design的Theme
md的主题有：
o@android:style/Theme.Material (dark version)
o@android:style/Theme.Material.Light (light version)
o@android:style/Theme.Material.Light.DarkActionBar
与之对应的Compat Theme:
oTheme.AppCompat
oTheme.AppCompat.Light
oTheme.AppCompat.Light.DarkActionBar
当然为了兼容低版本我们使用compat theme
先在res/values/styles.xml 中增加一个名为AppThemeBase的style
&style name="AppThemeBase" parent="Theme.AppCompat.Light"&
&item name="windowActionBar"&false&/item&
&item name="windowNoTitle"&true&/item&
&item name="colorPrimaryDark"&@color/colorPrimaryDark&/item&
&item name="colorPrimary"&@color/colorPrimary&/item&
既然要使用toolbar就得隐藏actionbar
&item name="windowActionBar"&false&/item&
&item name="windowNoTitle"&true&/item&
颜色设置对应下图
然后将原本 AppTheme 的 parent 属性 改为上面的AppThemeBase，完整代码如下：
&resources&
&style name="AppTheme" parent="AppThemeBase"&
&style name="AppThemeBase" parent="Theme.AppCompat.Light"&
&item name="windowActionBar"&false&/item&
&item name="windowNoTitle"&true&/item&
&item name="colorPrimaryDark"&@color/colorPrimaryDark&/item&
&item name="colorPrimary"&@color/colorPrimary&/item&
&/resources&
使用的颜色文件如下
&?xml version="1.0" encoding="utf-8"?&
name="colorPrimaryDark"&#0288D1&
name="colorPrimary"&#03A9F4&
name="colorAccent"&#03A9F4&
name="primaryText"&#212121&
name="secondaryText"&#727272&
name="dividerColor"&#B6B6B6&
布局中添加layout
&?xml version="1.0" encoding="utf-8"?&
xmlns:android="/apk/res/android"
xmlns:tools="/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.byzk.www.test.MainActivity"&
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
这里说明一下?attr/代表引用当前主题的属性
?attr/actionBarSize -& 当前主题下actionbar高度系统自带的
?attr/colorPrimary -& 当前主题下colorPrimary颜色
并且toolbar为v7包的
再来activity代码
package com.byzk.www.
import android.support.v7.app.AppCompatA
import android.os.B
import android.support.v7.widget.T
public class MainActivity extends AppCompatActivity {
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
findView();
private void findView() {
toolbar = (Toolbar) findViewById(R.id.toolbar);
private void init() {
setSupportActionBar(toolbar);
实现非常简单就两步
1.toolbar = (Toolbar) findViewById(R.id.toolbar);
2.setSupportActionBar(toolbar);
但是有点要注意要想使用toolbar并且兼容低版本,activity必须继承AppCompatActivity
到这一步实现效果如下
距离我们最终要完成toolbar的效果左边还差ActionBarDrawerToggle右边还差overflow menu,
先来加上menu
创建res/menu/menu_main.xml
&?xml version="1.0" encoding="utf-8"?&
xmlns:android="/apk/res/android"
xmlns:app="/apk/res-auto"&
android:id="@+id/option_1"
app:showAsAction="never"
android:title="选项一" /&
android:id="@+id/option_2"
app:showAsAction="never"
android:title="选项二" /&
android:id="@+id/option_3"
app:showAsAction="never"
android:title="选项三" /&
activity中添加代码如下
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu)
return true
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()){
case R.id.option_1:
Toast.makeText(MainActivity.this,"option_1",Toast.LENGTH_SHORT).show()
case R.id.option_2:
Toast.makeText(MainActivity.this,"option_2",Toast.LENGTH_SHORT).show()
case R.id.option_3:
Toast.makeText(MainActivity.this,"option_3",Toast.LENGTH_SHORT).show()
return true
运行效果如下
文字和右边按钮显现出来了..那么最让我头疼的问题来了如何设置他的颜色我也是查了很久试了好多方法都有缺陷最后在stackoverflow找到了解决办法
&android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme=”@style/ThemeOverlay.AppCompat.Dark.ActionBar”-&给toolbar设置单独的主题
app:popupTheme=”@style/ThemeOverlay.AppCompat.Light”-&给弹出窗设置主题
虽然设置成功了但是对于style和theme我所知道的还是太少,如果有对于style和theme非常了解的同学欢迎交流
那么到这一步了效果如下
还有些图标标题设置比较简单我直接贴对应方法了不做演示了
setNavigationIcon
即设定 up button 的图标，因为 Material 的介面，在 Toolbar这里的 up button样式也就有別于过去的 ActionBar 哦。
APP 的图标。
setSubtitle
setOnMenuItemClickListener
设定菜单各按鈕的动作。
toolbar这里搭建完成了再来加上侧滑效果
DrawerLayout
drawerLayout就是一个布局控件并且带有滑动的功能。只要按照drawerLayout的规定布局方式写完布局，就能有侧滑的效果。
布局代码如下
&?xml version="1.0" encoding="utf-8"?&
xmlns:android="/apk/res/android"
xmlns:app="/apk/res-auto"
xmlns:tools="/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.byzk.www.test.MainActivity"&
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" /&
android:layout_width="match_parent"
android:layout_height="match_parent"/&
android:layout_width="200dp"
android:layout_height="match_parent"
android:background="@color/colorPrimary"
android:layout_gravity="start"/&
这里有两点要注意：
1.主内容区的布局代码要放在侧滑菜单布局的前面,
2.侧滑菜单的部分的布局需要设置android:layout_gravity=”start”属性，他表示侧滑菜单是在左边还是右边。
start表示左边 end表示右边
drawerlayout开关可用如下方法控制
drawerLayout.openDrawer()
drawerLayout.closeDrawer()
ActionBarDrawerToggle
drawerLayout左侧菜单（或者右侧）的展开与隐藏可以被DrawerLayout.DrawerListener的实现监听到，不过还是建议用ActionBarDrawerToggle来监听，ActionBarDrawerToggle实现了DrawerListener，所以他能做DrawerListener可以做的任何事情，同时他还能将drawerLayout的展开和隐藏与actionbar的app 图标关联起来，当展开与隐藏的时候图标有一定的平移效果，点击图标的时候还能展开或者隐藏菜单。
activity代码添加代码如下
ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(
drawerLayout,
R.string.drawer_open,
R.string.drawer_close
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
drawerLayout.setDrawerListener(actionBarDrawerToggle);
actionBarDrawerToggle.syncState();
添加后效果如下
NavigationView
左侧与drawerlayout关联的按钮已经显现来了,那么现在在为侧滑菜单添加内容,其实侧滑菜单内容使用啥控件都可以,只是我这里准备使用com.android.support:design包的控件navigationView所以记得添加依赖
布局代码如下
&?xml version="1.0" encoding="utf-8"?&
xmlns:android="/apk/res/android"
android:id="@+id/drawerlayout"
xmlns:app="/apk/res-auto"
xmlns:tools="/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.byzk.www.test.MainActivity"&
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" /&
android:layout_width="match_parent"
android:layout_height="match_parent"/&
android:id="@+id/navigation_view"
android:layout_width="200dp"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/drawer_header"
app:menu="@menu/menu_drawer"/&
这里最主要的两个属性分别是：
1.app:headerLayout: 给NavigationView添加头部布局
2.app：menu：给NavigationView添加menu菜单布局
drawer_header.xml如下
&?xml version="1.0" encoding="utf-8"?&
xmlns:android="/apk/res/android"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="?attr/colorPrimary"
android:gravity="center"
android:orientation="vertical"&
android:id="@+id/iv_icon"
android:layout_width="80dp"
android:layout_height="80dp"
android:src="@mipmap/icon" /&
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="帅也是错吗"
android:textColor="#fff"
android:textSize="16sp" /&
menu_drawer.xml如下
&?xml version="1.0" encoding="utf-8"?&
xmlns:android="/apk/res/android"&
android:checkableBehavior="single"&
android:id="@+id/nav_blog"
android:title="我的博客" /&
android:id="@+id/nav_about"
android:title="关于我" /&
android:id="@+id/nav_version"
android:title="版本信息" /&
android:title="Sub Title"&
android:id="@+id/nav_sub1"
android:title="副标题1"
android:checkable="true"/&
android:id="@+id/nav_sub2"
android:title="副标题2"
android:checkable="true"/&
Activity中控制NavigationView代码如下
navigationView.setNavigationItemSelectedListener(new MyNavigationListener());
private class MyNavigationListener implements NavigationView.OnNavigationItemSelectedListener {
public boolean onNavigationItemSelected(MenuItem item) {
drawerLayout.closeDrawer(GravityCompat.START);
switch (item.getItemId()) {
case R.id.nav_blog:
case R.id.nav_about:
case R.id.nav_version:
case R.id.nav_sub1:
case R.id.nav_sub2:
return true;
显示效果如下
正如actionbar一样NavigationView用起来是非常方便但是这个控件也有很多弊病,尤其是在文字图标自定义方面,如果你有这个需求那么侧滑布局用listview或者framelayout+fragment实现更好这里不多介绍了
3.CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+RecyclerView+CardView
AppBarLayout
终于距离目标越来越近了.接下来完成的是toolbar上面那个折叠效果
AppBarLayout 是继承LinerLayout实现的一个ViewGroup容器组件，它是为了Material Design设计的App Bar，支持手势滑动操作。它的作用是把AppBarLayout包裹的内容都作为AppBar
注意： AppBarLayout必须作为Toolbar的父布局容器
AppBarLayout是支持手势滑动效果的，不过得跟CoordinatorLayout配合使用,相关代码在后面一起贴出
CoordinatorLayout
CoordinatorLayout是一个增强型的FrameLayout。它的作用有两个
1.作为一个布局的根布局
2.作为各个子类协调手势操作的一个协调布局（从它的名字就可以看出来）
&?xml version="1.0" encoding="utf-8"?&
xmlns:android="/apk/res/android"
xmlns:app="/apk/res-auto"
xmlns:tools="/tools"
android:id="@+id/drawerlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.byzk.www.test.MainActivity"&
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_height="180dp"&
android:layout_width="match_parent"
android:layout_height="120dp"
android:background="@drawable/bg"
app:layout_scrollFlags="scroll|enterAlways"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" /&
android:id="@+id/rv"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" /&
android:id="@+id/navigation_view"
android:layout_width="200dp"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/drawer_header"
app:menu="@menu/menu_drawer" /&
activity并没添加什么代码只是给recycleview添加了些数据
从布局上面可以看到CoordinatorLayout包裹了Appbar和可以滑动的布局
为了达到上面效果图的手势动画效果，我们必须做如下设置
1.通过app:layout_scrollFlags=”scroll|enterAlways” 属性来确定哪个组件是可滑动的并且如何滑动
layout_scrollFlags有如下几种选项：
oscroll: 所有想滚动出屏幕的view都需要设置这个flag
oenterAlways: 这个flag让任意向下的滚动都会导致该view变为可见，启用快速“返回模式”。
oenterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时，你的视图只能已最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。(还没研究明白)
oexitUntilCollapsed: 只有滑动到最顶端在向下滚动会导致该view变为可见
我们上面的布局中 给ImageView设置了app:layout_scrollFlags属性，因此，ImageView是可以滚动出屏幕，且向下滚动就可以出现。
2.我们必须还得有个条件，就是CoordinatorLayout布局下包裹一个可以滑动的布局，比如 RecyclerView，NestedScrollView(经过测试，ListView，ScrollView不支持)具有滑动效果的组件。并且给这些组件设置如下属性来告诉CoordinatorLayout，该组件是带有滑动行为的组件，然后CoordinatorLayout在接受到滑动时会通知AppBarLayout 中可滑动的Imageview可以滑出屏幕了。
app:layout_behavior="@string/appbar_scrolling_view_behavior"
总结一下：
1.要使用CoordinatorLayout作为父布局
2.相应滑动事件的控件需要添加app:layout_scrollFlags=”scroll|enterAlways”属性。
3.包裹的滑动控件需要添加app:layout_behavior=”@string/appbar_scrolling_view_behavior”属性
CollapsingToolbarLayout
如果想制造toolbar的折叠效果，我们必须把Toolbar放在CollapsingToolbarLayout中，它一般作为AppBarLayout的子布局：
布局代码如下
&?xml version="1.0" encoding="utf-8"?&
&android.support.v4.widget.DrawerLayout xmlns:android="/apk/res/android"
xmlns:app="/apk/res-auto"
xmlns:tools="/tools"
android:id="@+id/drawerlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.byzk.www.test.MainActivity"&
&!-- 主布局--&
&android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"&
&android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="180dp"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"&
&android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsingToolBarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"&
&ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/bg"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.6" /&
&android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /&
&/android.support.design.widget.CollapsingToolbarLayout&
&/android.support.design.widget.AppBarLayout&
&android.support.v7.widget.RecyclerView
android:id="@+id/rv"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" /&
&/android.support.design.widget.CoordinatorLayout&
&!-- 侧边菜单--&
&android.support.design.widget.NavigationView
android:id="@+id/navigation_view"
android:layout_width="200dp"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/drawer_header"
app:menu="@menu/menu_drawer" /&
&/android.support.v4.widget.DrawerLayout&
CollapsingToolbarLayout 提供以下属性和方法是用：
1.Collapsing title：ToolBar的标题，当CollapsingToolbarLayout全屏没有折叠时，title显示的是大字体，在折叠的过程中，title不断变小到一定大小的效果。你可以调用setTitle(CharSequence)方法设置title。通常，我们我们都是设置Toolbar的title，而现在，我们需要把title设置在CollapsingToolBarLayout上，而不是Toolbar。
2.Content scrim：ToolBar被折叠到顶部固定时候的背景，你可以调用setContentScrim(Drawable)方法改变背景或者 在属性中使用 app:contentScrim=”?attr/colorPrimary”来改变背景,这里需要注意toolbar不能有背景不然toolbar背景会始终显示在顶部.
3.Parallax scrolling children：CollapsingToolbarLayout滑动时，子视图的视觉差，可以通过属性app:layout_collapseParallaxMultiplier=”0.6”改变。(感觉没啥用)
4.CollapseMode ：子视图的折叠模式，有两种“pin”：固定模式，在折叠的时候最后固定在顶端；“parallax”：视差模式，在折叠的时候会有个视差折叠的效果。我们可以在布局中使用属性app:layout_collapseMode=”parallax”来改变。
经过我个人的测试ImageView只能放在ToolBar的上面才会有效果,还不明白为啥
CollapsingToolbarLayout主要是提供一个可折叠的Toolbar容器，对容器中的不同View设置layout_collapseMode折叠模式，来达到不同的折叠效果。
RecyclerView+CardView大部分同学应该都用过了这里不过多介绍,我也写过一篇关于他的封装有兴趣的可以看看
这里附上demo源码
顺便推荐一个MD的配色网站简单实用
support design剩下的控件将在进行学习
到这里终于写完了,累死宝宝了
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：93710次
积分：1625
积分：1625
排名：千里之外
原创：31篇
评论：237条
(2)(1)(1)(2)(3)(3)(3)(1)(2)(2)(2)(1)(3)(1)(2)(1)(3)(6)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'Material Design 原质化设计 官方资源 AI文件与图标_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
Material Design 原质化设计 官方资源 AI文件与图标
&&Google 谷歌 Material Design 原质化设计 官方资源 AI文件与图标。全英文,用于欣赏学习。
阅读已结束，下载文档到电脑
想免费下载更多文档？
定制HR最喜欢的简历
下载文档到电脑，方便使用
还剩95页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
居然没看懂是怎么生效的... 页面在这里:
还有这一句是怎么生效的?
csstext-rendering: optimizeL
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
我这里UC浏览器会出问题，什么原因
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
iconfont的一个使用方式。
相关文件：
@font-face {
font-family: 'Material Icons';
font-style:
font-weight: 400;
src: local('Material Icons'), local('MaterialIcons-Regular'), url(/s/materialicons/v7/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
.material-icons {
font-family: 'Material Icons';
font-weight:
font-style:
font-size: 24
line-height: 1;
text-transform:
display: inline-
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing:
其实最重要的是font-family: 'Material Icons';和-webkit-font-feature-settings: 'liga';，前者声明了使用Material Icons作为字体，后者则启用了连字特性。
什么是连字特性？中文字体很少见，但英文经常出现：
注意，由于启用了连字特性，所以针对输入fi不再分别输出f和i的字形，而是输出fi的连字字形。
其实Material Font就利用了连字特性，来达到让这个输入：
&i class="md-icon dp48"&flip_to_front&/i&
映射到这个输出:
一般而言，为了兼容字符输出和icon font输出，icon font会选择映射unicode表上面不被占用的一个平面的单字（如font awesome），这样做的坏处是我们不知道什么输入对应输出，根本没有办法记忆和直观地查找。
但使用了连字特性，我们针对形如flip_to_front的连字进行映射，它很直观，也很好记。
连字特性的坏处嘛，它有兼容性问题，这里是：
Version supporting ligatures
Google Chrome
Mozilla Firefox
Apple Safari
Microsoft IE
Apple MobileSafari
Android Browser
顺带，text-rendering: optimizeL这一句只是调节抗锯齿渲染而已。 更新：不准确，参见 的。
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：