IOS自定义UIButton九宫格效果
此篇文章给大家描写如何写自定义九宫格，因为在开发中，这种需求也是常见不少。因此，主要利用UIButton阐述的；
实列不复杂，就两三个步骤完成：
一、定义宽度与高度（self.view）
#define SCREEN_WIDTH [UIScreen mainScreen].bounds.size.width #define SCREEN_HEIGHT [UIScreen mainScreen].bounds.size.height #define JHRGB(r,g,b) [UIColor colorWithRed:(r/255.0) green:(g/255.0) blue:(b/255.0) alpha:1.0] #define JHRandomColor JHRGB(arc4random_uniform(255), arc4random_uniform(255), arc4random_uniform(255))
二、定义九宫格的文字与图片
@property (nonatomic, strong) NSArray * titlesArr;
@property (nonatomic, strong) UILabel * numberLab;
@property (nonatomic, strong) NSArray * titleimg;
-(NSArray *)titlesArr{
if (!_titlesArr) {
_titlesArr = @[@"首页",@"采购",@"文章",@"社区",@"服务",@"扫描",@"定位",@"售后",@"订单"];
}
return _titlesArr;
}
-(NSArray *)titleimg{
if (!_titleimg) {
_titleimg = @[@"me",@"msg",@"meg",@"1",@"2",@"3",@"me",@"2",@"3"];
}
return _titleimg;
}
三、循环出9个UIBtton数据，以及相关样式动态调整
-(void)setButton{
NSInteger totalLoc = 3;//一列三个数
CGFloat W = 50;//宽度
CGFloat H = W;//高度
CGFloat margin=(self.view.frame.size.width-totalLoc * W)/(totalLoc+1);
for (NSInteger i = 0; i < self.titlesArr.count; i++) {//循环体
UIButton * btn = [UIButton buttonWithType:UIButtonTypeCustom];//button的定义
btn.frame = CGRectMake(100, 100, 80, 80);//button大小
[btn setTitle:self.titlesArr[i] forState:UIControlStateNormal];//动态设置button文本
[btn setBackgroundImage:[UIImage imageNamed:self.titleimg[i]] forState:UIControlStateNormal];//动态设置图片
[btn setTitleColor:[UIColor darkGrayColor] forState:0];//文本的颜色
[btn setImageEdgeInsets:UIEdgeInsetsMake(5, 25, 45, 25)];//图片的大小
[btn setTitleEdgeInsets:UIEdgeInsetsMake(80, 0, 5, 0)];//文本的位置
//btn.backgroundColor = [UIColor blueColor];
/*计算frame*/
NSInteger row = i / totalLoc;//行号
NSInteger loc = i % totalLoc;//列号
//0/3=0,1/3=0,2/3=0,3/3=1;
//0%3=0,1%3=1,2%3=2,3%3=0;
CGFloat X= margin + (margin + W) * loc;
CGFloat Y= margin + (margin + H) * row;
btn.frame = CGRectMake(X, Y, W, H);
//设置tag值(这里的tag，只是为了让button的每次点击都有不同的动画效果)
btn.tag = i;
[btn addTarget:self action:@selector(clickBtn:) forControlEvents:UIControlEventTouchUpInside];
[self.lgView.imgview addSubview:btn];
}
}
四、点击按钮的事件监听
-(void)clickBtn:(UIButton *)btn{
NSString *stringInt = [NSString stringWithFormat:@"%ld",(long)btn.tag];
btn.layer.transform = CATransform3DMakeScale(0.5*arc4random_uniform([stringInt floatValue]), 0.5*arc4random_uniform([stringInt floatValue]), 1);
self.numberLab.text = btn.titleLabel.text;
NSLog(@"%@wo dian ji l:",stringInt);
[UIView animateWithDuration:0.5 animations:^{
btn.layer.transform = CATransform3DMakeScale(1, 1, 1);
}];
}
总结：
如下逻辑分析：
1.上面用的是masonry布局，所以我的view容器就没用宽度，高度（写在我的view层里了）。
2.先定义一个View容器
3.在容器里，循环体里面定义button，设置button的属性等。
4.定义相关的数组，如：（文本，图片）
5.点击按钮事件触发函数；
就以上信息需要理解的逻辑，把上面的复制粘贴就可以，项目亲测可以的。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
IOS 九宫格布局实现方法
以前刚开始搞iOS的时候大部分都是通过计算frame来布局视图,搞着搞着貌似都是用自动布局来搞定了,因为自动布局实在太方便.太好用了,所以当我昨天突然回看以前代码的时候突然看到了以前写的九宫格布局,感觉很多东西都忘了,所以今天特意在这里记录一下,并且通过几个简单的宏定义来完成布局的需求,具体大家看代码吧,都有注释 很好懂: // // ButtonContainerView.h // chemuchao // // Created by 遇见远洋 on 16/3/7. // Copyright
-
详解iOS应用UI开发中的九宫格坐标计算与字典转换模型
九宫格坐标计算 一.要求 完成下面的布局 二.分析 寻找左边的规律,每一个uiview的x坐标和y坐标. 三.实现思路 (1)明确每一块用得是什么view (2)明确每个view之间的父子关系,每个视图都只有一个父视图,拥有很多的子视图. (3)可以先尝试逐个的添加格子,最后考虑使用for循环,完成所有uiview的创建 (4)加载app数据,根据数据长度创建对应个数的格子 (5)添加格子内部的子控件 (6)给内部的子控件装配数据 四.代码示例 复制代码 代码如下: // // YYViewC
-
iOS实现手势解锁操作
本文主要介绍通过手势识别实现手势解锁功能,这个方法被广泛用于手机解锁,密码验证,快捷支付等功能实现.事例效果如下所示. 首先,我们先分析功能的实现过程,首先我们需要先看大致的实现过程: 1.加载九宫格页面 2.实现按钮被点击及滑动过程中按钮状态的改变 3.实现滑动过程中的连线 4.绘制完毕后判定密码是否正确, 5.密码判定后实现跳转. 下面我们就来用代码实现上述五个过程. 1.加载九宫格界面 1.1九宫格内控件的分布 3*3 ,我们可以自定义view(包含3*3个按钮),添加到viewContr
-
使用Swift代码实现iOS手势解锁、指纹解锁实例详解
一.手势密码 1. 1.1.用UIButton组成手势的节点. 1.2.当手指接触屏幕时,调用重写的 touchesBegan:withEvent方法(在touchesBegan里调用setNeedsDisplay,这样就会自动调用drawRect方法). 1.3.当手指在屏幕上滑动时,调用重写的touchesEnded:withEvent方法. 这两个方法执行的操作是一样的:通过locationInView获取 触摸的坐标,然后用 CGRectContainsPoint 判断手指是否经过UIB
-
iOS实现九宫格连线手势解锁
本文实例为大家分享了iOS实现九宫格连线手势解锁的具体代码,供大家参考,具体内容如下 Demo下载地址:手势解锁 效果图: 核心代码: // // ClockView.m // 手势解锁 // // Created by llkj on 2017/8/24. // Copyright © 2017年 LayneCheung. All rights reserved. // #import "ClockView.h" @interface ClockView () //存放当前选中的按钮
-
深入解析iOS应用开发中九宫格视图布局的相关计算方法
来看一个简单的例子: 复制代码 代码如下: /* * 总列数 */ NSUInteger totalloc = 3; /* * View的宽高 */ CGFloat shopW = 80; CGFloat shopH = 100; /* * 每个View之间的间隔 */ CGFloat margin = (self.view.frame.size.width - totalloc * shopW) / (totalloc + 1); /* * View的总个数 */ NSUInt
-
关于iOS自带九宫格拼音键盘和Emoji表情之间的一些坑
发现问题 最近产品提了一个需求:要求某个"输入框"禁止输入 Emoji 表情,我们能想到的方案是:在 UITextField 的 textField:shouldChangeCharactersInRange:replacementString: 代理方法中判断即将输入的字符串是否包含 Emoji 表情,如果包含,就在该方法中返回 NO,不允许输入. 关于如何判断一字符串是否包含 Emoji 表情的方法,网上已经有很多代码片段,一般是通过 Unicode 编码范围来判断 ,详见这里:h
-
iOS仿邮箱大师的九宫格手势密码解锁
本文实例为大家分享了iOS手势密码解锁的相关代码,供大家参考,具体内容如下 // // LockView.m // 手势解锁 // // Created by Daniel on 16/4/4. // Copyright © 2016年 Daniel. All rights reserved. // #import "LockView.h" @interface LockView () /** 保存已选中的按钮 */ @property(nonatomic, strong) NSMut
-
iOS实现九宫格自动生成视图
在移动开发里有相当多的时候需要使控件呈现九宫格格式的分布,最常见的如 图案解锁界面: 相册管理界面: 单独创建一个这样界面的步骤相当繁琐,要创建父视图用于控制每一个单独的控件,而控件添加的时候还要判断每一格的位置,而且代码复用性不高,因为每一种九宫格视图的控件边距,控件的宽高不同. 所以,是否可以写一个这样的模块,只需要提供一个子控件的frame就能够生成一个完整的九宫格视图呢? 以下是我的思路: 首先肯定是用一个类来管理整个模块的,所以创建一个UISodokuView类继承于UIScrollV
-
IOS自定义UIButton九宫格效果
此篇文章给大家描写如何写自定义九宫格,因为在开发中,这种需求也是常见不少.因此,主要利用UIButton阐述的: 实列不复杂,就两三个步骤完成: 一.定义宽度与高度(self.view) #define SCREEN_WIDTH [UIScreen mainScreen].bounds.size.width #define SCREEN_HEIGHT [UIScreen mainScreen].bounds.size.height #define JHRGB(r,g,b) [UIColor co
-
iOS自定义UIButton点击动画特效
借鉴相关资料,整理了一个很有意思的button动画效果,iOS自定义UIButton点击动画特效 先看一下效果图: 下面贴上代码: ViewController: #import <UIKit/UIKit.h> @interface ViewController : UIViewController @end #import "ViewController.h" #import "HWButton.h" #define mainW [UIScreen m
-
iOS自定义键盘切换效果
本文实例为大家分享了iOS自定义键盘切换的相关代码,供大家参考,具体内容如下 具体代码如下 - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. self.title = @"小飞哥键盘"; self.textField = [[UITextField alloc] initWithFrame:CGRectMa
-
iOS自定义button抖动效果并实现右上角删除按钮
遇到过这种需求要做成类似与苹果删除软件时的动态效果. 1.长按抖动; 2.抖动时出现一个X; 3.点击x,删除button; 4.抖动时,点击按钮,停止抖动; 下面是我的设计思路: 1.继承UIButton: 2.给button在右上角添加一个按钮: 3.给button添加长按手势: 4.给button添加遮盖,抖动时可以拦截点击事件: 有更好的做法,还请斧正. // .m文件 #import "DZDeleteButton.h" #import "UIView+Extens
-
iOS UISegmentControl实现自定义分栏效果
本文实例为大家分享了iOS UISegmentControl实现自定义分栏效果的具体代码,供大家参考,具体内容如下 iOS 自带的UISegmentControl实现的就是类似上图的效果但是很多用处 一般这两个分栏是两个tableView,需要左右滑动来响应分栏 下面来讲述这样的效果是怎么实现的呢? 主要那里有一根短红线,需要滑动 来切换tableView 先自定义一个SegmentView .h //定义block,用来传递点击的第几个按钮 typedef void (^PassValueBl
-
iOS利用MJRefresh实现自定义刷新动画效果
本文主要介绍iOS 利用MJRefresh实现自定义动画的上拉刷新下拉加载效果,一般的类型(包括更新时间与loading图案)这里不做介绍. 要想实现此功能,首先得有一套load的图片数组. 接下来就是实现过程: 引入头文件: #import "MJRefresh.h" //自定义一个方法实现 - (void)prepareRefresh { NSMutableArray *headerImages = [NSMutableArray array]; for (int i = 1; i
-
iOS自定义collectionView实现毛玻璃效果
先来看看效果图,由于录屏软件不给力,毛玻璃效果不明显,请见谅. 步骤详解: 说下思路,很简单,首先自定义一个collectionView, 重写它的initWithFrame:collectionViewLayout:方法,在这里面做配置,这里用的是AXECollectionView. 与之对应的自定义一个collectionViewCell,在cell里配置操作:设置layer涂层,加载图片等操作,这里用的是AXECollectionViewCell. 最后在需要展示的控制器里调用AXECol
-
ios自定义滑杆效果
本文实例为大家分享了ios自定义滑杆的具体代码,供大家参考,具体内容如下 先让我们看看效果: 主要实现的代码: UIImage *thumbWithLevel(float aLevel) { float INSET_AMT = 1.5f; CGRect baseRect = CGRectMake(0, 0, 40, 100); CGRect thumbRect = CGRectMake(0, 40, 40, 20); UIGraphicsBeginIma
-
iOS 自定义返回按钮保留系统滑动返回功能
先给大家展示下效果图: 1.简介 使用苹果手机,最喜欢的就是用它的滑动返回.作为一个开发者,我们在编写很多页面的时候,总是会因为这样那样的原因使得系统的滑动返回不可用.使用导航栏push出一个控制器,我们在控制器中自定义了一个返回按钮.这样系统默认的滑动返回手势效果就没有了. 2.解决方法 [1]从A这个控制器push到B这个控制器,我们想要自定义B的返回按钮,我们可以在A中设置 self.navigationItem.backBarButtonItem = [[UIBarButtonItem
-
详解iOS自定义UITabBar与布局
在小编整理过的文章iOS项目基本框架搭建中,我们详细说明了如何对TabBarItem的图片属性以及文字属性进行一些自定义配置.但是,很多时候,我们需要修改TabBarItem的图片和文字属性之外,还需要自定义TabBarItem的位置,这样系统自带的TabBar的样式并不能满足我们的项目需求,所以我们需要对系统的UITabBar进行自定义,以达到我们的项目需求.例如新浪微博App的底部tab的item就无法用自带的TabBarItem进行实现,最中间那个[+]发布微博并不是用来切换tab的,而是