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. docker命令汇总

    docker命令汇总 序号 类别 简述 命令 功能 说明 1 整体管理 安装 yum install docker-engine centos上安装docker Ubuntu上安装dockerapt- ...

  2. 运维面试题之linux基础

    吐槽: 某某命令是什么,某个配置文件的路径,呃....你难道不知道有--help和Tab这种东西吗? linux系统的启动过程是怎么样的? grub引导>加载内核>启动init进程依据in ...

  3. mybatisplus ssm配置要点

    本以为不难,但也捣鼓了大半天,记录要点如下: 在pom中引入mybatis plus相关包 <!-- mybatis-plus框架包 start --> <dependency> ...

  4. 来测试下你的Java编程能力

    上篇整理了下后面准备更系统化写的Java编程进阶的思路,如果仅看里面的词,很多同学会觉得都懂,但我真心觉得没有多少人是真懂的,所以简单的想了一些题目,感兴趣的同学们可以来做做看,看看自己的Java编程 ...

  5. PyAutoGUI——让所有GUI都自动化

    2015-08-17:输入中文bug没有解决,目前的解决方案是Python 2.X环境下安装pyperclip和pyautogui,用复制粘贴来实现. In [ ]: import pyperclip ...

  6. 北京大学Cousera学习笔记--1-学习规划

    1.计算机导论与C语言基础 1>.计算导论:计算机的基本原理.计算机的发展趋势.程序运行的基本原理 2>.C程序设计:感性认识C程序.理性认识C程序:机构化的程序-函数.更多的数据结构 2 ...

  7. fork()相关的源码解析

    fork()的真正执行采用的是do_fork()函数,所以下文将从do_fork()函数对fork()进行源码解析.下图是do_fork()的源码函数设计: 从上图我们可以看到do_fork()涉及到 ...

  8. mysql的执行过程

    1 总流程   https://www.cnblogs.com/annsshadow/p/5037667.html 2 优化器   https://www.cnblogs.com/olinux/p/5 ...

  9. SRD_PreloaderCore

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

  10. CentOS 7 扩大/root分区

    Linux 根目录爆满解决 亲测有效!转载自https://blog.csdn.net/e_wsq/article/details/79531493 CentOS 7 调整 home分区扩大 root ...