AJ学IOS(44)之网易彩票自定义图片在右边的Button_弹出view_ios6,7简单适配
2015-11-29 00:43
731 查看
AJ分享,必须精品
注意图里面了吗,其实那个效果做起来真的很简单,在iOS中苹果给我们封装的很好,关键是那个按钮
系统的按钮的图片是在左边的,这里我们需要把他调整到右边,然后呢需要我们自己做一下操作。
这里上面代码中写的很清楚了,不多说了就,需要注意的是,我们在算title的长度的时候出现了一些状况,那就是iOS6里面没有这个方法,以及xcode4.5版本会编译出错的问题,在这里做了iOS6,7的适配以及编译器的适配:
(iOS7)这个是宏,在pch文件里面有定义
具体如何重写的实现自定义图片在右边的button
看NYTitleButton.m(在上面)
懒加载contentView 并且在开始调用的适合(viewDidLoad)中设置隐藏。
在点击按钮时候设置隐藏为no或yes,这里加了两个动画而已
效果:
注意图里面了吗,其实那个效果做起来真的很简单,在iOS中苹果给我们封装的很好,关键是那个按钮
系统的按钮的图片是在左边的,这里我们需要把他调整到右边,然后呢需要我们自己做一下操作。
代码:
话不多说,先把所有代码放上来。能看懂就不用看别的了。(这么详细的注释,看不懂才怪。。)弹出view:NYBuyController.m
[code]// // NYBuyController.m // 彩票lottery // // Created by apple on 15-5-10. // Copyright (c) 2015年 znycat. All rights reserved. // #import "NYBuyController.h" #import "NYTitleButton.h" @interface NYBuyController () - (IBAction)titleBtnOnClick:(NYTitleButton *)titleBtn; // 定义变量记录当前按钮的状态 @property (nonatomic, assign, getter = isOpen) BOOL open; @property (nonatomic, weak) UIView *contentView; @end @implementation NYBuyController /**懒加载,点击标题弹出的view*/ -(UIView *)contentView { if (_contentView == nil) { // 添加将来需要显示的View UIView *contentView = [[UIView alloc] init]; contentView.backgroundColor = [UIColor greenColor]; contentView.frame = CGRectMake(0, 64, 320, 200); [self.view addSubview:contentView]; _contentView = contentView; // 隐藏该View } return _contentView; } - (void)viewDidLoad { [super viewDidLoad]; self.contentView.hidden = YES; } - (IBAction)titleBtnOnClick:(NYTitleButton *)titleBtn { if (!self.isOpen) {// 没有打开 [UIView animateWithDuration:1.0 animations:^{ // 1.旋转按钮上的尖尖 titleBtn.imageView.transform = CGAffineTransformMakeRotation(M_PI); }]; // 改变当前按钮的状态 CATransition *ca = [CATransition animation]; ca.type = @"cube"; [self.contentView.layer addAnimation:ca forKey:nil]; self.open = YES; // 显示内容view self.contentView.hidden = NO; }else // 已经打开 { [UIView animateWithDuration:1.0 animations:^{ // 1.旋转按钮上的尖尖 titleBtn.imageView.transform = CGAffineTransformIdentity; }]; // 改变当前按钮的状态 //添加动画 CATransition *ca = [CATransition animation]; ca.type = @"cube"; [self.contentView.layer addAnimation:ca forKey:nil]; self.open = NO; // 隐藏内容View self.contentView.hidden = YES; } } @end
:自定义图片在右边的Button NYTitleButton.m
[code]// // NYTitleButton.m // 彩票lottery // // Created by apple on 15-5-10. // Copyright (c) 2015年 znycat. All rights reserved. // #import "NYTitleButton.h" @interface NYTitleButton () @property (nonatomic, strong) UIFont *myFont; @end @implementation NYTitleButton -(id)initWithCoder:(NSCoder *)aDecoder { if (self = [super initWithCoder:aDecoder]) { [self setup]; } return self; } -(id)initWithFrame:(CGRect)frame { if (self = [super initWithFrame:frame]) { [self setup]; } return self; } -(void)setup { // 记录按钮标题的字体 self.myFont = [UIFont systemFontOfSize:16]; // 设置标题的字体 self.titleLabel.font = self.myFont; // 设置按钮的图片显示的内容默认为剧中(为了不拉伸) self.imageView.contentMode = UIViewContentModeCenter; } // 用于返回按钮上标题的位置, 传入按钮的rect - (CGRect)titleRectForContentRect:(CGRect)contentRect { CGFloat titleX = 0; CGFloat titleY = 0; CGFloat titleH = contentRect.size.height; // 获取当前按钮上的文字 // [self titleForState:UIControlStateNormal]; NSString *title = self.currentTitle; CGSize maxSize = CGSizeMake(MAXFLOAT, MAXFLOAT); NSMutableDictionary *md = [NSMutableDictionary dictionary]; md[NSFontAttributeName] = self.myFont; // 计算文字的范围 CGFloat titleW = 0; // 判断是否是xcode5 , 如果是就编译一下代码, 如果不是就不编译 #ifdef __IPHONE_7_0 if (iOS7) { // 是IOS7 CGRect titleRect = [title boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:md context:nil]; titleW = titleRect.size.width; }else { // 非IOS7 CGSize titleSize = [title sizeWithFont:self.myFont]; titleW = titleSize.width; } #else // XCODE4 CGSize titleSize = [title sizeWithFont:self.myFont]; titleW = titleSize.width; #endif return CGRectMake(titleX, titleY, titleW, titleH); } - (CGRect)imageRectForContentRect:(CGRect)contentRect { CGFloat imageY = 0; CGFloat imageH = contentRect.size.height; CGFloat imageW = 16; // 图片的X = 按钮的宽度 - 图片宽度 CGFloat imageX = contentRect.size.width - imageW; return CGRectMake(imageX, imageY, imageW, imageH); } @end
iOS6,7简单适配 文件: (Prefix.pch)
[code] #define iOS7 ([[UIDevice currentDevice].systemVersion doubleValue] >= 7.0)
具体实现
把按钮图片放右边(自定义图片在右边的按钮)
要想实现自定义按钮位置 主要是重写下面两个方法[code]- (CGRect)titleRectForContentRect:(CGRect)contentRect; - (CGRect)imageRectForContentRect:(CGRect)contentRect;
这里上面代码中写的很清楚了,不多说了就,需要注意的是,我们在算title的长度的时候出现了一些状况,那就是iOS6里面没有这个方法,以及xcode4.5版本会编译出错的问题,在这里做了iOS6,7的适配以及编译器的适配:
(iOS7)这个是宏,在pch文件里面有定义
#ifdef __IPHONE_7_0是Availability.h里的 xcode4.5里面没有
[code]#ifdef __IPHONE_7_0 if (iOS7) { // 是IOS7 CGRect titleRect = [title boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:md context:nil]; titleW = titleRect.size.width; }else { // 非IOS7 CGSize titleSize = [title sizeWithFont:self.myFont]; titleW = titleSize.width; } #else // XCODE4 CGSize titleSize = [title sizeWithFont:self.myFont]; titleW = titleSize.width; #endif
具体如何重写的实现自定义图片在右边的button
看NYTitleButton.m(在上面)
弹出view
这个没啥好说的,就是开始定义一个view,然后设置hidden 看代码懒加载contentView 并且在开始调用的适合(viewDidLoad)中设置隐藏。
[code]/**懒加载,点击标题弹出的view*/ -(UIView *)contentView { if (_contentView == nil) { // 添加将来需要显示的View UIView *contentView = [[UIView alloc] init]; contentView.backgroundColor = [UIColor greenColor]; contentView.frame = CGRectMake(0, 64, 320, 200); [self.view addSubview:contentView]; _contentView = contentView; // 隐藏该View } return _contentView; } - (void)viewDidLoad { [super viewDidLoad]; self.contentView.hidden = YES; }
在点击按钮时候设置隐藏为no或yes,这里加了两个动画而已
[code]- (IBAction)titleBtnOnClick:(NYTitleButton *)titleBtn { if (!self.isOpen) {// 没有打开 [UIView animateWithDuration:1.0 animations:^{ // 1.旋转按钮上的尖尖 titleBtn.imageView.transform = CGAffineTransformMakeRotation(M_PI); }]; // 改变当前按钮的状态 CATransition *ca = [CATransition animation]; ca.type = @"cube"; [self.contentView.layer addAnimation:ca forKey:nil]; self.open = YES; // 显示内容view self.contentView.hidden = NO; }else // 已经打开 { [UIView animateWithDuration:1.0 animations:^{ // 1.旋转按钮上的尖尖 titleBtn.imageView.transform = CGAffineTransformIdentity; }]; // 改变当前按钮的状态 //添加动画 CATransition *ca = [CATransition animation]; ca.type = @"cube"; [self.contentView.layer addAnimation:ca forKey:nil]; self.open = NO; // 隐藏内容View self.contentView.hidden = YES; } }
动画
这个搜easy[code]//添加动画 CATransition *ca = [CATransition animation]; ca.type = @"cube"; [self.contentView.layer addAnimation:ca forKey:nil];
相关文章推荐
- AJ学IOS(43)之网易彩票底部自定义TabBar实现切换
- iOS学习和开发的一些感触
- iOS开发>学无止境 - 沙盒和文件操作(汇总)
- iOS开发>学无止境 - NSFileManager文件操作的十个小功能
- iOS开发>学无止境 - 后台定位上传的代码实践
- IOS学习笔记23—多线程之NSThread、NSOperation、NSInvocationOperation
- iOS开发>学无止境 - 如何正确的绘制1像素的线
- iOS开发>学无止境 - 只会左键断点?是时候试试这样那样断点了
- 一个轻量级iOS安全框架:SSKeyChain
- iOS摇一摇
- iOS开发>学无止境 - 加速Table Views开发的10个建议
- iOS进阶之runtime(1)开篇--初入江湖
- iOS开发>学无止境 - 关于iOS多线程,你看我就够了
- iOS开发>学无止境 - 保存照片到系统相册(Photo Album)
- iOS开发>学无止境 - 新浪微博iOS底部功能按钮简单实现
- iOS开发>学无止境 - 保存照片到自己创建的相簿
- ios之自定义导航栏背景,标题和返回按钮文字颜色
- iOS开发>学无止境 - 遍历Model类的属性并完善使用Runtime给Model类赋值
- iOS开发>学无止境 - 6个iOS图片文本设计的小技巧
- iOS开发>学无止境 - 彩色TabBar切换动画实现