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

全屏布局

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

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

等高

乘数因子设置为

乘数因子
  • 如何设置xxx.top = 1.2 * centry
top约束

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

选中约束线

然后

修改因子

效果图

xxx

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

实现方式

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

先设置两个按钮

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

设置圆形
效果

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

Clip To Bounds

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

更改垂直约束因子
更改垂直约束因子

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


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


按钮重合

设置渐变图层

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

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

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

(lldb)
 po layer
 <CAGradientLayer:0x600000227980; position = CGPoint (0 0); bounds = CGRect (0 0; 0 0); allowsGroupOpacity = YES; >
- (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];
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容