android应用开发-从设计到实现 3-8 静态原型的Appbar折叠
来源:互联网 发布:淘宝首页大海报怎么做 编辑:程序博客网 时间:2024/05/19 13:20
静态原型的Appbar折叠
接下来,我们开始设计Appbar被滑动收缩以后的界面效果。
可以看到,这个效果图绝大部分和展开时的效果图时一样的。
所以我们可以将整个画板修改一个名字为-展开
,并复制出一个新的画板命名为折叠
,修改一下其中的元素就好了。
使用Symbol
这样做完全没有问题,但是可能会给以后内容的修改留下一个隐患:假如我要把风力
从3级
修改为5级
,除了要修改展开
画板,还要修改折叠
画板,要修改两个地方。
不过假如我将More info
和Forcast
做成了Symbol
,那么只需要修改一处,两个画板中的内容就都可以变化了。
将More info
Forcast
和gap
,组合成一个组件Content
,
然后,使用转换Symbol的功能,
之后,在Symbols
页面,就能看到Content
的内容了,
之后,只要修改这个Symbol
中的任何内容,都可以同步的反应到使用了它的界面之上。
创建折叠界面
在Weather
页面,复制展开
,改名为折叠
,
修改Appbar
中的内容,
移除
Weather detail
,将Content
的位置上挪,并调整画板的高度至合适位置,显示
Toolbar
中的位置-成都
,修改状态栏的背景颜色为
Primary Dark Color
:#303F9F,
至此,使用Sketch
进行界面设计的工作就全部完成了。
文中使用到的完整的Sketch
项目工程文件,可以在这里下载到。
本文是《从设计到实现-手把手教你做android应用开发》系列文档中的一篇。感谢您的阅读和反馈,对本文有任何的意见和建议请留言,我都会尽量一一回复。
如果您觉得本文对你有帮助,请推荐给更多的朋友;或者加入我们的QQ群348702074和更多的小伙伴一起讨论;也希望大家能给我出出主意,让这些文档能讲的更好,能最大化的帮助到希望学习开发的伙伴们。
除了CSDN发布的文章,本系列最新的文章将会首先发布到我的专属博客book.anddle.com。大家可以去那里先睹为快。
同时也欢迎您光顾我们在淘宝的网店安豆的杂货铺。店中的积木可以搭配成智能LED灯,相关的配套文档也可以在这里看到。
这些相关硬件都由我们为您把关购买,为大家节省选择的精力与时间。同时也感谢大家对我们这些码农的支持。
最后再次感谢各位读者对安豆
的支持,谢谢:)
- android应用开发-从设计到实现 3-8 静态原型的Appbar折叠
- android应用开发-从设计到实现 3-4 静态原型的状态栏
- android应用开发-从设计到实现 3-7 静态原型的更多天气信息
- android应用开发-从设计到实现 3-3 Sketch静态原型设计
- android应用开发-从设计到实现 3-1 原型设计
- android应用开发-从设计到实现 3-9 Origami动态原型设计
- android应用开发-从设计到实现 4-3应用的创建与部署
- android应用开发-从设计到实现 4-8 天气预报的布局
- android应用开发-从设计到实现 2-3 颜色的运用
- android应用开发-从设计到实现 2-3 颜色的运用(一)
- android应用开发-从设计到实现 3-10 资源的创建
- android应用开发-从设计到实现 1-1 创意
- android应用开发-从设计到实现 2-4 文字的使用
- android应用开发-从设计到实现 2-5 图标的使用
- android应用开发-从设计到实现 2-7 声音与触觉的利用
- android应用开发-从设计到实现 4-5资源的导入
- android应用开发-从设计到实现 4-6界面的整体布局
- android应用开发-从设计到实现 4-7天气详情的布局
- Spring 7大功能模块的作用
- iOS获取当前app版本号和使用设备
- Jersey2 + Maven + Tomcat + IntelliJ IDEA 搭建RESTful服务
- boost bind使用指南
- 前端阶段1
- android应用开发-从设计到实现 3-8 静态原型的Appbar折叠
- ASCII Unicode GBK UTF的联系
- swift中关于隐藏导航栏的和侧别往右滑动实现同样的pop效果
- iOS——UIViewController
- 网络的那些事之DNS
- CSU1335~高桥和低桥(STL~lower_bound+DP)
- Java-Properties
- VS中包含目录、库目录、附加包含目录、附加库目录、附加依赖项的解释
- 解决chrome字体不能小于12px (一道简单的面试题)