[IOS]如何在storyboard、xib中设置UILabel的padding（内间距）
freddon
发表于2018-07-03
阅读 3599 |
评论 0
利用IB_DESIGNABLE 与 IBInspectable属性检视器在XIB中显示自定义属性
Q:如何在storyboard、xib中设置UILabel的padding（内间距）?
> A:一般来说，使用代码的方式也是习以为常了：
+ 重写UILabel
+ 重写drawTextInRect,设置UIEdgeInsets Offset即可
Q:那要在nib中设置呢，类似android xml或者winphone xaml那种：在界面展示该控件的属性列表，并设置相应的值呢？
> A: 答案就是IB_DESIGNABLE 与 IBInspectable
__IB_DESIGNABLE__ 让你的自定义UIView可以在XIB中预览
__IBInspectable__ 让你的自定义UIView属性出现在XIB属性检视器中。
先上效果图：
为了减少属性检视器展示过多的内容，使用NSString* 去接收需要设置的四个方向的padding（top right bottom left），以空格分隔
格式支持3种：
1. padding : 10 代表四个方向都是10 -> all
2. padding : 5 10 代表上下是5，左右为10 -> top right
3. padding : 5 10 5 10 代表上5，右10，下5，左为10 -> top right bottom left
代码开始
##1 自定义UILabel的子类
---
__UIPaddingLabel.h__
```
//
// UIPaddingLabel.h
// HemoIOS
//
// Created by freddon on 2018/7/3.
// Copyright © 2018年 FredDon. All rights reserved.
//
#import <UIKit/UIKit.h>
IB_DESIGNABLE
@interface UIPaddingLabel : UILabel
@property (nonatomic, assign) IBInspectable NSString* padding;
@property (nonatomic, assign) UIEdgeInsets paddingInsets;
@end
```
##2 重写drawTextInRect
---
__UIPaddingLabel.m__
核心部分当然是当UILabel画文本上去的时候，设置需要放置的区域即可
```
- (void)drawTextInRect:(CGRect)rect {
[super drawTextInRect:UIEdgeInsetsInsetRect(rect, _paddingInsets)];
}
```
_paddingInsets即是我们需要控制的部分---内补间距。
该内补间距最好在init、initWithFrame:的时候初始化：
```
- (instancetype)init {
if (self = [super init]) {
_paddingInsets = UIEdgeInsetsZero;
}
return self;
}
- (instancetype)initWithFrame:(CGRect)frame {
if (self = [super initWithFrame:frame]) {
_paddingInsets = UIEdgeInsetsZero;
}
return self;
}
```
## 解析xib上输入的padding字符串，赋值到内补间距`_paddingInsets`
---
其实就是简单的字符串处理了
```
-(void)setPadding:(NSString *)padding{
NSArray *array = [padding componentsSeparatedByString:@" "]; //字符串按照空格分隔成数组
NSArray *arrayres;
if (array.count==1) {
arrayres=@[
array[0],
array[0],
array[0],
array[0],
];
}
else if (array.count==2){
arrayres=@[
array[0],
array[1],
array[0],
array[1]
];
}
else if (array.count==4){
arrayres=array;
}else{
arrayres=@[@(0),@(0),@(0),@(0)];
}
_paddingInsets = UIEdgeInsetsMake( [arrayres[0] floatValue], [arrayres[1]floatValue], [arrayres[2]floatValue], [arrayres[3]floatValue]);
}
- (NSString *)padding{
return [NSString stringWithFormat:@"%f %f %f %f",
_paddingInsets.top,
_paddingInsets.right,
_paddingInsets.bottom,
_paddingInsets.left];
}
```
好了，完成了。
------
#### 顺便说个最近遇到的BUG（乌龙）
------
BUG为：启动自己写的App，任何一个UIButton或者UILabel，只要点击，内容就会变短（要么变成 XX... 要么被裁减），就是随便从控件区拖一个都是如此。
排查过程：
1. 设置使用[btn setText: forstate:]设置每个状态的文本；
【无效】
2. 检查btn的约束；【无异常】
3. 设置btn.titleLabel.adjustsFontSizeToFitWidth=YES;
【点击后文字变小】
4. 去除btn的自定义点击事件；【无效】
5. 随便拖拽一个系统默认的UIButton到界面上（Custom）
【同样情况】
6. 随便拖拽一个系统默认的UIButton到界面上（System）
【不受影响】
7. 随便拖拽一个系统默认的UILabel到界面上；【同样情况，我屮艸芔茻】
8. 检查是否写了UILabel分类！！！
> 罪魁祸首就是重写了 drawTextInRect,并且设置了内补参数，导致文字重新渲染到UILabel上时调整了文字，自动计算了布局
分类 ：日常记录