前言：最近又有同事问我如何做一个并排的label，部分label可点击，举个例子：qq红包中的"24小时未领完，将退回余额"中的“余额”可以点击，于是我把自己一年前的小轮子拿出来，本着帮助他人和提升自己的态度，跟大家分享下这个<code>居中</code>、<code>可点击</code>的label

qq红包

可能很多朋友看到可点击label，会有很多想法：
<pre>
1、label+label
2、label+button
</pre>
当然还有很多，上面只是最常见的想法。
我这个<code>demo</code>是选择前者，因为后者文字间会出现缝隙，也就是“退回”和“余额”之间有空隙，看起来很不好看，原因是“余额”如果是<code>button</code>的<code>title</code>，我们都知道<code>button</code>的<code>tititle</code>是<code>button</code>中的<code>titleLabel.text</code>，<code>titleLabel</code>离<code>button</code>有<code>edge</code>，所以<code>button</code>的<code>title</code>跟“24小时未领完，将退回余额”的label一定会有空隙。效果的话，大家将一个<code>label</code>和<code>button</code>并排再看，在此我就不上图了。

<code>.h文件</code>
.h文件定义个<code>block</code>，用于点击操作，重写init方法
<pre>

import <UIKit/UIKit.h>

//点击按钮
typedef void (^clickBlock)();
@interface PCBClickLabel : UIView

• (instancetype)initLabelViewWithLab:(NSString *)text clickTextRange:(NSRange)clickTextRange clickAtion:(clickBlock)clickAtion;
  @property (nonatomic, copy)clickBlock clickBlock;
  @end</pre>

<code>.m文件</code>
.m文件在<code>init</code>方法对<code>label.text</code>进行截取和区分，区分出点击的文字是哪些，点击的文字在整个<code>label</code>分3种情况:
<pre>
1、选择的范围文字是开头的文字
2、选择的范围文字是文中的文字
3、选择的范围文字是文末的文字（qq红包属于此种）
</pre>
下面粘贴上第3种的判断代码
<pre>
//如果选择的范围文字是文尾的文字，而不是中间的文字或者开头的文字
if (clickTextRange.location + clickTextRange.length == text.length) {
//取得文字
clickText = [text substringWithRange:clickTextRange];
commonText = [text substringToIndex:clickTextRange.location];
//label的位置
commonLabel.frame = CGRectMake(0, 0, [[self class] calculateRowWidth:commonText], 30);
clickLabel.frame = CGRectMake(commonLabel.frame.size.width+commonLabel.frame.origin.x, 0, [[self class] calculateRowWidth:clickText], 30);
}
</pre>

计算高度方法（此方法也可以用于label自适应高度，稍微修改一下即可）
<pre>+ (CGFloat)calculateRowWidth:(NSString )string {
NSDictionary dic = @{NSFontAttributeName:[UIFont systemFontOfSize:17]}; //指定字号
CGRect rect = [string boundingRectWithSize:CGSizeMake(0, 30)/计算宽度时要确定高度,计算高度时要确定宽度/ options:NSStringDrawingUsesLineFragmentOrigin |
NSStringDrawingUsesFontLeading attributes:dic context:nil];
return rect.size.width;
}</pre>
效果图：

部分文字点击 block打印

完整代码：https://github.com/DWadeIsTheBest/clickLabel/tree/master
喜欢的话，点个❤️哦！