经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 移动开发 » iOS » 查看文章
iOS实现通过按钮添加和删除控件的方法
来源:jb51  时间:2019/3/25 8:56:29  对本文有异议

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

想要达到的效果如下:

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

分析:

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

1)plist文件如下:

2)Item类:

.h文件

  1. #import <Foundation/Foundation.h>
  2.  
  3. @interface Item : NSObject
  4. //描述的字符串
  5. @property(nonatomic,copy)NSString * desStr;
  6. //图片路径
  7. @property(nonatomic,copy)NSString * imgPath;
  8.  
  9. -(instancetype)initWithString:(NSString *)desStr andimgPath:(NSString *)imgPath;
  10.  
  11. @end
  12.  

.m文件

  1. #import "Item.h"
  2.  
  3. @implementation Item
  4.  
  5. -(instancetype)initWithString:(NSString *)desStr andimgPath:(NSString *)imgPath{
  6. self = [super init];
  7. if (self) {
  8. self.desStr = desStr;
  9. self.imgPath = imgPath;
  10. }
  11. return self;
  12. }
  13.  
  14. @end

2、然后创建一个Model类用于封装自定义的图标模型,我的模型是将Model类继承于UIScrollView类,然后设置其可以滚动,然后再创建一个占据整个scrollview可滚动部分大小的button添加上去。再分别在button上半部分添加UIImageView显示图片,在下半部分添加UILabel显示描述文字,结构如下

重写model的init方法,在创建对象时用item对象初始化:
model类:

1).h文件

  1. #import <UIKit/UIKit.h>
  2. #import "Item.h"
  3.  
  4. @interface Model : UIScrollView
  5.  
  6. @property(nonatomic,strong)UIButton *button;
  7. @property(nonatomic,strong)UILabel *label;
  8. //判断button是否被点击
  9. @property(nonatomic,assign)BOOL isClicked;
  10.  
  11.  
  12. -(instancetype)initWithItem:(Item *)item;
  13.  
  14. //重置模型
  15. -(void)resetModel;
  16.  
  17. @end

2).m文件

  1. -(instancetype)initWithItem:(Item *)item{
  2. self = [super initWithFrame:CGRectMake(20, 20, 80, 100)];
  3. if (self) {
  4. //设置模块
  5. self.contentSize = CGSizeMake(80, self.frame.size.height * 2);
  6. self.pagingEnabled = NO;
  7. //设置模块属性
  8. self.button = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.contentSize.height)];
  9. [self.button addTarget:self action:@selector(buttonDidClicked) forControlEvents:UIControlEventTouchUpInside];
  10. //添加图片视图到button上
  11. UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
  12. [imgView setImage:[UIImage imageNamed:item.imgPath]];
  13. [self.button addSubview:imgView];
  14. //设置button是否被点击
  15. self.isClicked = NO;
  16. [self addSubview:self.button];
  17. self.label = [[UILabel alloc] initWithFrame:CGRectMake(0, self.frame.size.height, self.frame.size.width, self.frame.size.height)];
  18. self.label.text = item.desStr;
  19. self.label.font = [UIFont systemFontOfSize:15];
  20. self.label.textColor = [UIColor blackColor];
  21. self.label.numberOfLines = 0;
  22. self.label.textAlignment = NSTextAlignmentLeft;
  23. [self addSubview:self.label];
  24. }
  25. return self;
  26. }

3)button的点击事件:即点击图片文字描述就会从下面升上来,再点击就会降下去的动作:

  1. /label升降
  2. -(void)buttonDidClicked{
  3. if (self.isClicked == NO) {
  4. [UIView animateWithDuration:0.5 animations:^{
  5. self.contentOffset = CGPointMake(0, self.frame.size.height);
  6. }];
  7. self.isClicked = YES;
  8. }else if (self.isClicked == YES) {
  9. [UIView animateWithDuration:0.5 animations:^{
  10. self.contentOffset = CGPointMake(0, 0);
  11. }];
  12. self.isClicked = NO;
  13. }
  14. }

另外,由于必须保证每次添加model到视图上时显示的是图片,所以需要一个方法来复原到初始状态,即一旦从视图上删除就复原:

  1. //复原
  2. -(void)resetModel{
  3. self.contentOffset = CGPointMake(0, 0);
  4. self.isClicked = NO;
  5. }

3、模型准备好了,下面在viewController类里面写一个方法将plist文件数据读取出来封装到item对象里面,再用item对象初始化model对象,将所有model对象存入可变数组(_allItems)里面:

  1. //加载数据到物品
  2. -(void)loadData{
  3. //读取数据
  4. NSString *filePath = [[NSBundle mainBundle] pathForResource:@"shop" ofType:@"plist"];
  5. NSArray *itemArr = [NSArray arrayWithContentsOfFile:filePath];
  6. //创建模型
  7. for (int i =0;i <[itemArr count] ; i++) {
  8. Item *item = [[Item alloc] initWithString:[[itemArr objectAtIndex:i] objectForKey:@"title"] andimgPath:[[itemArr objectAtIndex:i] objectForKey:@"pic"]];
  9. Model *model = [[Model alloc] initWithItem:item];
  10. //未被添加的为0,添加好的为1
  11. model.tag = 0;
  12. [_allItems addObject:model];
  13. }
  14. }

**注意:**model的tag是用于判断model是否已经被添加到视图里面,从而只会添加数组里面未添加的model,已添加的model也会用一个数组(displayedItems)来存储,方便删除

4、添加和删除按钮及其响应的方法:

1)add按钮:

创建:

  1. //添加添加按钮
  2. UIButton *addButton = [[UIButton alloc] initWithFrame:CGRectMake(_width*2/3, _height/10, 40, 40)];
  3. [addButton setImage:[UIImage imageNamed:@"add"] forState:UIControlStateNormal];
  4. [addButton addTarget:self action:@selector(add) forControlEvents:UIControlEventTouchUpInside];
  5. [self.view addSubview:addButton];

add方法:

  1. //添加事件
  2. -(void)add{
  3. NSInteger itemCount = [_displayedItems count];
  4. for (Model* model in _allItems) {
  5. if (model.tag == 0) {
  6. switch (itemCount) {
  7. case 1:
  8. model.frame = CGRectMake(40 + model.frame.size.width, 20, 80, 100);
  9. break;
  10. case 2:
  11. model.frame = CGRectMake(60 + model.frame.size.width*2, 20, 80, 100);
  12. break;
  13. case 3:
  14. model.frame = CGRectMake(20,40 + model.frame.size.height, 80, 100);
  15. break;
  16. case 4:
  17. model.frame = CGRectMake(40 + model.frame.size.width, 40 + model.frame.size.height, 80, 100);
  18. break;
  19. case 5:
  20. model.frame = CGRectMake(60 + model.frame.size.width*2, 40 + model.frame.size.height, 80, 100);
  21. break;
  22. default:
  23. break;
  24. }
  25. [_scrollView addSubview:model];
  26. [_displayedItems addObject:model];
  27. model.tag = 1;
  28. break;
  29. }
  30. }
  31. }

2)delete按钮:

  1. //添加删除按钮
  2. UIButton *deleteButton = [[UIButton alloc] initWithFrame: CGRectMake(_width/5, _height/10, 40, 40)];
  3. [deleteButton setImage:[UIImage imageNamed:@"delete"] forState:UIControlStateNormal];
  4. [deleteButton addTarget:self action:@selector(delete) forControlEvents:UIControlEventTouchUpInside];
  5. [self.view addSubview:deleteButton];

delete方法:

  1. -(void)delete{
  2. Model *model = _displayedItems.lastObject;
  3. [model removeFromSuperview];
  4. model.tag = 0;
  5. [model resetModel];
  6. [_displayedItems removeObject:model];
  7. }

嗯,由于这里为了方便,所以添加控件时的位置判断直接写死了,所以还有待改进。以上就是用按钮添加控件这个demo的主要部分,另外还有那个背景图片的模糊处理使用的是UIVisualEffectView类实现的,在此不详述了。

代码不足之处:

1、位置判断写死了
2、模型其实建一个类就够了,Item类有点多余

进阶方案:

1、通过拖动图标放置在父视图任何位置
2、点击控件文字显示于图片之上,图片成为背景并虚化

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号