IOS基礎UI之(七)綜合小案例－猜圖

通過上一篇已經熟悉了對xib的使用，字典轉模型，九宮格的使用，現在繼續通過案例－猜圖鞏固一下這些知識點。

效果圖如下：

分析：

1.答案輸入框個數是根據答案的長度實現，答案選擇格子不同題目的選擇答案不一樣，因此要動態創建ui，其它的可以使用storyboard創建。

2.每猜對就加分，點擊提示按鈕就自動顯示第一個答案。

3.點擊大圖按鈕就顯示大圖，點擊圖片時如果目前是大圖就變成大圖，目前是小圖就變大圖顯示（利用遮掩層實現）。

4.點擊待選擇答案就把改答案實現在輸入框中，並刪除該待選文字。

5.點擊下一題就進入下一題，全部完成後就提示是否過關。

1.storyboard創建ui界面，並連線

2.新建問題模型

ZXHQuestion.h

//
//  ZXHQuestion.h


#import <Foundation/Foundation.h>

/**
 *   題目數據模型
 */
@interface ZXHQuestion : NSObject

/**
 *  答案
 */
@property(nonatomic,copy) NSString *answer;

/**
 *  題目
 */
@property(nonatomic,copy) NSString *title;

/**
 *  圖標
 */
@property(nonatomic,copy) NSString *icon;

/**
 *  答案選項
 */
@property(nonatomic,strong) NSArray *options;

/**
 *  字典轉化模型
 *
 *  @param dict 字典
 *
 *  @return  模型對象
 */
-(instancetype)initWithDict:(NSDictionary *)dict;

/**
 *  字典轉換模型（類方法）
 *
 *  @param dict 字典
 *
 *  @return 模型對象
 */
+(instancetype)questionWithDict:(NSDictionary *)dict;
@end

ZXHQuestion.m

//
//  ZXHQuestion.m

#import "ZXHQuestion.h"
@implementation ZXHQuestion

/**
 *  字典轉化模型
 *
 *  @param dict 字典
 *
 *  @return  模型對象
 */
-(instancetype)initWithDict:(NSDictionary *)dict{
    if (self = [super init]) {
        self.answer = dict[@"answer"];
        self.title = dict[@"title"];
        self.icon = dict[@"icon"];
        self.options = dict[@"options"];
    }
    
    return self;
}

/**
 *  字典轉化模型(類型)
 *
 *  @param dict 字典
 *
 *  @return  模型對象
 */
+(instancetype)questionWithDict:(NSDictionary *)dict{
    return [[self alloc]initWithDict:dict];
}
@end

3.業務邏輯處理

//
//  ViewController.m


#import "ViewController.h"
#import "ZXHQuestion.h"

@interface ViewController ()<UIAlertViewDelegate>
/**
 *  提示方法
 */
- (IBAction)tip;
/**
 *  幫助方法
 */
- (IBAction)help;
/**
 *  顯示大圖方法
 */
- (IBAction)btnImg;
/**
 *  下一題
 */
- (IBAction)nextQuestion;
/**
 *  點擊圖片
 */
- (IBAction)imgClick;

/*序號*/
@property (weak, nonatomic) IBOutlet UILabel *noLabel;
/*標題*/
@property (weak, nonatomic) IBOutlet UILabel *titleLabel;
/*分數*/
@property (weak, nonatomic) IBOutlet UIButton *scoreBtn;
/*下一題按鈕*/
@property (weak, nonatomic) IBOutlet UIButton *nextBtn;
/*圖片按鈕*/
@property (weak, nonatomic) IBOutlet UIButton *imgBtn;
/*遮掩層*/
@property(weak,nonatomic) IBOutlet UIButton *cover;

/*存放正確答案view*/
@property(weak,nonatomic) IBOutlet UIView *answerView;
/*存放可選答案view*/
@property(weak,nonatomic) IBOutlet UIView *optionView;

/**
 *  所有題目
 */
@property(nonatomic,strong) NSArray *questions;
/**
 *  數組下標
 */
@property(nonatomic,assign) int index;

@end

@implementation ViewController

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

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

/**
 *  從寫get方法
 *
 *  @return 所有題目數組
 */
-(NSArray *)questions{
    //懶加載
    if (_questions == nil) {
        // 1.加載plist
        NSArray *dictArray = [NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"questions" ofType:@"plist"]];
        //字典轉換爲模型
        NSMutableArray *questionArray = [NSMutableArray array];
        for (NSDictionary *dict in dictArray) {
            ZXHQuestion *question = [ZXHQuestion questionWithDict:dict];
            [questionArray addObject:question];
        }
        
        _questions = questionArray;
        
    }
   
    return _questions;
}

/**
 *  提示
 */
- (IBAction)tip {
    //清楚答案按鈕所有文字，調用answerClick
    for (UIButton *answerBtn in self.answerView.subviews) {
        [self answerClick:answerBtn];
    }
    
    //獲取正確答案(第一個字)
    ZXHQuestion *question = self.questions[self.index];
    NSString *answerfirst = [question.answer substringToIndex:1];
    
    //給答案第一個按鈕賦正確值
    for (UIButton *optionBtn in self.optionView.subviews) {
        if ([optionBtn.currentTitle isEqualToString:answerfirst]) {
            [self optionClick:optionBtn];
            break;
        }
    }
    
    //減分
    [self addScore:-800];
}

- (IBAction)help {
}

/**
 *  大圖
 */
-(IBAction)btnImg{
    //添加陰影
    UIButton *cover = [[UIButton alloc]init];
    cover.frame = self.view.bounds;
    cover.backgroundColor = [UIColor blackColor];
    cover.alpha = 0.0;
    [cover addTarget:self action:@selector(smallImg) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:cover];
    
    self.cover = cover;
    
    //更換陰影和頭像的位置(將圖片現在在最上面)
    [self.view bringSubviewToFront:self.imgBtn];
    
    //3.執行動畫
    [UIView animateWithDuration:0.25 animations:^{
        //陰影慢慢顯示出來
        cover.alpha = 0.7;
        
        //頭像慢慢變大,慢慢移動到屏幕的中間
        CGFloat iconW = self.view.frame.size.width;
        CGFloat iconH = iconW;
        CGFloat iconY = (self.view.frame.size.height - iconH) * 0.5;
        self.imgBtn.frame = CGRectMake(0, iconY, iconW, iconH);
    }];
    
}

/**
 *  小圖
 */
-(IBAction)smallImg{
    //執行動畫
    [UIView animateWithDuration:0.25 animations:^{
        // 1.頭像慢慢變爲原來的位置和尺寸
        self.imgBtn.frame = CGRectMake( 85, 107, 150, 150);
        // 2.陰影慢慢消失
        self.cover.alpha = 0.0;


    }completion:^(BOOL finished){
        // 動畫執行完畢後會自動調用這個block內部的代碼
        
        // 動畫執行完畢後,移除遮蓋(從內存中移除)
        [self.cover removeFromSuperview];
        self.cover = nil;
    }];
    
}
/**
 *  下一題
 */
- (IBAction)nextQuestion {
    //最後一題
    if (self.index == self.questions.count-1) {
        //提示框
       UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"恭喜！" message:@"您已經闖關成功！" delegate:self cancelButtonTitle:@"取消" otherButtonTitles:@"確定", nil];
      [alertView show];
      alertView.tag = 10;

        
//        UIActionSheet *sheet = [[UIActionSheet alloc] initWithTitle:@"恭喜通關" delegate:nil cancelButtonTitle:@"取消" destructiveButtonTitle:@"確定" otherButtonTitles:@"其他", nil];
//        
//        [sheet showInView:self.view];
        
      
        return;
    }
    
    //下標索引
    self.index ++;
    //取出模型
    ZXHQuestion *question = self.questions[self.index];
    //設置控件數據
    [self settingData:question];
    //正確答案
    [self addAnswerBtn:question];
    // 添加待選項
    [self addOptionBtn:question];

   
}

/**
 *  提示框監聽事件
 *
 *  @param alertView    提示框view  當有多個提示框時候可以用此區別
 *  @param buttonIndex 點擊按鈕下標
 */
-(void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex{
    NSInteger tag =  alertView.tag;
    NSLog(@"點擊了tag爲%ld,下標爲%ld的按鈕",tag,buttonIndex);
}

/**
 *  設置控件數據
 *
 *  @param question 題目模型
 */
-(void)settingData:(ZXHQuestion *)question{
    //設置序號
    self.noLabel.text = [NSString stringWithFormat:@"%d/%ld",self.index+1,self.questions.count];
    //設置標題
    self.titleLabel.text = question.title;
    //設置圖片
    [self.imgBtn setImage:[UIImage imageNamed:question.icon] forState:UIControlStateNormal];
    //設置下一題按鈕
    self.nextBtn.enabled= self.index != (self.questions.count-1);
}

/**
 *  點擊圖片
 */
-(IBAction)imgClick{
    if (self.cover == nil) {//沒有陰影調顯示大圖方法
        [self btnImg];
    }else{
        [self smallImg];//調用顯示小圖方法
    }
}

/**
 *  添加正確答案
 *
 *  @param question 模型
 */
-(void)addAnswerBtn:(ZXHQuestion *)question{
    
    
    //刪除之前所有的按鈕
//    for (UIView *subview in self.answerView.subviews) {
//        [subview removeFromSuperview];
//    }
    //讓數組所有對象執行removeFromSuperview
    [self.answerView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];
    
    //添加新按鈕
    int length = (int)question.answer.length;
    for (int i = 0 ; i<length; i++) {
        //創建按鈕
        UIButton *answerBtn = [[UIButton alloc]init];
        [answerBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        
        // 設置背景
        [answerBtn setBackgroundImage:[UIImage imageNamed:@"btn_answer"] forState:UIControlStateNormal];
        [answerBtn setBackgroundImage:[UIImage imageNamed:@"btn_answer_highlighted"] forState:UIControlStateHighlighted];
        
        // 設置frame
       // 控制器view的寬度
        CGFloat viewW = self.view.frame.size.width;
        // 按鈕之間的間距
        CGFloat margin = 10;
        // 按鈕的尺寸
        CGFloat btnW = 35;
        CGFloat btnH = 35;
        // 最左邊的間距 = 0.5 * (控制器view的寬度 - 按鈕個數 * 按鈕寬度 - (按鈕個數 - 1) * 按鈕之間的間距)
        CGFloat leftMargin = 0.5 *(viewW - length * btnW - (length - 1) * margin);
        // 按鈕的x = 最左邊的間距 + i * (按鈕寬度 + 按鈕之間的間距)
        CGFloat btnX = leftMargin + i * (btnW + margin);
        CGFloat btnY = 0;
        answerBtn.frame = CGRectMake(btnX, btnY, btnW, btnH);
        
         // 5.2.4.添加
        [self.answerView addSubview:answerBtn];
        
        //添加點擊監聽
        [answerBtn addTarget:self action:@selector(answerClick:) forControlEvents:UIControlEventTouchUpInside];
    }
}

/**
 *  添加待選按鈕
 *
 *  @param question 模型
 */
-(void)addOptionBtn:(ZXHQuestion *) question{
     //刪除之前所有的按鈕
//    for (UIView *subView in self.optionView.subviews) {
//        [subView removeFromSuperview];
//    }
    //讓待選按鈕能夠被點擊
    self.optionView.userInteractionEnabled = YES;
    
    [self.optionView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];
    
    //添加新按鈕
    int length = (int)question.options.count;
    for (int i = 0; i<length; i++) {
        //創建按鈕
        UIButton *optionBtn = [[UIButton alloc]init];
        [optionBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        
        // 設置背景
        [optionBtn setBackgroundImage:[UIImage imageNamed:@"btn_option"] forState:UIControlStateNormal];
        [optionBtn setBackgroundImage:[UIImage imageNamed:@"btn_option_highlighted"] forState:UIControlStateHighlighted];
        
        // 設置frame
        // 控制器view的寬度
        CGFloat viewW = self.view.frame.size.width;
        // 按鈕之間的間距
        CGFloat margin = 10;
        // 按鈕的尺寸
        CGFloat btnW = 35;
        CGFloat btnH = 35;
        //總列數
        int totalColumns = 7;
        // 最左邊的間距 = 0.5 * (控制器view的寬度 - 按鈕個數 * 按鈕寬度 - (按鈕個數 - 1) * 按鈕之間的間距)
        CGFloat leftMargin = 0.5 *(viewW - totalColumns  * btnW - (totalColumns - 1) * margin);
        //列數
        int col = i % totalColumns;
        //按鈕的x = 最左邊的間距 + 列號 * (按鈕寬度 + 按鈕之間的間距)
        CGFloat btnX = leftMargin + col * (btnW + margin);
        //行數
        int row = i / totalColumns;
        // 按鈕的y = 行號 * (按鈕高度 + 按鈕之間的間距)
        CGFloat btnY = row * (btnH + margin);
        optionBtn.frame = CGRectMake(btnX, btnY, btnW, btnH);
        
        // 設置文字
        [optionBtn setTitle:question.options[i] forState:UIControlStateNormal];
        [optionBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        
        //添加按鈕
        [self.optionView addSubview:optionBtn];
        
        //監聽點擊
        [optionBtn addTarget:self action:@selector(optionClick:) forControlEvents:UIControlEventTouchUpInside];
        
    }
}

/**
 *  監聽答案按鈕的點擊
 *
 *  @param answerBtn  正確答案btn
 */
-(void)answerClick:(UIButton *)answerBtn{
    //讓待選按鈕能夠被點擊
    self.optionView.userInteractionEnabled = YES;
    
    // 答案按鈕的文字
    NSString *answerTitle = [answerBtn titleForState:UIControlStateNormal];
    
    // 1.讓答案按鈕文字對應的待選按鈕顯示出來(hidden = NO)
    for (UIButton *optionBtn in self.optionView.subviews) {
        NSString *optionTitle = [optionBtn titleForState:UIControlStateNormal];
        if ([optionTitle isEqualToString:answerTitle] && optionBtn.hidden == YES) {
            optionBtn.hidden = NO;
            break;
        }
    }
    
    // 2.讓被點擊答案按鈕的文字消失(去除文字)
    [answerBtn setTitle:nil forState:UIControlStateNormal];
    
    // 3.讓所有的答案按鈕變爲黑色
    for (UIButton *answerBtn in self.answerView.subviews) {
        [answerBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    }
    
}

/**
 *  監聽待選按鈕的點擊
 *
 *  @param optionBtn 待選按鈕
 */
-(void)optionClick:(UIButton *)optionBtn{
 
    
    //顯示文字到正確答案
    for (UIButton * answerBtn in self.answerView.subviews) {
        //判斷按鈕是否有文字
        //NSString *answerTitle = [answerBtn titleForState:UIControlStateNormal];
        NSString *answerTitle = answerBtn.currentTitle;
        if (answerTitle.length == 0) { // 沒有文字
             // 設置答案按鈕的 文字 爲 被點擊待選按鈕的文字
            //NSString *optionTitle = [optionBtn titleForState:UIControlStateNormal];
            NSString *optionTitle = optionBtn.currentTitle;
            [answerBtn setTitle:optionTitle forState:UIControlStateNormal];
            
            //讓被點擊的選擇按鈕消失
            optionBtn.hidden = YES;

            break;// 停止遍歷
        }
    }
    
    
    // 3.檢測答案是否填滿
    BOOL full = YES;
    
    //存儲答案
    NSMutableString *tempAnswerTitle = [NSMutableString string];
    for (UIButton *answerBtn in self.answerView.subviews) {
        //NSString *answerTitle = [answerBtn titleForState:UIControlStateNormal];
        NSString *answerTitle = answerBtn.currentTitle;
        if (answerTitle.length== 0) {
            full = NO;
        }
        //拼接答案
        if (answerTitle) {
             [tempAnswerTitle appendString:answerTitle];
        }
       
    }
    
    // 4.答案滿了
    if (full) {
        //讓待選按鈕不能夠被點擊
        self.optionView.userInteractionEnabled = NO;
//        for(UIButton *button in self.optionView.subviews){
//            button.enabled = NO;
//        }
        
        ZXHQuestion *question = self.questions[self.index];
        if ([tempAnswerTitle isEqualToString:question.answer]) {//答對
            //顯示藍色
            for (UIButton *answerBtn in self.answerView.subviews) {
                [answerBtn setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
            }
            //加分
           // int score = [self.scoreBtn titleForState:UIControlStateNormal].intValue;
            [self addScore:1000];
            
            //0.5秒後跳下一題
            [self performSelector:@selector(nextQuestion) withObject:nil afterDelay:0.5];
        }else{//答錯
            //顯示紅色
            for (UIButton *answerBtn in self.answerView.subviews) {
                [answerBtn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
            }
        }
    }
    
}

/**
 *  減分，加分
 *
 *  @param score 分數
 */
-(void)addScore:(int)score{
    int totalScore = self.scoreBtn.currentTitle.intValue;
    totalScore += score;
    [self.scoreBtn setTitle:[NSString stringWithFormat:@"%d",totalScore] forState:UIControlStateNormal];
}

@end

－－－－－－－－－－－－－－－－－－－文字至此！

IOS基礎UI之(七)綜合小案例－猜圖

IOS基礎UI之(五)UIAlertView、UIActionSheet和UIAlertController詳解

IOS基礎UI之(十) UIPickerView和UIDatePicker詳解

IOS基礎UI之(七)綜合小案例－猜圖

iOS開發實踐之多線程(GCD)

iOS開發實踐之SQLite3

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結