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、点击控件文字显示于图片之上,图片成为背景并虚化

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

(0)

相关推荐

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

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

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

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

  • 学习iOS开关按钮UISwitch控件

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

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

    本文实例为大家分享了iOS通过按钮添加和删除控件,供大家参考,具体内容如下 想要达到的效果如下: 先讲一下这个demo主要部分,即通过按钮实现增删图标 分析: 1.每一个图标需要两个数据,即图片和描述用的字符串 ,所以创建一个Item类来封装从plist文件读取出来的数据: 1)plist文件如下: 2)Item类: .h文件 #import <Foundation/Foundation.h> @interface Item : NSObject //描述的字符串 @property(nona

  • Android ScrollView只能添加一个子控件问题解决方法

    本文实例讲述了Android ScrollView只能添加一个子控件问题解决方法.分享给大家供大家参考,具体如下: 有下面一段代码 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent

  • AngularJS仿苹果滑屏删除控件

    AngularJs被用来开发单页面应用程序(SPA),利用AJAX调用配合页面的局部刷新,可以减少页面跳转,从而获得更好的用户体验.Angular的ngView及其对应的强大路由机制,是实现SPA应用的核心模块.本文所说的页面切换指的就是这个路由机制,即根据不同的url展示不同的视图. 前端开发中,为了对列表项进行快捷操作,有时就添个按钮来简单实现.但是,有时会发现按钮影响美观,甚至影响列表行的布局.稍在网上搜索无果,而写此仿苹果滑屏删除控件. 依赖项:angularJS.jQuery 测试浏览

  • JS添加或修改控件的样式(Class)实现方法

    使用js 给页面组件添加class 或者删除class,以及使用jquery的方式添加或修改. <input id="txtBianCeng" type="text" /> .lezhu99 { color:#cc0000; } 添加或修改样式(Class) document.getElementById("txtBianCeng").className = "lezhu99"; 删除样式(Class) docum

  • iOS 封装导航栏及返回,获取控件所在控制器的实例

    当一个项目发现每个返回的按钮都是一样的,并且标题的字体也不是系统的字体,如果每个页面都去设置返回按钮,重新设置标题字体,这样代码看着繁杂,而且会浪费很多时间,这时候就有必要封装一下了... 首先返回按钮,需要在当前页面pop 到上一个页面的话,有两种方式:一 写一个点击代理,在用到的页面实现它,二 就是获取button所在的当前控制器,然后pop出去. 但是第一个方法,还需要到用到的页面去实现代理,也比较麻烦,那就来说第二种 首先获取当前控制器的方法: UINavigationControlle

  • PyQt5中向单元格添加控件的方法示例

    1.简介 pyqt 列表 单元格中 不仅可以添加数据,还可以添加控件. 我们尝试添加下拉列表.一个按钮试试. setItem:将文本放到单元格中 setCellWidget:将控件放到单元格中 setStyleSheet:设置控件的样式(Qt StyleSheet) 2.功能实现 # -*- coding: utf-8 -*- ''' [简介] PyQT5中 单元格里面放控件 ''' import sys from PyQt5.QtWidgets import (QWidget, QTableW

  • JS实现添加,替换,删除节点元素的方法

    本文实例讲述了JS实现添加,替换,删除节点元素的方法.分享给大家供大家参考,具体如下: 一直以来,对于节点操作比较纠结,特别是插入到某某节点之后.居然没有这个方法,以前的我写的方法有问题,是把新节点插入到旧节点的里面去了,还是该用insertBefore方法可以实现 下面是方法: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose

  • ASP.NET动态添加用户控件的方法

    本文实例讲述了ASP.NET动态添加用户控件的方法.分享给大家供大家参考.具体实现方法如下: 为了让用户控件能ASP.NET页面实现动态添加,首先写一个接口IGetUCable,这个接口有一个函数,返回对象类型是UserControl. using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; /// <summary> /// Summar

  • Android中ToggleButton开关状态按钮控件使用方法详解

    ToggleButton开关状态按钮控件使用方法,具体内容如下 一.简介 1. 2.ToggleButton类结构 父类是CompoundButton,引包的时候注意下 二.ToggleButton开关状态按钮控件使用方法 1.新建ToggleButton控件及对象 private ToggleButton toggleButton1; toggleButton1=(ToggleButton) findViewById(R.id.toggleButton1); 2.设置setOnCheckedC

  • 利用jQuery来动态为属性添加或者删除属性的简单方法

    现在做的项目有这样一个需要: 先看图吧^^ 要求: 1.当点击导出Excel方式的时候,如果是"勾选导出"或"不分页导出"时,下面的文本框不能修改 2.当点击"分页导出"时,第一个文本框中的值可以被修改,但第二个文本框中的值不可以手动修改,但会随着第一个文本框中输入的值不断变化 实现: 这个页面我就不说怎么做的了,咱们看重点,如何来实现动态的增加属性值: function changeAttr(){ //onchange事件 添加和去除只读属性

随机推荐