您的位置:首页 > 产品设计 > UI/UE

iOS开发-------汤姆猫实例(UIImageView)

2015-09-08 09:01 459 查看
由于一直忙于学习新的iOS的UI方面的知识,因为耽误了更新博客,现在开始,我会不断地进行整理,相信学过一段时间,再回来整理,目的性以及应用方面会比之前更好一点,对于objc的知识,我也会以复习的形式更新博客。

首先来看一下做好之后的页面吧,字图结合会让人更加的有动力:



汤姆猫 这个实例是我刚开始学习UI的时候觉得很高档的一个项目,觉得很神奇,相信刚开始接触的UI的初学者来讲同样,通过这里,其实现在看来,那个项目是很简单的,主要是应用了UIImageView 和 UIButton 的应用。

在UIImageView 中有一个数组属性 NSArray * animationImages,用来存放执行动画的UIImage的数组。

该动画不是以前view移动执行的动画(这个方法在以后的复习总结中会提到),这里的动画执行的原理是通过不断地更换UIImageView的背景图片,利用人的眼睛的视觉漏洞,营造一个动画的效果,原理同我们看的动画是一个,通过不断的刷新,达到动画的效果。当然,这个更换背景图片的过程不需要我们自己写,苹果也给我们封装好了这个方法:

通过方法:-(void)startAnimating;来执行动画

作为程序员,只有文字以及配图,没有代码是多可笑的,下面是楼主完成这个实例用的代码:

首先是头文件(因为基本用的是objc的延展语言特性,所以头文件中不包含任何东西,语言特性也会在以后的复习博客中提到)

//
//  ViewController.h
//  20150816_iOS_汤姆猫
//
//  Created by YueWen on 15/8/16.
//  Copyright (c) 2015年 YueWen. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@end


最重要的是实现的.m文件

//
//  ViewController.m
//  20150816_iOS_汤姆猫
//
//  Created by YueWen on 15/8/16.
//  Copyright (c) 2015年 YueWen. All rights reserved.
//

#import "ViewController.h"
#define EAT 40       //吃东西的图片的个数
#define FART 28      //放P的图片的个数
#define DRINK 81     //喝牛奶的图片的个数
#define ARGRY 26     //生气的图片的个数
#define CYMBAL 13    //敲锣的图片的个数
#define PIE 24       //扔东西的图片的个数
#define SCRATCH 56   //挠人的图片的个数
#define KNOCKOUT 81  //敲晕的图片的个数
#define FOOTLEFT 30  //左脚被点的图片个数
#define FOOTRIGHT 30 //右键被点的图片的个数
#define ANGRY 26     //生气时候的图片的个数

#define RATE 0.12    //每张图片显示的时间

@interface ViewController ()

@property(nonatomic,strong)UIButton * eatButton;//吃东西的按钮
@property(nonatomic,strong)UIButton * fartButton;//放P的按钮
@property(nonatomic,strong)UIButton * drinkButton;//喝东西的按钮
@property(nonatomic,strong)UIButton * scratchButton;//挠人的按钮
@property(nonatomic,strong)UIButton * pieButton;//扔东西的按钮
@property(nonatomic,strong)UIButton * cymbalButton;//敲锣的按钮

@property(nonatomic,strong)UIButton * knockoutButton;//被敲晕的按钮
@property(nonatomic,strong)UIButton * footleftButton;//左脚被点的按钮
@property(nonatomic,strong)UIButton * footrightButton;//右脚被点的按钮
@property(nonatomic,strong)UIButton * angryButton;//生气的按钮

@property(nonatomic,strong)UIImageView * mainView;

//按钮的动作回调监听
-(void)clickButton:(id) sender;

//开启动画的方法打包
-(void)play:(NSString *)picName Count:(int)count;

//自定义初始化按钮的方法
-(UIButton *)allocButtonpicName:(NSString *)picName
myCGRect:(CGRect)rect
myTag:(NSInteger)tag;

@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];

//初始化主页面
self.mainView = [[UIImageView alloc] initWithFrame:[UIScreen mainScreen].applicationFrame];
UIImage * mainImage = [UIImage imageNamed:@"angry_00.jpg"];
self.mainView.image = mainImage;

//初始化吃东西按钮

self.eatButton = [self allocButtonpicName:@"eat.png"
myCGRect:CGRectMake(10, 400, 60, 60)
myTag:1];

//初始化放P按钮
self.fartButton = [self allocButtonpicName:@"fart.png"
myCGRect:CGRectMake(10, 470, 60, 60)
myTag:2];

//初始化喝牛奶按钮
self.drinkButton = [self allocButtonpicName:@"drink.png"
myCGRect:CGRectMake(10, 540, 60, 60)
myTag:3];

//初始化挠人按钮
self.scratchButton = [self allocButtonpicName:@"scratch.png"
myCGRect:CGRectMake(305, 400, 60, 60)
myTag:4];

//初始化扔东西按钮
self.pieButton = [self allocButtonpicName:@"pie.png"
myCGRect:CGRectMake(305, 470, 60, 60)
myTag:5];

//初始化敲锣的按钮
self.cymbalButton = [self allocButtonpicName:@"cymbal.png"
myCGRect:CGRectMake(305, 540, 60, 60)
myTag:6];

//初始化被敲晕的按钮
self.knockoutButton = [self allocButtonpicName:nil
myCGRect:CGRectMake(70, 120, 230, 230)
myTag:7];

//初始化左脚的按钮
self.footleftButton = [self allocButtonpicName:nil
myCGRect:CGRectMake(135, 605, 40, 40)
myTag:8];
//初始化右脚的按钮
self.footrightButton = [self allocButtonpicName:nil
myCGRect:CGRectMake(195, 605, 40, 40)
myTag:9];

//初始化生气的按钮
self.angryButton = [self allocButtonpicName:nil
myCGRect:CGRectMake(250, 520, 40, 80)
myTag:10];

//主面板添加汤姆猫主页面
[self.view addSubview:self.mainView];
[self.view addSubview:self.eatButton];
[self.view addSubview:self.fartButton];
[self.view addSubview:self.drinkButton];
[self.view addSubview:self.scratchButton];
[self.view addSubview:self.pieButton];
[self.view addSubview:self.cymbalButton];

[self.view addSubview:self.footleftButton];
[self.view addSubview:self.footrightButton];
[self.view addSubview:self.knockoutButton];
[self.view addSubview:self.angryButton];

}

- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}

/**
按钮监听(按钮的回调方法)
*/
-(void)clickButton:(id)sender
{
UIButton * button = sender;

//说明是吃东西的按钮被点击
if (button.tag == 1)
{
[self play:@"eat" Count:EAT];
}

//说明是放P的按钮被点击
else if (button.tag == 2)
{
[self play:@"fart" Count:FART];
}

//说明是喝牛奶的按钮被点击
else if (button.tag == 3)
{
[self play:@"drink" Count:DRINK];
}

//说明是挠人的按钮被点击
else if (button.tag == 4)
{
[self play:@"scratch" Count:SCRATCH];
}

//说明是扔东西的按钮被点击
else if(button.tag == 5)
{
[self play:@"pie" Count:PIE];
}

//说明是敲锣的按钮被点击
else if(button.tag == 6)
{
[self play:@"cymbal" Count:CYMBAL];
}

//说明是被敲脑袋的按钮被点击
else if(button.tag == 7)
{
[self play:@"knockout" Count:KNOCKOUT];
}

//说明是被点了左脚(按照人的左右)
else if(button.tag == 8)
{
[self play:@"footRight" Count:FOOTRIGHT];
}

//说明被点了右脚(按照人的左右)
else if(button.tag == 9)
{
[self play:@"footLeft" Count:FOOTLEFT];
}

//被点了尾巴,生气
else if(button.tag == 10)
{
[self play:@"angry" Count:ANGRY];
}
}

/**
动画开始播放
*/
-(void)play:(NSString *)picName Count:(int)count
{

//如果正在执行动画
if ([self.mainView isAnimating])
{
return ;//啥也不做
}

//初始化图片数组
NSMutableArray * picArray = [[NSMutableArray alloc]initWithCapacity:2];

for (int i = 0; i < count; i++)
{
//初始化图片名称
NSString * picname = [NSString stringWithFormat:@"%@_%02d.jpg",picName,i];

//初始化路径
NSString * path = [[NSBundle mainBundle] pathForResource:picname ofType:nil];

/*加载图片的另一种方式,这种方式的缺点是将图片读到内存,只有当程序关闭的时候才会释放,这样就会造成很多资源的浪费,消耗内存太大,以至于被苹果out
UIImage * image1 = [UIImage imageNamed:@picName];
*/

//加载图片
UIImage * imageTemp = [UIImage imageWithContentsOfFile:path];

//添加到数组
[picArray addObject:imageTemp];
}

self.mainView.animationImages = picArray;

//设置持续时间
self.mainView.animationDuration = count * RATE;

//重复播放次数
self.mainView.animationRepeatCount = 1;

//开启动画
[self.mainView startAnimating];

//延迟清空
[self.mainView performSelector:@selector(setAnimationImages:) withObject:nil afterDelay:count * RATE];

}

/**
初始化按钮的方法
*/
-(UIButton *)allocButtonpicName:(NSString *)picName
myCGRect:(CGRect)rect
myTag:(NSInteger)tag
{

//初始化按钮
UIButton * button = [[UIButton alloc] initWithFrame:rect];//初始化范围

UIImage * Image = [UIImage imageNamed:picName];//初始化背景图片

button.tag = tag;//初始化tag值

[button setImage:Image forState:UIControlStateNormal];//设置背景图片

[button addTarget:self action:@selector(clickButton:) forControlEvents:UIControlEventTouchUpInside];//添加回调
return button;
}

@end


在当时练习该实例的时候,由于陷入了用storyboard还是纯代码的怪圈中,左右抉择,当时还是选择了用纯代码,以当时的水平,还没有学会屏幕适配,所以用的是绝对的布局,相对布局(屏幕适配)也会在以后的博客中专门解释,这个动画是以iPhone6模拟器达到最好的效果.

以下是UIImageView的常用属性以及方法

/*初始化UIImageView*/

/*该句话的意思是通过一个CGFrame(框架)创建一个UIImageView的对象
*通过一个CGFrame,CGFrame是一个描述大小位置的结构体,(0,0)表示左上角的点在父视图的坐标
*(320,400)分别表示这个UIImageView的宽度和高度
*/
UIImageView * imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 320, 400)];

/*这句话的意思是通过一张图片来创建一个UIImageView对象
*不指定大小的时候会默认按照图片的大小来自动调整
*但是如果不是自动适配屏幕的话,需要告知他的origin坐标,即他的起始的点的坐标
*图片 1.jpg 必须存在该文件的根目录 (后缀是建议加的,因为如果逻辑正确,加后缀是一定对的)
*/
UIImageView * imageView1 = [UIImageView alloc] initWithImage:[UIImage imageNamed:@"1.jpg"];

/*常用属性的介绍*/

//用来存储通过图片变化执行的动画的 图片  默认是nil
//这个属性是一个数组,通过英文可以读出是 动画图片
//汤姆猫的这个实例就是通过应用这个数据的存取图片来完成的
imageView.animationImages = [[NSArray alloc] init];

//是动画的总时间 默认的是 animationImages 的张数 * 1/30 秒
//这个属性的返回值是一个NSTimeIntervel 不懂英语的也应该会知道这个是和时间有关的,说白了起始就是double类型,只不过重定义名称之后,作用以及描述会更加清晰
imageView.animationDuration = 5;

//表示动画重复的次数
//默认是0 ,0 表示 循环播放
imageView.animationRepeatCount = 1;

/*常用方法的介绍*/

/**
*  动画启动,当存储完了图片,想有动画效果的时候,不要忘记要打开动画,用该方法
*/
[imageView startAnimating];

/**
*  动画停止,与上方法相对应
*/
[imageView stopAnimating];

/**
*  返回值是BOOL类型,多用来判断是否是在执行动画
*/
[imageView isAnimating];


如果看到这个文章的人想要汤姆猫的素材,可以在下面留言留下邮箱,我看到肯定会发过去的,谢谢

源代码:

GitHub: https://github.com/YRunIntoLove/TomCat
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: