ios开发-UI基础-超级猜图

　　[注意]转载时请注明出处博客园-吃唐僧肉的小悟空http://www.cnblogs.com/hukezhu/

　

　　本篇文章介绍一个比较综合的小应用----超级猜图.

　　功能分析:

• • 根据显示的图片,在下面的待选项按钮中选中正确答案按钮,选中的按钮会显示在正确答案按钮中
  • 答案错误,答案颜色变为红色,分数减小
  • 答案正确,答案颜色变为蓝色,两秒自动跳入下一题,分数增加
  • 点击"下一题"可以进入下一个题目
  • 点击"大图",可以放大显示图片,再次点击图片或者背景,图片缩小至原来大小
  • 点击"提示",自动情况答案选项,并显示正确答案的第一个字,并且分数减小　　

　　应用截图:

下面附上完成这个小应用的思路:

　　

1. 通过storyboard设计"超级猜图"的上半部分界面。
    1> 使用UIImageView做背景(最后面的背景图片,首先添加这个)
    2> 分析界面上的控件,显示图片的也使用button,显示内容的使用label,
        下面显示答案按钮和最下面显示待选项按钮的位置使用view
    中间的图片可以点击:用button,button有一个inset:分别设置内部内容距离上左下右有多少不能显示


2. 实现点击"下一题"功能.(最开始状态是没有数据的,首先点击下一题,我们家在数据之后,才能做其他的功能,所以最开始先完成"下一题"的功能)
    * 声明一个index属性来记录当前显示的题目的索引。

    * 当我们点击"下一题"的时候, 从数组中获取对应的题目, 并显示到对应的界面控件上。


    * 解决:最后一题之后再次点击"下一题"索引越界问题。(此处进行判断)

/*    0.判断索引值是否越界,并且弹框
    if (self.index == self.questions.count - 1) {
    //        UIAlertView *alert = [[UIAlertView alloc]initWithTitle:@"恭喜" message:@"过关了" delegate:nil
    //                                             cancelButtonTitle:@"取消" otherButtonTitles:@"A", nil];
    //        [alert show];
    UIActionSheet *acionsheet  = [[UIActionSheet alloc]initWithTitle:@"恭喜" delegate:self cancelButtonTitle:@"取消" destructiveButtonTitle:@"确定" otherButtonTitles:@"A",@"B", nil];
    [acionsheet showInView:self.view];
    
    return;
}

*/


3. 在viewDidLoad中初始化第一个问题（显示第一个问题到界面上）。
    * 设置self.index = -1
    * 手动调用"下一题"按钮的点击事件
        [self next];



4. 实现"查看大图"功能(点击右侧"大图"按钮, 显示大图)

    * 实现思路（步骤）:
        1> 添加一个"阴影"按钮, 因为该"阴影"要实现点击, 所以用"按钮"
        2> 然后再把"头像按钮"显示在"阴影"上面。
        3> 通过动画的方式改变"头像按钮"的frame(位置和尺寸)变成大图效果。
    ** 注意: 取消"自动布局(Auto Layout)"

    ** 点击"遮罩阴影", 回到小图
        1> 通过动画慢慢将"遮罩阴影"的透明度变为0
        2> 通过动画慢慢将"头像图片"的frame修改为原来的位置
        3> 在动画执行完毕后, 移除"遮罩阴影"

    ** 点击图片本身显示大图, 再次点击图片本身显示小图





5. 动态生成"答案按钮"。
    * 思路:
        0> 在点击"下一题"按钮中实现该功能
        1> 创建一个UIView来存放所有的"答案按钮"
        2> 根据每个问题的答案的文字个数来创建按钮
        3> 每次创建按钮之前, 先把旧的按钮都删除
            此处有两种方案:
                1-循环便利数组,执行removefromsuperview
                2-使用makeObjectsPerformSelector:@selector(removeFromSuperview)
        4> 指定每个"答案按钮"的尺寸和中间的margin, 然后计算第一个按钮的x值（marginLeft）。
        5> 在循环中, 计算每个按钮的x值（y值都是0）。



6. 动态生成"待选项按钮"。
    * 思路:
    0> 在点击"下一题"按钮中实现该功能
    1> 创建一个UIView来存放所有的"待选项按钮"
    2> 根据待选项按钮的个数来创建
    3> 清除之前的待选项按钮
    4> 利用九宫格的算法创建待选项按钮

7. 实现"待选按钮"的单击事件
    * 隐藏当前被点击的"待选按钮"
    * 将当前被点击的"待选按钮"的文字显示到"答案按钮"的左起第一个为空的按钮上
    * 如果"答案按钮"已经全部填满了, 不允许再点击"待选按钮"

    ** 注意: 只要父控件不能处理事件, 那么子控件也无法处理事件(另外一种解决方案)。
    1> 如果"答案按钮"文字填满了, 则设置option view禁止与用户交互
        self.optionsView.userInteractionEnabled = NO;

    2> 当用户再次点击"答案按钮"时 或 点击"下一题"后在创建"待选按钮"的时候再次启用option view与用户的交互功能
        self.optionsView.userInteractionEnabled = YES;




8. 实现"答案按钮"的单击事件
    * 设置被点击的"答案按钮"文字为空(nil)
    * 设置与当前被点击的"答案按钮"相对应的"待选按钮"显示出来
    (
     ** 注意:当答案按钮中有两个相同的文字的option按钮时的问题
     ** 解决方案一:
        1> 为每个option按钮设置一个唯一的tag
        2> 在点击某个option按钮的时候, 把option按钮的text和tag都设置到answer按钮上
        3> 在点击answer按钮的时候, 判断answer按钮的文字与tag同时都与某个option按钮匹配时, 再显示这个option按钮
     ** 解决方案二:
        执行判断的时候,并且判断字体的hidden属性为YES
     )
    * 设置所有"答案按钮"的文字颜色为黑色


9. 在"待选按钮"的单击事件中, 判断当前的答案的正确性
    * 每次点击"待选按钮"都需要做判断, 如果答案按钮"满了", 再去判断正确性
    * 如果正确:
    1> 那么设置"答案按钮"的文字颜色为蓝色
    2> 加分
    3> 2秒钟后自动跳转到下一题

    * 如果错误:
    1> 答案按钮的文字设置为红色


10. 点击"提示"按钮
    * 加分
    * 清空所有"答案按钮"的文字（相当于点击了每一个"答案按钮", 不是简单的设置"答案按钮"的文字为nil）
    * 并将正确答案的第一个文字设置到第一个"答案按钮"上(相当于正确答案的option按钮被点击了), 通过调用字符串的substringToIndex:来截取第一个字符的字符串

[注意]转载时请注明出处博客园-吃唐僧肉的小悟空http://www.cnblogs.com/hukezhu/

 [注意]转载时请注明出处博客园-吃唐僧肉的小悟空http://www.cnblogs.com/hukezhu/

附上应用代码结构图:

　　

storyboard拖线图:

 附上源代码:

KZAppModel.h

//
//  KZAppModel.h
//  UI基础-04-05-16
//
//  Created by hukezhu on 15/5/16.
//
//

#import <Foundation/Foundation.h>

@interface KZAppModel : NSObject
@property (nonatomic,copy) NSString *answer;
@property (nonatomic,copy) NSString *icon;
@property (nonatomic,copy) NSString *title;
@property (nonatomic,strong)NSArray *options;

- (instancetype)initWithDict:(NSDictionary *)dict;

+ (instancetype)appWithDict:(NSDictionary *)dict;
@end

KZAppModel.m

//
//  KZAppModel.m
//  UI基础-04-05-16
//
//  Created by hukezhu on 15/5/16.
//
//

#import "KZAppModel.h"

@implementation KZAppModel
-(instancetype)initWithDict:(NSDictionary *)dict{

    if (self = [super init]) {
        self.answer = dict[@"answer"];
        self.icon = dict[@"icon"];
        self.title = dict[@"title"];
        self.options = dict[@"options"];
    }
    return self;
}

+ (instancetype)appWithDict:(NSDictionary *)dict{

    return  [[self alloc]initWithDict:dict];
}
@end

ViewController.m

//
//  ViewController.m
//  01-超级猜图
//
//  Created by hukezhu on 15/5/16.
//  [注意]转载时请注明出处博客园-吃唐僧肉的小悟空http://www.cnblogs.com/hukezhu/
//

#import "ViewController.h"
#import "KZAppModel.h"

@interface ViewController ()
@property (nonatomic,assign)int index;
@property (weak, nonatomic) IBOutlet UIButton *big;
@property (weak, nonatomic) IBOutlet UIButton *head;
@property (weak, nonatomic) IBOutlet UILabel *noLabel;
@property (weak, nonatomic) IBOutlet UILabel *titleLabel;
- (IBAction)nextClick;
@property (weak, nonatomic) IBOutlet UIView *answerView;
@property (weak, nonatomic) IBOutlet UIView *optionView;
@property (weak, nonatomic) IBOutlet UIButton *coinBtn;
- (IBAction)tipClick;

- (IBAction)bigImg;
- (IBAction)headClick;

@property (nonatomic,strong) UIButton *cover;
@property (nonatomic,strong)NSArray *questions;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.index = -1;
    [self nextClick];

}

/**
 *  懒记载
 */
- (IBAction)nextClick {
    //判断当前索引,如果到达数据数组长度减1
    if (self.index == self.questions.count - 1  ) {
        UIAlertView *alert = [[UIAlertView alloc]initWithTitle:@"提示" message:@"已经到达最后一张图片" delegate:nil cancelButtonTitle:@"取消" otherButtonTitles:@"好的", nil];
        [alert show];
        return;
    }
    
    self.index++;
    
    //创建一个模型,存储数据
    KZAppModel *appModel = self.questions[self.index];

    //添加数据
    [self addData:appModel];
    
    //添加答案按钮
    [self addAnswerBtn:appModel];
    
    //添加待选项按钮
    [self addOptionBtn:appModel];
}



/**
 *  添加待选项按钮
 *
 *  @param appModel 数据模型
 */
- (void)addOptionBtn:(KZAppModel *)appModel{

    //清除之前的待选项按钮
    [self.optionView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];
    //定义每行显示的待选项按钮的个数
    int totalCol = 7;
    CGFloat optionW = 40;
    CGFloat optionH = 40;
    CGFloat optionMargin = 10;
    //左边距
    CGFloat leftOptionMargin = (self.optionView.frame.size.width - totalCol * optionW - (totalCol - 1 )*optionMargin)*0.5;
    //遍历数组,创建待选项按钮(九宫格的创建方法)
    for (int i = 0; i < appModel.options.count; i++) {
        
        UIButton *optionBtn = [[UIButton alloc]init];
        //行号
        int row = i  / totalCol;
        //列号
        int col = i % totalCol;
        CGFloat optionX = leftOptionMargin + col * (optionMargin + optionW);
        CGFloat optionY = optionMargin + row * (optionMargin + optionH);
        optionBtn.frame = CGRectMake(optionX, optionY, optionW, optionH);
        //设置两种状态下的背景图片
        [optionBtn setBackgroundImage:[UIImage imageNamed:@"btn_option"] forState:UIControlStateNormal];
        [optionBtn setBackgroundImage:[UIImage imageNamed:@"btn_option_highlighted"] forState:UIControlStateHighlighted];
        //给这些待选项按钮添加文字
        [optionBtn setTitle:appModel.options[i] forState:UIControlStateNormal];
        //设置字体颜色
        [optionBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        //将按钮添加到optionView中
        [self.optionView addSubview:optionBtn];
        
        //创建待选项按钮的点击方法
        [optionBtn addTarget:self action:@selector(optionClick:) forControlEvents:UIControlEventTouchUpInside];
        
    }

}


/**
 *  添加答案按钮
 *
 *  @param appModel 模型数据
 */
- (void)addAnswerBtn:(KZAppModel *)appModel{

    //清除之前的答案按钮
    [self.answerView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];
    
    
    
    CGFloat answerW = 30;
    CGFloat answerH = 30;
    CGFloat answerY = 0;
    CGFloat margin = 10;
    CGFloat leftMargin = (self.answerView.frame.size.width - appModel.answer.length *(margin + answerW))*0.5;
    //循环遍历数组,创建答案按钮
    for(int i = 0;  i < appModel.answer.length; i++){
        
        UIButton *answerBtn = [[UIButton alloc]init];
        
        CGFloat answerX =leftMargin + i *(margin + answerW);
        answerBtn.frame = CGRectMake(answerX, answerY, answerW, answerH);
        //设置背景图片
        [answerBtn setBackgroundImage:[UIImage imageNamed:@"btn_answer"] forState:UIControlStateNormal];

        //设置显示文字的颜色
        [answerBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        [self.answerView addSubview:answerBtn];
        
        //创建点击按钮的点击响应方法
        [answerBtn addTarget:self action:@selector(answerClick:) forControlEvents:UIControlEventTouchUpInside];
    }

}




/**
 *  添加数据
 *
 *  @param appModel 数据模型
 */
-(void)addData:(KZAppModel *)appModel{


    
    self.noLabel.text = [NSString stringWithFormat:@"%d/%ld",self.index + 1,self.questions.count];
    
    self.titleLabel.text = appModel.title;
    
    [self.head setImage:[UIImage imageNamed:appModel.icon] forState:UIControlStateNormal];
}


- (void)optionClick:(UIButton *)optionBtn{

    //首先将被点击的待选项按钮的文字取到(后面会讲这个文字隐藏)
    NSString *title = [optionBtn currentTitle];
    optionBtn.hidden = YES;

    //循环遍历答案按钮,遇到第一个不为空的按钮,显示被点击的待选项按钮的文字
    for (UIButton *answerBtn in self.answerView.subviews) {
        if ([answerBtn currentTitle] == nil ) {
            [answerBtn setTitle:title forState:UIControlStateNormal];
            break;
        }
    }
    
    //判断答案是否为满,如果满了,就去判断对不对
    //定义一个可变的字符串,用来拼接循环得到的答案,得到这个答案,去和正确答案比较
    NSMutableString *tempString = [NSMutableString string];
    BOOL full = YES;
    
    //遍历数组,如果遇到按钮为空的话,就赋值full标记为no,表明没有满,否则的话就去拼接
    for (UIButton *answerBtn in self.answerView.subviews) {
         if ([answerBtn currentTitle] == nil ) {
             full = NO;
         }else{
         
             [tempString appendString:[answerBtn currentTitle]];
         }
        
    }
    if (full) {
        
        //NSLog(@"满了");
        KZAppModel *appModel = self.questions[self.index];
        for (UIButton *optionBtn in self.optionView.subviews) {
            optionBtn.enabled = NO;
        }

        
        if ([tempString isEqualToString:appModel.answer]) {
            NSLog(@"答对了");
            for (UIButton *answerBtn in self.answerView.subviews){
                [answerBtn setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];

            }
//            int score = [self.coinBtn currentTitle].intValue ;
//            score += 50;
//            [self.coinBtn setTitle:[NSString stringWithFormat:@"%d",score] forState:UIControlStateNormal];
            [self score:50];
            
            [self performSelector:@selector(nextClick) withObject:nil afterDelay:2.0];
            
            
            
        }else{
        
            NSLog(@"没答对");
            for (UIButton *answerBtn in self.answerView.subviews){
                [answerBtn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
                [self score:-200];
            }
        }
    }
}

/**
 *  答案选线点击的方法
 *
 */
- (void)answerClick:(UIButton *)answerBtn{

    //循环遍历待选项按钮,找到与答案相同的文字,删除答案文字,显示待选项文字
    for (UIButton *optionBtn in self.optionView.subviews) {
        if ([[optionBtn currentTitle] isEqualToString:[answerBtn currentTitle]] && optionBtn.hidden == YES) {
            [answerBtn setTitle:nil forState:UIControlStateNormal];
            optionBtn.hidden = NO;
            for (UIButton *optionBtn in self.optionView.subviews) {
                optionBtn.enabled = YES;
            }
        }
    }
    
    for (UIButton *answerBtn in self.answerView.subviews) {
        [answerBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    }
}


/**
 *  点击提示的响应方法
 */
- (IBAction)tipClick {
    //清除所有的答案按钮
    for (UIButton *answerBtn in self.answerView.subviews) {
        [self answerClick:answerBtn];
    }
    //取出正确答案,显示出来
    KZAppModel *appModel = self.questions[self.index];
    NSString *str = [appModel.answer substringToIndex:1];
    
    
//    /**
//     *  最开始想的是这种方法,但是发现更好的办法,,就相当于点击了对应的待选项按钮
//     */
//    [self.answerView.subviews[0] setTitle:str forState:UIControlStateNormal];
//    [self.answerView.subviews[0] setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    
    for (UIButton *optionBtn in self.optionView.subviews) {
        if ([[optionBtn currentTitle] isEqualToString:str]) {
            [self optionClick:optionBtn];
        }
    }
    
    [self score:-100];
    
    
}

- (IBAction)bigImg {
    //点击大图之后,先创建一个阴影(button),
    UIButton *cover = [[UIButton alloc]init];
    self.cover = cover;
    cover.frame = self.view.bounds;
    [cover setBackgroundColor:[UIColor blackColor]];
    cover.alpha = 0.0;
    [self.view addSubview:cover];
    //调整图片和阴影位置
    [self.view bringSubviewToFront:self.head];

    [cover addTarget:self action:@selector(coverClick) forControlEvents:UIControlEventTouchUpInside];
    [UIView animateWithDuration:2.0 animations:^{
        cover.alpha = 0.6;
        //放大图片
        
        CGFloat headW = self.view.frame.size.width;
        CGFloat headH = headW;
        CGFloat headX = 0;
        CGFloat headY = 0.5 * (self.view.frame.size.height- headH);
        self.head.frame = CGRectMake(headX, headY, headW, headH);
        
    }];
    
}


/**
 *  计算分数方法
 *
 *  @param score 传入需要增加或者减少的分数(减为负)
 */
- (void)score:(int)score{

    int tempScore = [self.coinBtn currentTitle].intValue ;
    tempScore += score;
    [self.coinBtn setTitle:[NSString stringWithFormat:@"%d",tempScore] forState:UIControlStateNormal];
    
}

/**
 *  图片放大状态下,点击阴影缩小图片
 */
-(void)coverClick{

    if (self.cover != nil) {
        [self smallImg];

    }
}
/**
 *  点击头像图片,放大或缩小
 */
- (IBAction)headClick {
    if (self.cover == nil) {
        [self bigImg];
    }else{
    
        [self smallImg];
    }
}
/**
 *  缩小图片的方法
 */
- (void)smallImg{


    [UIView animateWithDuration:2.0 animations:^{
        self.cover.alpha = 0.0;
        self.head.frame = CGRectMake(97, 120, 180, 180);
        self.cover = nil;
    }];
    
}



/**
 *  懒加载数据
 *
 *  @return 返回数据
 */
-(NSArray *)questions{

    if(_questions == nil){
        NSString *path = [[NSBundle mainBundle]pathForResource:@"questions" ofType:@"plist"];
        NSArray *dictArray = [NSArray arrayWithContentsOfFile:path];
        NSMutableArray *tempArray = [NSMutableArray array];
        for (NSDictionary *dict in dictArray) {
            KZAppModel *appModel = [KZAppModel appWithDict:dict];
            [tempArray addObject:appModel];
        }
        _questions = tempArray;
    
    }
    return _questions;
}

@end

KVC大体介绍:

KVC(Key Value Coding)
    介绍: 通过给定一个对象的属性名称(以字符串方式), 然后找到对象的相应属性进行赋值。

    * setValue:forKeyPath:
    ** 示例: [self setValue:dict[@"icon"] forKeyPath:@"icon"]
    ** 含义: 表示根据forKeyPath:@"icon"提供的@"icon"去self对象中查找名字叫icon的属性, 找到以后把dict[@"icon"]中获取到的值赋值给self的icon属性。


    * setValuesForKyesWithDictionary:
    ** 含义: 更简便的调用方式。内部相当于调用了多次setValue:forKeyPath:

    ** 注意:
    1> 必须保证字典中的key与模型的属性名称一致。
    2> 必须保证模型的属性个数与字典一致或者模型的属性个数要大于等于字典的个数。

* 演示KVC:
1> 新建一个model类。
2> 演示对字符串类型、数字类型进行KVC赋值
3> 通过KVC取值。
id v = [对象 valueForKeyPath:@"key"];
int v1 = [[对象 valueForKeyPath:@"key"] intValue];

4> 把模型转成字典, 把对象中指定的属性转换为字典。
NSDictioanry *dict = [对象 dictionaryWithValuesForKeys:@[@"name", @"age"]];

5> 把一个person数组中的每个person对象的name都获取出来然后放到一个新的数组中。
(
    NSArray *names = [person数组 valueForKeyPath:@"name"];
)

6> keyPath介绍, 人拥有一本书, 通过kvc获取人所拥有的书的名称
(
    NSString *bkName = [person valueForKeyPath:@"book.name"];
    
    等价于
    
    NSString *bkName = person.book.name;
)

* KVO (Key Value Observing), 监听对象的属性值变化。

[注意]转载时请注明出处博客园-吃唐僧肉的小悟空http://www.cnblogs.com/hukezhu/