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之中,

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

此时可以看到,

  1. Pages下面自动多出了一个叫做symbols的页面,它里面放的就是我们刚引进的symbol
  2. 这时的statusbar还是一个独立的部分,并没有隶属于Mobile Portrait画板之下,两者还是平级的关系。

调整状态栏Symbol

接下来我们就开始调整statusbar与Mobile Portrait之间的隶属关系。

  1. 将状态栏展开,选中里面的内容;
  2. 将各个组件拖入到Mobile Portrait之下;
  3. 删除没有内容的状态栏symbol;
  4. 将刚拖入的组件使用工具栏上的Group功能组合起来,并将组合后的组件更名为Statusbar

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

修改背景色

将状态栏的背景颜色修改成之前设定的Primary Color:#3F51B5,



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

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

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



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

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

最后再次感谢各位读者对安豆的支持,谢谢:)

时间: 2024-08-24 23:31:00

Android 应用开发-从设计到实现 3-4 静态原型的状态栏的相关文章

android应用开发-从设计到实现 3-3 Sketch静态原型设计

Sketch静态原型设计 对于静态原型的设计,我们使用Sketch. 启动Sketch后,我们将看到类似如下的界面, 工具栏 它的顶部是工具栏, 可以通过菜单栏View -> Customize Toolbar...来自定义工具栏. 在弹出的窗口中,将下方的图标拖拽到上方的工具栏中就可以了. 导航栏 左边是导航栏,用来展示这个项目拥有的page和page中包含的详细内容. page是一张张单独页面, 每个页面上可以放多个手机屏幕的画板:展开.折叠.图标等等: 每个page中的画板都进一步的在导航

Android应用开发-从设计到实现 3-9 Origami动态原型设计

动态原型设计 动态的可交互原型产品,是产品经理和界面设计师向开发人员阐释自己设计的最高效工具. 开发者不需要猜测设计师要什么样的效果,照着原型产品做就好了. 很多创业团队也发现了产品人的这个刚需,做出了诸如Principle.Axure这类著名的原型设计产品. Facebook似乎也深谙此道,专门为安卓和iOS系统开发很有针对性的交互原型设计工具-Origami Studio. 这是一个免费的工具,而且也能和Sketch互通,所以我选择了它来向大家讲解互动原型的设计. 界面介绍 启动Origam

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

静态原型的状态栏 状态栏Symbol 状态栏似乎非常复杂,有wifi信号.手机信号.时间.电量等信息,幸好Sketch原生就自带的现成组件,你能够直接拿过来就用了.当然.你也能够自己一个一个去画,只是既然有了现成的轮子,又何必反复劳动呢. 菜单条中选择File -> New From Template,在弹出的菜单中选择Material Design.此时会创建一个新的project文件. 与之前空的project文件不同的是,这里面已经有了两个现成的page,里面的内容就是Material D

android应用开发-从设计到实现 3-6 静态原型的天气预报

静态原型的天气预报 未来5天的天气预报,可以看成由5个类似的天气模块构成,只要完成一个,其他几个就可以通过复制+修改内容实现改变. 首先来明确一下各个组件的尺寸和参数, 整个区域的大小,我设定成360dp*100dp: 左右边距设置成16dp: 这样一来,每日的天气模块就是(360-16-16)/ 5 = 65.6dp,我将它们设定成65dp宽: 天气的图标的大小设定成30dp的正方形区域(注意,这些图标不算是系统图标,所以它的尺寸不需要参考设计成24dp的系统图标): 日期的文字,参考Body

android应用开发-从设计到实现 2-3 颜色的运用

颜色的运用 Material Design采用的是扁平化的设计,可以看到一大块一大块区域的颜色.这些颜色大多亮丽引人,整个界面上搭配的颜色也不会太多,基本保持在三种颜色以内. "没有错误的颜色的,只有错误的搭配".颜色是没有对错的,我们要用经验和直觉来搭配它们,所以要先来认识认识颜色. 颜色理论 颜色是有语言的,红色代表这热情奔放,蓝色代表的沉着安静,绿色代表着生机活力.搭配一组颜色,就是表达作品要传递的含义. 我们大部分人都知道RGB颜色,它的理论依据是:任何颜色都是通过不同强度的红

android应用开发-从设计到实现 2-5 图标的使用

图标的使用 图标能给人带来最直观的印象,有的时候再多的解释也抵不过一个图标. 安卓应用的图标分成两类, 应用图标:在主界面上代表着整个应用的那个启动图标,是给用户第一印象的图标.一个应用开发成功后会不会被用户下载,也许就取决于用户看它的第一眼. 系统图标:在应用里面使用的各种具有特别意义的图标,引导用户进行更多的操作. 应用图标 应用图标的设计也是对Material Design的一种体现:制作应用图标的过程,就是对一张纸进行裁剪.折叠.上色.增加阴影的过程. 虽然应用图标可以被设计得千奇百怪,

android应用开发-从设计到实现 3-7 静态原型的更多天气信息

静态原型的更多天气信息 天气的更多信息,是通过列表的形式展现的. 参数设计 列表项的高度在Material Design中,被定义成了48dp:并且整个list的顶部还有8dp的边距. 列表项由3部分组成, 图标: 项目 数值 大小 24dp 左边距 16dp 位置 垂直居中 颜色 000000 透明度 54% * 项目名称: 项目 数值 字体 Noto 字形 Regular 大小 16sp 颜色 000000 透明度 87% 左边距 72dp 位置 垂直居中 * 项目取值(参考): 项目 数值

android应用开发-从设计到实现 3-5 静态原型的Appbar

静态原型的Appbar 我们设计的Appbar包括了两个部分,一个是toolbar,另一个就是flexible space-显示当日天气的详细信息, Toolbar参数确定 添加Toolbar很简单,首先找到Material Design中对Appbar的描述可以知道, 这是一个高度为56dp的矩形区域: 当Appbar收缩时,应用的名字会显示出来, 注意:这里显示的是中文-Dense类型的文字,所以文字的大小比英文要大1sp. 添加Toolbar 先添加区域, 选择Insert -> Shap

Android 应用开发-从设计到实现 3-2 前期准备

前期准备 设计师首先在头脑中.草稿中勾勒出静态效果图, 之后就需要收集制作时需要的各种素材.确定界面的配色方案. 收集素材 界面中需要使用各种天气图标:晴天.雨天.大雾.下雪.下雨.多云等等:还有天气信息中的风力.风向等等. 我们可以使用Sketch工具进行完全的从无到有的自由创作,也可以适用现有的素材,减少设计的工作量. 这里并不打算讲如何画出一个完美的图形,我想作为一名设计师,这点基本的艺术功底应该还是有的.因此我决定去之前介绍过的资源池-iconfont网站寻找合适的图标. 输入各种图标的