2446人阅读
iOS学习之UI（49）
猫猫分享，必须精品
原创文章，欢迎转载。转载请注明：翟乃玉的博客
先看效果图
1，搭建界面
1》上半部分，固定的，用Storyboard直接连线(OK)
2》下半部分，根据题目的变化，不断变化和调整，用代码方式实现比较合适(OK)
*备选按钮区域(OK)
*答案按钮区域(OK)
2，编写代码
1》大图，小图的切换（OK）
2》下一题(OK)
3》备选按钮的点击，让文字进入答案区(Ok)
4》判断对错胜负(OK)
*胜利：进入下一题(OK)
*失败：提示用户重新选择(OK)
5》答案按钮的点击(OK)
把答案区的文字回复到备选区域(Ok)
#import "NYViewController.h"
#import "NYQuestion.h"
@interface NYViewController ()
@property (weak, nonatomic) IBOutlet UIButton *iconB
@property (nonatomic, strong) UIButton *
@property (nonatomic, strong) NSArray *
@property (weak, nonatomic) IBOutlet UILabel *noL
@property (weak, nonatomic) IBOutlet UILabel *titleL
@property (weak, nonatomic) IBOutlet UIButton *nextQuestionB
@property (weak, nonatomic) IBOutlet UIView *answerV
@property (weak, nonatomic) IBOutlet UIView *optionsV
@property (weak, nonatomic) IBOutlet UIButton *scoreB
@property (nonatomic, assign) int
@implementation NYViewController
#define kButtonWidth 35
#define kButtonHeight 35
#define kButtonMargin 10
#define kTotolCol 7
-(NSArray *)questions
if (_questions == nil) {
_questions = [NYQuestion questions];
-(UIButton *)cover{
if (_cover == nil) {
_cover = [[UIButton alloc] initWithFrame:self.view.bounds];
_cover.backgroundColor = [UIColor colorWithWhite:0.0 alpha:0.5];
[self.view addSubview:_cover];
_cover.alpha = 0.0;
[_cover addTarget:self action:@selector(bigImage) forControlEvents:UIControlEventTouchUpInside];
- (void)viewDidLoad
[super viewDidLoad];
self.index = -1;
[self nextQuestion];
- (UIStatusBarStyle)preferredStatusBarStyle
return UIStatusBarStyleLightC
#pragma mark - 大图小图切换
- (IBAction)bigImage
if (self.cover.alpha == 0) {
[self.view bringSubviewToFront:self.iconButton];
CGFloat w = self.view.bounds.size.width;
CGFloat h =
CGFloat y = (self.view.bounds.size.height-h)*0.5;
[UIView animateWithDuration:1.0 animations: ^{
self.iconButton.frame = CGRectMake(0, y, w, h);
self.cover.alpha = 1.0;
[UIView animateWithDuration:1.0 animations:^{
self.iconButton.frame = CGRectMake(85, 85, 150, 150);
self.cover.alpha = 0.0;
#pragma mark - 下一题
-(IBAction)nextQuestion{
self.index ++;
if (self.index == self.questions.count) {
NSLog(@"通关啦！！！");
NYQuestion *question = self.questions[self.index];
[self setupBasicInfo:question];
[self creatAnswerButton:question];
[self creatOptionsButton:question];
-(void)setupBasicInfo:(NYQuestion *)question
self.noLabel.text = [NSString stringWithFormat:@"%d/%d",self.index+1,self.questions.count ];
self.titleLabel.text = question.title;
[self.iconButton setImage:[UIImage imageNamed:question.icon] forState:UIControlStateNormal];
self.nextQuestionButton.enabled = (self.index & self.questions.count-1);
-(void)creatAnswerButton:(NYQuestion *)question
for (UIView *btn in self.answerView.subviews){
[btn removeFromSuperview];
CGFloat answerW = self.answerView.bounds.size.width;
int length = question.answer.length;
CGFloat answerX = (answerW - length*kButtonWidth - (length-1)*kButtonMargin)*0.5;
for (int i = 0; i& i++) {
CGFloat x = answerX + i*(kButtonWidth + kButtonMargin);
UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake(x, 0, kButtonWidth, kButtonHeight)];
[btn setBackgroundImage:[UIImage imageNamed:@"btn_answer"] forState:UIControlStateNormal];
[btn setBackgroundImage:[UIImage imageNamed:@"bn_answer_highlighted" ] forState:UIControlStateHighlighted];
[btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[self.answerView addSubview:btn];
[btn addTarget:self action:@selector(answerClick:) forControlEvents:UIControlEventTouchUpInside];
-(void)creatOptionsButton:(NYQuestion *)question
if (self.optionsView.subviews.count != question.options.count) {
CGFloat optionW = self.optionsView.bounds.size.width;
CGFloat optionX = (optionW - kButtonWidth*kTotolCol - kButtonMargin *(kTotolCol-1))*0.5;
for(int i = 0 ; i&question.options.count;i++)
= i/kTotolC
int col = i%kTotolC
CGFloat x = optionX + col * (kButtonMargin+kButtonWidth);
CGFloat y = row * (kButtonHeight+kButtonMargin);
UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake(x, y, kButtonWidth, kButtonHeight)];
[btn setBackgroundImage:[UIImage imageNamed:@"btn_option"] forState:UIControlStateNormal];
[btn setBackgroundImage:[UIImage imageNamed:@"btn_option_highlighted"] forState:UIControlStateHighlighted];
[btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[self.optionsView addSubview:btn];
[btn addTarget:self action:@selector(optionClick:) forControlEvents:UIControlEventTouchUpInside];
int i = 0;
for (UIButton *btn in self.optionsView.subviews){
[btn setTitle:question.options[i++] forState:UIControlStateNormal];
btn.hidden = NO;
#pragma mark - 备选按钮点击方法
-(void)optionClick:(UIButton *)button
UIButton *ansBtn = [self firstAnswerButton];
if (ansBtn == nil)return;
[ansBtn setTitle:button.currentTitle forState:UIControlStateNormal];
button.hidden = YES;
[self judge];
-(void)judge{
BOOL isFull = YES;
NSMutableString * strM = [NSMutableString string];
for(UIButton * btn in self.answerView.subviews)
if (btn.currentTitle.length == 0) {
isFull = NO;
[strM appendString:btn.currentTitle];
if (isFull) {
NSLog(@"都有字");
NYQuestion *question = self.questions[self.index];
if([question.answer isEqualToString:strM]){
NSLog(@"答对了");
[self setAnswerButtonColor:[UIColor blueColor]];
[self performSelector:@selector(nextQuestion) withObject:nil afterDelay:0.5];
NSLog(@"答错了");
[self setAnswerButtonColor:[UIColor redColor]];
NSLog(@"继续");
-(void)setAnswerButtonColor:(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 nil;
#pragma mark - 答题区按钮点击方法
-(void)answerClick:(UIButton *)button
if (button.currentTitle.length == 0) {
UIButton *btn = [self optionButtonWithTitle:button.currentTitle isHidden:YES];
btn.hidden = NO;
[button setTitle:@"" forState:UIControlStateNormal];
[self setAnswerButtonColor:[UIColor blackColor]];
-(UIButton *) optionButtonWithTitle:(NSString *)title isHidden:(BOOL) isHidden
for (UIButton *btn in self.optionsView.subviews) {
if ([btn.currentTitle isEqualToString:title] && btn.hidden) {
return nil;
#pragma mark - 提示功能
-(IBAction)tipClick
for (UIButton *btn in self.answerView.subviews) {
[self answerClick:btn];
NYQuestion *question = self.questions[self.index];
NSString *first = [question.answer substringToIndex:1];
UIButton * btn = [self optionButtonWithTitle:first isHidden:NO];
[self optionClick:btn];
[self changeScore:-1000];
#pragma mark - 分数处理
-(void)changeScore:(int) score
int currentScore = self.scoreButton.currentTitle.intValue;
currentScore +=
[self.scoreButton setTitle:[NSString stringWithFormat:@"%d",currentScore ] forState:UIControlStateNormal];
字典的代码
#import &Foundation/Foundation.h&
@interface NYQuestion : NSObject
@property (nonatomic, copy) NSString *
@property (nonatomic, copy) NSString *
@property (nonatomic, copy) NSString *
@property (nonatomic, strong) NSArray *
-(instancetype)initWithDict:(NSDictionary *)
+(instancetype)questionWithDick:(NSDictionary *)
+(NSArray *)
-(void)randomO
#import "NYQuestion.h"
@implementation NYQuestion
-(instancetype)initWithDict:(NSDictionary *)dict
self = [super init];
if (self) {
[self setValuesForKeysWithDictionary:dict];
[self randomOptions];
return self;
+(instancetype)questionWithDick:(NSDictionary *)dict
return [[self alloc]initWithDict:dict];
+(NSArray *)questions
NSArray *array = [[NSArray alloc] initWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"questions.plist" ofType:nil]];
NSMutableArray *arrayM = [NSMutableArray array];
for (NSDictionary *dict in array) {
[arrayM addObject:[self questionWithDick:dict]];
return arrayM;
-(void)randomOptions
self.options = [self.options sortedArrayUsingComparator:^NSComparisonResult(NSString *str1, NSString *str2) {
int seed = arc4random_uniform(2);
if (seed) {
return [str1 compare:str2];
return [str2 compare:str1];
上面是全部代码，
学习过程首先自己拖界面上半部分，需求里面写的很清楚了，
然后代码实现下面部分，基本是一个九宫格的布局，猫猫的上一篇里面写了类似哪那样下载功能的用代码实现过程，这里就不啰嗦了。
九宫格学习: 猫猫学IOS（五）UI之360等下载管理器九宫格UI
注释当中写的相当清楚，每个mark都间隔出来了部分的功能，因为是学习写的代码，所以注释写的很全，应该可以看懂。
完成布局后就开始写模型字典了。这里就用到了mvc设计模式，当然这个游戏中主要用到的时mc view方面并不是那么多，主要是对设计逻辑的学习与体现。
然后就按照需求来设计学习编写啦。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：338357次
积分：6424
积分：6424
排名：第3929名
原创：168篇
评论：216条
文章：13篇
阅读：23442
阅读：12540
阅读：16065
文章：27篇
阅读：65869
文章：67篇
阅读：136819
(1)(1)(2)(2)(2)(10)(10)(11)(11)(11)(6)(5)(31)(28)(27)(1)(1)(2)(1)(1)(2)(4)本周下载排行榜& IOS版超级猜图游戏开发实例
秒后自动跳转到登录页
快捷登录：
IOS版超级猜图游戏开发实例，本专题主要涉及的是IOS的开发，从最开始的模型的搭建、创建按钮、图片的缩放等方面，是一个不错的开发实战的例子。
相关视频教程
(共79课时)
(共41课时)
(共145课时)
(共20课时)
(共21课时)
创建者其他专题
意见或建议：
联系方式：
您已提交成功！感谢您的宝贵意见，我们会尽快处理