android应用开发-从设计到实现 3-4 静态原型的状态栏

静态原型的状态栏

状态栏Symbol

状态栏似乎很复杂，有wifi信号、手机信号、时间、电量等信息，幸好

Sketch

原生就自带的现成组件，你可以直接拿过来就用了。当然，你也可以自己一个一个去画，不过既然有了现成的轮子，又何必重复劳动呢。

菜单栏

中选择

File -> New From Template

，在弹出的菜单中选择

Material Design

。此时会创建一个新的工程文件。



与之前空的工程文件不同的是，这里面已经有了两个现成的

page

，里面的内容就是

Material Design

会使用到的各种现成的组件。



选择

Material Design Symbol -> Material/Android/Status bar 360dp black

，这就是一个现成的可用的状态栏。这样的组件叫做

symbol

，它是有多个图形组合后形成的一个通用符号。

Symbol

可以被不同的

page

、项目共享使用。

以后只要看到这个图案，就知道这是一个

symbol

了，



我们也可以创建自己的

symbol

，不过这个地方还不会用到。随着设计开发的深入，在这个章节的后半部分，我们会进行详细的介绍。

使用状态栏Symbol

使用

鼠标右键 + Copy

（或者cmd + c）之后，将它粘贴（

鼠标右键 + Paste Over

或者cmd + v）到我们之前的

weather page

之中，



如果状态栏粘贴之后，并没有对齐画板的边缘，手动将它移动，对齐就可以了。

此时可以看到，

Pages

下面自动多出了一个叫做

symbols

的页面，它里面放的就是我们刚引进的

symbol

。

这时的statusbar还是一个独立的部分，并没有隶属于

Mobile Portrait

画板之下，两者还是平级的关系。

调整状态栏Symbol

接下来我们就开始调整statusbar与

Mobile Portrait

之间的隶属关系。

将状态栏展开，选中里面的内容；

将各个组件拖入到

Mobile Portrait

之下；

删除没有内容的状态栏symbol；

将刚拖入的组件使用

工具栏

上的

Group

功能组合起来，并将组合后的组件更名为

Statusbar

；



选中状态栏，我们可以看到状态栏的尺寸是：24px*360px，刚好是前面讲过的状态栏应该的高度。

修改背景色

将状态栏的背景颜色修改成之前设定的

Primary Color

：#3F51B5，



本文是《从设计到实现-手把手教你做android应用开发》系列文档中的一篇。感谢您的阅读和反馈，对本文有任何的意见和建议请留言，我都会尽量一一回复。

如果您觉得本文对你有帮助，请推荐给更多的朋友；或者加入我们的QQ群348702074和更多的小伙伴一起讨论；也希望大家能给我出出主意，让这些文档能讲的更好，能最大化的帮助到希望学习开发的伙伴们。

除了CSDN发布的文章，本系列最新的文章将会首先发布到我的专属博客book.anddle.com。大家可以去那里先睹为快。

同时也欢迎您光顾我们在淘宝的网店安豆的杂货铺。店中的积木可以搭配成智能LED灯，相关的配套文档也可以在这里看到。

这些相关硬件都由我们为您把关购买，为大家节省选择的精力与时间。同时也感谢大家对我们这些码农的支持。

最后再次感谢各位读者对

安豆

的支持，谢谢:)