Wonderful——一个关于色彩的库

                            ⭐️⭐️⭐️ 

以下内容来源于官方源码、 README 文档、测试 Demo或个人使用总结 !

Wonderful




一个关于色彩的库
image
image

ChangeLog 1.2.1

1.2.1版本修复了:

有marquee或是headline组件的页面,后台回到前台偶现错乱的问题

有marquee或是headline组件的页面,�停留在当前页面,锁屏解锁偶现错乱的问题

允许marquee在运行中修改文字

Demo程序截图

建议使用iPhone6运行Demo程序


Drawing
Drawing

<br />


一、UIColor+Wonderful

1.这个分类里扩充了更多的颜色扩展,以后随手写个小Demo再也不需要redColor buleColor了。

self.view.backgroundColor = [UIColor khakiColor];
self.view.backgroundColor = [UIColor chocolateColor];

2.平均每个色系有10种颜色,不仅可以使用名称直接敲出,还能使用颜色阶梯的宏敲出,在你想不起词的时候更加方便。 宏从1~10是颜色渐深,可以根据自己的感觉使用浅一级的宏或深一级的宏。<br />

self.view.backgroundColor = Wonderful_YelloeColor4;
self.view.backgroundColor = Wonderful_BrownColor4;

<br />


Drawing
Drawing

Drawing
Drawing

<br />


二、UIColor+Separate

1.提供颜色分离方案,可以将任何颜色的rgb喝alpha的值取出。<br />

UIColor *testC = [UIColor salmonColor];
float r= [testC red];
float g= [testC green];
float b= [testC blue];
float alpha= [testC alpha];
NSLog(@"******  %f,%f,%f,%f",r,g,b,alpha);

2.可以通过一个颜色算出此颜色的反色,使得背景无论被用户设置成什么色,文字颜色都是背景的反色。<br />

self.showLbl1.backgroundColor = [UIColor peachRed];
self.showLbl1.textColor = [[UIColor peachRed]reverseColor];

3.也可以直接打印这个颜色的各项详细数值。<br />

[[UIColor salmonColor]printDetail];
// 打印结果
This Color's Red:250, Green:128, Blue:114, Alpha:1
decimal red:0.9804 green:0.5020 blue:0.4471
Hexadecimal 0xfa8072

4.提供了颜色微调方案,可以让一个已知颜色的rgb的某值上升或下降若干,可用于不管背景是什么色,边框都比背景深20。 也可以将认可颜色的详细值打印出来。<br />

UIColor *navColor = [[UIColor redColor]up:SXColorTypeBlue num:30]; // 在红色上把蓝色色值提高30
UIColor *barColor = [[UIColor blueColor]up:1 num:140]; // 可以直接用枚举对应的tag
UIColor *bgColor = [[UIColor blackColor]down:SXColorTypeAlpha num:10]; // 取一个比黑色稍微淡的颜色
UIColor *lineColor = [bgColor up:3 num:20]; // 不管背景是什么颜色 线都比背景浅20.
image
image

<br />


三、SXColorGradientView

1.颜色渐变的view,可以设置任何颜色到透明的过渡。<br />

SXColorGradientView *grv1 = [SXColorGradientView createWithColor:[UIColor paleGreen] frame:CGRectMake(10, 10, 80, 30) visible:YES direction:SXColorGradientToRight];

2.也可以设置两个颜色相互过渡。<br />

SXColorGradientView *grv3 = [SXColorGradientView createWithFromColor:[UIColor peruColor] toColor:[UIColor ghostWhite] frame:CGRectMake(10, 50, 80, 30) direction:SXColorGradientToRight];

3.可以设置向上下左右四个过渡的方向。<br />

typedef NS_ENUM(NSInteger, SXColorGradientDirection) {
    SXColorGradientToTop = 1,
    SXColorGradientToLeft = 2,
    SXColorGradientToBottom = 3,
    SXColorGradientToRight = 4,
};

4.支持增加传入一个数组,然后搭建一个多个颜色过渡的view。<br />


Drawing
Drawing

<br />


四、SXMarquee

1.实现任何样式的跑马灯。<br />
跑马灯方法:

- (instancetype)initWithFrame:(CGRect)frame
                        speed:(SXMarqueeSpeedLevel)speed
                          Msg:(NSString *)msg
                      bgColor:(UIColor *)bgColor
                     txtColor:(UIColor *)txtColor;

// 点击动作,默认点击停止
- (void)changeTapMarqueeAction:(void(^)())action;

// 改变字体大小
- (void)changeMarqueeLabelFont:(UIFont *)font;

- (void)start;

- (void)stop;

- (void)restart;

Demo:

SXMarquee *mar = [[SXMarquee alloc] initWithFrame:CGRectMake(20, 255, 335, 35)
                                            speed:4
                                              Msg:@"重大活动,天猫的双十一,然而并没卵用"
                                          bgColor:[UIColor salmonColor]
                                         txtColor:[UIColor whiteColor]];
// 默认字体:[UIFont fontWithName:@"HelveticaNeue" size:14.0f]
[mar changeMarqueeLabelFont:[UIFont systemFontOfSize:26]];
// 添加点击事件,源码实现方式:在该视图上添加了一个按钮
[mar changeTapMarqueeAction:^{
    UIAlertView *alert = [[UIAlertView alloc]initWithTitle:@"点击事件" message:@"可以设置弹窗,当然也能设置别的" delegate:self cancelButtonTitle:@"取消" otherButtonTitles:@"确定", nil];
    [alert show];
}];
[mar start];

2.跑马灯的背景可以设置任何颜色,这个是基于颜色过渡view做的。<br />

3.跑马灯可以实现点击拖动,或者绑定更多点击事件。<br />

📌 源码解析
/*
 // Label 的宽度是根据字符串长度计算而来
 UIFont *fnt = [UIFont fontWithName:@"HelveticaNeue" size:14.0f];
 CGSize msgSize = [_marqueeLbl.text sizeWithAttributes:@{NSFontAttributeName:fnt}];
 */

#pragma mark - 核心动画
- (void)moveAction {
    // 以 Label 的中心点运动
    // 贝塞尔曲线 起点
    CGPoint fromPoint = CGPointMake(self.frame.size.width + self.marqueeLbl.frame.size.width/2, self.frame.size.height/2);
    // 贝塞尔曲线 终点
    CGPoint toPoint = CGPointMake(-self.marqueeLbl.frame.size.width/2, self.frame.size.height/2);
    
    self.marqueeLbl.center = fromPoint;
    UIBezierPath *movePath = [UIBezierPath bezierPath];
    [movePath moveToPoint:fromPoint];
    [movePath addLineToPoint:toPoint];
    
    // 创建动画实例
    CAKeyframeAnimation *moveAnim = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    // 设置动画路径
    moveAnim.path = movePath.CGPath;
    // 完成后移除
    moveAnim.removedOnCompletion = YES;
    // 设置延迟
    moveAnim.duration = self.marqueeLbl.frame.size.width * self.speedLevel * 0.01;
    // 委托协议,动画完成后重复该动画
    moveAnim.delegate = self;
    // 在图层上添加动画
    [self.marqueeLbl.layer addAnimation:moveAnim forKey:nil];
}

#pragma mark - CAAnimationDelegate

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
    if (flag) {
        [self moveAction];
    }
}
SXHeadLine

方法:

- (void)setBgColor:(UIColor *)bgColor
         textColor:(UIColor *)textColor
          textFont:(UIFont *)textFont;

// 设置时间间隔
- (void)setScrollDuration:(NSTimeInterval)scrollDuration
             stayDuration:(NSTimeInterval)stayDuration;

// 改变点击动作,默认点击停止
- (void)changeTapMarqueeAction:(actionBlock)action;

- (void)start;

- (void)stop;

Demo:

SXHeadLine *headLine3 = [[SXHeadLine alloc]initWithFrame:CGRectMake(100, 530, 250, 30)];
headLine3.messageArray = @[@"1、库里43分,勇士吊打骑士",@"2、伦纳德死亡缠绕詹姆斯,马刺大胜骑士",@"3、乐福致命失误,骑士惨遭5连败",@"4、五小阵容发威,雄鹿吊打骑士", @"5、天猫的双十一,然而并没卵用"];
[headLine3 setBgColor:[UIColor whiteColor] textColor:[UIColor orangeRed] textFont:[UIFont systemFontOfSize:13]];
[headLine3 setScrollDuration:0.5 stayDuration:3];
headLine3.hasGradient = YES;

[headLine3 changeTapMarqueeAction:^(NSInteger index) {
    
    NSLog(@"你点击了第 %ld 个button!内容:%@", index, headLine3.messageArray[index]);
    
}];
[headLine3 start];
image
image

<br />

五、SXColorLabel

1.把text里重要的内容用特殊符号包起来,就会特殊显示<br />

2.如果用<>包起来,就会显示高亮颜色。如果用[]包起来,就会显示高亮的字体。

lbl.text = @"例1:今天要记得通知<Peter>和<Robin>去开会。";
lbl2.text = @"例2:礼物很有[粪]量,你会大吃一[斤]!";

3.这个高亮颜色和高亮字体可以自行设置。

// 高亮颜色
[SXColorLabel setAnotherColor:[UIColor salmonColor]];
// 高亮字体大小
[SXColorLabel setAnotherFont:[UIFont boldSystemFontOfSize:18]];

4.两者也可以混合使用。 高亮的字体里有高亮颜色。

lbl3.text = @"例3:一定要:[通知<Peter>和<Robin>去开会]";

完整方法:

SXColorLabel *sxlbl3 = [[SXColorLabel alloc]initWithFrame:CGRectMake(40, 200, 350, 30)];
sxlbl3.anotherColor = [UIColor salmonColor];
sxlbl3.anotherFont = [UIFont systemFontOfSize:14];
sxlbl3.text = @"一定要:[通知<Peter>和<Robin>去开会]";
[self.bodyView addSubview:sxlbl3];
Drawing
Drawing

<br />

📌 源码解析

在同一个 Label 中设置不同字体颜色的方法参考如下,源码中只是在字符串中放了标记符号<>、[]、遍历删除这些标记符号的同时将他们的范围、长度记录下来设置不同的字体和颜色。

- (UILabel *)titleLabel {
    if (!_titleLabel) {
        _titleLabel = [[UILabel alloc] initWithFrame:CGRectMake((MaxX(self.imageView)+10), MinY(self.imageView), 245, 40)];
        _titleLabel.numberOfLines = 2;
        _titleLabel.lineBreakMode = NSLineBreakByWordWrapping;
        _titleLabel.font = [UIFont systemFontOfSize:16];
        
        NSString *strPrice = [NSString stringWithFormat:@"%d元 - %d元", (int)self.data.minPrice, (int)self.data.maxPrice];
        NSString *strTitle = self.data.title;
        NSMutableAttributedString *string = [[NSMutableAttributedString alloc] initWithString:[NSString stringWithFormat:@"%@ %@", strTitle, strPrice]];
        [string setAttributes:@{NSForegroundColorAttributeName: COLOR_RGB(34, 34, 39)} range:NSMakeRange(0, strTitle.length)];
        [string setAttributes:@{NSForegroundColorAttributeName: COLOR_RGB(255, 77, 100)} range:NSMakeRange((strTitle.length+1), strPrice.length)];
        _titleLabel.attributedText = string;
    }

    return _titleLabel;
}

旧版demo<br />
颜色列表<br />

image
image

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,830评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,992评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,875评论 0 331
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,837评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,734评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,091评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,550评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,217评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,368评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,298评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,350评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,027评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,623评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,706评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,940评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,349评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,936评论 2 341

推荐阅读更多精彩内容