8.超级彩图（storyboard和代码组合搭建界面）

最新推荐文章于 2021-05-02 12:30:05 发布

_变味的面包

最新推荐文章于 2021-05-02 12:30:05 发布

阅读量831

点赞数

分类专栏： iOS之UI学习文章标签： UI objective-c 界面

本文链接：https://blog.csdn.net/cw0028/article/details/46446367

版权

iOS之UI学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

实现目的：搭建一个小游戏界面，点击大图和图片实现图片的方法，点击提示清空当前所填的内容并提示第一个字，并扣除相应的分数。当打错的时候文字显示为红色，答对了显示为绿色并进入下一题，到达最后一题的时候下一题按钮不可选。

分析：首先搭建界面，在上半部分是固定的，直接通过storyboard实现，下半部分答案区和备选区按钮数量会跟着题目的变化为变化，用代码实现。图片放大以后新建一个蒙版同时用 bringSubviewToFront 方法将图像移动至顶层。缩放图片后将蒙版的hidden属性设置为YES。接下来是下半部分的内容，首先将字典转换成模型，并将其懒加载。

点击下一题的时候，题目索引的递增，取出相应的模型并设置题目的基本信息，并修改备选区的按钮上的字。当点击备选区按钮的时候，该按钮的hidden属性设置为YES，并且在答案区第一个部位空得位置上显示备选区传过来的文字。当答案区不为空的时候与标准答案做对比，如果一致，则为正确。当点击提示的时候，将答题区的按钮全部清空，在备选区查找第一个按钮，并模拟点击。最后使答案区的文字设置成乱序。

效果演示：

主要实现代码：

// 图片方法

<span style="font-family: 'Heiti SC Light';">- (IBAction)bigImage</span>

{
    // 通过蒙板的alpha来判断按钮是否已经被放大
    if (self.cover.alpha == 0.0) { // 放大
        // bringSubviewToFront将子视图前置
        [self.view bringSubviewToFront:self.iconButton];
        
        // 3. 动画放大图像按钮
        CGFloat w = self.view.bounds.size.width;
        CGFloat h = w;
        CGFloat y = (self.view.bounds.size.height - h) * 0.5;
        
        [UIView animateWithDuration:0.6 animations:^{
            self.iconButton.frame = CGRectMake(0, y, w, h);
            self.cover.alpha = 1.0;
        }];
    } else { // 缩小
        [UIView animateWithDuration:0.6 animations:^{
            // 将图像恢复初始位置
            self.iconButton.frame = CGRectMake(80 , 110, 160, 160);
            self.cover.alpha = 0.0;
        }];
    }
}

// 下一题
- (IBAction)nextQuestion
{
    // 1.设置当前索引 ++
    self.index++;
    
    // 2.从数组中按照索引取出题目模型数据
    Question *question = self.questions[self.index];
    
    // 3.设置基本信息
    self.noLabel.text = [NSString stringWithFormat:@"%d/%lu",self.index + 1 ,(unsigned long)self.questions.count];
    self.titleLabel.text = question.title;
    self.iconButton.imageView.image = [UIImage imageNamed:question.icon];
  
    // 如果到达最后一题 禁用下一题按钮
      self.nextQuestionButton.enabled = (self.index < self.questions.count - 1);
    
    // 4.答题区按钮
    //计算位置
    CGFloat answerViewW = self.answerView.bounds.size.width;
    CGFloat answerH = self.answerView.bounds.size.height;
    CGFloat answerW= answerH;
    
    // 首先清除掉答题区内的所有按钮
    for (UIView *btn in self.answerView.subviews) {
        [btn removeFromSuperview];
    }
    NSUInteger length = question.answer.length;
    CGFloat answerX = (answerViewW - answerH * length - (length - 1) * kButtonMargin) * 0.5;
    
    //5. 创建所有答案按钮
    for (int i = 0; i < length; i++) {
        CGFloat x = answerX + i * (kButtonMargin + answerW);
        
        UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake(x, 0, answerH, answerW)];
        [btn setBackgroundImage:[UIImage imageNamed:@"btn_answer"] forState:UIControlStateNormal];
        [btn setBackgroundImage:[UIImage imageNamed:@"btn_answei_highlighted"] forState:UIControlStateHighlighted];
        
        [btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        
        [self.answerView addSubview:btn];
        
        // 添加答案区监听方法
        [btn addTarget:self action:@selector(answerClick:) forControlEvents:UIControlEventTouchUpInside];
    }
    
    // 创建所有答案的按钮
    NSUInteger optionLength = question.options.count;
    
    CGFloat optionViewW = self.optionView.bounds.size.width;
    CGFloat optionH = answerH;
    CGFloat optionW = optionH;
    CGFloat optionX = (optionViewW - optionH * kTotolCol - (kTotolCol - 1) * kButtonMargin) * 0.5;
    
    // 首先清除掉答题区内的所有按钮
    for (UIView *btn in self.optionView.subviews) {
        [btn removeFromSuperview];
    }
    
    
    for (int i = 0; i < optionLength; i++){
        
        int row = i / kTotolCol;
        int col = i % kTotolCol;
        
        CGFloat x = optionX +col * (optionW + kButtonMargin);
        CGFloat y = row * (optionH + kButtonMargin);
        
        UIButton *btn = [[UIButton alloc]initWithFrame:CGRectMake(x, y, optionH, optionW)];
        [btn setBackgroundImage:[UIImage imageNamed:@"btn_option"] forState:UIControlStateNormal];
        [btn setBackgroundImage:[UIImage imageNamed:@"btn_option_highlighted"] forState:UIControlStateHighlighted];
        [self.optionView addSubview:btn];
        
        // 设置备选按钮
        [btn setTitle:question.options[i] forState:UIControlStateNormal];
        [btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal ];
        
        [self.optionView addSubview:btn];
        
        // 添加监听方法
        [btn addTarget:self action:@selector(optionClick:) forControlEvents:UIControlEventTouchUpInside];
    }

}

#pragma mark - 提示功能
- (IBAction)tipClick
{
    // 1.将答案区所有的字清空
    for (UIButton *btn in self.answerView.subviews){
        // 用代码执行点击答案按钮操作
        [self answerClick:btn];
    }
    // 2.将答案第一字显示在答案区第一个位置
    Question *qusetion = self.questions[self.index];
    NSString *firstAnswer = [qusetion.answer substringToIndex:1];
    for (UIButton *btn in self.optionView.subviews) {
        if ([btn.currentTitle isEqualToString:firstAnswer] ) {
            [self optionClick:btn];
            // 3.扣分
            [self setScore:-100];

        }
    }
    //
}
#pragma mark - 分数操作
- (void)setScore:(int)score
{
    int currectScore = self.scoreButton.currentTitle.intValue;
    currectScore += score;
    [self.scoreButton setTitle:[NSString stringWithFormat:@"%d",currectScore] forState:UIControlStateNormal];
}
 // 答案区监听方法
- (void)answerClick:(UIButton *)button
{
    if (button.currentTitle.length == 0) return;
    for (UIButton *btn in self.optionView.subviews) {
        if ([btn.currentTitle isEqualToString:button.currentTitle] && btn.hidden == YES) {
            btn.hidden = NO;
            [button setTitle:@"" forState:UIControlStateNormal];
            [self setColor:[UIColor blackColor]];
        }
    }
}


- (void)optionClick:(UIButton *)button
{
    // 1.在答案区找到第一个文字为空的按钮
    UIButton *btn = [self firstAnswerButton];
    if (btn == nil) {
        return;
    }
    // 2.将button的标题设置给答案区按钮
    [btn setTitle:button.currentTitle forState:UIControlStateNormal];
    // 3.隐藏button
    button.hidden = YES;
    // 4.判断结果
    [self judag];
}

- (void)judag
{
    NSMutableString *strM = [NSMutableString string];
    // 如果所有的按钮都有字才需要判断 遍历所有答题区按钮
    for (UIButton *btn in self.answerView.subviews) {
        if (btn.currentTitle.length == 0) {
            [self setColor:[UIColor blackColor]];
            // 只要有一个按钮没有字就不执行
            return;
        }else{
            [strM appendString:btn.currentTitle];// 拼接临时字符串
    }
    
    // 根据self.index获得当前question
    Question *question = self.questions[self.index];
    
    // 如果一致就更改字体颜色进入下一题
     if ([strM isEqualToString:question.answer]) {
        [self setColor:[UIColor blueColor]];
         [self setScore:1000];
         
         
        // 判断如果不是最后一题
         if (self.index != 9 )
        [self performSelector:@selector(nextQuestion) withObject:nil afterDelay:0.5];
    }else
    {
        [self setColor:[UIColor redColor]];
    }
    }
}

- (void)setColor:(UIColor *)color
{
    for (UIButton *btn in self.answerView.subviews) {
        [btn setTitleColor:color forState:UIControlStateNormal];
    }
}

- (UIButton *)firstAnswerButton
{
    // 取按钮的标题 遍历答题区所有按钮
    for (UIButton *btn in self.answerView.subviews){
        if (btn.currentTitle.length == 0) {
            return btn;
        }
    }
    return nil;
}

产生乱码：

- (void)randamOptions
{
    self.options = [self.options sortedArrayUsingComparator:^NSComparisonResult(NSString *str1, NSString *str2) {
        int seed = arc4random_uniform(2);
        
        if (seed) {
            return [str1 compare:str2];
        }else{
            return [str2 compare:str1];
        }
    }];
}