使用xib自定义button

时间:2022-09-08 11:25:30

最近一直在使用xib开发,在xib上面使用inset调整button的image或者title的位置实在是有点呵呵

索性自己用xib定义button,添加imageView和Label的属性,在最上层在覆盖一层button。

(当然我这样自定义button会增加工作量,因为button本身提供了修改图片以及标题的方法inset,只是提供一个用xib自定义控件的例子)

中间遇到不少问题,总结一下跟大家分享。

写一下我的步骤,遇到的问题以及解决的办法。

创建项目过程略过,直接上图

使用xib自定义button

创建继承自UIView的aView,创建aView.xib,然后建立他们之间的相互依赖关系。见下图

使用xib自定义button

在Class处选择要相互依赖的文件名。

开始创建自定义button


使用xib自定义button

设置aView.xib的size为freeform

在这里我设置的size为200*200

然后添加imageView和Label,autolayout添加约束,完成这一户之后的样子

使用xib自定义button

然后在最上面覆盖一层button,添加约束。当然这里button的大小要等于view的大小,覆盖在最上层。

然后再aView.h里面添加view,imageView和Label的属性,在.m文件里面添加button属性。button也可以写在.h文件,不过我们这里不需要把这个属性暴露出来,因为我们在实例化aView的对象时候不会对button进行操作。一定要添加一个继承自UIView的属性。

如下图操作

使用xib自定义button

使用xib自定义button

使用xib自定义button

使用xib自定义button

然后我们在.m文件添加awakeFormNib的方法

- (void)awakeFromNib
{
NSLog(@"awake from nib");
[[NSBundle mainBundle] loadNibNamed:@"aView" owner:self options:nil];
[self addSubview:_contentView];
}
添加我们自定义的方法

- (void)addTarget:(id)target action:(SEL)action
{
[_button addTarget:target action:action forControlEvents:UIControlEventTouchUpInside];
}

当然这个方法要在.h文件声明一下。

到目前为止我们xib自定义的button已经完成,现在来看看效果

在ViewController.xib文件拖进来一个view,注意修改custom class为aView 记得按回车

然后设置view大小为270*270

使用xib自定义button

然后再viewcontroller.m文件里添加aView的属性 

使用xib自定义button


然后再viewdidload方法里面添加aview触发的方法和image label属性

- (void)viewDidLoad {
[super viewDidLoad];

[_aview addTarget:self action:@selector(aaa)];

_aview.imageView.image = [UIImage imageNamed:@"jobs"];

_aview.label.text = @"自定义button";
}

- (void)aaa
{
NSLog(@"aaa");
}
然后运行。然后发现运行的结果并不是预想的那样

使用xib自定义button

我们自定义button的xib里面我们设置的view的大小为200*200,然后我们在view controller.xib里面设置的时270*270,然后就出现了上面的情况。

然后只需要在aView.m文件的- (void)awakeFromNib方法里面添加这一句代码

    _contentView.frame =CGRectMake(0,0, _contentView.superview.frame.size.width,_contentView.superview.frame.size.height);

但是这句代码仔细想一下可能会有点疑惑,我们来看看下面这张图
使用xib自定义button

我们看到,灰色的一层继承自UIView,然后蓝色一层继承的是aView,aView是View的父视图,这样就很容易理解了。

欢迎批评指正。