首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >iOS开发封装一个可以响应超链接的label——基于RCLabel的交互扩展

iOS开发封装一个可以响应超链接的label——基于RCLabel的交互扩展

作者头像
珲少
发布于 2018-08-15 09:34:07
发布于 2018-08-15 09:34:07
1.2K00
代码可运行
举报
文章被收录于专栏:一“技”之长一“技”之长
运行总次数:0
代码可运行

iOS开发封装一个可以响应超链接的label——基于RCLabel的交互扩展

一、引言

        iOS系统是一个十分注重用户体验的系统,在iOS系统中,用户交互的方案也十分多,然而要在label中的某部分字体中添加交互行为确实不容易的,如果使用其他类似Button的控件来模拟,文字的排版又将是一个解决十分困难的问题。这个问题的由来是项目中的一个界面中有一些广告位标签,而这些广告位的标签却是嵌在文本中的,当用户点击文字标签的位置时,会跳转到响应的广告页。

        CoreText框架和一些第三方库可以解决这个问题,但直接使用CoreText十分复杂,第三方库多注重于富文本的排版,对类似文字超链接的支持亦不是特别简洁,我们可以借助一些第三方的东西进行针对性更强,更易用的封装。

        RCLabel是一个第三方的将html字符串进行文本布局的工具,代码十分轻巧,并且其是基于CoreText框架的,其原生性和扩展性十分强。在以前的一篇博客中,我将RCLabel进行了一些改进,使其支持异步加载远程图片,并且提供了更加简洁的面向应用的方法,博客地址如下:

扩展于RCLabel的支持异步加载网络图片的富文本引擎的设计:http://my.oschina.net/u/2340880/blog/499311 。

        本篇博文,将在其基础上,完成设计一个可以支持文本超链接的文字视图。

二、视图类与模型类的设计

        RCLabel的核心之处在于将HTML文本转换为富文本布局视图,因此我们可以将要显示的文本编程html字符串,将其可以进行用户交互的部分进行html超链接关联,RCLabel就检测到我们点击的区域进行响应逻辑的回调。设计类如下:

.h文件

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//文本与超链接地址关联的model类 后面会说
@class YHBaseLinkingLabelModel;

@protocol YHBaseLinkingLabelProtocol <NSObject>

@optional
/**
 *点击超链接后出发的代理方法 model中有链接地址和文字
 */
-(void)YHBaseLinkingLabelClickLinking:(YHBaseLinkingLabelModel *)model;
/**
 *尺寸改变后出发的方法
 */
-(void)YHBaseLinkingLabelSizeChange:(CGSize)size;
@end

@interface YHBaseLinkingLabel : YHBaseView
/**
 *文字数组 里面存放这文字对应的超链接对象
 */
@property(nonatomic,strong)NSArray<YHBaseLinkingLabelModel *> * textArray;
@property(nonatomic,weak)id<YHBaseLinkingLabelProtocol>delegate;
/**
 *设置文字颜色
 */
@property(nonatomic,strong)UIColor * textColor;
/**
 *设置超链接文字颜色
 */
@property(nonatomic,strong)UIColor * linkColor;
/**
 *设置字体大小
 */
@property(nonatomic,assign)NSUInteger fontSize;
/**
 *设置超链接字体大小
 */
@property(nonatomic,assign)int linkingFontSize;
/**
 *设置是否显示下划线
 */
@property(nonatomic,assign)BOOL isShowUnderLine;
@end

.m文件

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@interface YHBaseLinkingLabel()<YHBaseHtmlViewProcotop>
@end

@implementation YHBaseLinkingLabel
{
    //以前博客中 封装的显示HTML字符串富文本的视图
    YHBaseHtmlView * _label;
}
/*
// 重载一些初始化方法
- (instancetype)init
{
    self = [super init];
    if (self) {
        _label = [[YHBaseHtmlView alloc]init];
        [self addSubview:_label];
        [_label mas_makeConstraints:^(MASConstraintMaker *make) {
            make.leading.equalTo(@0);
            make.trailing.equalTo(@0);
            make.top.equalTo(@0);
            make.bottom.equalTo(@0);
        }];
         _label.delegate=self;
    }
    return self;
}
- (instancetype)initWithCoder:(NSCoder *)coder
{
    self = [super initWithCoder:coder];
    if (self) {
        _label = [[YHBaseHtmlView alloc]init];
        [self addSubview:_label];
        [_label mas_makeConstraints:^(MASConstraintMaker *make) {
            make.leading.equalTo(@0);
            make.trailing.equalTo(@0);
            make.top.equalTo(@0);
            make.bottom.equalTo(@0);
        }];
         _label.delegate=self;
    }
    return self;
}
- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        _label = [[YHBaseHtmlView alloc]init];
        [self addSubview:_label];
        [_label mas_makeConstraints:^(MASConstraintMaker *make) {
            make.leading.equalTo(@0);
            make.trailing.equalTo(@0);
            make.top.equalTo(@0);
            make.bottom.equalTo(@0);
        }];
        _label.delegate=self;
    }
    return self;
}
//设置文本数组
-(void)setTextArray:(NSArray<YHBaseLinkingLabelModel *> *)textArray{
    _textArray = textArray;
    //进行html转换
    NSString * htmlString = [self transLinkingDataToHtmlStr:textArray];
    //进行布局
    [_label reSetHtmlStr:htmlString];
    
}
-(void)setTextColor:(UIColor *)textColor{
    _textColor = textColor;
    _label.fontColor = textColor;
}
-(void)setLinkColor:(UIColor *)linkColor{
    _linkColor = linkColor;
    _label.linkingColor = linkColor;
}
-(void)setFontSize:(NSUInteger)fontSize{
    _fontSize = fontSize;
    [_label setFontSize:(int)fontSize];
}
-(void)setLinkingFontSize:(int)linkingFontSize{
    _linkingFontSize = linkingFontSize;
    [_label setLinkingSize:linkingFontSize];
}
-(void)setIsShowUnderLine:(BOOL)isShowUnderLine{
    _isShowUnderLine = isShowUnderLine;
    [_label setShowUnderLine:isShowUnderLine];
}
-(NSString *)transLinkingDataToHtmlStr:(NSArray<YHBaseLinkingLabelModel *> *)data{
    NSMutableString * mutStr = [[NSMutableString alloc]init];
    for (int i=0; i<data.count; i++) {
    //这个model中存放的是超链接部分的文字和对应的url
        YHBaseLinkingLabelModel * model = data[i];
        if (!model.linking) {
            [mutStr appendString:model.text];
        }else {
            [mutStr appendString:@"<a href="];
            [mutStr appendString:model.linking];
            [mutStr appendString:@">"];
            [mutStr appendString:model.text];
            [mutStr appendString:@"</a>"];
        }
    }
    return mutStr;
}

#pragma mark delegate
//点击的回调
-(void)YHBaseHtmlView:(YHBaseHtmlView *)htmlView ClickLink:(NSString *)url{
    for (YHBaseLinkingLabelModel * model in _textArray) {
        if ([model.linking isEqualToString:url]) {
            if ([self.delegate respondsToSelector:@selector(YHBaseLinkingLabelClickLinking:)]) {
                [self.delegate YHBaseLinkingLabelClickLinking:model];
                return;
            }
        }
    }
}
//布局尺寸改变的回调
-(void)YHBaseHtmlView:(YHBaseHtmlView *)htmlView SizeChanged:(CGSize)size{
    if ([self.delegate respondsToSelector:@selector(YHBaseLinkingLabelSizeChange:)]) {
        [self.delegate YHBaseLinkingLabelSizeChange:size];
    }
}
@end

上面我们有用到一个YHBaseLinkingLabelModel类,这个类进行了链接与字符的映射,设计如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@interface YHBaseLinkingLabelModel : YHBaseModel
/**
 *文字内容
 */
@property(nonatomic,strong)NSString * text;
/**
 *超链接地址 nil则为无
 */
@property(nonatomic,strong)NSString * linking;

@end

        YHBaseHtmlView类是对RCLabel的一层封装,其中也对RCLabel进行了一些优化和改动,代码较多且在上篇博客中有介绍,这里不再多做解释了。

        在ViewController中写如下代码进行使用:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
   YHBaseLinkingLabel * label = [[YHBaseLinkingLabel alloc]initWithFrame:CGRectMake(100, 100, 200, 100)];
    NSMutableArray * array = [[NSMutableArray alloc]init];
    for (int i=0; i<6; i++) {
        YHBaseLinkingLabelModel * model = [[YHBaseLinkingLabelModel alloc]init];
        if (!(i%2)) {
            model.text =[NSString stringWithFormat:@"第%d个标签",i];
            model.linking = [NSString stringWithFormat:@"第%d个标签",i];
        }else{
            model.text = @",不能点得文字,";
        }
        [array addObject:model];
    }
    label.textColor = [UIColor blackColor];
    label.linkColor = [UIColor purpleColor];
    label.fontSize = 15;
    label.linkingFontSize = 17;
    label.isShowUnderLine=YES;
    label.delegate=self;
    label.textArray = array;
    [self.view addSubview:label];
   
}
-(void)YHBaseLinkingLabelClickLinking:(YHBaseLinkingLabelModel *)model{
    NSLog(@"%@",model.linking);
}

运行效果如下:

效果不错,并且十分简单易用,对吧。

        我将这部分的相关代码集成进了以前写的一个项目开发框架中,git地址是:https://github.com/ZYHshao/YHBaseFoundationTest 。总体看来,这个框架并不是干货,只是我开发中的一些积累,如果可以帮到你,择优而用,如果需要和我交流,QQ316045346,对视欢迎。

专注技术,热爱生活,交流技术,也做朋友。 ——珲少

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2015/12/23 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
iOS_系统自带地图圆形区域选择范围
5.聚集操作:删除原理的大头针,在新经纬度添加大头针,并将地图移动到新的经纬度(反地理编码获得位置信息)
mikimo
2022/07/20
2.5K0
iOS_系统自带地图圆形区域选择范围
iOS文本布局探讨之三——使用TextKit框架进行富文本布局
        关于图文混排,其实以前的博客已经讨论很多,在实际开发中,经常使用第三方的框架来完成排版的需求,其中RCLabel和RTLabel是两个比较好用的第三方库,他们的实现都是基于UIView的,通过更底层的CoreText相关API来进行图文处理。相关介绍博客地址如下:
珲少
2018/08/15
2.4K0
iOS文本布局探讨之三——使用TextKit框架进行富文本布局
iOS学习——页面的传值方式iOS----KVC和KVO 详解
在iOS开发过程中,页面跳转时在页面之间进行数据传递是很常见的事情,我们称这个过程为页面传值。页面跳转过程中,从主页面跳转到子页面的数据传递称之为正向传值;反之,从子页面返回主页面时的数据传递称之为反向传值。
mukekeheart
2019/09/29
2K0
iOS学习——页面的传值方式iOS----KVC和KVO 详解
iOS 自定义tab滑块: segment功能+label混合显示;( Slider 双区间)
前言 在这里插入图片描述 原文: https://blog.csdn.net/z929118967/article/details/105076636 需求:商户交易汇总表使用tab滑块进行切换/筛
公众号iOS逆向
2021/03/24
9470
iOS 自定义tab滑块: segment功能+label混合显示;( Slider 双区间)
iOS小经验·Masonry布局时因不熟悉Cell生命周期而导致死循环
设置UICollectionView的footer的时候,可能有新的小伙伴这样写:
陈满iOS
2018/10/09
1.8K0
iOS开发一款小巧简洁的日历控件 原
        日 历是iOS开发中有时会用到的一个UI控件,网上开源的代码也很多,我浏览过一些,大致有两种模式,一种是日历的逻辑由开发者自己实现,通过计算闰年与平 年来确定月份天数,另外一种模式是通过NSDate这个时间类,来获取日历的信息。我个人认为后一种更加安全,代码性能也会更加优质,下面就是我用这种模 式实现的一个日历控件。
珲少
2018/08/16
3.8K0
iOS开发一款小巧简洁的日历控件
                                                                            原
iOS 之 异步绘制原理
这其中的工作都是在主线程中完成的,这就导致了主线程频繁的处理 UI 绘制的工作,如果要绘制的元素过多,过于频繁,就会造成卡顿。
网罗开发
2021/04/07
3.6K0
iOS 之 异步绘制原理
iOS广告轮播图
1.1 cell 头文件 1.2 cell 实现文件 1.3 cell的使用 引言 在这里插入图片描述 需求背景: 信用卡网申接入(IOS) 实现思路: 自定义cell封装CycleScrollVie
公众号iOS逆向
2021/07/05
8180
iOS广告轮播图
iOS学习——输入验证码界面封装
  在很多App中都有输入验证码的功能需求,最近项目需要也有这个功能。做完之后简单整理了一下,将实现的基本思路做下记录。实现后的效果大致如下图所示,当四位签到码全部输入时,提交按钮是可以提交的,否则提交按钮失效,不允许提交。
mukekeheart
2018/12/27
2.1K0
Autolayout
只要设置leftLabel的right距rightLabel的mas_left间距即可。需要谁不被压缩,就设置谁距离另外一个被压缩的的间距即可。
用户1890628
2019/08/07
4770
Autolayout
iOS小技能:下拉刷新控件的适配
前言 下拉顶部背景色设置: 往tableView的父控件添加拉伸背景视图 present 半屏适配 iOS13 modalPresentationStyle属性默认不是全屏样式UIModalPresentationFullScreen,而是半屏样式,需要根据需求手动设置。present 半屏,会导致列表下拉刷新失效。 I 下拉刷新适配 1.1 下拉顶部背景色设置 在这里插入图片描述 设置下拉样式 #import <MJRefresh/MJRefresh.h> @interface ERPMJRefres
公众号iOS逆向
2022/08/22
1K0
iOS小技能:下拉刷新控件的适配
iOS UICollectionView 从右向左对齐的实现
iOS UICollectionView 从右向左对齐(Aligning right to left on UICollectionView)
公众号iOS逆向
2021/07/29
2.9K0
史上最全的iOS之UITextView实现placeHolder占位文字的N种方法
iOS开发中,UITextField和UITextView是最常用的文本接受类和文本展示类的控件。UITextField和UITextView都输入文本,也都可以监听文本的改变。不同的是,UITextField继承自UIControl这个抽象类。UITextView继承自UIScrollView这个实体类。这就导致了UITextView可以多行展示内容,并且还可以像UIScrollView一样滚动。而UITextField只能单独的展示一行内容。从这个角度,UITextView在功能上是优于UITextField的。 但是,众所周知,UITextField中有一个placeholder属性,可以设置UITextField的占位文字,起到提示用户输入相关信息的作用。可是,UITextView就没那么幸运了,apple没有给UITextView提供一个类似于placeholder这样的属性来供开发者使用。而开发中,我们经常会遇到既要占位文字,又要可以多行展示并且可以滚动的控件,单纯的UITextField或者UITextView都不能满足这种产品上的需求。比如,现在市面上的app大多都有一个用户反馈的入口,如下图(一)所示。下面我就把自己能够想到的方法汇总一下,让更多的开发者知道,原来有这么多方法可以实现UITextView的占位文字。
VV木公子
2018/06/05
11K0
走进 Masonry
MelonTeam
2018/01/04
1.2K0
走进 Masonry
iOS开发-RAC+MVVM练手项目 图床App写在前面准备工作界面设计首页历史关于后记
前段时间闲着无聊和盆友就搞了个图床站Chevereto-Free,忽然发现居然有API提供,而且很简单,只需要一个KEY就可以
gwk_iOS
2018/08/23
1.1K0
iOS开发-RAC+MVVM练手项目 图床App写在前面准备工作界面设计首页历史关于后记
iOS自动布局框架之Masonry
目前iOS开发中大多数页面都已经开始使用Interface Builder的方式进行UI开发了,但是在一些变化比较复杂的页面,还是需要通过代码来进行UI开发的。而且有很多比较老的项目,本身就还在采用纯代码的方式进行开发。而现在iPhone和iPad屏幕尺寸越来越多,虽然开发者只需要根据屏幕点进行开发,而不需要基于像素点进行UI开发。但如果在项目中根据不同屏幕尺寸进行各种判断,写死坐标的话,这样开发起来是很吃力的。所以一般用纯代码开发UI的话,一般都是配合一些自动化布局的框架进行屏幕适配。苹果为我们提供的适配
xiangzhihong
2018/01/26
2.3K0
iOS开发之微信聊天工具栏的封装
之前山寨了一个新浪微博(iOS开发之山寨版新浪微博小结),这几天就山寨个微信吧。之前已经把微信的视图结构简单的拖了一下(iOS开发之微信山寨版),今天就开始给微信加上具体的实现功能,那么就先从微信的聊天界面开始吧。提到封装是少不了写代码的,在封装组件的时候,为了组件的可移植性,我们就不能用storyboard来拖拽了。为了屏幕的适配,适应不同屏幕的手机,所以在封装组件的时候是少不了为我们的组件来添加约束。今天博客中的所有代码都是脱离storyboard的,这些代码在别的工程中也是可以使用的。好,废话少说,切
lizelu
2018/01/11
2.6K0
iOS开发之微信聊天工具栏的封装
iOS的WebView——WKWebView
前言 在iOS8中,苹果推出了WKWebView。WKWebView有一个突出特点,就是内存占用少。 但作为一个全新的WebView,API相比于之前的UIWebView肯定会有所不同。今天就在这里记录一下WKWebView的基本使用。 Webview的使用,通常包含以下几个部分:浏览器的基本设置,浏览器的各种回调,浏览器中js如何调用原生方法。 WKWebView基本使用 self.webview = [[WKWebView alloc]init]; [self.view addSubvi
Oceanlong
2018/07/03
4K0
iOS小技能: 网络加载中处理、接口暂无数据处理、全局监听用户点击事件
在日常开发中经常涉及数据列表的查询,处理服务侧无数据返回的情况或者网络异常的手段是iOS必备小技能。
公众号iOS逆向
2022/08/22
8940
iOS小技能: 网络加载中处理、接口暂无数据处理、全局监听用户点击事件
iOS开发 MVVM+RAC 的使用Demo效果ReactiveCocoa简介Demo分析代码Demo地址
好长一段时间没有敲简书了! 主要是因为一直在跑面试。 终于还是在上海入职了! 由于项目原因最终还是入了MVVM+RAC的坑
gwk_iOS
2018/08/23
1.8K0
iOS开发 MVVM+RAC 的使用Demo效果ReactiveCocoa简介Demo分析代码Demo地址
相关推荐
iOS_系统自带地图圆形区域选择范围
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档