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

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

想要达到的效果如下:

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

分析:

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

1)plist文件如下:

2)Item类:

.h文件

#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文件

#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文件

#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文件

-(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的点击事件:即点击图片文字描述就会从下面升上来,再点击就会降下去的动作:

/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到视图上时显示的是图片,所以需要一个方法来复原到初始状态,即一旦从视图上删除就复原:

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

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

//加载数据到物品
-(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按钮:

创建:

//添加添加按钮
 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方法:

//添加事件
-(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按钮:

//添加删除按钮
 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方法:

-(void)delete{
 Model *model = _displayedItems.lastObject;
 [model removeFromSuperview];
 model.tag = 0;
 [model resetModel];
 [_displayedItems removeObject:model];
}

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

代码不足之处:

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

进阶方案:

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

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

时间: 2019-03-24

iOS 控件封装(又名拧螺丝)之排序按钮的开发

前言 排序按钮是实际开发中比较常见的一种控件,最近我也遇到了,今天简单分享下. 虽然功能简单,但是保证你看了不亏,尤其是对UI这块比较薄弱的同学来说. OK,先看图: 简单描述一下: 按钮一共有三种状态:非选中.选中升序.选中降序. 按钮的三种状态 点击按钮时有两种情况: 按钮原本处于非选中状态,点击,切换到选中状态,其状态变为升序. 按钮原本就处于选中状态,再点击一下,则切换其排序状态(升变降.降变升). 不同状态对应不同的icon,如果没有UI,可以去iconfont 找图标,输入关键词如"

学习iOS开关按钮UISwitch控件

开关按钮UISwitch 在ViewController.h里面 #import <UIKit/UIKit.h> @interface ViewController : UIViewController{ //定义一个开关控件 //作用可以进行状态的改变 //开,关:两种状态可以切换 //所有UIKit框架库中的控件均已UI开头 //苹果官方的控件都定义在UIKit框架库中 UISwitch * _mySwitch; } @property(retain,nonatomic) UISwitch

iOS应用UI开发中的字体和按钮控件使用指南

UILabel的使用 一.初始化 复制代码 代码如下: UILabel *myLabel = [[UILabel alloc] initWithFrame:CGRectMake(40, 40, 120, 44)];      [self.view addSubview:myLabel]; 二.设置文字 ①.设置默认文本 复制代码 代码如下: NSString *text = @"标签文本"; myLabel.text = text; 效果: ②.设置标签文本(此属性是iOS6.0之后才

Android开发中DatePicker日期与时间控件实例代码

一.简介 二.方法 最日常的使用方法了 日期控件DatePicker 时间控件TimePicker 月份从0开始 三.代码实例 效果图: 代码: fry.Activity01 package fry; import com.example.DatePicherDemo1.R; import android.app.Activity; import android.os.Bundle; import android.widget.DatePicker; import android.widget.

Python中PyQt5/PySide2的按钮控件使用实例

在之前的文章中,我们介绍了PyQt5和PySide2中主窗口控件MainWindow的使用.窗口控件的4中基础布局管理.从本篇开始,我们来了解一下PyQt5和PySide2中基础控件的使用,其中包括: 按钮控件: 文本输入控件: 单选控件: 文本标签控件: 多选控件: 列表控件: 等图形界面开发中常用的控件,今天我们来介绍按钮控件. 文章目录 直接实例化一个带文本的按钮控件 不带参数创建的按钮控件 三.获取按钮控件的点击事件 一.创建一个按钮控件 在PyQt5/PySide2中,按钮控件名为QP

iOS的UI开发中Button的基本编写方法讲解

一.简单说明 一般情况下,点击某个控件后,会做出相应反应的都是按钮 按钮的功能比较多,既能显示文字,又能显示图片,还能随时调整内部图片和文字的位置 二.按钮的三种状态 normal(普通状态) 默认情况(Default) 对应的枚举常量:UIControlStateNormal highlighted(高亮状态) 按钮被按下去的时候(手指还未松开) 对应的枚举常量:UIControlStateHighlighted disabled(失效状态,不可用状态) 如果enabled属性为NO,就是处于

VC++中HTControl的CHTButton按钮控件类用法实例解析

本文以实例形式讲解了VC++中HTControl控件类的CHTButton按钮控件类用法,相信对大家更好的理解VC++有一定的帮助.具体内容如下: 一般了解VC++的朋友都知道,VC++ 按钮控件CHTButton隶属HTControl控件组,直接由WIN32 API实现,你可以在SDK,MFC,wxWidget等环境下使用它.支持生成各种类型的按钮,比如:普通按钮,PNG透明按钮,复选框按钮,单选按钮等.使用时请注意,窗体必须动态创建,代码段如下: m_HTBtnClose.Create(75

iOS的UI开发中Modal的使用与主流应用UI结构介绍

Modal简单介绍 一.简单介绍 除了push之外,还有另外一种控制器的切换方式,那就是Modal 任何控制器都能通过Modal的形式展⽰出来 Modal的默认效果:新控制器从屏幕的最底部往上钻,直到盖住之前的控制器为⽌ 二.代码说明 新建一个项目,在Application的代理中添加window和控制器. YYAppDelegate.m文件 复制代码 代码如下: // //  YYAppDelegate.m //  01-modal // //  Created by apple on 14-

详解iOS应用UI开发中的九宫格坐标计算与字典转换模型

九宫格坐标计算 一.要求 完成下面的布局 二.分析 寻找左边的规律,每一个uiview的x坐标和y坐标. 三.实现思路 (1)明确每一块用得是什么view (2)明确每个view之间的父子关系,每个视图都只有一个父视图,拥有很多的子视图. (3)可以先尝试逐个的添加格子,最后考虑使用for循环,完成所有uiview的创建 (4)加载app数据,根据数据长度创建对应个数的格子 (5)添加格子内部的子控件 (6)给内部的子控件装配数据 四.代码示例 复制代码 代码如下: // //  YYViewC

详解iOS的UI开发中控制器的创建方法

控制器的创建 说明:控制器有三种创建方式,下面一一进行说明. 一.第一种创建方式(使用代码直接创建) 1.创建一个空的IOS项目. 2.为项目添加一个控制器类. 3.直接在代理方法中创建一个控制器. 复制代码 代码如下: #import "YYAppDelegate.h" #import "YYViewController.h" @implementation YYAppDelegate - (BOOL)application:(UIApplication *)ap

iOS的UI开发中UITabBarControlle的基本使用教程

UITabBarController的基本使用 一.简单介绍 UITabBarController和UINavigationController类似,UITabBarController也可以轻松地管理多个控制器,轻松完成控制器之间的切换,典型的例子就是QQ.微信等应⽤. 二.UITabBarController的使用 1.使用步骤: (1)初始化UITabBarController (2)设置UIWindow的rootViewController为UITabBarController (3)创

iOS应用开发中的文字选中操作控件UITextView用法讲解

1.创建并初始化 创建UITextView的文件,并在.h文件中写入如下代码: 复制代码 代码如下: #import <UIKit/UIKit.h>        @interface TextViewController : UIViewController <UITextViewDelegate>    {                  UITextView *textView;    }        @property (nonatomic, retain) UITex