iOS 渐变色navigationbar 一个类扩展方法解决渐变色背景

最近渐变色的UI设计越来越多的被采用,所以玩一下记录一下。

效果

这里使用的是CAGradientLayer(梯度渐变图层)

参数介绍

1.startPoint  和 endPoint 

颜色开始渐变的位置和渐变结束的位置,用来控制颜色渐变的方向.方向是由起始坐标指向结束坐标

例如:_gradientLayer.startPoint=CGPointMake(1,0);

        _gradientLayer.endPoint=CGPointMake(0,1); 

         就是右上角指向左下角

2.frame    用来设置渐变图层的大小

3.colors   类型是数组,用来设置渐变的颜色组,CGColor类型

4.locations 数组,可为空,传NSnumber类型的数字 0 ~ 1,用来控制颜色占比

设置分类方法(Category)

因为控件都是UIView子类,为了方便以后调用,所以我们选择UIView分类方法


设置导航栏navigationBar

思路:新建一个Contoller继承UINavigationController ,在这个新建的controller里做设置,对navigationbar调用刚刚写的类扩展方法就设置完成了,而且还可以方便使用。

在实现过程中,遇到了一个问题,只对navigationbar设置的话,状态栏不会跟着导航栏变色。场面一度尴尬

解决方案:添加一个View在navigationbar上,该View的高度为导航栏+状态栏高度,用来盖住状态栏的背景。

代码如下


2017年7月25 问题优化

问题:使用以上代码会出现barBackgroundView 盖住navigationBar上的title和item的情况

解决:新增UIView转UIImage方法


1.通过该方法把barBackgroundView转成图片

2.[self.navigationBar setBackgroundImage:(nullable UIImage *) forBarMetrics:(UIBarMetrics)]设置背景图片可解决被盖住的问题

Demo下载地址https://github.com/ForeverWater/WYGColorChange.git

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 说明: 已将折线图封装到了一个UIView子类中,并提供了相应的接口。若你遇到相应的需求可以直接将文件拖到项目中,...
    AHLQ阅读 7,543评论 5 47
  • 文/鸿运 曲径小院,芳草绿遍,倚楼高台树荫见。 细雨绵绵,浸润人面,朦胧山外升紫烟。 秋渐深,鬓霜现,一场幽梦三千...
    HONGYUNDANGTOU阅读 280评论 8 15
  • 一首陈奕迅的《你的背包》,将我的思绪拉到从前。 “那个背包载满纪念品和患难 还有摩擦留下的图案 它是我肩膀上的指环...
    菱然阅读 540评论 0 0
  • 遥知兄弟登高处,遍插茱萸少一人。 又是一年重阳节,祝大家节日快乐! 今天西安举行了国际马拉松比赛,外面都是为他们加...
    晚街听风_65d3阅读 79评论 0 1