文档章节

AppleWatch开发入门二——界面布局

珲少
 珲少
发布于 2015/10/14 15:54
字数 1331
阅读 2046
收藏 1

AppleWatch开发入门二——界面布局

一、简介

        在iphone开发中,最基本的布局方式是通过frame,将控件的位置和大小固定在屏幕上,后来,由于手机屏幕的尺寸有了略微变化,有了autoresizing的布局框架,我们可以设置子视图随父视图的改变做一些相应的变化,再后来,iphone的尺寸与分辨率也越来越多,适配各个屏幕也成为了iOS开发者遇到的新的问题,幸运的是,autolayout机制的出现,大大减小了开发者在适配方面的成本。以上提到的两种布局方式,在以前博客中有讨论:

使用autoresizing进行动态布局:http://my.oschina.net/u/2340880/blog/423357

使用autolayout进行动态布局:http://my.oschina.net/u/2340880/blog/423500

        在watch的布局方式中,我们需要抛弃iphone里的思路,重新接受一套新的布局框架。

        首先,watch的屏幕不大,目前只有38mm和42mm两个尺寸,我们不可能在这个有限的空间里做非常复杂的界面效果,因此,在界面开发中,应该遵循便于使用和一目了然的原则。watch上的布局方式采用的是一种平面堆放的方式,不再有frame,也不再有约束,控件的布局方式只是一个挨着一个的平面堆放,也不可重叠。但在watch中,提供了group这样一种布局方式,可以让我们在布局中体现自由与个性的方面。         

二、最基础的堆放布局

        我们在不使用group的时候,watch的布局采用的是最基础的堆放方式,从上到下依次排开,例如,我们添加四个label,效果如下:

通过改变label的添加顺序,可以改变其上下位置:

这种方式的布局高度并没有限制,我们可以一直往下排列,在watch上,会出现滑动的效果:

    

三、使用Group进行复杂的界面布局

        通过上面的布局方式,我们只能进行纵向的排列布局,这并不能达到我们的需求,WatchKit中提供那一套布局的模型:Group。

        可以这样理解,group就是将屏幕分成了几各分区,我们可以设置各个分区的排列方式,例如水平或者垂直,通过这样的思路,完成复杂的watch界面布局,例如下面的效果:

这样效果的一个界面,就是将在屏幕中添加了三个Group,最上面的Gorup设置为水平排列模式,在其中添加了两个按钮和一个分割线,中间一个Group是垂直排列模式,放入了一个选择器和一个按钮,最下面一个Group也是水平排列模式,放入了一个按钮和一个时间栏。

扩展:所谓Group

        Group在界面布局上,不仅可以起到分区屏幕的作用,其还可以设置一些属性来使布局更加漂亮。在storyBoard右侧的设置菜单中,我们可以对这些属性进行操作:

Layout:设置布局模式,分为水平布局和垂直布局两种

insert:可以设置内容区域偏移量,通过这个属性,我们可以使其中填充的控件四周留白

Spacing:其中填充的控件的间距

BackGround:设置Group的背景图案

Mode:设置背景图案的填充方式

Animate:出现时带动画

color:设置Group的背景颜色

Radius:设置Group的圆角度

四、布局中控件的位置和尺寸设置

        在iphone中,我们使用frame或者约束来控制控件的位置和尺寸,在watch中则简单很多,尺寸和位置都是固定的模式,我们只需要做一些设置即可。

1、控件尺寸的控制

        对于控件的尺寸,有三种模式,控件的width和Height都是通过这三个模式设置的:

Relative to Container:自身的尺寸是按照容器的尺寸比例设置的。例如设置为0.5的话,当前控件的尺寸就是容纳其Group的一半。

Size To Fit Content:自身的尺寸与自身内容相关,例如,label中字数的多少决定了label的尺寸。

Fixed:手动设置一个固定的值。

2、控件位置的控制

        因为watch的界面十分简洁,对于控件的位置设置,是通过水平和垂直两个维度来设置的,通过设置每个维度的属性来控制其在容纳它的Group中的位置:

Horizontal:left(左),center(中心),right(右)

Vertical:top(上),center(中心),bottom(下)

 

一点注意:

        关于图片素材,你可以发现,在Extension和App文件夹中各有一个Assets.xcasssets组,只有将素材放入APP文件夹下的这个组watch才能使用。

 

 

专注技术,热爱生活,交流技术,也做朋友。

——珲少 QQ群:203317592

© 著作权归作者所有

珲少

珲少

粉丝 891
博文 395
码字总数 478712
作品 0
上海
程序员
私信 提问
AppleWatch开发入门六——Glance(预览)扩展的应用

AppleWatch开发入门六——Glance(预览)扩展的应用 一、简介 Glance是watchOS中类似iOS的today插件一样的预览扩展。提供了Glance功能的WatchApp可以在手表主页上唤起Glance,展示app相关信息,...

珲少
2015/10/16
567
0
AppleWatch开发入门三——代码交互与控制器生命周期

AppleWatch开发入门三——代码交互与控制器生命周期 一、引言 在前两篇博客中,讨论了关于watch开发中框架与界面布局相关,然而主要的逻辑,终究还是要通过代码来实现的,在我们创建了项目之...

珲少
2015/10/14
841
1
AppleWatch开发入门五——菜单控件的使用

AppleWatch开发入门五——菜单控件的使用 一、简介 菜单也是WatchOS中一个重要的交互方式,限于Watch的屏幕尺寸,若将所有用户交互控件都紧密的排列进展示的UI中,那样难免会使用户操作困难,...

珲少
2015/10/15
930
4
AppleWatch开发入门四——Table视图的应用

AppleWatch开发入门四——Table视图的应用 一、Watch上的Table WatchOS中的TableView和iOS中的TableView还是有很大的区别,在开发之前,首先我们应该明白WatchOS中的Table有哪些局限性和特点...

珲少
2015/10/15
1K
1
AppleWatch开发入门一——Watch的开发思路与应用框架

AppleWatch开发入门一——Watch的开发思路与应用框架 一、引言 Apple Watch无疑是apple在智能手表领域的一次革命,如何在Watch上开发出实用且具有美感的应用,是iOS开发者们开始思考的一个问...

珲少
2015/10/13
1K
1

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周五乱弹 —— 你已经是个成熟的熊猫了

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @Sharon啊 :#今日歌曲推荐# 分享黑鸭子的单曲《羞答答的玫瑰静悄悄的开》 《羞答答的玫瑰静悄悄的开》- 黑鸭子 手机党少年们想听歌,请使劲儿...

小小编辑
6分钟前
16
3
结合Spring Security进行web应用会话安全管理

在本文中,将为大家说明如何结合Spring Security 和Spring Session管理web应用的会话。 一、Spring Security创建使用session的方法 Spring Security提供4种方式精确的控制会话的创建: alwa...

fightinging
12分钟前
2
0
83、Mybatis和Hibernate重要区别

Mybatis;入门简单,程序容易上手开发,节省开发成本。Mybatis需要程序猿自己编写sql语句,是一个不完全的ORM框架,对sql修改和优化非常容易实现。 Mybatis适合开发需求变更频繁的系统,比如...

lianbang_W
今天
5
0
设计模式之状态模式

定义 Allow an object to alter its behavior when its internal state changes.The object will appear to change its class.(当一个对象内在状态改变时允许其改变行为,这个对象看起来像改...

陈年之后是青葱
今天
6
0
Python常用模块之os.path

os.path.abspath(path) 输入相对路径,返回绝对路径 Python 3.7.0 (v3.7.0:1bf9cc5093, Jun 27 2018, 04:59:51) [MSC v.1914 64 bit (AMD64)] on win32Type "copyright", "credits" or "lic......

松鼠大帝
今天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部