iOS10下的全屏布局及渐变图层

全屏布局

  1. 什么叫做全屏幕布局: 就是在一个屏幕上的布局,不想tableView可以滚动,这个不可以滚动
  2. 如何布局: 为了适配iPhone不同型号的手机屏幕尺寸,需要用到以下关键技术
  • 按照比例布局
  • 合理的使用容器视图,按照功能模块,将一组控制进行分离
iOS10下的全屏布局及渐变图层_第1张图片
上半部分的绿色界面,和下面的白色界面

上半部分相对于父控件view的约束设置为

iOS10下的全屏布局及渐变图层_第2张图片
等高

乘数因子设置为

iOS10下的全屏布局及渐变图层_第3张图片
乘数因子
  • 如何设置xxx.top = 1.2 * centry
top约束

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

iOS10下的全屏布局及渐变图层_第4张图片
选中约束线

然后

iOS10下的全屏布局及渐变图层_第5张图片
修改因子

效果图

iOS10下的全屏布局及渐变图层_第6张图片
xxx

在下面的视图中设置按钮效果,将其设置为圆形,点击有动画并且出来两个按钮

实现方式

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

iOS10下的全屏布局及渐变图层_第7张图片
先设置两个按钮

将暂停设置为圆形1.选中按钮2.如图所示

iOS10下的全屏布局及渐变图层_第8张图片
设置圆形
iOS10下的全屏布局及渐变图层_第9张图片
效果

为了保证像以前版本的兼容,需要勾选一个属性
首选选中按钮2.如图所示,勾选clip to bounds

iOS10下的全屏布局及渐变图层_第10张图片
Clip To Bounds

将三个按钮向上挪动一些
将暂停按钮的垂直约束因子改为0.8,如图所示,先选中暂停按钮

iOS10下的全屏布局及渐变图层_第11张图片
更改垂直约束因子
iOS10下的全屏布局及渐变图层_第12张图片
更改垂直约束因子

更新约束然后,选中暂停和结束按钮的垂直约束删除按住ctrl键拖到暂停按钮上面,准备让暂停和继续按钮重合

iOS10下的全屏布局及渐变图层_第13张图片

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


iOS10下的全屏布局及渐变图层_第14张图片
按钮重合

设置渐变图层

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

- (void)setupBackgroundLayer {
        CAGradientLayer *layer = [CAGradientLayer layer];
        [self.view.layer addSublayer:layer];
}

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

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

你可能感兴趣的:(iOS10下的全屏布局及渐变图层)