android应用开发-从设计到实现 3-5 静态原型的Appbar
2017-03-28 18:36
459 查看
静态原型的Appbar
我们设计的Appbar包括了两个部分,一个是
toolbar,另一个就是
flexible space-显示当日天气的详细信息,
Toolbar参数确定
添加Toolbar很简单,首先找到
Material Design中对
Appbar的描述可以知道,
这是一个高度为
56dp的矩形区域;
当
Appbar收缩时,应用的名字会显示出来,
注意:这里显示的是中文-
Dense类型的文字,所以文字的大小比英文要大1
4000
sp。
添加Toolbar
先添加区域,选择
Insert -> Shape -> Rectangle(或者快捷按键R);
在期望的位置,拖动出一个56px*360px的矩形框;拖动的过程中,矩形尺寸会动态的显示出来;
此时画板上已经多出了一个叫做
Rectangle的形状。
假如尺寸有偏差也没有关系,可以通过修改
属性区域的高宽数值,进行精确的修改
修改背景颜色为
Primary Color:#3F51B5,
接下来添加应用名称:这里要显示的并不是应用的真实名称,而是天气预报的位置,
选择
Insert -> Text(或者快捷按键T);
在
Toolbar的大致位置进行点击,写下位置名称-
成都;此时画板上多出了
Text组件;
修改新组件的属性为,
选中
Rectangle和
成都组件,使用cmd
+ G,将其组合成
Toolbar
再来进行标题位置的设置,
选择
Toolbar下的所有组件,点击
垂直对齐的按钮,
标题的左边距是16dp,选中
成都,同时按下
alt按键,可以看到
成都上下左右的边距大小,使用方向键调整左边距的大小即可,
因为此时并不需要显示位置信息,所以要点击
成都组件旁边的
眼睛按钮,把内容隐藏起来。
使用
alt查看组件的边距是一个常用的技巧,查看的同时,如果移动鼠标到不同的区域,就能看到组件相对于不同区域的边距数值,这让我们在排版的时候非常的方便。
至此,
Toolbar的设置就完成了。
天气详情区域参数设定
天气详情区域由三个部分组成,天气图标;
当前温度,当日温度范围;
位置信息;
整体设计上讲,天气详情区域、Toolbar和状态栏都是整体的蓝色,占据整个屏幕空间的一半。因此这里将天气详情区域的高度,设计成
245dp,它内部的元素都布局在360dp*245dp的区域范围内。
图标和温度的设计是比较自由的,只要设计师觉得美观就好了。我将它们放在两个150dp*100dp的矩形当中,让它们的左、右、上边距都成为
24dp。
当前温度,采用
Display 3的类型,
项目 | 数值 |
---|---|
字体 | Noto |
字形 | Regular |
大小 | 56sp |
颜色 | FFFFFF |
透明度 | 70% |
Headline的类型,
项目 | 数值 |
---|---|
字体 | Noto |
字形 | Regular |
大小 | 24sp |
颜色 | FFFFFF |
透明度 | 100% |
Display 1的类型,
项目 | 数值 |
---|---|
字体 | Noto |
字形 | Regular |
大小 | 34sp |
颜色 | FFFFFF |
透明度 | 100% |
左边距 | 24dp |
下边距 | 24dp |
Noto字体和
Roboto字体对于
English-like是兼容的,所以当表示数字、英文字母的时候,两者都可以使用。
添加天气详情
根据之前的规划,划出360px*245px的矩形区域,背景色修改成Primary Color:#3F51B5。默认情况下创建的矩形会有
border,我们将它移出,
创建两个150dp*100dp的矩形,准备用它们分别装入天气图标和温度信息;
将新创建的矩形和
bg进行组合;
调整两者顶部和左右的边距为
24dp,
添加天气图标
引入天气图标,打开之前准备好的资源文件夹,把晴间多云的图标-
阴晴拖入
工作区域,尺寸设置成120dp*100dp;
将刚引入的
阴晴与之前的
weather icon bg组合成一个新的组件-
Weather icon,并将
阴晴水平居中放置,
展开
阴晴,修改其颜色成
Accent Color:#FFC107,
移除
weather icon bg的背景颜色,
在对图标进行居中设置的时候,需要选中
阴晴和
weather icon bg,使用
水平居中对齐功能。
weather icon bg在这里充当了被对齐的参照物,在使用
Sketch设计的时候,经常需要添加一个这样的辅助设计元素。
添加温度信息
使用快捷按键T,在相应的位置,添加两个文字输入区域,写上对应的内容,并设置好对应的字体属性。对组件结构进行调整,
对文字进行水平居中的排列,并移除背景的颜色,
添加位置
在适当的位置,添加一个Text组件,写入成都,做好设置,
注意,它的左边距和下边距都是
24dp。
至此,整个Appbar的内容就添加完毕了。
本文是《从设计到实现-手把手教你做android应用开发》系列文档中的一篇。感谢您的阅读和反馈,对本文有任何的意见和建议请留言,我都会尽量一一回复。
如果您觉得本文对你有帮助,请推荐给更多的朋友;或者加入我们的QQ群348702074和更多的小伙伴一起讨论;也希望大家能给我出出主意,让这些文档能讲的更好,能最大化的帮助到希望学习开发的伙伴们。
除了CSDN发布的文章,本系列最新的文章将会首先发布到我的专属博客book.anddle.com。大家可以去那里先睹为快。
相关文章推荐
- android应用开发-从设计到实现 3-5 静态原型的Appbar
- android应用开发-从设计到实现 3-7 静态原型的更多天气信息
- android应用开发-从设计到实现 3-4 静态原型的状态栏
- android应用开发-从设计到实现 3-3 Sketch静态原型设计
- android应用开发-从设计到实现 3-6 静态原型的天气预报
- android应用开发-从设计到实现 3-8 静态原型的Appbar折叠
- android应用开发-从设计到实现 3-9 Origami动态原型设计
- android应用开发-从设计到实现 3-1 原型设计
- android应用开发-从设计到实现 3-9 Origami动态原型设计
- android应用开发-从设计到实现 1-1 创意
- android应用开发-从设计到实现 4-1 开发产品
- android应用开发-从设计到实现 2-3 颜色的运用
- android应用开发-从设计到实现 4-3应用的创建与部署
- android应用开发-从设计到实现 3-10 资源的创建
- android应用开发-从设计到实现 2-7 声音与触觉的利用
- 【Android 应用开发】AndroidUI设计之 布局管理器 - 详细解析布局实现
- 【Android 应用开发】AndroidUI设计之 布局管理器 - 详细解析布局实现
- android应用开发-从设计到实现 2-6 动画效果
- android应用开发-从设计到实现 3-3 Sketch静态原型设计
- android应用开发-从设计到实现 1-2 功能的确定