横竖屏切换--短消息

横竖屏切换--信息app

素材清单

detail1.png
detail2.png
detail3.png

涉及的技能

1. adaptive view（自适应视图）
2. 交互事件：OnSwipeLeft，OnSwipeRight。

案例效果

一个应用在横屏和竖屏之间切换时，会有不同的界面布局。这里用 iPhone 的短信息应用来说明。

效果.gif

移动链接如下：
[局部纵向和横向滚动](http://9gdylg.axshare.com

简明步骤

1. 竖屏主界面布局。
2. 添加横屏的布局。

具体步骤及说明

1. 竖屏主界面布局。

1.新建一个项目，命名为“横竖屏切换--短消息”。

2.用 label 和 rectangle 制作短消息的应用界面。上部导航栏的坐标尺寸为（0，0，414，50）。效果如图：

1.png

2. 添加横屏的布局。

1.在 home 页的左边有一个小图标，如图：

这是自适应视图的按钮

2.png

2.点击按钮打开管理自适应视图，点击绿色加号添加新视图。设置preset选项，里面的选项如图所示：

3.png

大致设置了什么是横屏（landscape），什么时候是竖屏（portrait）。

如 最下面的一个portrait phone （320 * any and below），是说此视图适用于宽度为不超过320，高度不限的视图尺寸。而我们现在 iPhone6尺寸不在这些预设条件中，只能在下面的condition中自行设定。

在name中命名为横屏 iPhone6s。condition为is greater than or equals，大于等于时。width设置为 iPhone6s 竖屏的宽度414+1.也就是说，当视图的宽度大于等于 iPhone6s 在竖屏时候的宽度414时（+1是为了确保大于，不能等于），就会调用自适应视图。height不设，inherit from是说暂时调用哪个视图，一般设置为base，暂用现在的视图。设置如图：

4.png

3.确定后，在自适应视图的按钮旁边多了一个415。我们点击这个415的按钮，发现只是多了视图右侧一条红色竖线。这里其实已经是两个视图了，只是我们刚才选择的inherit from选项中是base，所以两个视图一模一样。我们现在应该修改415按钮下的视图布局，更改成横屏时的尺寸。比如，导航栏的尺寸应该是（0，0，736，50），宽度是横屏时的 iPhone 宽度。效果如图：

5.png

我们这里只是简单将控件拉宽。这里的affect all views没有勾选，是指我们只更改415宽度条件下的控件，而其他状态下，如base并不更改维持原样。

4.预览，会发现消息的布局就是类似横屏的布局，是因为我们的浏览器宽度肯定大于415了。如果要检验竖屏的情况，可以将浏览器拉窄，就可以看到自适应的效果了，如前述的效果图。在手机上显示的改变效果更好。