Fork me on GitHub

iOS tutorial 15:实现计算器界面布局--Masonry和SnapKit的学习

MasonrySnapKit分别是OC、Swift的界面布局框架,而且开发者相同。
分别用这两个框架实现一个简单计算器界面:

完全代码:LearniOSByProject/101-MasonryDemoLearniOSByProject/114-SnapKitDemo

  1. 显示区域和键盘区域:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    //申明区域,displayView是显示区域,keyboardView是键盘区域
    UIView *displayView = [UIView new];
    [displayView setBackgroundColor:[UIColor blackColor]];
    [self.view addSubview:displayView];

    UIView *keyboardView = [UIView new];
    [self.view addSubview:keyboardView];

    //displView(显示结果区域)和 keyboardView(键盘区域)
    [displayView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.equalTo(self.view.mas_top);
    make.left.and.right.equalTo(self.view);
    // displView是keyboardView的0.3倍,也就是前者是3份,后者是10份。整个屏幕的占比是前者3/13,后者10/13
    make.height.equalTo(keyboardView).multipliedBy(0.3f);
    }];

    [keyboardView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.equalTo(displayView.mas_bottom);
    make.bottom.equalTo(self.view.mas_bottom);
    make.left.and.right.equalTo(self.view);

    }];

    //设置显示位置的数字为0
    UILabel *displayNum = [[UILabel alloc]init];
    [displayView addSubview:displayNum];
    displayNum.text = @"0";
    displayNum.font = [UIFont fontWithName:@"HeiTi SC" size:70];
    displayNum.textColor = [UIColor whiteColor];
    displayNum.textAlignment = NSTextAlignmentRight;
    [displayNum mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.and.right.equalTo(displayView).with.offset(-10);
    make.bottom.equalTo(displayView).with.offset(-10);
    }];
  2. 键盘区域和约束

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    //定义键盘键名称,?号代表合并的单元格
    NSArray *keys = @[@"AC",@"+/-",@"%",@"÷"
    ,@"7",@"8",@"9",@"x"
    ,@"4",@"5",@"6",@"-"
    ,@"1",@"2",@"3",@"+"
    ,@"0",@"?",@".",@"="];


    int indexOfKeys = 0;
    for (NSString *key in keys){
    //循环所有键
    indexOfKeys++;
    int rowNum = (indexOfKeys % 4 == 0) ? indexOfKeys/4 : (indexOfKeys/4 + 1);
    int colNum = (indexOfKeys % 4 == 0) ? 4 : indexOfKeys % 4;
    NSLog(@"index is:%d and row:%d,col:%d",indexOfKeys,rowNum,colNum);

    //键样式
    UIButton *keyView = [UIButton buttonWithType:UIButtonTypeCustom];
    [keyboardView addSubview:keyView];
    [keyView setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [keyView setTitle:key forState:UIControlStateNormal];
    [keyView.layer setBorderWidth:1];
    [keyView.layer setBorderColor:[[UIColor blackColor]CGColor]];
    [keyView.titleLabel setFont:[UIFont fontWithName:@"Arial-BoldItalicMT" size:30]];

    //键约束
    [keyView mas_makeConstraints:^(MASConstraintMaker *make) {

    //处理 0 合并单元格
    if([key isEqualToString:@"0"] || [key isEqualToString:@"?"] ){

    if([key isEqualToString:@"0"]){
    [keyView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.height.equalTo(keyboardView.mas_height).with.multipliedBy(.2f);
    make.width.equalTo(keyboardView.mas_width).multipliedBy(.5);
    make.left.equalTo(keyboardView.mas_left);
    make.baseline.equalTo(keyboardView.mas_baseline).with.multipliedBy(.92f);

    }];
    }if([key isEqualToString:@"?"]){
    [keyView removeFromSuperview];
    }

    }
    //正常的单元格
    else{
    make.width.equalTo(keyboardView.mas_width).with.multipliedBy(.25f);
    make.height.equalTo(keyboardView.mas_height).with.multipliedBy(.2f);

    //按照行和列添加约束,这里添加行约束
    switch (rowNum) {
    case 1:
    {
    make.baseline.equalTo(keyboardView.mas_baseline).with.multipliedBy(.12f);
    }
    break;
    case 2:
    {
    make.baseline.equalTo(keyboardView.mas_baseline).with.multipliedBy(.32f);
    }
    break;
    case 3:
    {
    make.baseline.equalTo(keyboardView.mas_baseline).with.multipliedBy(.52f);
    }
    break;
    case 4:
    {
    make.baseline.equalTo(keyboardView.mas_baseline).with.multipliedBy(.72f);
    }
    break;
    case 5:
    {
    make.baseline.equalTo(keyboardView.mas_baseline).with.multipliedBy(.92f);
    }
    break;
    default:
    break;
    }
    //按照行和列添加约束,这里添加列约束
    switch (colNum) {
    case 1:
    {
    make.left.equalTo(keyboardView.mas_left);

    }
    break;
    case 2:
    {
    make.right.equalTo(keyboardView.mas_centerX);

    }
    break;
    case 3:
    {
    make.left.equalTo(keyboardView.mas_centerX);
    }
    break;
    case 4:
    {
    make.right.equalTo(keyboardView.mas_right);
    }
    break;
    default:
    break;
    }
    }
    }];
    }

参考:忘记记录了😝

坚持原创技术分享,您的支持将鼓励我继续创作!
  • 本文标题: iOS tutorial 15:实现计算器界面布局--Masonry和SnapKit的学习
  • 本文作者: AndyRon
  • 发布时间: 2018年08月17日 - 22:26
  • 最后更新: 2018年08月22日 - 22:28
  • 本文链接: http://andyron.com/2018/ios-tutorial-15.html
  • 版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!