小编心血来潮，注册了简书账号，特意来分享一下做UI的心得。
各位客官请随意点评。。。。。
为了方便各位客官，小编创建了一个新的project。
1. 打开storyboard后，请客官看底下红色尖头指向的 wAny hAny
＊＊ wAny hAny 中各部分的意思为 w：width（宽），h：height（高），Any 指任何device中有效。
当点击wAny hAny时，一个正方形的可选框就会弹出来。当鼠标移动时，相对应的方格就会被浅蓝色覆盖。相对应地，方格下方有一行文字Base values／Final values。Base values是后备选择，当对应的device的Final value没有被选择时，Base value就会被替补上去；当然，如果Final values已被选择了，device对应的竖屏／横屏就被Final value锁定。
示例如下：（一下所有都是Final values，一一对应不同尺寸的iPhone和iPad）
wCompact hRegular：w（宽）设置为“窄”，h（高）设置为“正常”，是所有iPhone竖屏的尺码。
wCompact hCompact：w（宽）设置为“窄”，h（高）设置为“窄”，是所有小屏iPhone（3.5'', 4.0''. 4.7'')横屏尺码，针对iPhone 4s、5、5s、6、6s而设计。
wRegular hCompact: w（宽）设置为“正常”，h（高）设置为“窄”，是大屏iPhone（5.5'')横屏尺码，针对6plus和6s plus而设计。
wRegular hRegular：w（宽）设置为“正常”，h（高）设置为“正常”，是iPad的竖屏和横屏的尺码。
2. 小编现在做一个iPhone APP，里面有一张图片和一个label，而且竖屏的时候都排成一列，但是横屏的时候排成一行。
展示如下：
方法一：
首先选择wCompact hRegular（针对所有iPhone竖屏），在右下方找出image view并且拖到view controller里，调整image view的大小和位置。
然后选择图片，小编就用小编男票的卡通自画像了，嘿嘿
好了，在下一步前，先在6s中运行一下看看有什么东西出现
Bingo，iPhone竖屏中男票出现了；横屏中男票没有出现是因为上面所有的步骤都只是针对iPhone竖屏而设计的，iPhone横屏和iPad横竖屏里面什么都没有的，各客官可以运行确定一下。
好了，现在把按钮和label都设置一下，然后运行app。iPhone竖屏就好了，横屏和iPad依然还是什么都没有。
现在选择wCompact hCompact（针对4s，5，5s，6，6s横屏），和以上步骤一样添加图片和label，并且设置各自位置。
6plus横屏、6s plus横屏 和iPad的横竖屏的设置都一样，主要在底下size class那里选好了就可以随意设计控件的位置和大小了，这里略过不讲，各位客官请各自尝试。
方法二：
在选择wAny hAny后，添加image view和label，不添加constrain。（在wAny hAny里添加的好处就是所有classes里都有了，我们只需要在不同size class里调整constrain。）
现在先设置在iPhone竖屏的constrain。选择底下的wCompact hRegular，添加控件的constrains设置image view和label的大小位置。
选择每项constrain，添加wCompact hRegular的constrain设定。到这里为止，iPhone竖屏已经完成。
然后设置在iPhone横屏的constrain。类似地，选择wCompact hCompact（针对4s，5，5s，6，6s横屏，＊6plus 和6s plus的横屏要在wRegular hCompact里设置＊），添加控件的constrains设置image view和label的大小位置。
选择每项constrain，添加wCompact hCompact的constrain设定。到这里为止，iPhone横屏也完成。
运行一下：竖屏 VS 横屏
网友评论