- 改变按钮内部控件的位置
- UIButton的一些常用属性
- 九宫格的布局
- 字典转模型
- 封装控件的基本步骤
- XIB封装View
UIButton，俗称“按钮”
一般情况下，点击某个控件后，会做出相应反应的都是按钮
按钮的功能比较多，既能显示文字，又能显示图片，还能随时调整内部图片和文字的位置,比如
点赞 喜欢
图片在上,文字在下的按钮
这里对于UIButton的一些常用属性就不在一一介绍了,本文主要作为自己在使用过程中 经常用到的一些功能点 或者说遇到的问题 进行一个总结,方便日后 遇到相同的问题能够马上定位到
改变按钮内部控件的位置
我们知道普通的按钮都是图片在左文字在右, 但是开发中我们经常会遇到一些特殊的需求,比如上面列举的图片, 图片在上文字在下的效果,这里我们就来总结一下常见的几种实现方案吧
方案一:
重写如下方法来对按钮内部的子控件进行布局:
- (CGRect)contentRectForBounds:(CGRect)bounds;
- (CGRect)titleRectForContentRect:(CGRect)contentRect;
- (CGRect)imageRectForContentRect:(CGRect)contentRect;
方案二:
重写layoutSubviews方法,在该方法内部对按钮内部的子控件进行布局:
- (void)layoutSubviews
{
[super layoutSubviews];
CGFloat buttonW = self.frame.size.width;
CGFloat buttonH = self.frame.size.height;
CGFloat imageH = buttonW - 10;
self.imageView.frame = CGRectMake(0, 0, buttonW, imageH);
self.titleLabel.frame = CGRectMake(0, imageH, buttonW, buttonH - imageH);
self.titleLabel.textAlignment = NSTextAlignmentCenter;
self.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;
self.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter;
}
方案三:
该方案也是我个人比较喜欢的一种方案,其实就是直接操作titleEdgeInsets和imageEdgeInsets
1. 普通按钮的样子: 图片在左,文字在右
普通按钮
其实对应的代码就是:
self.btnScan.titleEdgeInsets = UIEdgeInsetsZero;
self.btnScan.imageEdgeInsets = UIEdgeInsetsZero;
2. 文字图片都居中显示
self.btnScan.titleEdgeInsets = UIEdgeInsetsMake(0, -self.btnScan.imageView.frame.size.width, 0, 0);
self.btnScan.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, -self.btnScan.titleLabel.frame.size.width);
居中
3. 文字在左图片在右
self.btnScan.titleEdgeInsets = UIEdgeInsetsMake(0, -self.btnScan.imageView.frame.size.width - self.btnScan.frame.size.width + self.btnScan.titleLabel.intrinsicContentSize.width, 0, 0);
self.btnScan.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, -self.btnScan.titleLabel.frame.size.width - self.btnScan.frame.size.width + self.btnScan.imageView.frame.size.width);
文字在左
4. 图片在上,文字在下
self.btnScan.titleEdgeInsets = UIEdgeInsetsMake(0, -self.btnScan.imageView.frame.size.width, -self.btnScan.imageView.frame.size.height, 0);
self.btnScan.imageEdgeInsets = UIEdgeInsetsMake(-self.btnScan.titleLabel.intrinsicContentSize.height, 0, 0, -self.btnScan.titleLabel.intrinsicContentSize.width);
图片在上
如果感觉距离有些近,我们可以调节间距
CGFloat offset = 40.0f;
self.btnScan.titleEdgeInsets = UIEdgeInsetsMake(0, -self.btnScan.imageView.frame.size.width, -self.btnScan.imageView.frame.size.height-offset/2, 0);
self.btnScan.imageEdgeInsets = UIEdgeInsetsMake(-self.btnScan.titleLabel.intrinsicContentSize.height-offset/2, 0, 0, -self.btnScan.titleLabel.intrinsicContentSize.width);
image.png
设置按钮的背景图片
为了保证高亮状态下的图片正常显示，必须设置按钮的type为custom
UIButton *loginBtn = [UIButton buttonWithType:UIButtonTypeCustom];
让按钮无法点击的2种方法
button.enabled = NO; //会进入UIControlStateDisabled状态
button.userInteractionEnabled = NO; //不会进入UIControlStateDisabled状态，继续保持当前状态
设置按钮背景图片和图片的区别
// 设置背景图片 图片会被拉伸充满整个btn.frame
[btn setBackgroundImage:[UIImage imageNamed:@""] forState:UIControlStateNormal];
// 设置按钮上的图片,图片不会被拉伸，原比例显示在btn.frame）
[btn setImage:[UIImage imageNamed:@""] forState:UIControlStateNormal];
点击按钮的时候是否会发光
// 当点击按钮的时候是否会发光
// default is NO. if YES, show a simple feedback (currently a glow) while highlighted.
btn.showsTouchWhenHighlighted=NO;
设置内容、标题或者是图标间距
//contentEdgeInsets titleEdgeInsets imageEdgeInsets
btn.contentEdgeInsets=UIEdgeInsetsMake(10,0,0,0);
设置按钮字体大小
[btn.titleLabel setFont:[UIFont systemFontOfSize:18]];
self.titleLabel.font = [UIFont boldSystemFontOfSize:22];
设置按钮禁用或者高亮时候按钮图标是否变灰色
// default is YES. if YES, image is drawn darker when highlighted(pressed)
btn.adjustsImageWhenHighlighted=NO;
// default is YES. if YES, image is drawn lighter when disabled
btn.adjustsImageWhenDisabled=NO;
九宫格的布局
九宫格
这里不讨论用CollectionView实现,主要就是一些简单的计算来实现我们想要的效果:
CGFloat shopW = 80;
CGFloat shopH = 90;
NSInteger index = self.shopsView.subviews.count;
CGFloat margin = (self.shopsView.frame.size.width - shopW*columnNum)/(columnNum -1);
//计算行和列
NSInteger column = index % columnNum;
NSInteger row = index / columnNum;
//计算X和Y的值
CGFloat shopX = column * (shopW + margin);
CGFloat shopY = row * (shopH +margin);
//创建View
GSShopView *shopView = [[GSShopView alloc] init];
shopView.frame = CGRectMake(shopX, shopY, shopW, shopH);
[self.shopsView addSubview:shopView];
字典转模型
字典转模型的过程最好封装在模型内部,同时模型应该提供一个可以传入字典参数的构造方法
#import
@interface GSShop : NSObject
/** 名称*/
@property (nonatomic,copy) NSString *name;
/** 图片*/
@property (nonatomic,copy) NSString *icon;
//instancetype:编译器会检测instancetype的真实类型
+ (instancetype)shopWithDict:(NSDictionary *)dic;
- (instancetype)initWithDict:(NSDictionary *)dic;
@end
#import "GSShop.h"
@implementation GSShop
+ (instancetype)shopWithDict:(NSDictionary *)dic{
return [[self alloc] initWithDict:dic];
}
-(instancetype)initWithDict:(NSDictionary *)dic{
if (self = [super init]) {
self.name = dic[@"name"];
self.icon = dic[@"icon"];
}
return self;
}
@end
封装控件的基本步骤
- 在
initWithFrame:方法中添加子控件，提供便利构造方法 - 在
layoutSubviews方法中设置子控件的frame（一定要调用super的layoutSubviews） - 增加模型属性，在模型属性set方法中设置数据到子控件上
这里以上面九宫格图片为例子,封装一个商品数据的代码:
/**
1.0 在该方法中初始化控件
init方法内部会自动调用initWithFrame:方法
*/
-(instancetype)initWithFrame:(CGRect)frame{
if(self = [super initWithFrame:frame]){
//1.0 创建icon
UIImageView *iconView = [[UIImageView alloc] init];
[self addSubview:iconView];
self.iconView = iconView;
//2.0 创建名称
UILabel *nameLabel = [[UILabel alloc] init];
nameLabel.font = [UIFont systemFontOfSize:11];
nameLabel.textAlignment = NSTextAlignmentCenter;
[self addSubview:nameLabel];
self.nameLabel = nameLabel;
}
return self;
}
//2.0 布局Frame
-(void)layoutSubviews{
[super layoutSubviews];
CGFloat width = self.frame.size.width;
CGFloat height = self.frame.size.height;
self.iconView.frame = CGRectMake(0, 0, width, width);
self.nameLabel.frame = CGRectMake(0, width, width, height-width);
}
//3.0 给数据赋值
-(void)setShop:(GSShop *)shop{
_shop = shop;
self.iconView.image = [UIImage imageNamed:shop.icon];
self.nameLabel.text = shop.name;
}
当然如果考虑到性能,我们也可以将使用的控件进行懒加载创建,这样 使用到的时候才会去创建该控件,就不用在调用initWithFrame:方法了
#pragma mark 控件懒加载 这样更加节约性能,用到的时候再去创建控件;
-(UIImageView *)iconView{
if (!_iconView) {
UIImageView *iconView = [[UIImageView alloc] init];
[self addSubview:iconView];
_iconView = iconView;
}
return _iconView;
}
-(UILabel *)nameLabel{
if(!_nameLabel){
UILabel *nameLabel = [[UILabel alloc] init];
nameLabel.font = [UIFont systemFontOfSize:11];
nameLabel.textAlignment = NSTextAlignmentCenter;
[self addSubview:nameLabel];
_nameLabel = nameLabel;
}
return _nameLabel;
}
XIB封装View
上面封装控件是通过代码来实现的,其实有时候我们利用XIB来封装控件速度也是非常的快,这里我们来贴一下通过XIB封装控件的代码
#import
@class GSShop;
@interface GSShopView2 : UIView
/**模型对象*/
@property (nonatomic, strong) GSShop *shop;
//为了让外界在调用的时候方便可以提供两个创建View的方法
+ (instancetype) shopViewWithShop:(GSShop *)shop;
+ (instancetype) shopView;
@end
#import "GSShopView2.h"
#import "GSShop.h"
@interface GSShopView2()
@property (weak, nonatomic) IBOutlet UIImageView *iconView;
@property (weak, nonatomic) IBOutlet UILabel *nameLabel;
@end
@implementation GSShopView2
+(instancetype)shopView{
return [self shopViewWithShop:nil];
}
+(instancetype)shopViewWithShop:(GSShop *)shop{
//加载xib文件
GSShopView2 *shopView = [[[NSBundle mainBundle] loadNibNamed:NSStringFromClass(self) owner:nil options:nil] lastObject];
shopView.shop = shop;
return shopView;
}
-(void)setShop:(GSShop *)shop{
_shop = shop;
self.iconView.image = [UIImage imageNamed:shop.icon];
self.nameLabel.text = shop.name;
}
@end
注意点
一个控件有2种创建方式
通过代码创建
初始化时一定会调用initWithFrame:方法通过xib\storyboard创建
初始化时不会调用initWithFrame:方法，只会调用initWithCoder:方法,初始化完毕后会调用awakeFromNib方法
所以当我们封装一个控件给别人使用的时候,最好是如下操作,这样不管是通过代码还是xib都可以
-(instancetype)initWithFrame:(CGRect)frame{
if (self = [super initWithFrame:frame]) {
[self setupUI];
}
return self;
}
-(void)awakeFromNib{
[self setupUI];
}