美文网首页iOS开发笔记
iOS tutorial 15:实现计算器界面布局--Mason

iOS tutorial 15:实现计算器界面布局--Mason

作者: Andy_Ron | 来源:发表于2018-08-17 15:40 被阅读262次

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

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

    1. 显示区域和键盘区域:
    //申明区域,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);
        }];
    
    1. 键盘区域和约束
     //定义键盘键名称,?号代表合并的单元格
        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:实现计算器界面布局--Mason

        本文链接:https://www.haomeiwen.com/subject/tnxtiftx.html