第十八篇：UI編程練習

1.湯母貓：

//
//  ViewController.m
//  tomCat
//
//  Created by 瞿傑 on 15/9/20.
//

#import "ViewController.h"

@interface ViewController ()

@property (weak, nonatomic) IBOutlet UIImageView *tomCat;

- (IBAction)Knockout;
/** 點左腳時反應*/
- (IBAction)FootLeft;
/** 點右腳時反應*/
- (IBAction)footRight;
- (void) runAnimationsOfCatWithAction:(NSString *)act andCount:(int)count;
/** 點喝牛奶時反應*/
- (IBAction)drinkMilke;
/** 點肚子時反應*/
- (IBAction)stomach;
/** 點抓子時反應*/
- (IBAction)scratch;
/** 點喫鳥時反應*/
- (IBAction)eat;
/** 點放屁時反應*/
- (IBAction)fart;
/** 扔東西反應*/
- (IBAction)pie;
/** 抓屏幕時反應*/
- (IBAction)cymbal;
/** 點尾巴時生氣反應*/
- (IBAction)angry;

@end

@implementation ViewController

//- (void)viewDidLoad {
//    [super viewDidLoad];
//    UIButton * bb = [[UIButton alloc]init];
//    bb addTarget:self action:@selector(<#selector#>) forControlEvents:<#(UIControlEvents)#>
//    // Do any additional setup after loading the view, typically from a nib.
//}


- (void)runAnimationsOfCatWithAction:(NSString *)act andCount:(int)count{
    
    if(self.tomCat.isAnimating)
        return ;
    NSMutableArray * pict = [NSMutableArray array];
    
    for (int i=0; i <= count; i++) {
        // 有緩存，內存大
//      UIImage * image = [UIImage imageNamed:[NSString stringWithFormat:@"%@_%02d.jpg",act,i]];
        
        //沒有緩存
        NSString * fileName = [NSString stringWithFormat:@"%@_%02d.jpg",act,i];
        NSBundle * bundle = [NSBundle mainBundle];
        NSString * path = [bundle pathForResource:fileName ofType:nil];
        UIImage * image = [UIImage imageWithContentsOfFile:path];
        [pict addObject:image];
    }
    // 動畫圖片
    self.tomCat.animationImages = pict ;
    
    // 2.設置播放次數(1次)
    self.tomCat.animationRepeatCount = 1;
    
    // 3.設置播放時間
    self.tomCat.animationDuration = pict.count * 0.07;
    
    [self.tomCat startAnimating];
    
    // 4.動畫放完後清除緩存
    CGFloat delay = self.tomCat.animationDuration ;
    [self.tomCat performSelector:@selector(setAnimationImages:) withObject:nil afterDelay:delay];
    
    
}
/** 點頭時反應*/
- (IBAction)Knockout {
    [self runAnimationsOfCatWithAction:@"knockout" andCount:80];
}
/** 點喝牛奶時反應*/
- (IBAction)drinkMilke {
    [self runAnimationsOfCatWithAction:@"drink" andCount:80];
}
/** 點肚子時反應*/
- (IBAction)stomach {
    [self runAnimationsOfCatWithAction:@"stomach" andCount:33];
}
/** 點抓子時反應*/
- (IBAction)scratch {
    [self runAnimationsOfCatWithAction:@"scratch" andCount:55];
}
/** 點喫鳥時反應*/
- (IBAction)eat {
    [self runAnimationsOfCatWithAction:@"eat" andCount:39];
}
/** 點放屁時反應*/
- (IBAction)fart {
    [self runAnimationsOfCatWithAction:@"fart" andCount:27];
}
/** 扔東西反應*/
- (IBAction)pie {
    [self runAnimationsOfCatWithAction:@"pie" andCount:23];
}
/** 抓屏幕時反應*/
- (IBAction)cymbal {
    [self runAnimationsOfCatWithAction:@"cymbal" andCount:12];
}
/** 點尾巴時生氣反應*/
- (IBAction)angry {
    [self runAnimationsOfCatWithAction:@"angry" andCount:25];
}
/** 點左腳時反應*/
- (IBAction)FootLeft {
    [self runAnimationsOfCatWithAction:@"footLeft" andCount:29];
}
/** 點右腳時反應*/
- (IBAction)footRight {
    [self runAnimationsOfCatWithAction:@"footRight" andCount:29];
}
@end

2.圖片瀏覽，純編程添加按件：

//
//  ViewController.m
//  04-圖片瀏覽
//
//  Created by 瞿傑 on 15/9/20.
//  Copyright (c) 2015年 itcast. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@property (nonatomic , strong)IBOutlet UILabel * label1;
@property (nonatomic , strong)IBOutlet UILabel * label2;

@property (nonatomic , strong)IBOutlet UIButton * leftBut;
@property (nonatomic , strong)IBOutlet UIButton * rightBut;

@property (nonatomic , strong)IBOutlet UIButton * image1;

@property (nonatomic , assign) int number;
@property (nonatomic , strong) NSArray * imageData;

- (IBAction)turnImage:(UIButton *)sender;

@end

@implementation ViewController


- (void)viewDidLoad {
    [super viewDidLoad];
    
    //獲得imagDisc.plist文件中的內容
    _imageData = [[NSArray alloc]init];
    NSBundle * bundle = [NSBundle mainBundle];
    //全路徑
    NSString * path = [bundle pathForResource:@"imageDisc" ofType:@"plist"];
    _imageData = [NSArray arrayWithContentsOfFile:path];
    
    
    _label1 = [[UILabel alloc]init];
    [self.view addSubview:_label1];
    _label2 = [[UILabel alloc]init];
    [self.view addSubview:_label2];
    
    _leftBut = [[UIButton alloc]init];
    [self.view addSubview:_leftBut];
    _rightBut = [[UIButton alloc]init];
    [self.view addSubview:_rightBut];
    
    _image1 = [[UIButton alloc]init];
    [self.view addSubview:_image1];
    
    //設置按妞的位置和大小
    _label1.frame = CGRectMake(190, 100, 100, 30);
    _image1.frame = CGRectMake(100, 140, 200, 200);
    _label2.frame = CGRectMake(150, 340, 100, 100);
    _leftBut.frame = CGRectMake(60, 220, 30, 30);
    _rightBut.frame = CGRectMake(310, 220, 30, 30);
    
    //設置背景圖片
    [_leftBut setBackgroundImage:[UIImage imageNamed:@"left_highlighted"] forState:UIControlStateNormal];
    _leftBut.tag = 0 ;
    [_rightBut setBackgroundImage:[UIImage imageNamed:@"right_highlighted"] forState:UIControlStateNormal];
    _rightBut.tag = 1;
    [self turnImage:_rightBut];
    // 兼聽事件
    [_leftBut addTarget:self action:@selector(turnImage:) forControlEvents:UIControlEventTouchUpInside];
    [_rightBut addTarget:self action:@selector(turnImage:) forControlEvents:UIControlEventTouchUpInside];
    
}

#pragma mark 瀏覽圖片
- (void)turnImage:(UIButton *)sender{
    if (0 == sender.tag) {
        self.number-- ;
    }
    else {
        self.number++;
    }
    _leftBut.enabled = (self.number > 1);
    _rightBut.enabled = (self.number < _imageData.count);
    
    NSDictionary * desc = _imageData[self.number-1];
    _label1.text = [NSString stringWithFormat:@"%d/%lu",_number,self.imageData.count];
    
    _label2.text = desc[@"imageDisc"];
    [_image1 setBackgroundImage:[UIImage imageNamed:desc[@"imageName"]] forState:UIControlStateNormal];
    
}


@end

3.UIButton純編程添加和使用：

//
//  ViewController.m
//  03-butten編程用法
//
//  Created by 瞿傑 on 15/9/19.
//  Copyright (c) 2015年 itcast. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@property (nonatomic,strong)IBOutlet UIButton * imageBut;

@property (nonatomic,strong)IBOutlet UIButton * moveUp;
@property (nonatomic,strong)IBOutlet UIButton * moveDow;
@property (nonatomic,strong)IBOutlet UIButton * moveLeft;
@property (nonatomic,strong)IBOutlet UIButton * moveRight;

@property (nonatomic,strong)IBOutlet UIButton * imageBig;
@property (nonatomic,strong)IBOutlet UIButton * imageMin;

- (IBAction)bigAndMinImageBut:(UIButton * )sender;
- (IBAction)moveImageBut:(UIButton *)sender;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
//   
    _imageBut = [[UIButton alloc]init];
    [self.view addSubview:_imageBut];
    _imageBig = [[UIButton alloc]init];
    [self.view addSubview:_imageBig];
    _imageMin = [[UIButton alloc]init];
    [self.view addSubview:_imageMin];
    _moveUp = [[UIButton alloc]init];
    [self.view addSubview:_moveUp];
    _moveDow = [[UIButton alloc]init];
    [self.view addSubview:_moveDow];
    _moveLeft = [[UIButton alloc]init];
    [self.view addSubview:_moveLeft];
    _moveRight = [[UIButton alloc]init];
    [self.view addSubview:_moveRight];
//  imageBut按妞圖片
    [_imageBut setBackgroundImage:[UIImage imageNamed:@"btn_01"] forState:UIControlStateNormal];
    [_imageBut setTitle:@"好笑" forState:UIControlStateNormal];
    [_imageBut setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
    [_imageBut setBackgroundImage:[UIImage imageNamed:@"btn_02"] forState:UIControlStateHighlighted];
    [_imageBut setTitle:@"哈哈哈" forState:UIControlStateHighlighted];
    [_imageBut setTitleColor:[UIColor blueColor] forState:UIControlStateHighlighted];
    _imageBut.frame = CGRectMake(100, 50, 100, 100);

    // 圖片放大縮小按妞
    [_imageBig setBackgroundImage:[UIImage imageNamed:@"plus_normal"] forState:UIControlStateNormal];
    [_imageBig setBackgroundImage:[UIImage imageNamed:@"plus_highlighted"] forState:UIControlStateHighlighted];
    _imageBig.frame = CGRectMake(210, 280, 30, 30);
    _imageBig.tag = 0 ;
    [_imageBig addTarget:self action:@selector(bigAndMinImageBut:) forControlEvents:UIControlEventAllTouchEvents];
    
    [_imageMin setBackgroundImage:[UIImage imageNamed:@"minus_normal"] forState:UIControlStateNormal];
    [_imageMin setBackgroundImage:[UIImage imageNamed:@"minus_highlighted"] forState:UIControlStateHighlighted];
    _imageMin.frame = CGRectMake(250, 280, 30, 30);
    _imageMin.tag = 1;
    [_imageMin addTarget:self action:@selector(bigAndMinImageBut:) forControlEvents:UIControlEventAllTouchEvents];
    
    //圖片的位置移動
//上
    [_moveUp setBackgroundImage:[UIImage imageNamed:@"top_normal"] forState:UIControlStateNormal];
    [_moveUp setBackgroundImage:[UIImage imageNamed:@"top_highlighted"] forState:UIControlStateHighlighted];
    _moveUp.frame = CGRectMake(80, 250, 30, 30);
    _moveUp.tag = 0 ;
    [_moveUp addTarget:self action:@selector(moveImageBut:) forControlEvents:UIControlEventAllTouchEvents];
//下
    [_moveDow setBackgroundImage:[UIImage imageNamed:@"bottom_normal"] forState:UIControlStateNormal];
    [_moveDow setBackgroundImage:[UIImage imageNamed:@"bottom_highlighted"] forState:UIControlStateHighlighted];
    _moveDow.frame = CGRectMake(80, 310, 30, 30);
    _moveDow.tag = 1 ;
    [_moveDow addTarget:self action:@selector(moveImageBut:) forControlEvents:UIControlEventAllTouchEvents];
//左
    [_moveLeft setBackgroundImage:[UIImage imageNamed:@"left_normal"] forState:UIControlStateNormal];
    [_moveLeft setBackgroundImage:[UIImage imageNamed:@"left_highlighted"] forState:UIControlStateHighlighted];
    _moveLeft.frame = CGRectMake(50, 280, 30, 30);
    _moveLeft.tag = 2 ;
    [_moveLeft addTarget:self action:@selector(moveImageBut:) forControlEvents:UIControlEventAllTouchEvents];
//右
    [_moveRight setBackgroundImage:[UIImage imageNamed:@"right_normal"] forState:UIControlStateNormal];
    [_moveRight setBackgroundImage:[UIImage imageNamed:@"right_highlighted"] forState:UIControlStateHighlighted];
    _moveRight.frame = CGRectMake(110, 280, 30, 30);
    _moveRight.tag = 3 ;
    [_moveRight addTarget:self action:@selector(moveImageBut:) forControlEvents:UIControlEventAllTouchEvents];

    
    

//    UIButton * imageButton = [[UIButton alloc]init];
//    imageButton.frame =  CGRectMake(100, 100, 100, 100);
//    // 設置按妞的背景圖片
//    //image.backgroundColor = [UIColor redColor];
//    [imageButton setBackgroundImage:[UIImage imageNamed:@"btn_01"] forState:UIControlStateNormal];
//    [imageButton setBackgroundImage:[UIImage imageNamed:@"btn_02"] forState:UIControlStateHighlighted];
//    
//    //設置在按妞裏的文字標題及顏色
//    [imageButton setTitle:@"好笑" forState:UIControlStateNormal];
//    [imageButton setTitle:@"哈哈" forState:UIControlStateHighlighted];
//    [imageButton setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
//    [imageButton setTitleColor:[UIColor blueColor] forState:UIControlStateHighlighted];
//    
//    // imageButton 中添加事件兼聽，UIControlEventAllTouchEvents這種類型，一點擊就會響應事件，調用print方法
//    [imageButton addTarget:self action:@selector(print) forControlEvents:UIControlEventAllTouchEvents];
////
//    
//    [self.view addSubview:imageButton];
    
    
}

- (void)bigAndMinImageBut:(UIButton *)sender{
    int plus[2] = {10,-10};
    CGRect rect =  _imageBut.frame;
    rect.size.height += plus[sender.tag];
    rect.size.width += plus[sender.tag];
    _imageBut.frame = rect ;
}
-(void)moveImageBut:(UIButton *)sender{
    
    int dir[4][2] = {0,-10,0,10,-10,0,10,0};
    
    // 動畫啓動
    [UIView beginAnimations:nil context:nil];
    // 動畫持續時間
    [UIView setAnimationDuration:1.0];
    
    CGRect tmpRect = _imageBut.frame ;
    
    tmpRect.origin.x += dir[sender.tag][0];
    tmpRect.origin.y += dir[sender.tag][1];
    
    if (tmpRect.origin.x>=0&&tmpRect.origin.y>=0)
        _imageBut.frame = tmpRect ;
    
    // 提交動畫
    [UIView commitAnimations];
}

@end

4.  12宮格式的app下載界面

ViewController.m文件中：

//
//  ViewController.m
//  03-九宮格
//
//  Created by 瞿傑 on 15/9/21.
//

#import "ViewController.h"

@interface ViewController ()

@property (nonatomic , strong)NSArray * app;

@end

@implementation ViewController

- (NSArray *)app{
    //取出app.plist文件中的app的icon與name描述
    if (nil == _app) {
        NSString * path = [[NSBundle mainBundle] pathForResource:@"app.plist" ofType:nil];
        _app = [NSArray arrayWithContentsOfFile:path];
    }
    return _app ;
}
- (void)viewDidLoad {
    [super viewDidLoad];

    
    // 向view中添加self.app.count個子view，第行放 rowViewNumber 個 app
    NSUInteger subViewNumber = self.app.count;
    int rowViewNumber = 3;
    
    //每個子控件appView的H,W
    CGFloat appViewH = 130 ;
    CGFloat appViewW = 90 ;

    //每個子控件appView的行與行之間的間隔爲 rowSpace，列與列之間的間隔 colSpace
    CGFloat rowSpace = 30 ;
    CGFloat colSpace =28 ;
    
    for (int i = 0; i < subViewNumber; i++) {
        
        NSDictionary * appItem = self.app[i]; //第 i 個 app 的描寫是 字典類型
        int row = i / rowViewNumber ; // 第row行
        int col = i % rowViewNumber ; // 第col列
        
        //子view
        CGFloat appViewY = row * (rowSpace + appViewH) + rowSpace ;
        CGFloat appViewX = col * (colSpace + appViewW) + colSpace ;
        UIView * appView = [[UIView alloc] initWithFrame:CGRectMake(appViewX, appViewY, appViewW, appViewH)];
        //appView.backgroundColor = [UIColor blueColor];
        [self.view addSubview:appView];
        
        
        // 在appView上添加圖片
        CGFloat iconImageH = appViewH / 2;
        CGFloat iconImageW = appViewW * 2 / 3;
        CGFloat iconImageY = 0 ;
        CGFloat iconImageX = (appViewW - iconImageW) / 2;
        
        UIImageView * iconImageView = [[UIImageView alloc] initWithFrame:CGRectMake(iconImageX, iconImageY, iconImageW, iconImageH)];
        iconImageView.image = [UIImage imageNamed:[NSString stringWithFormat:appItem[@"icon"]]];
        [appView addSubview:iconImageView];
        
        
        // 在appView上添加Lable,描述app的名字
        CGFloat iconDescLableH = appViewH / 4 ;
        CGFloat iconDescLableW = appViewW ;
        CGFloat iconDescLableY = iconImageH ;
        CGFloat iconDescLableX = 0 ;
        
        UILabel * iconDescLable = [[UILabel alloc]initWithFrame:CGRectMake(iconDescLableX, iconDescLableY, iconDescLableW, iconDescLableH)];
        iconDescLable.textAlignment = NSTextAlignmentCenter ;
        iconDescLable.text = appItem[@"name"];
        iconDescLable.font = [UIFont systemFontOfSize:14];
        //iconDescLable.backgroundColor = [UIColor blackColor];
        [appView addSubview:iconDescLable];
        
        
        // 在appView上添加Button，下載按妞
        CGFloat iconDowloadButH = appViewH / 4 ;
        CGFloat iconDowloadButW = appViewW ;
        CGFloat iconDowloadButY = iconDescLableY + iconDescLableH ;
        CGFloat iconDowloadButX = 0 ;
        
        UIButton * iconDowloadBut = [[UIButton alloc]initWithFrame:CGRectMake(iconDowloadButX, iconDowloadButY, iconDowloadButW, iconDowloadButH)];
        [iconDowloadBut setBackgroundImage:[UIImage imageNamed:@"buttongreen"] forState:UIControlStateNormal];
        [iconDowloadBut setBackgroundImage:[UIImage imageNamed:@"buttongreen_highlighted"] forState:UIControlStateHighlighted];
        [iconDowloadBut setTitle:@"下載" forState:UIControlStateNormal];
        iconDowloadBut.titleLabel.font = [UIFont systemFontOfSize:20];
        [appView addSubview:iconDowloadBut];
        
    }
}


@end

4.1 封裝12宮格式的app下載界面(MVC模式)

Modle :

//
//  QJApp.h
//  03-九宮格
//
//  Created by 瞿傑 on 15/9/21.
//

#import <Foundation/Foundation.h>

@interface QJApp : NSObject

@property (nonatomic , strong)NSString * icon;
@property (nonatomic , strong)NSString * name;

- (instancetype)initWithDict:(NSDictionary * )dic;
+ (instancetype)appWithDic:(NSDictionary * )dic;

@end

//
//  QJApp.m
//  03-九宮格
//
//  Created by 瞿傑 on 15/9/21.
//

#import "QJApp.h"

@implementation QJApp

- (instancetype)initWithDict:(NSDictionary *)dic{
    if (self = [super init]) {
        self.icon = dic[@"icon"];
        self.name = dic[@"name"];
    }
    return self;
}

+ (instancetype)appWithDic:(NSDictionary *)dic{
    return [[self alloc] initWithDict:dic];
}

@end

View:

//
//  QJAppView.h
//  03-九宮格
//
//  Created by 瞿傑 on 15/9/22.
//

#import <UIKit/UIKit.h>
@class QJApp;

@interface QJAppView : UIView

@property (nonatomic , strong) QJApp * app ;

+ (instancetype)appView;
+ (instancetype)appViewWithApp:(QJApp * )app;

@end

//
//  QJAppView.m
//  03-九宮格
//
//  Created by 瞿傑 on 15/9/22.
//

#import "QJAppView.h"
#import "QJApp.h"
@interface QJAppView ()

@property (nonatomic , strong)IBOutlet UIImageView * iconImageView;
@property (nonatomic , strong)IBOutlet UILabel * nameLable ;

@end

@implementation QJAppView

+ (instancetype)appView{
    NSBundle * bundle = [NSBundle mainBundle];
    NSArray * obj = [bundle loadNibNamed:@"QJAppView" owner:nil options:nil];
    QJAppView * appView = [obj lastObject];
    return appView;
}
+ (instancetype)appViewWithApp:(QJApp *)app{
    QJAppView * appView = [self appView];
    appView.app = app;
    return appView ;
}
- (void)setApp:(QJApp *)app{
    _app = app ;
    self.iconImageView.image = [UIImage imageNamed:app.icon];
    self.nameLable.text = app.name ;
}
@end

Controller:

//
//  ViewController.m
//  03-九宮格
//
//  Created by 瞿傑 on 15/9/21.
//

#import "ViewController.h"
#import "QJApp.h"
#import "QJAppView.h"

@interface ViewController ()

@property (nonatomic , strong)NSArray * app;

@end

@implementation ViewController

- (instancetype )app{
    //取出app.plist文件中的app的icon與name描述
    if (nil == _app) {
        
        NSString * path = [[NSBundle mainBundle] pathForResource:@"app.plist" ofType:nil];
        
        _app = [NSArray arrayWithContentsOfFile:path];
        NSMutableArray * appQJapp = [[NSMutableArray alloc]initWithCapacity:self.app.count];
        for (NSDictionary * dic in _app){
            QJApp * qjapp = [QJApp appWithDic:dic];
            [appQJapp addObject:qjapp];
        }
        self.app = appQJapp ;
    }
    return _app ;
}

- (void)viewDidLoad {
    [super viewDidLoad];

    
    // 向view中添加self.app.count個子view，第行放 rowViewNumber 個 app
    NSUInteger subViewNumber = self.app.count;
    int rowViewNumber = 3;
    
    //每個子控件appView的H,W
    CGFloat appViewH = 130 ;
    CGFloat appViewW = 90 ;

    //每個子控件appView的行與行之間的間隔爲 rowSpace，列與列之間的間隔 colSpace
    CGFloat rowSpace = 30 ;
    CGFloat colSpace =28 ;
    
    for (int i = 0; i < subViewNumber; i++) {
        
        QJApp * appItem = self.app[i]; //第 i 個 app 的描寫是 字典類型
        int row = i / rowViewNumber ; // 第row行
        int col = i % rowViewNumber ; // 第col列
        
        //子view
        CGFloat appViewY = row * (rowSpace + appViewH) + rowSpace ;
        CGFloat appViewX = col * (colSpace + appViewW) + colSpace ;
        
        QJAppView * appView = [QJAppView appViewWithApp:appItem];
//      這裏不要用[appView initWithFrame:CGRectMake(X,Y,W,H)]這樣是不行的
        appView.frame = CGRectMake(appViewX, appViewY, appViewW, appViewH);
        
        [self.view addSubview:appView];
        
    }
}

@end