猫猫学iOS(四十四)之网易彩票自定义图片在右边的Button_弹出view_ios6,7简单适配

猫猫分享,必须精品

原创文章,欢迎转载。转载请注明:翟乃玉的博客

地址:http://blog.csdn.net/u013357243?viewmode=contents

效果:

注意图里面了吗,其实那个效果做起来真的很简单,在iOS中苹果给我们封装的很好,关键是那个按钮

系统的按钮的图片是在左边的,这里我们需要把他调整到右边,然后呢需要我们自己做一下操作。

代码:

话不多说,先把所有代码放上来。能看懂就不用看别的了。(这么详细的注释,看不懂才怪。。)

弹出view:NYBuyController.m

//
//  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

//
//  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)


#define iOS7 ([[UIDevice currentDevice].systemVersion doubleValue] >= 7.0)

具体实现

把按钮图片放右边(自定义图片在右边的按钮)

要想实现自定义按钮位置 主要是重写下面两个方法

- (CGRect)titleRectForContentRect:(CGRect)contentRect;
- (CGRect)imageRectForContentRect:(CGRect)contentRect;

这里上面代码中写的很清楚了,不多说了就,需要注意的是,我们在算title的长度的时候出现了一些状况,那就是iOS6里面没有这个方法,以及xcode4.5版本会编译出错的问题,在这里做了iOS6,7的适配以及编译器的适配:

(iOS7)这个是宏,在pch文件里面有定义

#ifdef __IPHONE_7_0 是Availability.h里的 xcode4.5里面没有

#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)中设置隐藏。

/**懒加载,点击标题弹出的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,这里加了两个动画而已

- (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,在前面有http://blog.csdn.net/u013357243/article/details/45583423

//添加动画
            CATransition *ca = [CATransition animation];
            ca.type = @"cube";
            [self.contentView.layer addAnimation:ca forKey:nil];
时间: 2024-11-05 11:50:28

猫猫学iOS(四十四)之网易彩票自定义图片在右边的Button_弹出view_ios6,7简单适配的相关文章

(素材源码)猫猫学IOS(十四)UI之UITableView扩充_表格的修改_(增删移动)

猫猫分享,必须精品 素材代码地址:http://download.csdn.net/detail/u013357243/8544315 原文地址:http://blog.csdn.net/u013357243?viewmode=contents 先看效果图 ps:新建iOS交流学习群:304570962 可以加猫猫QQ:1764541256 或则微信znycat 让我们一起努力学习吧. 原文:http://blog.csdn.net/u013357243?viewmode=contents

猫猫学IOS(十四)UI之UITableView扩充_表格的修改_(增删移动)

猫猫分享,必须精品 素材代码地址:http://blog.csdn.net/u013357243/article/details/44727823 原文地址:http://blog.csdn.net/u013357243?viewmode=contents 先看效果图 代码 //ps:新建iOS交流学习群:304570962 可以加猫猫QQ:1764541256 或则微信znycat 让我们一起努力学习吧. 原文:http://blog.csdn.net/u013357243?viewmode=

猫猫学IOS(十八)UI之QQ聊天布局_键盘通知实现自动弹出隐藏_自动回复

猫猫分享,必须精品 素材代码地址:http://blog.csdn.net/u013357243/article/details/45000699 原文地址:http://blog.csdn.net/u013357243?viewmode=contents 先看图片 第一步完成tableView和Cell的架子的图 完善图片 键盘弹出设置后图片: 自动回复图: 粗狂的架子 tableView和Cell的创建 首相tableView为了学习方便就直接用stroyBoard拖拽了,包括一些学习意义不

(素材源码)猫猫学IOS(十八)UI之QQ聊天布局_键盘通知实现自动弹出隐藏_自动回复

猫猫分享,必须精品 素材代码地址:http://download.csdn.net/detail/u013357243/8585703 原文地址:http://blog.csdn.net/u013357243?viewmode=contents 先看图片 第一步完成tableView和Cell的架子的图 完善图片 键盘弹出设置后图片: 自动回复图: 粗狂的架子 tableView和Cell的创建 首相tableView为了学习方便就直接用stroyBoard拖拽了,包括一些学习意义不大的图片等等

猫猫学IOS(十五)UI之曾经大热的打砖块小游戏

猫猫分享,必须精品 素材代码地址:http://blog.csdn.net/u013357243/article/details/44814523 原文地址:http://blog.csdn.net/u013357243?viewmode=contents !素材代码里面有我写的全部代码,注释齐全,方便学习 先看效果图 代码 //ps:新建iOS交流学习群:304570962 可以加猫猫QQ:1764541256 或则微信znycat 让我们一起努力学习吧. 原文:http://blog.csd

(素材源码)猫猫学IOS(十五)UI之曾经大热的打砖块小游戏

猫猫分享,必须精品 素材代码地址:http://download.csdn.net/detail/u013357243/8555567 原文地址:http://blog.csdn.net/u013357243?viewmode=contents !素材代码里面有我写的全部代码,注释齐全,方便学习 先看效果图 ps:新建iOS交流学习群:304570962 可以加猫猫QQ:1764541256 或则微信znycat 让我们一起努力学习吧. 原文:http://blog.csdn.net/u0133

猫猫学IOS(十六)UI之XIB自定义Cell实现团购UI

猫猫分享,必须精品 素材代码地址:http://blog.csdn.net/u013357243/article/details/44926809 原文地址:http://blog.csdn.net/u013357243?viewmode=contents 先看效果图 自定义Cell 本次主要是自定义Cell的学习 实现自定义Cell主要有三种方法:按照使用的频繁度排序: XIB > 纯代码 > StoryBoard XIB的定义步骤 1> 新建HMTgCell.xib 2> 拽一

(素材源码)猫猫学IOS(十六)UI之XIB自定义Cell实现团购UI

猫猫分享,必须精品 素材代码地址:http://download.csdn.net/detail/u013357243/8572001 原文地址:http://blog.csdn.net/u013357243?viewmode=contents 先看效果图 自定义Cell 本次主要是自定义Cell的学习 实现自定义Cell主要有三种方法:按照使用的频繁度排序: XIB > 纯代码 > StoryBoard XIB的定义步骤 1> 新建HMTgCell.xib 2> 拽一个需要自定义

猫猫学IOS(十二)UI之UITableView学习(上)LOL英雄联盟练习

猫猫分享,必须精品 素材代码地址:http://blog.csdn.net/u013357243/article/details/44706671 原文地址:http://blog.csdn.net/u013357243?viewmode=contents 先看效果图 源代码 NYViewController的代码 //ps:新建iOS交流学习群:304570962 可以加猫猫QQ:1764541256 或则微信znycat 让我们一起努力学习吧. 原文:http://blog.csdn.net