原生去开发一个这样的拍照页面，该怎么做？
设计图
其实竖屏看是这样：
竖屏效果
屡一下开发思路：
- 首先看到状态栏是在横屏的左侧，其实就是竖屏的上方，也就是说这个页面其实还是竖屏。
- 该页不能左滑退出。
- 因为是竖屏，所以以上UI控件，除了取景器，其余的都是旋转90°，取景器不旋转，拍完照后期处理图片进行旋转裁剪等操作，只显示框内可见的一部分。
- 看似取景框是居中的，取景框是两个分别带人像和国徽的有四边框的图片，在拍正反面进来的时候显示不同的图片，然后在上面加一个同样大小的UIImageView，来显示拍好的照片，拍好了之后就显示出来，第一次进来或者重拍的时候就隐藏掉。
- 标题和取景框居中对齐，拍照要求按钮和取景框右对齐，这个做法是使用一个UIView包裹标题和按钮两个控件，然后标题居中对齐，按钮靠右对齐，然后UIView的宽度跟取景框的长边是等长就OK了,因为要需要旋转90°，所以开始的时候要计算好对应的位置。
- 取景框要有宽高比在view中计算填充，因为有比例，所以就必须先知道宽或者高一个，来计算另一个，那么就有两种选择：
①固定 标题位置对应的两边，留出固定的高度，来显示标题、拍摄要求按钮，这样的话，高度（其实是竖屏的宽度，为了更好直观理解，我们就以眼睛看到的来标识，下文都是以横屏视角来说宽高）是确定了，用比例来计算宽度，由于取景框又是居中的，所以在大屏幕上可能会出现，宽度太宽，右边边距太小，把拍照按钮给遮挡住了（拍照按钮位置相对于手机底部固定的），所以这种思路不可取
固定上下间距，并相等
②固定 拍照按钮对应的两侧距离，同理那取镜框高度就会自适应高度，那么我们上面如果固定死1的高度那么2的间距就会动态变化，如果固定2的高度1的高度就会动态改变！
固定左右间距
1固定死2动态的思路
效果图
这里是固定1的高度，然后2自适应，会导致标题跟取景框很近，在小屏幕上又很远，虽然不会有遮挡的情况，比第①种思路会好一点，但是还是差强人意！
然后打破前面的思维，取景框不居中
如图
这种写法会出现一种情况，虽然保证了标题与取景框的距离，也保证了右边按钮的安全距离，同时还是宽高比计算，但是在屏幕相对越长的机型上，左边留出的距离就越宽，机型越小屏幕越短，左边的留边就越小，效果如下图
苹果5上的效果，巨丑无比
所以就要想办法去控制这个宽度
- 可以先按照原来的方法计算取景框高度，进而通过比例算出宽度，如果这个宽度大于屏幕高度的70%时，就设置取景框宽度为屏幕高度的70%，然后再返回来计算取景框高度，算出取景框高度，然后我们就可以按照上面的分割比例再次计算出取景框的frame去设置。
- 除了去比较70%，还可以跟那个返回箭头对齐的标准去设置取景框的宽度，因为返回箭头是固定死的，当算出的取景框origin的y值小于箭头origin的y值时，就把取景框origin的y值设置成箭头origin的y值，然后再返回来计算取景框高度，算出取景框高度，然后我们就可以按照上面的分割比例再次计算出取景框的frame去设置。
这两个在大屏上是没有区别的，区别就是在小屏上，比如下面的是6s上的效果对比图
上面是不作处理的，中间是屏高70%限制，下面是与箭头对齐限制
最终还是使用与箭头对齐的思路
在大屏上的效果
小屏上效果
网友评论