[IOS]如何在storyboard、xib中设置UILabel的padding(内间距)
freddon
发表于2018-07-03
阅读 3234 |
评论 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上时调整了文字,自动计算了布局
分类 :日常记录