码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2017-04-06 15:59:13      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:部分   add   调整   开发   idt   ret   java   art   建议   

静态原型的Appbar折叠

接下来,我们开始设计Appbar被滑动收缩以后的界面效果。

技术分享

可以看到,这个效果图绝大部分和展开时的效果图时一样的。

所以我们可以将整个画板修改一个名字为-展开,并复制出一个新的画板命名为折叠,修改一下其中的元素就好了。

技术分享

使用Symbol

这样做完全没有问题,但是可能会给以后内容的修改留下一个隐患:假如我要把风力3级修改为5级,除了要修改展开画板,还要修改折叠画板,要修改两个地方。

不过假如我将More infoForcast做成了Symbol,那么只需要修改一处,两个画板中的内容就都可以变化了。

More info Forcastgap,组合成一个组件Content

技术分享

然后,使用转换Symbol的功能,

技术分享

之后,在Symbols页面,就能看到Content的内容了,

技术分享

之后,只要修改这个Symbol中的任何内容,都可以同步的反应到使用了它的界面之上。

创建折叠界面

Weather页面,复制展开,改名为折叠

技术分享

修改Appbar中的内容,

  1. 移除Weather detail,将Content的位置上挪,并调整画板的高度至合适位置,

    技术分享
  2. 显示Toolbar中的位置-成都

    技术分享
  3. 修改状态栏的背景颜色为Primary Dark Color:#303F9F,

    技术分享

至此,使用Sketch进行界面设计的工作就全部完成了。

文中使用到的完整的Sketch项目工程文件,可以在这里下载到。


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

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

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


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

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

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

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

标签:部分   add   调整   开发   idt   ret   java   art   建议   

原文地址:http://blog.csdn.net/anddlecn/article/details/69264250

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!