[IOS]今天开始学UI---UIButton with NumberMatch Game

本文链接：https://blog.csdn.net/HeapStackk/article/details/47291321

UIButton 拦截用户的触碰请求并且触发请求

头文件是最好的老师

所以我们先看看头文件里面有什么已废弃的方法和属性并不在讨论之列

typedef NS_ENUM(NSInteger, UIButtonType) {
    UIButtonTypeCustom = 0,                         // no button type
    UIButtonTypeSystem NS_ENUM_AVAILABLE_IOS(7_0),  // standard system button

    UIButtonTypeDetailDisclosure,
    UIButtonTypeInfoLight,
    UIButtonTypeInfoDark,
    UIButtonTypeContactAdd,
    
    UIButtonTypeRoundedRect = UIButtonTypeSystem,   // Deprecated, use UIButtonTypeSystem instead
};

NS_CLASS_AVAILABLE_IOS(2_0) @interface UIButton : UIControl <NSCoding>

+ (id)buttonWithType:(UIButtonType)buttonType;

@property(nonatomic)          UIEdgeInsets contentEdgeInsets UI_APPEARANCE_SELECTOR; // default is UIEdgeInsetsZero
@property(nonatomic)          UIEdgeInsets titleEdgeInsets;                // default is UIEdgeInsetsZero
@property(nonatomic)          BOOL         reversesTitleShadowWhenHighlighted; // default is NO. if YES, shadow reverses to shift between engrave and emboss appearance
@property(nonatomic)          UIEdgeInsets imageEdgeInsets;                // default is UIEdgeInsetsZero
@property(nonatomic)          BOOL         adjustsImageWhenHighlighted;    // default is YES. if YES, image is drawn darker when highlighted(pressed)
@property(nonatomic)          BOOL         adjustsImageWhenDisabled;       // default is YES. if YES, image is drawn lighter when disabled
@property(nonatomic)          BOOL         showsTouchWhenHighlighted;      // default is NO. if YES, show a simple feedback (currently a glow) while highlighted
@property(nonatomic,retain)   UIColor     *tintColor NS_AVAILABLE_IOS(5_0); // The tintColor is inherited through the superview hierarchy. See UIView for more information.
@property(nonatomic,readonly) UIButtonType buttonType;

// you can set the image, title color, title shadow color, and background image to use for each state. you can specify data
// for a combined state by using the flags added together. in general, you should specify a value for the normal state to be used
// by other states which don't have a custom value set

- (void)setTitle:(NSString *)title forState:(UIControlState)state;                     // default is nil. title is assumed to be single line
- (void)setTitleColor:(UIColor *)color forState:(UIControlState)state UI_APPEARANCE_SELECTOR; // default if nil. use opaque white
- (void)setTitleShadowColor:(UIColor *)color forState:(UIControlState)state UI_APPEARANCE_SELECTOR; // default is nil. use 50% black
- (void)setImage:(UIImage *)image forState:(UIControlState)state;                      // default is nil. should be same size if different for different states
- (void)setBackgroundImage:(UIImage *)image forState:(UIControlState)state UI_APPEARANCE_SELECTOR; // default is nil
- (void)setAttributedTitle:(NSAttributedString *)title forState:(UIControlState)state NS_AVAILABLE_IOS(6_0); // default is nil. title is assumed to be single line

- (NSString *)titleForState:(UIControlState)state;          // these getters only take a single state value
- (UIColor *)titleColorForState:(UIControlState)state;
- (UIColor *)titleShadowColorForState:(UIControlState)state;
- (UIImage *)imageForState:(UIControlState)state;
- (UIImage *)backgroundImageForState:(UIControlState)state;
- (NSAttributedString *)attributedTitleForState:(UIControlState)state NS_AVAILABLE_IOS(6_0);

// these are the values that will be used for the current state. you can also use these for overrides. a heuristic will be used to
// determine what image to choose based on the explict states set. For example, the 'normal' state value will be used for all states
// that don't have their own image defined.

@property(nonatomic,readonly,retain) NSString *currentTitle;             // normal/highlighted/selected/disabled. can return nil
@property(nonatomic,readonly,retain) UIColor  *currentTitleColor;        // normal/highlighted/selected/disabled. always returns non-nil. default is white(1,1)
@property(nonatomic,readonly,retain) UIColor  *currentTitleShadowColor;  // normal/highlighted/selected/disabled. default is white(0,0.5).
@property(nonatomic,readonly,retain) UIImage  *currentImage;             // normal/highlighted/selected/disabled. can return nil
@property(nonatomic,readonly,retain) UIImage  *currentBackgroundImage;   // normal/highlighted/selected/disabled. can return nil
@property(nonatomic,readonly,retain) NSAttributedString *currentAttributedTitle NS_AVAILABLE_IOS(6_0);  // normal/highlighted/selected/disabled. can return nil

// return title and image views. will always create them if necessary. always returns nil for system buttons
@property(nonatomic,readonly,retain) UILabel     *titleLabel NS_AVAILABLE_IOS(3_0);
@property(nonatomic,readonly,retain) UIImageView *imageView  NS_AVAILABLE_IOS(3_0);

// these return the rectangle for the background (assumes bounds), the content (image + title) and for the image and title separately. the content rect is calculated based
// on the title and image size and padding and then adjusted based on the control content alignment. there are no draw methods since the contents
// are rendered in separate subviews (UIImageView, UILabel)

- (CGRect)backgroundRectForBounds:(CGRect)bounds;
- (CGRect)contentRectForBounds:(CGRect)bounds;
- (CGRect)titleRectForContentRect:(CGRect)contentRect;
- (CGRect)imageRectForContentRect:(CGRect)contentRect;
@end

首先看一看UIButton 所支持的样式

typedef NS_ENUM(NSInteger, UIButtonType) {
    UIButtonTypeCustom = 0,                         // no button type
    UIButtonTypeSystem NS_ENUM_AVAILABLE_IOS(7_0),  // standard system button

    UIButtonTypeDetailDisclosure,
    UIButtonTypeInfoLight,
    UIButtonTypeInfoDark,
    UIButtonTypeContactAdd,
    
    UIButtonTypeRoundedRect = UIButtonTypeSystem,   // Deprecated, use UIButtonTypeSystem instead
};

从上图可以看出总共7种实际上只有6种 UIButtonTypeRoundRect实际上已废弃就算使用也是变成UIButtonTypeSystem类型之所以做这种改变是因为

苹果在推行无边框Button 为了统一UI界面设计样式

以下将分别列出各种样式

UIButtonTypeCustom用户自定义

UIButtonTypeSystem

UIButtonTypeDetailDisclosure UIButtonTypeInfoLight UIButtonTypeInfoDark 三者其实在图标的展示上其实差不多

UIButtonTypeContactAdd

@property(nonatomic)          UIEdgeInsets contentEdgeInsets UI_APPEARANCE_SELECTOR; // default is UIEdgeInsetsZero
@property(nonatomic)          UIEdgeInsets titleEdgeInsets;                // default is UIEdgeInsetsZero
@property(nonatomic)          UIEdgeInsets imageEdgeInsets;

这三货其实就类似CSS样式表中的padding属性只是在IOS中换了个名字叫法

padding是什么？就是该内容距离上左下右边的内边距

所以就是内容/标题/图片离各边的距离。

UIButton也是View 所以也就具备几何特性可以设置其frame bounds center等属性

UIButton常用属性：
//设置对应状态的标题内容default is nil.
- (void)setTitle:(NSString *)title forState:(UIControlState)state;
//设置对应状态的标题颜色
- (void)setTitleColor:(UIColor *)color forState:(UIControlState)state;
//设置对应状态的标题阴影颜色
- (void)setTitleShadowColor:(UIColor *)color forState:(UIControlState)state;
//设置对应状态的按钮的图片
- (void)setImage:(UIImage *)image forState:(UIControlState)state;
//设置对应状态的按钮背景图片

- (void)setBackgroundImage:(UIImage *)image forState:(UIControlState)state;

//设置对应状态的按钮的图片此方法与上不同主要在于背景图片≠图片该图片的尺寸也比背景图片要小

- (void)setImage:(UIImage *)image forState:(UIControlState)state;

//改方法能同时改变图片的颜色和 tittleColor

-(void)setTintColor(UIColor *)color forState:(UIControlState)state;

下图讲解

UIButton可使用 initWithFrame、buttonWithType两种方式创建：
1）initWithFrame

  UIButton *btn=[[UIButton alloc]initWithFrame:CGRectMake(60, 60, 200, 60)];  
  btn.backgroundColor=[UIColor greenColor];  
  [btn setTitle:@"btn1" forState:UIControlStateNormal];  
  [self.view addSubview:btn];

2）buttonWithType

    UIButton *btn2=[UIButton buttonWithType:UIButtonTypeRoundedRect];  
    CGRect rect=CGRectMake(60, 160, 200, 60);  
    btn2.frame=rect;  
    btn2.backgroundColor=[UIColor colorWithRed:30/255.0 green:200/255.0 blue:125/255.0 alpha:1.0];  
    [btn2 setTitle:@"btn2" forState:UIControlStateNormal];  
    [self.view addSubview:btn2];

UIButton的作用在于与用户进行交互

所以就可以绑定点击触发事件

需要调用到其直接父类UIControl的

- (void)addTarget:(id)target action:(SEL)action forControlEvents:(UIControlEvents)controlEvents;

三个参数第一个参数一般传入当前的Controller 第二个参数就是方法名第三个就是触发事件类型

方法绑定触发事件函数

事件定义

- (void)buttonClicked:(UIButton *)button {
    NSLog(@"A button was clicked: %@.", button);
}

绑定

[self.btn addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];

其实完全可以自己写个UIView继承 UIControl来达到UIButton的目的

that's all

thx

Everything you see on Screen is UIView.

哦忘记加上我的简单的数字匹配游戏了

补上实际效果如下图但是部分优化没没做好仍然有点Bug

源码附上

//
//  ViewController.m
//  NumberMatchGameWithUIButton
//
//  Created by Kratos on 8/5/15.
//  Copyright (c) 2015 Kratos. All rights reserved.
//

#import "ViewController.h"
typedef struct{
    int x;
    int y;
}Index;

int kBaseY=80,kBaseX=17,kXPlus=90,kYPlus=90;
@interface ViewController (){
    int matrix[4][4];
    int clickedCount;
    int score;
}
@property (nonatomic,strong) UILabel *scoreLabel;
@property (nonatomic,strong) UIButton *button1;
@property (nonatomic,strong) UIButton *button2;
@property (nonatomic,strong) UIButton *needToChangeButton1;
@property (nonatomic,strong) UIButton *needToChangeButton2;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    [self initParams];
    [self initMatrix];
    [self initViews];
}


/**
 *  Compare the button clicked and pre-clicked one,
 *  if preclicked one doens't exist set the button1 and return
 *  if clicked the same button twice,doesn't change anything just return
 *  the when clicke two different button compare the two button if numbers match denable them else show only 0.8s
 *  @param button current clicked button
 */
- (void)compareTwoItem:(UIButton *)button{
    if (_button1 == nil) {
        _button1 = button;
        clickedCount ++;
        int tmp1 = [_button1.currentTitle intValue];
        Index i = [self caculateXandY:tmp1];
        int number1 = matrix[i.x][i.y];
        NSString *imageName=[NSString stringWithFormat:@"%i.jpg",number1];
        UIImage *buttonImage=[UIImage imageNamed:imageName];
        [_button1 setBackgroundImage:buttonImage forState:UIControlStateNormal];
        return;
    }
    if (_button1==button) {
        return;
    }
    _button2 = button;
    int tmp1 = [_button1.currentTitle intValue];
    int tmp2 = [_button2.currentTitle intValue];
    Index i1 = [self caculateXandY:tmp1];
    Index i2 = [self caculateXandY:tmp2];
    int number1 = matrix[i1.x][i1.y];
    int number2 = matrix[i2.x][i2.y];
    if (number1 == number2) {
        NSString *imageName=[NSString stringWithFormat:@"%i.jpg",number1];
        UIImage *buttonImage=[UIImage imageNamed:imageName];
        [_button1 setBackgroundImage:buttonImage forState:UIControlStateNormal];
        [_button2 setBackgroundImage:buttonImage forState:UIControlStateNormal];
        [_button1 setEnabled:NO];
        [_button2 setEnabled:NO];
        score ++;
        [_scoreLabel setText:[NSString stringWithFormat:@"Score:%i",score]];

    }else{
        NSString *imageName1=[NSString stringWithFormat:@"%i.jpg",number1];
        UIImage *buttonImage1=[UIImage imageNamed:imageName1];
        NSString *imageName2=[NSString stringWithFormat:@"%i.jpg",number2];
        UIImage *buttonImage2=[UIImage imageNamed:imageName2];
        [_button1 setBackgroundImage:buttonImage1 forState:UIControlStateNormal];
        [_button2 setBackgroundImage:buttonImage2 forState:UIControlStateNormal];
        _needToChangeButton1 = _button1;
        _needToChangeButton2 = _button2;
        NSTimeInterval delay=0.8;
        [self performSelector:@selector(numberNotMatchPicDelayCancel) withObject:nil afterDelay:delay];
    }
    clickedCount = 0;
    _button1 = nil;
    _button2 = nil;
}

//just caculate the index in matrix
-(Index)caculateXandY:(int)index {
    Index i;
    i.x=index/4;
    i.y=index%4;
    return i;
}
//reover default background
- (void) numberNotMatchPicDelayCancel{
    UIImage *buttonInitImage=[UIImage imageNamed:@"0.jpg"];
    [_needToChangeButton1 setBackgroundImage:buttonInitImage forState:UIControlStateNormal];
    [_needToChangeButton2 setBackgroundImage:buttonInitImage forState:UIControlStateNormal];
    _needToChangeButton1 = nil;
    _needToChangeButton2 = nil;
}


- (void)initParams{
    clickedCount = 0;
    score = 0;
}

//matrix is used to store random number by pair
-(void) initMatrix{
    clickedCount = 0;
    int count[8]={0,0,0,0,0,0,0,0};
    for (int i=0; i<16; i++) {
        int x=i%4;
        int y=i/4;
        int number=arc4random()%8+1;
        while (count[number-1]==2) {
            number=arc4random()%8+1;
        }
        count[number-1]++;
        matrix[x][y]=number;
    }
}
//add a label  and 16 buttons
- (void)initViews{
    _scoreLabel=[[UILabel alloc] initWithFrame:CGRectMake(75, 60, 225, 40)];
    _scoreLabel.font=[UIFont systemFontOfSize:24.0f];
    _scoreLabel.textAlignment=NSTextAlignmentCenter;
    _scoreLabel.backgroundColor=[UIColor blackColor];
    _scoreLabel.textColor=[UIColor whiteColor];
    _scoreLabel.text=@"Score:0";
    [self.view addSubview:_scoreLabel];

    UIImage *buttonInitImage=[UIImage imageNamed:@"0.jpg"];
    for (int i=0; i<16; i++) {
        if (0==i%4) {
            kBaseY+=kYPlus;
        }

        UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
        button.frame=CGRectMake(kBaseX+kXPlus*(i%4), kBaseY, 80, 80);
        NSString *tmp=[NSString stringWithFormat:@"%i",i];
        [button setTitle:tmp  forState:UIControlStateNormal];
        button.titleLabel.font = [UIFont systemFontOfSize: 1.0];
        [button addTarget:self action:@selector(compareTwoItem:) forControlEvents:UIControlEventTouchUpInside];
        [button setBackgroundImage:buttonInitImage forState:UIControlStateNormal];
        [self.view addSubview:button];
    }

}


@end