本文实例为大家分享了ios通过按钮添加和删除控件，供大家参考，具体内容如下
想要达到的效果如下:
先讲一下这个demo主要部分,即通过按钮实现增删图标
分析：
1、每一个图标需要两个数据，即图片和描述用的字符串 ，所以创建一个item类来封装从plist文件读取出来的数据：
1）plist文件如下：
2）item类：
.h文件
|
1
2
3
4
5
6
7
8
9
10
11
|
#import <foundation/foundation.h>@interface item : nsobject//描述的字符串@property(nonatomic,copy)nsstring * desstr;//图片路径@property(nonatomic,copy)nsstring * imgpath;-(instancetype)initwithstring:(nsstring *)desstr andimgpath:(nsstring *)imgpath;@end |
.m文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
#import "item.h"@implementation item-(instancetype)initwithstring:(nsstring *)desstr andimgpath:(nsstring *)imgpath{ self = [super init]; if (self) { self.desstr = desstr; self.imgpath = imgpath; } return self;}@end |
2、然后创建一个model类用于封装自定义的图标模型，我的模型是将model类继承于uiscrollview类，然后设置其可以滚动，然后再创建一个占据整个scrollview可滚动部分大小的button添加上去。再分别在button上半部分添加uiimageview显示图片，在下半部分添加uilabel显示描述文字，结构如下
重写model的init方法，在创建对象时用item对象初始化：
model类：
1）.h文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
#import <uikit/uikit.h>#import "item.h"@interface model : uiscrollview@property(nonatomic,strong)uibutton *button;@property(nonatomic,strong)uilabel *label;//判断button是否被点击@property(nonatomic,assign)bool isclicked;-(instancetype)initwithitem:(item *)item;//重置模型-(void)resetmodel;@end |
2）.m文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
-(instancetype)initwithitem:(item *)item{ self = [super initwithframe:cgrectmake(20, 20, 80, 100)]; if (self) { //设置模块 self.contentsize = cgsizemake(80, self.frame.size.height * 2); self.pagingenabled = no; //设置模块属性 self.button = [[uibutton alloc] initwithframe:cgrectmake(0, 0, self.frame.size.width, self.contentsize.height)]; [self.button addtarget:self action:@selector(buttondidclicked) forcontrolevents:uicontroleventtouchupinside]; //添加图片视图到button上 uiimageview *imgview = [[uiimageview alloc] initwithframe:cgrectmake(0, 0, self.frame.size.width, self.frame.size.height)]; [imgview setimage:[uiimage imagenamed:item.imgpath]]; [self.button addsubview:imgview]; //设置button是否被点击 self.isclicked = no; [self addsubview:self.button]; self.label = [[uilabel alloc] initwithframe:cgrectmake(0, self.frame.size.height, self.frame.size.width, self.frame.size.height)]; self.label.text = item.desstr; self.label.font = [uifont systemfontofsize:15]; self.label.textcolor = [uicolor blackcolor]; self.label.numberoflines = 0; self.label.textalignment = nstextalignmentleft; [self addsubview:self.label]; } return self;} |
3）button的点击事件：即点击图片文字描述就会从下面升上来，再点击就会降下去的动作：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
/label升降-(void)buttondidclicked{ if (self.isclicked == no) { [uiview animatewithduration:0.5 animations:^{ self.contentoffset = cgpointmake(0, self.frame.size.height); }]; self.isclicked = yes; }else if (self.isclicked == yes) { [uiview animatewithduration:0.5 animations:^{ self.contentoffset = cgpointmake(0, 0); }]; self.isclicked = no; }} |
另外，由于必须保证每次添加model到视图上时显示的是图片，所以需要一个方法来复原到初始状态，即一旦从视图上删除就复原：
|
1
2
3
4
5
|
//复原-(void)resetmodel{ self.contentoffset = cgpointmake(0, 0); self.isclicked = no;} |
3、模型准备好了，下面在viewcontroller类里面写一个方法将plist文件数据读取出来封装到item对象里面，再用item对象初始化model对象，将所有model对象存入可变数组（_allitems）里面：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
//加载数据到物品-(void)loaddata{//读取数据 nsstring *filepath = [[nsbundle mainbundle] pathforresource:@"shop" oftype:@"plist"]; nsarray *itemarr = [nsarray arraywithcontentsoffile:filepath]; //创建模型 for (int i =0;i <[itemarr count] ; i++) { item *item = [[item alloc] initwithstring:[[itemarr objectatindex:i] objectforkey:@"title"] andimgpath:[[itemarr objectatindex:i] objectforkey:@"pic"]]; model *model = [[model alloc] initwithitem:item]; //未被添加的为0，添加好的为1 model.tag = 0; [_allitems addobject:model]; }} |
**注意：**model的tag是用于判断model是否已经被添加到视图里面，从而只会添加数组里面未添加的model，已添加的model也会用一个数组(displayeditems)来存储，方便删除
4、添加和删除按钮及其响应的方法：
1)add按钮：
创建：
|
1
2
3
4
5
|
//添加添加按钮 uibutton *addbutton = [[uibutton alloc] initwithframe:cgrectmake(_width*2/3, _height/10, 40, 40)]; [addbutton setimage:[uiimage imagenamed:@"add"] forstate:uicontrolstatenormal]; [addbutton addtarget:self action:@selector(add) forcontrolevents:uicontroleventtouchupinside]; [self.view addsubview:addbutton]; |
add方法：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
//添加事件-(void)add{ nsinteger itemcount = [_displayeditems count]; for (model* model in _allitems) { if (model.tag == 0) { switch (itemcount) { case 1: model.frame = cgrectmake(40 + model.frame.size.width, 20, 80, 100); break; case 2: model.frame = cgrectmake(60 + model.frame.size.width*2, 20, 80, 100); break; case 3: model.frame = cgrectmake(20,40 + model.frame.size.height, 80, 100); break; case 4: model.frame = cgrectmake(40 + model.frame.size.width, 40 + model.frame.size.height, 80, 100); break; case 5: model.frame = cgrectmake(60 + model.frame.size.width*2, 40 + model.frame.size.height, 80, 100); break; default: break; } [_scrollview addsubview:model]; [_displayeditems addobject:model]; model.tag = 1; break; } }} |
2）delete按钮：
|
1
2
3
4
5
|
//添加删除按钮 uibutton *deletebutton = [[uibutton alloc] initwithframe: cgrectmake(_width/5, _height/10, 40, 40)]; [deletebutton setimage:[uiimage imagenamed:@"delete"] forstate:uicontrolstatenormal]; [deletebutton addtarget:self action:@selector(delete) forcontrolevents:uicontroleventtouchupinside]; [self.view addsubview:deletebutton]; |
delete方法：
|
1
2
3
4
5
6
7
|
-(void)delete{ model *model = _displayeditems.lastobject; [model removefromsuperview]; model.tag = 0; [model resetmodel]; [_displayeditems removeobject:model];} |
嗯，由于这里为了方便，所以添加控件时的位置判断直接写死了，所以还有待改进。以上就是用按钮添加控件这个demo的主要部分，另外还有那个背景图片的模糊处理使用的是uivisualeffectview类实现的，在此不详述了。
代码不足之处：
1、位置判断写死了
2、模型其实建一个类就够了，item类有点多余
进阶方案：
1、通过拖动图标放置在父视图任何位置
2、点击控件文字显示于图片之上，图片成为背景并虚化
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/weixin_42509364/article/details/88317076
