静态原型的状态栏

状态栏Symbol

状态栏似乎非常复杂,有wifi信号、手机信号、时间、电量等信息,幸好Sketch原生就自带的现成组件,你能够直接拿过来就用了。当然。你也能够自己一个一个去画,只是既然有了现成的轮子,又何必反复劳动呢。

菜单条中选择File -> New From Template,在弹出的菜单中选择Material Design。此时会创建一个新的project文件。

与之前空的project文件不同的是,这里面已经有了两个现成的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灯。相关的配套文档也能够在这里看到。

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

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

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

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

    Sketch静态原型设计 对于静态原型的设计,我们使用Sketch. 启动Sketch后,我们将看到相似例如以下的界面, 工具栏 它的顶部是工具栏, 能够通过菜单条View -> Customi ...

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

    动态原型设计 动态的可交互原型产品,是产品经理和界面设计师向开发人员阐释自己设计的最高效工具. 开发人员不须要推測设计师要什么样的效果,照着原型产品做就好了. 非常多创业团队也发现了产品人的这个刚需, ...

  3. Android应用开发以及设计思想深度剖析

    Android应用开发以及设计思想深度剖析(1) 21cnbao.blog.51cto.com/109393/956049

  4. android应用开发-从设计到实现 2-8 组件与经常使用模式

    组件与经常使用模式 前面已经比較全面的介绍了Material Design相关的设计哲学.设计原理和方法论. 这一章開始,我们将看看这些原理是怎样在安卓系统其中得到实践的. 一个应用并非全然从什么都没 ...

  5. 20155219实验四 Android开发基础设计实验报告

    20155219实验四 Android开发基础设计实验报告 实验内容 安装Andriod Studio并配置软件 使用Andriod Studio软件实现Hello World!+学号的小程序 实验步 ...

  6. 20155227 《Java程序设计》实验四 Android开发基础设计实验报告

    20155227 <Java程序设计>实验四 Android开发基础设计实验报告 任务一 Android Stuidio的安装测试: 参考<Java和Android开发学习指南(第二 ...

  7. 20145219 《Java程序设计》实验四 Android开发基础设计实验报告

    20145219 <Java程序设计>实验四 Android开发基础设计实验报告 实验内容 安装Andriod Studio并配置软件 使用Andriod Studio软件实现Hello ...

  8. 【转】Android 底层开发的几点

    我干了3年Android sdk开发,觉得到了瓶劲没法更进一步,于是花了一年多点时间,大概摸到点门径.根据前辈的经验,Android底层完全入门需要两年. 先说下我的入门过程:第零步,下载源码,我下的 ...

  9. 《Android NFC 开发实战详解 》简介+源码+样章+勘误ING

    <Android NFC 开发实战详解>简介+源码+样章+勘误ING SkySeraph Mar. 14th  2014 Email:skyseraph00@163.com 更多精彩请直接 ...

随机推荐

  1. CubieTruck入手第一天

    基本的參考资料整理例如以下: mod=viewthread&tid=160" id="thread_subject" style="word-wrap: ...

  2. amcharts categoryAxis

    amcharts中给出的sample lineWithMultipleValueAxes,是这样的 我们对横坐标label做一些改变: var categoryAxis = chart.categor ...

  3. Spring Boot 自定义属性 以及 乱码问题

    自定义属性 使用随机数及自定义配置类 中文乱码问题 1添加配置 2设置文件类型 1IDEA 2eclipse 自定义属性 application.properties提供自定义属性的支持,这样我们就可 ...

  4. PCL几种采样方法

    (1)下采样  Downsampling 一般下采样是通过构造一个三维体素栅格,然后在每个体素内用体素内的所有点的重心近似显示体素中的其他点,这样体素内所有点就用一个重心点来表示,进行下采样的来达到滤 ...

  5. easyui使用介绍

    http://www.jeasyui.com/index.php based on jQuery, Angular and Vue. don't need to write many javascri ...

  6. (通用)Android App代码混淆终极解决方案【转】

    App虽然没有那么的高大上,但是代码的混淆是代表了程序员对App的责任心, 也是对App安全的一点点保证.今天我会将自己做Android混淆的过程和体会分享给大家,也避免大家少走弯路,少跳坑. 本篇博 ...

  7. R语言日期的表示和运算(详细总结)

    1.取出当前日期 Sys.Date() [1] "2014-10-29" date()  #注意:这种方法返回的是字符串类型 [1] "Wed Oct 29 20:36: ...

  8. Javascript导航菜单13则

    来源:http://www.noupe.com/ajax/13-awesome-java-script-css-menu.html翻译:http://parandroid.com下面为你准备了13个利 ...

  9. 慎用 apt-get autoremove !

    apt-get 提供了一个用于下载和安装软件包的简易命令行界面. 卸载软件包主要有这3个命令 remove – 卸载软件包 autoremove – 卸载所有自动安装且不再使用的软件包 purge – ...

  10. Pandas 读取文本格式数据

    title 其实书中说的我认为不够全,因为公司里面现在主要用stata和spss,暂时还没有用到sas,excel也很少用 那么读取文件的方式,因为有人已经总结了,我就偷过来算了 对应不同的文件类型有 ...