iOS 10 下的全屏幕布局

  1. 什么叫做全屏幕布局: 就是在一个屏幕上的布局,不想tableView可以滚动,这个不可以滚动
  2. 如何布局: 为了适配iPhone不同型号的手机屏幕尺寸,需要用到以下关键技术
  • 按照比例布局
  • 合理的使用容器视图,按照功能模块,将一组控制进行分离
iOS 10 下的全屏幕布局_第1张图片
运动界面.png
  • 上半部分的绿色界面,和下面的白色界面
  • 上半部分相对于父控件view的约束设置为
iOS 10 下的全屏幕布局_第2张图片
等高.png
  • 乘数因子设置为
iOS 10 下的全屏幕布局_第3张图片
乘数因子.png
  • 如何设置xxx.top = 1.2 * centry
top约束.png

首先,选中垂直方向的约束线

iOS 10 下的全屏幕布局_第4张图片
xxx.png

然后

iOS 10 下的全屏幕布局_第5张图片
xxx.png

效果图

iOS 10 下的全屏幕布局_第6张图片
xxx.png

此时在设置第二个label

按住Control 将第2个Label拖到第一个Label上面

iOS 10 下的全屏幕布局_第7张图片
xxx.png
iOS 10 下的全屏幕布局_第8张图片
xxx.png
iOS 10 下的全屏幕布局_第9张图片
xxx.png

效果图

iOS 10 下的全屏幕布局_第10张图片
xxx.png

设置时长标签

iOS 10 下的全屏幕布局_第11张图片
xxx.png

水平方向的线,代表设置垂直约束,即Y约束
垂直方向的线,代表设置垂直约束,即X约束

如何设置按钮效果,如图所示
先添加一张图片,表示暂停,继续,然后将背景色backgroundColor设置为绿色

iOS 10 下的全屏幕布局_第12张图片
xxx.png

如何将暂停设置为原型
1.选中按钮
2.如图所示

iOS 10 下的全屏幕布局_第13张图片
xxx.png
iOS 10 下的全屏幕布局_第14张图片
xxx.png

为了保证像以前版本的兼容,需要勾选一个属性

  1. 首选选中按钮
    2.如图所示,勾选clip to bounds
iOS 10 下的全屏幕布局_第15张图片
xxx.png

将三个按钮向上挪动一些

  1. 将暂停按钮的垂直约束因子改为0.8,如图所示,先选中暂停按钮
iOS 10 下的全屏幕布局_第16张图片
xxx.png
iOS 10 下的全屏幕布局_第17张图片
xxx.png

更新约束
然后,选中暂停和结束按钮的垂直约束删除
按住ctr键拖到暂停按钮上面

iOS 10 下的全屏幕布局_第18张图片
xxx.png

更新约束,效果如下图所示

iOS 10 下的全屏幕布局_第19张图片
xxx.png

添加三个按钮
高度参考相机按钮的位置设置

iOS 10 下的全屏幕布局_第20张图片
xxx.png

什么叫做线性渐变
以一条线的方式,从上向下,改变颜色

渐变图层类

- (void)setupBackgroundLayer {
CAGradientLayer *layer = [CAGradientLayer layer];
//layer是通过bounds 和 position来指定位置的
[self.view.layer addSublayer:layer];
}

程序运行后,看不到到效果,因为没有设置图层的大小

  (lldb) po layer
  
  - (void)setupBackgroundLayer { //设置背景图层
CAGradientLayer *layer = [CAGradientLayer layer];
layer.bounds = self.view.bounds;
layer.position = self.view.center;
layer.backgroundColor = [UIColor redColor].CGColor;
//layer是通过bounds 和 position来指定位置的
//图层跟视图一样是有层次关系的,因此需要将他插入到最底层, 才能够显示view上面的控件
[self.view.layer insertSublayer:layer atIndex:0];
}

代理方法,谁向外提供输出,谁提供代理方法,因为输出源只有一个,而接受方可以有多个

你可能感兴趣的:(iOS 10 下的全屏幕布局)