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图标和启动图片
具体可以查看官方文档：
