zoukankan      html  css  js  c++  java
  • iOS--Masonry的简单使用

      最近搭见面尝试了下Masonry,感觉挺不错的,比手写frame快多了,又避免了storyboard和xib的复杂约束。

    这是效果图 ps:以前看到这样的就愁死了,各种计算坐标,用Masonry分分钟的事。

    代码:用的不是很熟练,有不少走了弯路的地方欢迎指正~~~~(>_<)~~~~

    #import "HomeView.h"
    #import <Masonry.h>
    
    @implementation HomeView
    @synthesize myEquipmentBtn,aboutCompanyBtn,errorRecordingBtn,equipmentStateBtn,remoteControlBtn,equipmentGraphBtn,guideBtn;
    
    - (id)initWithFrame:(CGRect)frame {
        
        self = [super initWithFrame:frame];
        if (self) {
            self.backgroundColor = [UIColor whiteColor];
            [self setUpSubViews];
        }
        
        return self;
    }
    
    - (void)setUpSubViews {
        
        /**
         *  创建子视图并添加
         */
    //使用Masonry必须先把控件初始化,然后添加到共同的父视图上
        //我的设备
        myEquipmentBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    //    myEquipmentBtn.backgroundColor = [UIColor redColor];
        [self addSubview:myEquipmentBtn];
        [myEquipmentBtn setBackgroundImage:[UIImage imageNamed:@"1"] forState:0];
        //关于我们
        aboutCompanyBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    //    aboutCompanyBtn.backgroundColor = [UIColor redColor];
        [aboutCompanyBtn setBackgroundImage:[UIImage imageNamed:@"3"] forState:0];
        [self addSubview:aboutCompanyBtn];
        //故障记录
        errorRecordingBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    //    errorRecordingBtn.backgroundColor = [UIColor redColor];
        [errorRecordingBtn setBackgroundImage:[UIImage imageNamed:@"6"] forState:0];
        [self addSubview:errorRecordingBtn];
        //设备状态
        equipmentStateBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    //    equipmentStateBtn.backgroundColor = [UIColor redColor];
        [equipmentStateBtn setBackgroundImage:[UIImage imageNamed:@"2"] forState:0];
        [self addSubview:equipmentStateBtn];
        //远程控制
        remoteControlBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    //    remoteControlBtn.backgroundColor = [UIColor redColor];
        [remoteControlBtn setBackgroundImage:[UIImage imageNamed:@"4"] forState:0];
        [self addSubview:remoteControlBtn];
    
        //设备曲线图
        equipmentGraphBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    //    equipmentGraphBtn.backgroundColor = [UIColor redColor];
        [equipmentGraphBtn setBackgroundImage:[UIImage imageNamed:@"5"] forState:0];
        [self addSubview:equipmentGraphBtn];
        //使用说明
        guideBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    //    guideBtn.backgroundColor = [UIColor redColor];
        [guideBtn setBackgroundImage:[UIImage imageNamed:@"guide"] forState:0];
        [self addSubview:guideBtn];
        
        /**
         *  约束
         *
         *  @param make <#make description#>
         *
         *  @return <#return value description#>
         */
    
        //我的设备
        [myEquipmentBtn mas_makeConstraints:^(MASConstraintMaker *make) {
         //上边距离父视图上边5各单位 make.top.equalTo(self.mas_top).with.offset(
    5);
         //左边距离父视图左边0个单位  make.left.equalTo(self.mas_left).with.offset(
    0);
         //宽等于父视图宽的0.5倍 multipliedBy(0.5)设定比例 make.width.equalTo(self.mas_width).with.multipliedBy(
    0.5);
         //高等于父视图高的0.5倍 make.height.equalTo(self.mas_height).with.multipliedBy(
    0.2); }]; //关于我们 [aboutCompanyBtn mas_makeConstraints:^(MASConstraintMaker *make) {
         //上边距离上部控件的底边5个单位 make.top.equalTo(myEquipmentBtn.mas_bottom).with.offset(
    5);
         //左边距离父视图左边0个单位 make.left.equalTo(contentView.mas_left).with.offset(
    0);
         //宽和上方的控件一样宽 make.width.equalTo(myEquipmentBtn.mas_width);
         //高是父视图高的0.4倍 make.height.equalTo(self.mas_height).with.multipliedBy(
    0.4); }]; //故障记录 [errorRecordingBtn mas_makeConstraints:^(MASConstraintMaker *make) {
         //上边距离上部控件的底边5个单位 make.top.equalTo(aboutCompanyBtn.mas_bottom).with.offset(
    5);
         //左边距离父视图左边0个单位 make.left.equalTo(self.mas_left).with.offset(
    0);
         //等宽 make.width.equalTo(myEquipmentBtn.mas_width);
         //下边距离父视图下边-5个单位,,+5的话控件就跑出父视图之外了,-5说明在父视图里面 make.bottom.equalTo(self.mas_bottom).with.offset(
    -5); }]; //设备状态 [equipmentStateBtn mas_makeConstraints:^(MASConstraintMaker *make) { make.top.equalTo(self.mas_top).with.offset(5); make.left.equalTo(myEquipmentBtn.mas_right).with.offset(5); make.right.equalTo(self.mas_right).with.offset(0); make.height.equalTo(self.mas_height).with.multipliedBy(0.15); }]; //远程控制 [remoteControlBtn mas_makeConstraints:^(MASConstraintMaker *make) { make.top.equalTo(equipmentStateBtn.mas_bottom).with.offset(5); make.left.equalTo(myEquipmentBtn.mas_right).with.offset(5); make.width.equalTo(equipmentStateBtn.mas_width); make.height.equalTo(self.mas_height).with.multipliedBy(0.15); }]; //设备曲线图 [equipmentGraphBtn mas_makeConstraints:^(MASConstraintMaker *make) { make.top.equalTo(remoteControlBtn.mas_bottom).with.offset(5); make.left.equalTo(myEquipmentBtn.mas_right).with.offset(5); make.width.equalTo(remoteControlBtn.mas_width); make.height.equalTo(self.mas_height).with.multipliedBy(0.23); }]; //使用说明 [guideBtn mas_makeConstraints:^(MASConstraintMaker *make) { make.top.equalTo(equipmentGraphBtn.mas_bottom).with.offset(5); make.left.equalTo(myEquipmentBtn.mas_right).with.offset(5); make.width.equalTo(remoteControlBtn.mas_width); make.bottom.equalTo(self.mas_bottom).with.offset(-5); }]; } @end
  • 相关阅读:
    网页居中的问题
    棋盘覆盖
    可变宽度的圆角框
    多线程编辑问题
    实验五 Web项目开发
    实验三 一个标准的Windows应用程序
    【语言处理与Python】1.2将文本当作词链表
    【语言处理与Python】1.5自动理解自然语言
    【语言处理与Python】1.1文本和单词
    【语言处理与Python】1.3计算语言:简单的统计
  • 原文地址:https://www.cnblogs.com/zhangshan/p/5313401.html
Copyright © 2011-2022 走看看