UI基础之超级猜图

一：超级猜图用到的一些方法：

1，//把某控件置于view的顶层

[self.view bringSubviewToFront:self.imageView];

2，//调用数组中每一个对象的方法

[self.optionsView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];

3，两种弹框的类：UIAlertView常用来做提示用户

    UIActionSheet是做一些危险操作的提示，如删除联系人等操作

 UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"提示" message:@"恭喜你过关了" delegate:nil cancelButtonTitle:@"取消" otherButtonTitles:@"确定", nil];

// [alert show];

UIActionSheet *sheet = [[UIActionSheet alloc] initWithTitle:@"提示"delegate:nil cancelButtonTitle:@"取消"

destructiveButtonTitle:@"确定" otherButtonTitles:@"你猜",nil]; [sheetshowInView:self.view];

4，按钮上的一些操作方法

   1.获取按钮上的字体：

    btn.currentTitle   或者  btn titleForState:  state:

   2, 设置按钮的背景图片和按钮上的图片

    背景图片设置   btn setBackgroudImage: state:

    图片设置：    btn setImage:  state:  

    特别注意：    设置按钮上图片的方法，不能用btn.imageView.image属性 这样图片不显示

3，按钮上默认文字跟图片都是居中对齐的

     所以如果想设置其他对齐方式，可以调用按钮的对齐属性

      1，contentHorizontalAlignment 水平对齐

      2，contentVerticalAlignment 垂直对齐

 4，按钮的内边距设置

   默认按钮上的文字或图片都是填充整个按钮的宽度跟高度，如果我们想要设置按钮中的内容有跟边框有距离可以设置的属性

      1，contentEdgeInsets 按钮上整个内容内边距

       2，titleEdgeInsets 文字边距设置

      3，imageEdgeInsets  图片边距设置。

   5，按钮上的图片旋转后被拉伸的处理

     设置按钮内部的imageView的内容模式为居中，因为默认会填充整个imageView

     btn.imageView.contentMode = UIViewContentModeCenter

     btn.imageView.clipsToBounds = NO; 默认为yes表示超出的部分减掉

5,控制器的方法，

  1>多长时间后执行一个方法

  [self performSelector:@selector(nextClick) withObject:nilafterDelay:1.0];

  2>隐藏状态栏：

  - (BOOL)prefersStatusBarHidden

 3>更改状态栏的状态

  - (UIStatusBarStyle)preferredStatusBarStyle

二：代码示例：

LLMessages数据模型类的声明和实现

#import <Foundation/Foundation.h>

@interface LLMessages : NSObject
/**
 *  图片
 */
@property (nonatomic, copy) NSString *icon;
/**
 *  标题
 */
@property (nonatomic, copy) NSString *title;
/**
 *  答案
 */
@property (nonatomic, copy) NSString *answer;
/**
 *  选项
 */
@property (nonatomic, strong) NSArray *options;

- (instancetype)initWithDic:(NSDictionary *)dic;
+ (instancetype)messagesWithDic:(NSDictionary *)dic;

+ (NSArray *)array;


@end

#import "LLMessages.h"

@implementation LLMessages

- (instancetype)initWithDic:(NSDictionary *)dic
{
    if (self = [super init]) {
        [self setValuesForKeysWithDictionary:dic];
    }
    return self;
}

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

+ (NSArray *)array
{
    NSString *path = [[NSBundle mainBundle] pathForResource:@"questions.plist" ofType:nil];
    
    NSArray *dicArray = [NSArray arrayWithContentsOfFile:path];
    
    NSMutableArray *tmpArray = [[NSMutableArray alloc] initWithCapacity:dicArray.count];
    
    for (NSDictionary *dic in dicArray) {
        
        [tmpArray addObject: [self messagesWithDic:dic]];
    }
    return tmpArray;
}

@end

controller中的实现方法

#import "ViewController.h"
#import "LLMessages.h"

@interface ViewController () <UIAlertViewDelegate>
@property (weak, nonatomic) IBOutlet UIView *optionsView;

@property (weak, nonatomic) IBOutlet UIView *answerView;
@property (nonatomic, strong) NSArray *messages;
@property (weak, nonatomic) IBOutlet UILabel *textView;
@property (weak, nonatomic) IBOutlet UILabel *titleView;
@property (weak, nonatomic) IBOutlet UIButton *iconView;
@property (weak, nonatomic) IBOutlet UIButton *coinView;
@property (weak, nonatomic) IBOutlet UIButton *nextBtnView;
@property (nonatomic, assign) CGRect iconViewRect;
@property (nonatomic, weak) UIButton *cover;
/**
 *  索引标记
 */
@property (nonatomic, assign) int  index;
- (IBAction)imageClick;

- (IBAction)helpClick:(id)sender;
- (IBAction)bigImageClick;
- (IBAction)nextClick;
- (IBAction)tipClick;

@end

@implementation ViewController

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

#pragma mark - 图片被点击
/**
 *  图片被点击
 */
- (IBAction)imageClick {
    
    if (self.cover) {
        
        [self coverClick];
        
    }else {
        
        [self bigImageClick];
    }
}

- (IBAction)helpClick:(id)sender {
    
}

#pragma  mark - 放大图片按钮被点击
/**
 *  放大图片按钮被点击
 */
- (IBAction)bigImageClick {
    
    // 1,创建一个蒙版
    UIButton *cover = [UIButton buttonWithType:UIButtonTypeCustom];
    [self.view addSubview:cover];
    self.cover = cover;
    cover.backgroundColor = [UIColor blackColor];
    cover.alpha = 0.0;
    cover.frame = self.view.bounds;
    
    // 2,设置图片的放大效果
    self.iconViewRect = self.iconView.frame;
    CGFloat iconViewX = 0;
    CGFloat iconViewW = self.view.frame.size.width;
    CGFloat iconViewH = iconViewW;
    CGFloat iconViewY = (self.view.frame.size.height - iconViewW) * 0.5;

#warning 将子控件替换到最上层的方法
    // 3,将iconView放大并且到最外层
    [self.view bringSubviewToFront:self.iconView];
    
    [UIView animateWithDuration:1.0 animations:^{
        
        cover.alpha = 0.3;
        self.iconView.frame = CGRectMake(iconViewX, iconViewY, iconViewW, iconViewH);
    }];
    
    // 4，点击cover
    [cover addTarget:self action:@selector(coverClick) forControlEvents:UIControlEventTouchUpInside];
}

#pragma mark - 蒙版被点击
/**
 *  蒙版被点击
 */
- (void)coverClick{
    // 1,将图片的frame设置为本来大小
    [UIView animateWithDuration:1.0 animations:^{
        
        self.iconView.frame = self.iconViewRect;
        self.cover.alpha = 0;
        
    } completion:^(BOOL finished) {
        
        // 2,将蒙版销毁
        [self.cover removeFromSuperview];
 
    }];
}

#pragma mark - 下一题

/**
 *  下一题
 */
- (IBAction)nextClick {
    
    // 1,设置索引
    self.index++;
    if (self.index == self.messages.count) {
    
        UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"提示" message:@"恭喜通关" delegate:self cancelButtonTitle:@"取消" otherButtonTitles:@"确定", nil];
        
        [alert show];
        return;
    }
    
    LLMessages *message = self.messages[self.index];
    
    // 2,设置视图展示数据
    [self settingDate:message];
    
    // 3, 创建answer控件
    [self addAnswerView:message];
    
    // 4, 创建options控件
    [self addOptionsView:message];
}

- (void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex
{
    if (buttonIndex == 0) {
        return;
    }
    exit(0);
}

#pragma mark - 创建answer控件
/**
 *  创建answer控件
 */
- (void)addAnswerView:(LLMessages *)message
{
    
#warning 简单方法
    // 1,先销毁answerView控件上的子控件
//    for (UIButton *answerBtn in self.answerView.subviews) {
//        
//        [answerBtn removeFromSuperview];
//    }
    [self.answerView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];
    // 2,创建子控件
    CGFloat margin = 5;
    CGFloat answerBtnY = 0;
    CGFloat answerBtnW = 35;
    CGFloat answerBtnH = 35;
    CGFloat maginX;
    NSUInteger count = message.answer.length;
    for (int i = 0; i<count; i++) {
        
        UIButton *answerBtn = [UIButton buttonWithType:UIButtonTypeCustom];
        [self.answerView addSubview:answerBtn];
        [answerBtn setBackgroundImage:[UIImage imageNamed:@"btn_answer"] forState:UIControlStateNormal];
        [answerBtn setBackgroundImage:[UIImage imageNamed:@"btn_answer_highlighted"] forState:UIControlStateHighlighted];
        [answerBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        maginX = (self.answerView.frame.size.width - (count * answerBtnW) - (count -1)*margin) * 0.5;
        CGFloat answerBtnX = maginX + i * (margin + answerBtnW);
        answerBtn.frame = CGRectMake(answerBtnX, answerBtnY, answerBtnW, answerBtnH);
        
        // 3,添加事件
        [answerBtn addTarget:self action:@selector(answerBtnClick:) forControlEvents:UIControlEventTouchUpInside];
    }
    
}

#pragma mark - 点击答案按钮事件
/**
 *  点击答案按钮事件
 */
- (void)answerBtnClick:(UIButton *)sender
{
    [self setAnswerColor:[UIColor blackColor]];
    // 将可选按钮显示
    for (UIButton *optionBtn in self.optionsView.subviews) {
        
        if ([sender.currentTitle isEqualToString:optionBtn.currentTitle] && optionBtn.hidden) {
            optionBtn.hidden = NO;
            [sender setTitle:nil forState:UIControlStateNormal];
            break;
        }
    }
}

#pragma mark - 创建options控件
/**
 *  创建options控件
 */
- (void)addOptionsView:(LLMessages *)message
{
    // 1,先删除optionsView上的子控件
    [self.optionsView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];
    
    // 2，创建子控件
    int colCount = 7;
    CGFloat optionBtnW = 35;
    CGFloat optionBtnH = optionBtnW;
    CGFloat margin = (self.optionsView.frame.size.width - (colCount * optionBtnW)) / (colCount + 1);
    for (int i = 0; i<message.options.count; i++) {
        
        UIButton *optionBtn = [UIButton buttonWithType:UIButtonTypeCustom];
        [self.optionsView addSubview:optionBtn];
        [optionBtn setBackgroundImage:[UIImage imageNamed:@"btn_option"] forState:UIControlStateNormal];
        [optionBtn setBackgroundImage:[UIImage imageNamed:@"btn_option_highlighted"] forState:UIControlStateHighlighted];
        [optionBtn setTitle:message.options[i] forState:UIControlStateNormal];
        [optionBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        
        // 计算frame
        // 行 列
        int row = i / colCount;
        int column = i % colCount;
        
        CGFloat optionBtnX = margin + column * (margin + optionBtnW);
        CGFloat optionBtnY = row * (margin + optionBtnW);
        optionBtn.frame = CGRectMake(optionBtnX, optionBtnY, optionBtnW, optionBtnH);
        
        // 给optionBtn添加事件
        [optionBtn addTarget:self action:@selector(optionBtnClick:) forControlEvents:UIControlEventTouchUpInside];
    }
    
}

#pragma mark - 可选按钮点击事件
/**
 *   可选按钮点击事件
 */
- (void)optionBtnClick:(UIButton *)sender
{
    // 0
    
    // 1,将可选按钮上的值赋给答案按钮
    for (UIButton *answerBtn in self.answerView.subviews) {
        if (answerBtn.currentTitle == nil) {
            [answerBtn setTitle:sender.currentTitle forState:UIControlStateNormal];
            // 2,将可选按钮隐藏
              sender.hidden = YES;
            break;
        }
    }
    
    NSMutableString *tempString = [NSMutableString string];
    BOOL isFull = YES;
    
    for (UIButton *answerBtn in self.answerView.subviews) {
        if (answerBtn.currentTitle == nil) {
            isFull = NO;
        } else {
            isFull = YES;
            [tempString appendString:answerBtn.currentTitle];
        }
    }
    
    if (isFull) {
        
        NSString *string = [self.messages[self.index] answer];
        if ([tempString isEqualToString:string]) {
            
            [self setAnswerColor:[UIColor blueColor]];
            
#warning 控制器方法：多长时间后执行的方法
            // 回答正确自动跳入下一题
            [self performSelector:@selector(nextClick) withObject:nil afterDelay:1.0];
            
           NSUInteger coinNum = [self.coinView.currentTitle intValue];
            coinNum += 1000;
            NSString *coinString = [NSString stringWithFormat:@"%ld", coinNum];

            [self.coinView setTitle:coinString forState:UIControlStateNormal];
            
        } else {
            [self setAnswerColor:[UIColor redColor]];
        }
        
    }
    
    
    

    
    

}

// 给答案设置颜色
- (void)setAnswerColor:(UIColor *)color
{
    for (UIButton *answerBtn in self.answerView.subviews) {
        
        [answerBtn setTitleColor:color forState:UIControlStateNormal];
    }

}

#pragma mark - 设置视图数据
/**
 *  设置视图数据
 */
- (void)settingDate:(LLMessages *)message
{
#warning 在按钮上设置背景图片的方法
    [self.iconView setBackgroundImage:[UIImage imageNamed:@"center_img"]forState:UIControlStateNormal];
    self.iconView.contentEdgeInsets = UIEdgeInsetsMake(5, 5, 5, 5);
    
#warning 在按钮上设置图片的方法
    [self.iconView setImage:[UIImage imageNamed:message.icon] forState:UIControlStateNormal];
    self.titleView.text = message.title;
    self.textView.text = [NSString stringWithFormat:@"%d/%ld", self.index + 1, self.messages.count];
    
    // 判断越界问题
    self.nextBtnView.enabled = (self.index != self.messages.count - 1);
    

}

#pragma mark - 提示按钮
/**
 *  提示按钮
 */
- (IBAction)tipClick {
    
}

#pragma mark - 加载数据模型
/**
 *  加载数据模型
 *
 *  @return 数据模型数组
 */
- (NSArray *)messages
{
    if (!_messages) {
        
        _messages = [LLMessages array];
    }
    return _messages;
}
@end

执行效果：

 三：app图标和启动图片

具体可以查看官方文档：