Android Material Design简单使用

吐槽

作为一个 Android developer,没有什么比拿着 UI 设计的一堆 iOS 风格的设计 来做需求更恶心的了,基本所有空间都要照着 iOS 来画一遍,Material Design 辣么酷炫 为什么 UI在设计的阶段不设计成 Material Design风格呢?

今天试了几个比较Support包中比较典型的Material Design控件,后期会在学习下Material Design的设计思想和理念,希望能拉着 UI 做一次Material Design 分享,改变我们 APP 的 iOS 风格啊。

最终效果如下


Android Design Support 库依赖

在build.gradle中加入support 包

1 compile'com.android.support:appcompat-v7:23.1.1'

Design Support Library 中包含了 Support v4 和 AppCompat v7

Floating Action Button


我们希望FloatingActionButton悬浮在页面的右下方,所以我们父节点应使用Flowlayout

和普通 button 一样可以设置其点击事件

Android:elevation属性为 view 在空闲状态下的阴影深度, 需要在 api 21以上才能使用,使用 support 包可以使用app:elevation来表示空闲状态高度,app:pressedTanslationZ为按下状态的高度

按钮的颜色一般为主题的强调色,也可以使用 ”app:backgroundTint“修改

Snackbar

和 Toast 很像,snackbar 可以展示一段简单的信息,不同点是它的展示更像是整体 UI 的一部分,不是想 toast 一样是浮在 UI 上的,并且可以有简单的交互

在点击 floatingActionButton时显示Snackbar


但是可以看到,Snackbar 遮挡住了我们的 view,这时候需要一个CoordinatorLayout来协调 view 布局

CoordinatorLayout

将父布局中的framelaout换成CoordinatorLayout,其他不变,再来看看效果


Toolbar

Toolbar 比传统的 ActionBar 更灵活,功能也更多,我们可以看到现在市面上很多的 APP 已经用 Toolbar 替代了 actionbar,在 Desgin Support 的组件中,很多设计都可以和 Toolbar 协同工作,而不是和 actionbar,所以还是建议使用新的 toolbar 替换以前的 actionbar

CoordinatorLayout中的 view 必须是能一同协作的 view,就像 Snackbar 一样,但是 toolbar 并不是这样能协同作战的 view,所以我们需要用一个可以协同作战的 view 来包裹上Toolbar,这就是AppBarLayout

现在我们的布局文件结构是这样的

注意

根据官方的谷歌文档,AppBarLayout目前必须是第一个嵌套在CoordinatorLayout里面的子view

在 toolbar 中加入属性,app:layout_collapseMode=”pin”,使得 Toolbar 中的按钮能固定在顶部

在布局中加入内容

在布局中尝试加入一些按钮


我们定义三个按键,却被 toolbar 遮住了一个,原因是LinearLayout并没有被设计成在CoordinatorLayout协同工作的模式,为了使他们能在CoordinatorLayout协同工作,我们需要在LinearLayout加上一条属性,来告诉它的滚动属性()

TabLayout

根据官网的知道,TabLayout通常应该是放在顶部,(iOS 的 tab 好像基本在底部),

他应该在阴影部分上面,所以应该放在AppBarlayout中

java 中设置这些 tab 属性


背景会设置为主题色,导航线是强调色。但是字还是黑色的,因为我们没有为 tablayout 定义主题,

通常 tablayout 会和ViewPager一起使用 ,这时候使用

public void setupWithViewPager (ViewPager viewPager)

一张图看的比较清晰

内容滚动时,AppBarLayout隐藏

当滑档内容时,为了腾出跟多的空间展示内容可以将AppBarLayout隐藏

1.用 scrollView 包裹 LinearLayout,记得加上app:layout_behavior属性

scrollView 也不能喝 CoordinatorLayout 协同工作,同上面一样,要用别的 view 包裹或者直接使用 NestedSrollView替换scrollView


如果希望 tablayout 也消失,只需要和 tablayout 加上相同的属性就行了

滑动内容 和 AppBarLayout是如何进行联系的?

我们需要定义AppBarLayout与滚动视图之间的联系。在RecyclerView或者任意支持嵌套滚动的view比如NestedScrollView上添加app:layout_behavior。support library包含了一个特殊的字符串资源@string/appbar_scrolling_view_behavior,它和AppBarLayout.ScrollingViewBehavior相匹配,用来通知AppBarLayout 这个特殊的view何时发生了滚动事件,这个behavior需要设置在触发事件(滚动)的view之上

当CoordinatorLayout发现scrollView中定义了这个属性,它会搜索自己所包含的其他view,看看是否有view与这个behavior相关联。AppBarLayout.ScrollingViewBehavior描述了RecyclerView与AppBarLayout之间的依赖关系。RecyclerView的任意滚动事件都将触发AppBarLayout或者AppBarLayout里面view的改变。

AppBarLayout里面定义的view只要设置了app:layout_scrollFlags属性,就可以在RecyclerView滚动事件发生的时候被触发:

app:layout_scrollFlags属性里面必须至少启用scroll这个flag,这样这个view才会滚动出屏幕,否则它将一直固定在顶部。可以使用的其他flag有:

enterAlways: 一旦向上滚动这个view就可见。

enterAlwaysCollapsed: 顾名思义,这个flag定义的是何时进入(已经消失之后何时再次显示)。假设你定义了一个最小高度(minHeight)同时enterAlways也定义了,那么view将在到达这个最小高度的时候开始显示,并且从这个时候开始慢慢展开,当滚动到顶部的时候展开完。

exitUntilCollapsed: 同样顾名思义,这个flag时定义何时退出,当你定义了一个minHeight,这个view将在滚动到达这个最小高度的时候消失。

记住,要把带有scroll flag的view放在前面,这样收回的view才能让正常退出,而固定的view继续留在顶部。

可折叠的 Toolbar

用 CollapsingToolbarLayout 包裹 Toolbar,但仍然在 AppBarLayout 中

删除 Toolbar 中的 layout_scrollFlags

为 CollapsingToolbarLayout 声明 layout_scrollFlags,并且将 layout_scrollFlags 设置成 scroll|exitUntilCollapsed

注意 CollapsingToolbarLayout 的高度是android:layout_height="match_parent"

CollapsingToolbarLayout在展开和收缩时,标题的文字会自动过度的,可以通过 app:expandedTitleMargin 等来改变文字位置

为 appBar 添加背景图片


由于 CollapsingToolbarLayout 是继承 Framelayout 的,所以我们可以直接添加一个 ImageView 作为背景图片

此时虽然背景已经出来了,但是蓝色的导航条依旧存在,需要在 toolbar 去掉这条属性

android:background="?attr/colorPrimary"


给 Imageview 加上视差模式会更帅

app:layout_collapseMode="parallax"

app:layout_collapseParallaxMultiplier="0.5"

也可以在最后恢复成主题色


Navigation Drawer

在AppBarLayout布局下,增DrawerLayout

DrawerLayout中分两部分组成,一部分是content 就是我们需要的主布局内容,另一部分是我们的抽屉的布局,NavigationView中有顶部头,和标签

创建菜单。

菜单元素是放在group标签之下,同时声明每次只能有一个item被选中

为了防止页面被遮盖,同样要使得DrawerLayout协调。加入app:layout_behavior="@string/appbar_scrolling_view_behavior"属性

java初始化


SwipeRefreshLayout

在NestedScrollView外在包裹一层SwipeRefreshLayout,

初始化监听器


失败是什么?没有什么,只是更走近成功一步;成功是什么?就是走过了所有通向失败的路,只剩下一条路,那就是成功的路。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,569评论 4 363
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,499评论 1 294
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,271评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,087评论 0 209
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,474评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,670评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,911评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,636评论 0 202
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,397评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,607评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,093评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,418评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,074评论 3 237
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,092评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,865评论 0 196
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,726评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,627评论 2 270

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,569评论 25 707
  • CoordinatorLayout与滚动的处理 CoordinatorLayout实现了多种Material De...
    cxm11阅读 6,524评论 1 15
  • 参考:从零开始 Code Review让 Code Review成为一种习惯
    hanjun阅读 192评论 0 1
  • 文/鹿小妮 妮妮,你一定是上帝派来的! 就在昨天,我剪了一个美不过三秒的发型,我和理发师的故事稍后再写,总之那个发...
    鹿小妮在南非阅读 565评论 4 6
  • 经三秋饱雨淅沥 我踏着断柯残枝 那等在山中的模样应如初时的草木翁郁 踏上征途 寻你,弯弯曲曲是我的方向 逢你,朝来...
    玩偶和木偶的悄悄话阅读 256评论 0 1