css style、css color 转 UIColor

2023-11-10 06:20
文章标签 css frontend style color uicolor

本文主要是介绍css style、css color 转 UIColor，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

        你能看过来，就说明这个问题很好玩！IT开发是一个兴趣，更是一个挑战！兴趣使你工作有热情。挑战使让你工作充满刺激拉满的状态！我们日复一日年复一年的去撸代码，那些普普通通的功能代码，已经厌倦了！要的就是这种充满挑战最终攻克而带来快感！这种快感比那种快感让人感觉更得劲。。错了，可能是我老了吧~

        因为业务开发需求，同样的功能三端(WEB、安卓 、iOS)，而web端将数据封装成H5对应的标签方式，需要APP端来解析，将其文本提取出来倒没有什么技术难度，但核心问题是要取出相应的样式表渲染成正确的UI，这才是最困难的！

 如<b><span style="color:orange,font-size:15px;">重要告警</span></b>

 要把它显示成如下的原生页面，怎么办呢？来分析一下这些标签的作用：

<b></b>意思是将里面的文本加粗显示<span>标签普通的文本显示，但是文本的更多属性是在span的内联样式表中存放，我们要取出来颜色，字体大小来渲染为iOS的UILabel,通过setColor,setTextFont等API设置其显示样式！

我得到的原始数据为：


<b><a style="color:orange">【重要告警】</a></b>
<b>事件名称：</b>CCE-CPU监控;
<b>发生时间：</b>2023-11-08 09:48:00 GMT+08:00;
<b>事件源：</b>AOM;
<b>资源类型：</b>Application;
<b>指标名称：</b>aom_container_cpu_usage;
<b>最新指标值:  </b>45.95425;
<b>命名空间：</b>third-party;
<b>容器名称：</b>z-canal-test;
<b>告警信息：</b><br />阈值规则 CCE-CPU监控 状态从 “超限阈值” 变为 “正常” 。状态变化详细信息：指标名称为“aom_container_cpu_usage”，最新指标数据取值“45.954”，不满足阈值条件“>90”。;
<b>修复建议：</b>建议进入容器  z-canal-test查看资源使用情况;

最终实现的显示效果为：

 

下面业结合开源的三方库来实现此功能的显示，第三方库：TFHpple 


#if __has_include("TFHpple.h")
#import "TFHpple.h"
#endif@interface CSSStyleMap : NSObject
+ (NSDictionary *)cssColorMap;#if __has_include("TFHpple.h")
+ (UIColor *)colorFromCssText:(NSString *)ctext;
+ (NSMutableArray <NSMutableDictionary *>*)stylesFromElement:(TFHppleElement *)e;
#endif
@end

@implementation CSSStyleMap
//将CSS定义的颜色转为十六进制颜色
+ (NSDictionary *)cssColorMap
{NSString *k = @"{\\"CLEAR\": \"#00000000\",\\"TRANSPARENT\": \"#00000000\",\\"\": \"#00000000\",\\"ALICEBLUE\": \"#F0F8FF\",\\"ANTIQUEWHITE\": \"#FAEBD7\",\\"AQUA\": \"#00FFFF\",\\"AQUAMARINE\": \"#7FFFD4\",\\"AZURE\": \"#F0FFFF\",\\"BEIGE\": \"#F5F5DC\",\\"BISQUE\": \"#FFE4C4\",\\"BLACK\": \"#000000\",\\"BLANCHEDALMOND\": \"#FFEBCD\",\\"BLUE\": \"#0000FF\",\\"BLUEVIOLET\": \"#8A2BE2\",\\"BROWN\": \"#A52A2A\",\\"BURLYWOOD\": \"#DEB887\",\\"CADETBLUE\": \"#5F9EA0\",\\"CHARTREUSE\": \"#7FFF00\",\\"CHOCOLATE\": \"#D2691E\",\\"CORAL\": \"#FF7F50\",\\"CORNFLOWERBLUE\": \"#6495ED\",\\"CORNSILK\": \"#FFF8DC\",\\"CRIMSON\": \"#DC143C\",\\"CYAN\": \"#00FFFF\",\\"DARKBLUE\": \"#00008B\",\\"DARKCYAN\": \"#008B8B\",\\"DARKGOLDENROD\": \"#B8860B\",\\"DARKGRAY\": \"#A9A9A9\",\\"DARKGREY\": \"#A9A9A9\",\\"DARKGREEN\": \"#006400\",\\"DARKKHAKI\": \"#BDB76B\",\\"DARKMAGENTA\": \"#8B008B\",\\"DARKOLIVEGREEN\": \"#556B2F\",\\"DARKORANGE\": \"#FF8C00\",\\"DARKORCHID\": \"#9932CC\",\\"DARKRED\": \"#8B0000\",\\"DARKSALMON\": \"#E9967A\",\\"DARKSEAGREEN\": \"#8FBC8F\",\\"DARKSLATEBLUE\": \"#483D8B\",\\"DARKSLATEGRAY\": \"#2F4F4F\",\\"DARKSLATEGREY\": \"#2F4F4F\",\\"DARKTURQUOISE\": \"#00CED1\",\\"DARKVIOLET\": \"#9400D3\",\\"DEEPPINK\": \"#FF1493\",\\"DEEPSKYBLUE\": \"#00BFFF\",\\"DIMGRAY\": \"#696969\",\\"DIMGREY\": \"#696969\",\\"DODGERBLUE\": \"#1E90FF\",\\"FIREBRICK\": \"#B22222\",\\"FLORALWHITE\": \"#FFFAF0\",\\"FORESTGREEN\": \"#228B22\",\\"FUCHSIA\": \"#FF00FF\",\\"GAINSBORO\": \"#DCDCDC\",\\"GHOSTWHITE\": \"#F8F8FF\",\\"GOLD\": \"#FFD700\",\\"GOLDENROD\": \"#DAA520\",\\"GRAY\": \"#808080\",\\"GREY\": \"#808080\",\\"GREEN\": \"#008000\",\\"GREENYELLOW\": \"#ADFF2F\",\\"HONEYDEW\": \"#F0FFF0\",\\"HOTPINK\": \"#FF69B4\",\\"INDIANRED\": \"#CD5C5C\",\\"INDIGO\": \"#4B0082\",\\"IVORY\": \"#FFFFF0\",\\"KHAKI\": \"#F0E68C\",\\"LAVENDER\": \"#E6E6FA\",\\"LAVENDERBLUSH\": \"#FFF0F5\",\\"LAWNGREEN\": \"#7CFC00\",\\"LEMONCHIFFON\": \"#FFFACD\",\\"LIGHTBLUE\": \"#ADD8E6\",\\"LIGHTCORAL\": \"#F08080\",\\"LIGHTCYAN\": \"#E0FFFF\",\\"LIGHTGOLDENRODYELLOW\": \"#FAFAD2\",\\"LIGHTGRAY\": \"#D3D3D3\",\\"LIGHTGREY\": \"#D3D3D3\",\\"LIGHTGREEN\": \"#90EE90\",\\"LIGHTPINK\": \"#FFB6C1\",\\"LIGHTSALMON\": \"#FFA07A\",\\"LIGHTSEAGREEN\": \"#20B2AA\",\\"LIGHTSKYBLUE\": \"#87CEFA\",\\"LIGHTSLATEGRAY\": \"#778899\",\\"LIGHTSLATEGREY\": \"#778899\",\\"LIGHTSTEELBLUE\": \"#B0C4DE\",\\"LIGHTYELLOW\": \"#FFFFE0\",\\"LIME\": \"#00FF00\",\\"LIMEGREEN\": \"#32CD32\",\\"LINEN\": \"#FAF0E6\",\\"MAGENTA\": \"#FF00FF\",\\"MAROON\": \"#800000\",\\"MEDIUMAQUAMARINE\": \"#66CDAA\",\\"MEDIUMBLUE\": \"#0000CD\",\\"MEDIUMORCHID\": \"#BA55D3\",\\"MEDIUMPURPLE\": \"#9370DB\",\\"MEDIUMSEAGREEN\": \"#3CB371\",\\"MEDIUMSLATEBLUE\": \"#7B68EE\",\\"MEDIUMSPRINGGREEN\": \"#00FA9A\",\\"MEDIUMTURQUOISE\": \"#48D1CC\",\\"MEDIUMVIOLETRED\": \"#C71585\",\\"MIDNIGHTBLUE\": \"#191970\",\\"MINTCREAM\": \"#F5FFFA\",\\"MISTYROSE\": \"#FFE4E1\",\\"MOCCASIN\": \"#FFE4B5\",\\"NAVAJOWHITE\": \"#FFDEAD\",\\"NAVY\": \"#000080\",\\"OLDLACE\": \"#FDF5E6\",\\"OLIVE\": \"#808000\",\\"OLIVEDRAB\": \"#6B8E23\",\\"ORANGE\": \"#FFA500\",\\"ORANGERED\": \"#FF4500\",\\"ORCHID\": \"#DA70D6\",\\"PALEGOLDENROD\": \"#EEE8AA\",\\"PALEGREEN\": \"#98FB98\",\\"PALETURQUOISE\": \"#AFEEEE\",\\"PALEVIOLETRED\": \"#DB7093\",\\"PAPAYAWHIP\": \"#FFEFD5\",\\"PEACHPUFF\": \"#FFDAB9\",\\"PERU\": \"#CD853F\",\\"PINK\": \"#FFC0CB\",\\"PLUM\": \"#DDA0DD\",\\"POWDERBLUE\": \"#B0E0E6\",\\"PURPLE\": \"#800080\",\\"RED\": \"#FF0000\",\\"ROSYBROWN\": \"#BC8F8F\",\\"ROYALBLUE\": \"#4169E1\",\\"SADDLEBROWN\": \"#8B4513\",\\"SALMON\": \"#FA8072\",\\"SANDYBROWN\": \"#F4A460\",\\"SEAGREEN\": \"#2E8B57\",\\"SEASHELL\": \"#FFF5EE\",\\"SIENNA\": \"#A0522D\",\\"SILVER\": \"#C0C0C0\",\\"SKYBLUE\": \"#87CEEB\",\\"SLATEBLUE\": \"#6A5ACD\",\\"SLATEGRAY\": \"#708090\",\\"SLATEGREY\": \"#708090\",\\"SNOW\": \"#FFFAFA\",\\"SPRINGGREEN\": \"#00FF7F\",\\"STEELBLUE\": \"#4682B4\",\\"TAN\": \"#D2B48C\",\\"TEAL\": \"#008080\",\\"THISTLE\": \"#D8BFD8\",\\"TOMATO\": \"#FF6347\",\\"TURQUOISE\": \"#40E0D0\",\\"VIOLET\": \"#EE82EE\",\\"WHEAT\": \"#F5DEB3\",\\"WHITE\": \"#FFFFFF\",\\"WHITESMOKE\": \"#F5F5F5\",\\"YELLOW\": \"#FFFF00\",\\"YELLOWGREEN\": \"#9ACD32\"\}";NSDictionary *map = [JsonKit jsonObject:k];return map;
}#if __has_include("TFHpple.h")
+ (UIColor *)colorFromCssText:(NSString *)val
{NSString *cl = [[CSSStyleMap cssColorMap] stringForKey:val];UIColor *color = nil;if (cl.length > 0){color = [UIColor colorFromHex:cl];}else{val = [val stringByReplacingOccurrencesOfString:@"rgba(" withString:@""];val = [val stringByReplacingOccurrencesOfString:@"rgb(" withString:@""];val = [val stringByReplacingOccurrencesOfString:@")" withString:@""];NSArray *zlist = [val componentsSeparatedByString:@","];if (zlist.count >= 3){color = [UIColor colorWithRed:[zlist[0] doubleValue]/255.0 green:[zlist[1] doubleValue]/255.0 blue:[zlist[2] doubleValue]/255.0 alpha:zlist.count>3?[zlist[3] doubleValue]:1];}}return color;
}+ (NSMutableArray <NSMutableDictionary *>*)stylesFromElement:(TFHppleElement *)e
{NSString *b = [e content];NSArray <TFHppleElement *> *child = [e children];NSMutableArray *attributesList = [NSMutableArray arrayWithCapacity:0];[child enumerateObjectsUsingBlock:^(TFHppleElement * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {if (![obj isTextNode]){/*企管只关注CSS样式中的color,backgroudColor,fontSize这三个属性，其余根据后期要求再解析展示CSS对于样式的定义为：color:orange,font-size:16px,background-color:xxx*/NSDictionary *attrMap = [obj attributes];[attrMap enumerateKeysAndObjectsUsingBlock:^(id  _Nonnull key, id  _Nonnull obj, BOOL * _Nonnull stop){if (obj && [obj isKindOfClass:[NSString class]]){NSArray *plist = [obj componentsSeparatedByString:@","];[plist enumerateObjectsUsingBlock:^(id  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop){NSArray *xlist = [obj componentsSeparatedByString:@":"];if ([xlist.firstObject isEqualToString:@"color"]){NSString *val = [[xlist lastObject] uppercaseString];UIColor *color = [CSSStyleMap colorFromCssText:val];if (color){[attributesList addObject:@{@"fontColor":color,@"range":[NSValue valueWithRange:NSMakeRange(0, b.length)]}];}}else if ([xlist.firstObject isEqualToString:@"background-color"]){NSString *val = [[xlist lastObject] uppercaseString];UIColor *color = [CSSStyleMap colorFromCssText:val];if (color){[attributesList addObject:@{@"backgroundColor":color,@"range":[NSValue valueWithRange:NSMakeRange(0, b.length)]}];}}else if ([xlist.firstObject isEqualToString:@"font-size"]){NSInteger val = [[xlist lastObject] integerValue];[attributesList addObject:@{@"fontSize":intToStr(val),@"range":[NSValue valueWithRange:NSMakeRange(0, b.length)]}];}}];}}];}}];return attributesList;
}
#endif
@end

 页面使用：

NSData *tdata = [cnt dataUsingEncoding:NSUTF8StringEncoding];
TFHpple *doc = [[TFHpple alloc] initWithHTMLData:tdata];
TFHppleElement *e = [[doc searchWithXPathQuery:@"//b"] firstObject];//包含解析出来的样式数据列表
NSMutableArray <NSMutableDictionary *>*styleList = [CSSStyleMap stylesFromElement:e];

 


//加粗
NSMutableArray <NSValue *>*btagList = [rMap arrayForKey:@"bTag"];
//a标签，跳转
NSMutableArray <NSDictionary *>*atagList = [rMap arrayForKey:@"aTag"];
//CSS样式
NSMutableArray <NSDictionary *>*styleList = [rMap arrayForKey:@"style"];//textView是定义的UITextView的实例对象NSMutableAttributedString *mtext = [[NSMutableAttributedString alloc] initWithAttributedString:textView.attributedText];
NSString *textStr = mtext.string;
//        NSArray *ranges = [self mutableRangeOfString:@"®[^\\s]+" targetString:textStr];[btagList enumerateObjectsUsingBlock:^(NSValue *a, NSUInteger idx, BOOL * _Nonnull stop)
{[mtext addAttribute:NSFontAttributeName value:[UIFont boldSystemFontOfSize:imTextFont(16)] range:a.rangeValue];
}];[atagList enumerateObjectsUsingBlock:^(NSDictionary * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop)
{NSRange range = [(NSValue *)[obj objectForKey:@"range"] rangeValue];[mtext addAttribute:NSForegroundColorAttributeName value:[UIColor colorFromHex:@"#0000ee"] range:range];[mtext addAttribute:NSLinkTag value:[obj stringForKey:@"href"] range:range];
}];[styleList enumerateObjectsUsingBlock:^(NSDictionary * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop)
{UIColor *fcolor = [obj objectForKey:@"fontColor"];NSRange range = [(NSValue *)[obj objectForKey:@"range"] rangeValue];[mtext addAttribute:NSForegroundColorAttributeName value:fcolor range:range];
}];[textView setAttributedText:mtext];

 

这个示例只是展示其中一部分逻辑，你可以进行二次开发，扩展其功能，支持更多的属性的展示！

对了，肯定会有人说使用Webview直接加载就行了嘛，兄弟，我使用的场景是会话页面，你使用webview加载，就会存在性能体验问题！如果你全页面只有一个这样的消息，当然首选就是Webview，而我的页面如下，就不得不考虑用户体验！

这篇关于css style、css color 转 UIColor的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

原文地址:
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.chinasem.cn/article/380887。

相关文章

使用Python和Tkinter实现html标签去除工具

使用Python和Tkinter实现html标签去除工具

《使用Python和Tkinter实现html标签去除工具》本文介绍用Python和Tkinter开发的HTML标签去除工具,支持去除HTML标签、转义实体并输出纯文本,提供图形界面操作及复制功能,需... 目录html 标签去除工具功能介绍创作过程1. 技术选型2. 核心实现逻辑3. 用户体验增强如何运行
阅读更多...
CSS 样式表的四种应用方式及css注释的应用小结

CSS 样式表的四种应用方式及css注释的应用小结

《CSS样式表的四种应用方式及css注释的应用小结》：本文主要介绍了CSS样式表的四种应用方式及css注释的应用小结，本文通过实例代码给大家介绍的非常详细，详细内容请阅读本文，希望能对你有所帮助... 一、外部 css（推荐方式）定义：将 CSS 代码保存为独立的 .css 文件，通过 <link> 标签
阅读更多...
使用Vue-ECharts实现数据可视化图表功能

使用Vue-ECharts实现数据可视化图表功能

《使用Vue-ECharts实现数据可视化图表功能》在前端开发中,经常会遇到需要展示数据可视化的需求,比如柱状图、折线图、饼图等,这类需求不仅要求我们准确地将数据呈现出来,还需要兼顾美观与交互体验,所... 目录前言为什么选择 vue-ECharts？1. 基于 ECharts，功能强大2. 更符合 Vue
阅读更多...
Vue中插槽slot的使用示例详解

Vue中插槽slot的使用示例详解

《Vue中插槽slot的使用示例详解》：本文主要介绍Vue中插槽slot的使用示例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、插槽是什么二、插槽分类2.1 匿名插槽2.2 具名插槽2.3 作用域插槽三、插槽的基本使用3.1 匿名插槽
阅读更多...
springboot+vue项目怎么解决跨域问题详解

springboot+vue项目怎么解决跨域问题详解

《springboot+vue项目怎么解决跨域问题详解》：本文主要介绍springboot+vue项目怎么解决跨域问题的相关资料,包括前端代理、后端全局配置CORS、注解配置和Nginx反向代理,... 目录1. 前端代理（开发环境推荐）2. 后端全局配置 CORS（生产环境推荐）3. 后端注解配置（按接口
阅读更多...
Vue 2 项目中配置 Tailwind CSS 和 Font Awesome 的最佳实践举例

Vue 2 项目中配置 Tailwind CSS 和 Font Awesome 的最佳实践举例

《Vue2项目中配置TailwindCSS和FontAwesome的最佳实践举例》：本文主要介绍Vue2项目中配置TailwindCSS和FontAwesome的最... 目录vue 2 项目中配置 Tailwind css 和 Font Awesome 的最佳实践一、Tailwind CSS 配置1. 安
阅读更多...
CSS3 布局样式及其应用举例

CSS3 布局样式及其应用举例

《CSS3布局样式及其应用举例》CSS3的布局特性为前端开发者提供了无限可能，无论是Flexbox的一维布局还是Grid的二维布局，它们都能够帮助开发者以更清晰、简洁的方式实现复杂的网页布局，本文给... 目录深入探讨 css3 布局样式及其应用引言一、CSS布局的历史与发展1.1 早期布局的局限性1.2
阅读更多...
使用animation.css库快速实现CSS3旋转动画效果

使用animation.css库快速实现CSS3旋转动画效果

《使用animation.css库快速实现CSS3旋转动画效果》随着Web技术的不断发展，动画效果已经成为了网页设计中不可或缺的一部分，本文将深入探讨animation.css的工作原理，如何使用以及... 目录1. css3动画技术简介2. animation.css库介绍2.1 animation.cs
阅读更多...
CSS引入方式和选择符的讲解和运用小结

CSS引入方式和选择符的讲解和运用小结

《CSS引入方式和选择符的讲解和运用小结》CSS即层叠样式表，是一种用于描述网页文档（如HTML或XML）外观和格式的样式表语言,它主要用于将网页内容的呈现（外观）和结构（内容）分离，从而实现... 目录一、前言二、css 是什么三、CSS 引入方式1、行内样式2、内部样式表3、链入外部样式表四、CSS 选
阅读更多...
使用雪花算法产生id导致前端精度缺失问题解决方案

使用雪花算法产生id导致前端精度缺失问题解决方案

《使用雪花算法产生id导致前端精度缺失问题解决方案》雪花算法由Twitter提出,设计目的是生成唯一的、递增的ID,下面：本文主要介绍使用雪花算法产生id导致前端精度缺失问题的解决方案,文中通过代... 目录一、问题根源二、解决方案1. 全局配置Jackson序列化规则2. 实体类必须使用Long封装类3.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2