服务器之家

服务器之家 > 正文

iOS实现通过按钮添加和删除控件的方法

时间:2021-05-21 14:18     来源/作者:燃烧的钥匙

本文实例为大家分享了ios通过按钮添加和删除控件,供大家参考,具体内容如下

想要达到的效果如下:

iOS实现通过按钮添加和删除控件的方法

先讲一下这个demo主要部分,即通过按钮实现增删图标

分析:

1、每一个图标需要两个数据,即图片和描述用的字符串 ,所以创建一个item类来封装从plist文件读取出来的数据:

1)plist文件如下:

iOS实现通过按钮添加和删除控件的方法

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显示描述文字,结构如下

iOS实现通过按钮添加和删除控件的方法

重写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

标签:

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
2021德云社封箱演出完整版 2021年德云社封箱演出在线看
2021德云社封箱演出完整版 2021年德云社封箱演出在线看 2021-03-15
返回顶部