横竖屏切换--短消息

横竖屏切换--信息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张图片
1.png

2. 添加横屏的布局。

1.在 home 页的左边有一个小图标,如图:

这是自适应视图的按钮


横竖屏切换--短消息_第2张图片
2.png

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

横竖屏切换--短消息_第3张图片
3.png

大致设置了什么是横屏(landscape),什么时候是竖屏(portrait)。

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

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

横竖屏切换--短消息_第4张图片
4.png

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

横竖屏切换--短消息_第5张图片
5.png

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

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

你可能感兴趣的:(横竖屏切换--短消息)