1.h

#import <UIKit/UIKit.h>

@interface UIView (Gradient)

/* The array of CGColorRef objects defining the color of each gradient

* stop. Defaults to nil. Animatable. */

@property(nullable, copy) NSArray *colors;

/* An optional array of NSNumber objects defining the location of each

* gradient stop as a value in the range [0,1]. The values must be

* monotonically increasing. If a nil array is given, the stops are

* assumed to spread uniformly across the [0,1] range. When rendered,

* the colors are mapped to the output colorspace before being

* interpolated. Defaults to nil. Animatable. */

@property(nullable, copy) NSArray<NSNumber *> *locations;

/* The start and end points of the gradient when drawn into the layer's

* coordinate space. The start point corresponds to the first gradient

* stop, the end point to the last gradient stop. Both points are

* defined in a unit coordinate space that is then mapped to the

* layer's bounds rectangle when drawn. (I.e. [0,0] is the bottom-left

* corner of the layer, [1,1] is the top-right corner.) The default values

* are [.5,0] and [.5,1] respectively. Both are animatable. */

@property CGPoint startPoint;

@property CGPoint endPoint;

+ (UIView *_Nullable)gradientViewWithColors:(NSArray<UIColor *> *_Nullable)colors locations:(NSArray<NSNumber *> *_Nullable)locations startPoint:(CGPoint)startPoint endPoint:(CGPoint)endPoint;

- (void)setGradientBackgroundWithColors:(NSArray<UIColor *> *_Nullable)colors locations:(NSArray<NSNumber *> *_Nullable)locations startPoint:(CGPoint)startPoint endPoint:(CGPoint)endPoint;

@end

2.m

#import "UIView+Gradient.h"

#import <objc/runtime.h>

@implementation UIView (Gradient)

+ (Class)layerClass {

return [CAGradientLayer class];

}

+ (UIView *)gradientViewWithColors:(NSArray<UIColor *> *)colors locations:(NSArray<NSNumber *> *)locations startPoint:(CGPoint)startPoint endPoint:(CGPoint)endPoint {

UIView *view = [[self alloc] init];

[view setGradientBackgroundWithColors:colors locations:locations startPoint:startPoint endPoint:endPoint];

return view;

}

- (void)setGradientBackgroundWithColors:(NSArray<UIColor *> *)colors locations:(NSArray<NSNumber *> *)locations startPoint:(CGPoint)startPoint endPoint:(CGPoint)endPoint {

NSMutableArray *colorsM = [NSMutableArray array];

for (UIColor *color in colors) {

[colorsM addObject:(__bridge id)color.CGColor];

}

self.colors = [colorsM copy];

self.locations = locations;

self.startPoint = startPoint;

self.endPoint = endPoint;

}

#pragma mark- Getter&Setter

- (NSArray *)colors {

return objc_getAssociatedObject(self, _cmd);

}

- (void)setColors:(NSArray *)colors {

objc_setAssociatedObject(self, @selector(colors), colors, OBJC_ASSOCIATION_COPY_NONATOMIC);

if ([self.layer isKindOfClass:[CAGradientLayer class]]) {

[((CAGradientLayer *)self.layer) setColors:self.colors];

}

}

- (NSArray<NSNumber *> *)locations {

return objc_getAssociatedObject(self, _cmd);

}

- (void)setLocations:(NSArray<NSNumber *> *)locations {

objc_setAssociatedObject(self, @selector(locations), locations, OBJC_ASSOCIATION_COPY_NONATOMIC);

if ([self.layer isKindOfClass:[CAGradientLayer class]]) {

[((CAGradientLayer *)self.layer) setLocations:self.locations];

}

}

- (CGPoint)startPoint {

return [objc_getAssociatedObject(self, _cmd) CGPointValue];

}

- (void)setStartPoint:(CGPoint)startPoint {

objc_setAssociatedObject(self, @selector(startPoint), [NSValue valueWithCGPoint:startPoint], OBJC_ASSOCIATION_RETAIN_NONATOMIC);

if ([self.layer isKindOfClass:[CAGradientLayer class]]) {

[((CAGradientLayer *)self.layer) setStartPoint:self.startPoint];

}

}

- (CGPoint)endPoint {

return [objc_getAssociatedObject(self, _cmd) CGPointValue];

}

- (void)setEndPoint:(CGPoint)endPoint {

objc_setAssociatedObject(self, @selector(endPoint), [NSValue valueWithCGPoint:endPoint], OBJC_ASSOCIATION_RETAIN_NONATOMIC);

if ([self.layer isKindOfClass:[CAGradientLayer class]]) {

[((CAGradientLayer *)self.layer) setEndPoint:self.endPoint];

}

}

3.调用

- (void)gradientTest {

self.view.backgroundColor = [UIColor whiteColor];

UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 80, 200, 30)];

UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake(0, 120, 200, 30)];

UIView *tempView = [[UIView alloc] initWithFrame:CGRectMake(0, 160, 200, 30)];

UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 200, 200, 30)];

[self.view addSubview:label];

[self.view addSubview:btn];

[self.view addSubview:tempView];

[self.view addSubview:imageView];

label.backgroundColor = [UIColor clearColor];

btn.backgroundColor = [UIColor blueColor];

tempView.backgroundColor = [UIColor blueColor];

imageView.backgroundColor = [UIColor blueColor];

[label setGradientBackgroundWithColors:@[[UIColor redColor],[UIColor orangeColor]] locations:nil startPoint:CGPointMake(0, 0) endPoint:CGPointMake(1, 0)];

[btn setGradientBackgroundWithColors:@[[UIColor redColor],[UIColor orangeColor]] locations:nil startPoint:CGPointMake(0, 0) endPoint:CGPointMake(1, 0)];

[tempView setGradientBackgroundWithColors:@[[UIColor redColor],[UIColor orangeColor]] locations:nil startPoint:CGPointMake(0, 0) endPoint:CGPointMake(1, 0)];

[imageView setGradientBackgroundWithColors:@[[UIColor redColor],[UIColor orangeColor]] locations:nil startPoint:CGPointMake(0, 0) endPoint:CGPointMake(1, 0)];

label.text = @"Text";

label.textAlignment = NSTextAlignmentCenter;

[btn setTitle:@"Button" forState:UIControlStateNormal];

}

@end

@implementation UILabel (Gradient)

+ (Class)layerClass {

return [CAGradientLayer class];

}

@end

原链接为:https://www.jianshu.com/p/e7c9e94e165b

在网上找的代码,如有侵权,请联系本人,谢谢

渐变UI的更多相关文章

  1. photoshop基础教程视频-贺叶铭-传智播客-笔记

    界面构成 1.菜单栏 2.工具箱 3.工具属性栏 4.悬浮面板 5.画布 ctrl+n 新建对话框 (新建画布) 画布200*200大小,是指以毫米为单位,当不说单位,默认是毫米. 打开对话框:ctr ...

  2. UI设计趋势:渐变设计风格重新回归主流

    在扁平化设计刚刚兴起之时,渐变是设计师们避之不及的设计手法,然而今天它已经正式回归.几乎是在一夜之间,无数的网站开始使用渐变色. 从背景到图片上的色彩叠加,包括UI元素上所遮盖的色彩,所有的这一切都表 ...

  3. jQuery ui背景色动态渐变导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. UI 设计中的渐变

    简评: 渐变是通过两种或多种不同的色彩来绘制一个元素,同时在颜色的交界处进行衰减变化的一种设计.从拟物到扁平再到渐变,人们慢慢发现它能创造出从未有过的一种色彩感觉 -- 独特.现代和清爽.(本文译者@ ...

  5. (UWP)通过编写算法实现在地图中的渐变路径

    目前的一个App中需要实现这个需求,但是在UWP自带的Bing Map中,绘制的MapPolyline的StrokeColor的类型是Windows.UI.Color,也就是说一条MapPolylin ...

  6. iOS 2D绘图 (Quartz2D)之阴影和渐变(shadow,Gradient)

    原博地址:http://blog.csdn.net/hello_hwc/article/details/49507881 Shadow Shadow(阴影) 的目的是为了使UI更有立体感,如图 sha ...

  7. iOS开发UI篇—CAlayer层的属性

    iOS开发UI篇—CAlayer层的属性 一.position和anchorPoint 1.简单介绍 CALayer有2个非常重要的属性:position和anchorPoint @property ...

  8. 浅谈UI设计中妙用无穷的深色系背景

    英文:medium 译者:优设网 - 陈子木 链接:http://www.uisdc.com/ui-benefits-of-dark-background# --------------------- ...

  9. css3实现颜色渐变以及兼容性处理

    有时我们会看到网站上的一些图片是渐变色的,这些图片有的是ui设计出来的,有的则是直接通过css3制作出来的.下面就讲一下css3实现渐变色的方法,以及在各个浏览器上的兼容性. CSS3 Gradien ...

随机推荐

  1. MyBatis框架基于XML的配置

    什么是MyBatis? 答:它是一个持久层框架 说的太简单了吗?那让我们来看一下官方的文档描述: MyBatis有什么作用呢? 1.持久层的零实现 2.可以自动将数据封装到对象里面不需要手工编写映射的 ...

  2. table添加正确的样式

    以前在做表格的时候,会在表格<table>标签中添加一些属性,来改变表格的样式,经常用到的有这几个 width 表格的宽度border 表格边框的宽度cellpadding  单元边沿与其 ...

  3. 谷歌将一些弱小的库从安卓代码移除Google Removes Vulnerable Library from Android

    Google this week released the November 2018 set of security patches for its Android platform, which ...

  4. mysql-5.7.25 源码 安装

    mysql-5.7.25 源码 安装 编译 export INSTALL_PREFIX="/data/services" export MYSQL_INSTALL_PATH=&qu ...

  5. 使用Ajax错误的全页面刷新问题

    给提交按钮写了ajax请求,结果每次提交就将全业务刷新了.一大番折腾才知道是 提交按钮标签使用不当导致.   button 标签请添加 type='button' 属性,因为浏览器默认会认为 butt ...

  6. Cache Aside Pattern

    Cache Aside Pattern 即旁路缓存是缓存方案的经验实践,这个实践又分读实践,写实践 对于读请求 先读cache,再读db 如果,cache hit,则直接返回数据 如果,cache m ...

  7. CDI services--interceptors(拦截器)

    1.拦截器综述 拦截器的功能是定义在Java拦截器规范. 拦截器规范定义了三种拦截点: 业务方法拦截, 生命周期回调侦听, 超时拦截(EJB)方法. 在容器的生命周期中进行拦截 1 2 3 4 pub ...

  8. #WEB安全基础 : HTTP协议 | 0x10 请求和响应报文重点结构及常见头部

    你需要认识一些常见的头部以及了解报文的详细结构 请求报文的请求行 GET/HTTP/1.1 响应报文的响应行 HTTP/1.1 200 OK 想必这些大家都知道了 请求 我访问一个页面 Host // ...

  9. SRD_PreloaderCore

    预加载 Preloader CoreVersion 1.10SumRndmDde This plugin requires the Game Upgrade plugin:http://sumrndm ...

  10. Typora/VSCode/Sublime 更改Markdown默认宽度样式等

    Typora 所见即所得Markdown编辑器更改 最大宽度 C:\Users\Desk\AppData\Roaming\Typora\themes\github.css CSS第46行改为 max- ...