温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
1. 创建一个项目，拖拽一个ScrollView到故事板中，如下图&2. 选中ScrollView，添加约束。3. 拖拽一个View到ScrollView上， 然后添加上下左右四周约束。&4.添加完之后， 可能会报一个错， 如下图， 这个暂时别去管。 &5.&我们先确定一下， 我们是需要水平方向的滚动还是竖直方向的滚动，或者水平方向和竖直方向都需要滚动。a.水平方向和竖直方向都需要滚动的话， 不用添加b.水平方向滚动需要添加下面一个约束c.竖直方向需要添加下面一个约束6.我们以水平方向滚动为例， &我们需要确定我们想要的宽度， 添加一个固定的宽度的约束。7.如果是想要动态设置ScrollView的宽度，也就是设置View的宽度约束的值， 我们将其拉成属性， 然后修改其值。8. 如果是确定的宽度， 可以在- (void)updateViewConstraints这个方法中修改，也可以在别处修改。&这样子就OK了。 可以通过代码来添加view然后就可以实现分页滚动了。自动布局需要自己去多多实践， 有很多细节需要注意的。&&&&&&
阅读(10000)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_',
blogTitle:'Storyboard、xib中的UIScrollView使用autolayout，使其能够滚动',
blogAbstract:'在使用storyboard和xib时，我们经常要用到ScrollView，还有自动布局AutoLayout，但是ScrollView和AutoLayout 结合使用，相对来说有点复杂。根据实践，我说一下我的理解，在故事板或xib中，ScrollView是根据其下面的一个View的大小来确定ContentSize的大小。看一下效果1. 创建一个项目，拖拽一个ScrollView到故事板中，如下图&',
blogTag:'ios,autolayout,翻页,uiscrollview',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:3,
publishTime:6,
permalink:'blog/static/',
commentCount:1,
mainCommentCount:1,
recommendCount:1,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'',
hmcon:'0',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}APP如何设计才能适配iPhone6/Plus和iPhone5？
随着苹果发布两种新尺寸的大屏iPhone&6，iOS平台尺寸适配问题终于还是来了，移动设计全面进入“杂屏”时代。看看下面三款iPhone尺寸和分辨率数据就知道屏幕有多杂了。
移动app开发中多种设备尺寸适配问题，过去只属于Android阵营的头疼事儿，只是很多设计师选择性地忽视android适配问题，只出一套iOS平台设计稿。随着苹果发布两种新尺寸的大屏iPhone 6，iOS平台尺寸适配问题终于还是来了，移动设计全面进入&杂屏&时代。看看下面三款iPhone尺寸和分辨率数据就知道屏幕有多杂了。
加上Android生态中纷繁复杂的各种奇葩尺寸，现在APP设计开发必须考虑适配大、中、小三种屏幕。所以如何做到交付一套设计稿解决适配大中小三屏的问题？设计和开发之间采用什么协作模式？一个基本思路是：
1、选择一种尺寸作为设计和开发基准；
2、定义一套适配规则，自动适配剩下两种尺寸；
3、特殊适配效果给出设计效果。
手机淘宝的iPhone 6/iPhone 6 Plus适配版本即将提交App store审核。先晒一下我们采用的协作模式，再慢慢说明原委。
第一步，视觉设计阶段，设计师按宽度750px（iPhone 6）做设计稿，除图片外所有设计元素用矢量路径来做。设计定稿后在750px的设计稿上做标注，输出标注图。同时等比放大1.5倍生成宽度1125px的设计稿，在1125px的稿子里切图。
第二步，输出两个交付物给开发工程师：一个是程序用到的@3x切图资源，另一个是宽度750px的设计标注图。
第三步，开发工程师拿到750px标注图和@3x切图资源，完成iPhone 6（375pt）的界面开发。此阶段不能用固定宽度的方式开发界面，得用自动布局（auto layout），方便后续适配到其它尺寸。
第四步，适配调试阶段，基于iPhone 6的界面效果，分别向上向下调试iPhone 6 plus（414pt）和iPhone 5S及以下（320pt）的界面效果。由此完成大中小三屏适配。
为什么选择iPhone 6作为基准尺寸？
当面对大中小三种屏幕需要适配的时候，很容易想到先做好一种屏幕，再去适配剩下两种屏幕。第一个决定是到底以哪种屏幕作为设计和开发的基准尺寸。我们选择中间尺寸的iPhone 6（750px/375pt）作为基准，基于几个原因：
1、从中间尺寸向上和向下适配的时候界面调整的幅度最小。375pt下的设计效果适配到414pt和320pt偏差不会太大。假设以414pt为基准做出很优雅的设计，到320pt可能元素之间比例就不是那么回事了，比如图片和文字之间视觉比例可能失调。
2、iPhone 6 plus有两种显示模式，标准模式分辨率为，放大模式分辨率为（即iPhone 6的1.5倍）。可见官方系统里iPhone 6和iPhone 6 plus分辨率之间就存在1.5倍的倍率关系。很多情况下这两种尺寸可以用1.5倍直接等比适配。
3、这个奇葩的数值是苹果官方都不愿意公开宣传的一个分辨率，不便于记忆和计算栅格。640x1136虽然是广泛应用的一个分辨率，但是大屏时代依然以小尺寸为设计基准显然不合时宜，设计师会停留在小屏的视角做设计。
所以，iPhone6的750x1334是最适合基准尺寸。
只交付一套设计稿，默认用什么规则来适配？
前文提到适配策略是先选择iPhone 6作为基准设计尺寸，然后通过一套适配规则自动适配到另外两种尺寸。这套适配规则总结起来就一句话：文字流式，控件弹性，图片等比缩放。
赞助商链接:自动布局xib页面的机型匹配精典问题及解决方案
自动布局xib页面的机型匹配精典问题及解决方案
自动布局给我们带来了一次性解决不同的手机页面适配，它是否真的是一个一本万利的技术，是否存在难以攻克的难点吗？
任何技术有好处就有缺陷，下面给你介绍自动的机型匹配疑难问题。
1.iphone4S手机当用户登录app，跳到一个复杂的地图页面，再根据订单状态跳到结算页面，导致地图页面和结算页面杂乱或有的按钮点击无效。
分析：可能是iphone 4S的渲染处理能力太慢，导致使用xib的页面异常。
解决方案：不在viewWillAppear拦截跳转，而是根据订单状态直接跳转到结算页面。
2.iphone4S手机当用户登录app，跳到一个复杂的地图页面，再根据订单状态跳到结算页面，导致地图页面和结算页面导致结算页面的结算按钮点击无效。
分析：用xib时对结算按钮的约束时间不对。这个和上一个问题也有关。
3.iphone6手机，当用户登录app，跳到一个复杂的地图页面，再进入页面的同时发送了http请求最近的预约订单列表并且在地图页面上增加一个预约订单黄条。结果iphone5和iphone4正常，它却出现黄条加载不出来的情况。
分析：可能是iphone 6及更新的手机，网络处理远快于渲染处理器的处理xib页面的速度，导致http请求成功加载黄条时，地图页面还没有加载成功。
解决：方案延迟加载http需要增加的页面图层。
4.iphone 6手机，当用户登录app，跳到一个复杂的地图xib页面，当收到预约订单时需要增加一个预约订单黄条。结果有时间黄条加载不出来。
解决：方案当地图页面出来就把黄条添加上去，只是把它的位置放在屏幕区域外，当需要它显示时只需要改变它的frame。
5.Xib控件和代码实现的页面，在开关个人热点蓝条时，页面下压和恢复导致页面混乱的问题见文章（）。
我的热门文章
即使是一小步也想与你分享