1. 程式人生 > >Masonry 使用中的一些整理

Masonry 使用中的一些整理

個人喜歡用純程式碼寫東西,其中用到最多的就是Masonry,我整理一些使用過程中一些點,方便以後使用.(基本的語法就不說了)

首先說幾點:

  1. 我一般將數值型別的約束用mas_equalTo,而相對於某個控制元件,或者某個控制元件的某個約束,我會使用equalTo,如:
    make.size.mas_equalTo(CGSizeMake(100, 100));
    make.center.equalTo(weakSelf.view);
  2. setNeedsLayout:告知頁面需要更新,但是不會立刻開始更新。執行後會立刻呼叫layoutSubviews。
    layoutIfNeeded:告知頁面佈局立刻更新。所以一般都會和setNeedsLayout
    一起使用。如果希望立刻生成新的frame需要呼叫此方法,利用這點一般佈局動畫可以在更新佈局後直接使用這個方法讓動畫生效。
    layoutSubviews:系統重寫佈局
    setNeedsUpdateConstraints:告知需要更新約束,但是不會立刻開始
    updateConstraintsIfNeeded:告知立刻更新約束
    updateConstraints:系統更新約束
  3. - (void)updateViewConstraints ViewController的View在更新檢視佈局時,會先呼叫ViewController的updateViewConstraints 方法。我們可以通過重寫這個方法去更新當前View的內部佈局,而不用再繼承這個View去重寫-updateConstraints方法。我們在重寫這個方法時,務必要呼叫 super 或者 呼叫當前View的 -updateConstraints 方法。

1. 檢視居中顯示

 // 防止block中的迴圈引用
__weak typeof(self) weakSelf = self;
UIView* view         = [UIView new];
view.backgroundColor = [UIColor brownColor];
[self.view addSubview:view];
//使用mas_makeConstraints新增約束
[view mas_makeConstraints:^(MASConstraintMaker *make) {

    // 新增大小約束(make就是要新增約束的控制元件view)
    make.size
.mas_equalTo(CGSizeMake(200, 200)); // 新增居中約束(居中方式與self相同) make.center.equalTo(weakSelf.view); }];

2. 兩個檢視等寬高邊距

  UIView* blackView       = [UIView new];
blackView.backgroundColor = [UIColor blackColor];
[self.view addSubview:blackView];

[blackView mas_makeConstraints:^(MASConstraintMaker *make) {
    //新增約束大小
    make.size.mas_equalTo(CGSizeMake(100, 100));
    //在 左,上 新增約束 (左、上約束都是20)
    make.left.and.top.mas_equalTo(20);
}];

UIView* grayView         = [UIView new];
grayView.backgroundColor = [UIColor lightGrayColor];
[self.view addSubview:grayView];

[grayView mas_makeConstraints:^(MASConstraintMaker *make) {
    // 大小、上邊距約束與黑色view相同
    make.size.and.top.equalTo(blackView);
    // 新增右邊距約束(這裡的間距是有方向性的,左、上邊距約束為正數,右、下邊距約束為負數)
    make.right.mas_equalTo(-20);
}];

3. 鍵盤彈出和收回

- (void)dealloc {
    [[NSNotificationCenter defaultCenter] removeObserver:self];
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    __weak typeof(self) weakSelf = self;
    _textField                 = [UITextField new];
    _textField.backgroundColor = [UIColor redColor];
    [self.view addSubview:_textField];

    [_textField mas_makeConstraints:^(MASConstraintMaker *make) {
    //left,right,centerx,y  不能共存只能有其二
    make.left.mas_equalTo(20);
    //        make.right.mas_equalTo(-60);
    make.centerX.equalTo(weakSelf.view);
    make.height.mas_equalTo(40);
    make.bottom.mas_equalTo(0);
    }];

    // 註冊鍵盤通知
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillChangeFrameNotification:) name:UIKeyboardWillChangeFrameNotification object:nil];
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillHideNotification:) name:UIKeyboardWillHideNotification object:nil];
}

- (void)keyboardWillChangeFrameNotification:(NSNotification *)notification {

    // 獲取鍵盤基本資訊(動畫時長與鍵盤高度)
    NSDictionary *userInfo = [notification userInfo];
    CGRect rect = [userInfo[UIKeyboardFrameBeginUserInfoKey] CGRectValue];
    CGFloat keyboardHeight   = CGRectGetHeight(rect);
    CGFloat keyboardDuration = [userInfo[UIKeyboardAnimationDurationUserInfoKey] doubleValue];
    // 修改下邊距約束
    [_textField mas_updateConstraints:^(MASConstraintMaker *make) {
        make.bottom.mas_equalTo(-keyboardHeight);
    }];

    // 更新約束
    [UIView animateWithDuration:keyboardDuration animations:^{
    [self.view layoutIfNeeded];
    }];
}

- (void)keyboardWillHideNotification:(NSNotification *)notification {

    // 獲得鍵盤動畫時長
    NSDictionary *userInfo   = [notification userInfo];
    CGFloat keyboardDuration = [userInfo[UIKeyboardAnimationDurationUserInfoKey] doubleValue];

    // 修改為以前的約束(距下邊距0)
    [_textField mas_updateConstraints:^(MASConstraintMaker *make) {
        make.bottom.mas_equalTo(0);
    }];

    // 更新約束
    [UIView animateWithDuration:keyboardDuration animations:^{
        [self.view layoutIfNeeded];
    }];
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    [super touchesBegan:touches withEvent:event];
    [self.view endEditing:YES];
}

4. 三控制元件等寬間距

方法一:

array 的 mas_distributeViewsAlongAxis withFixedSpacing 變化的是控制元件 長度或寬度

定義一個存放三個控制元件的陣列NSArray *array;
array = @[greenView,redView,blueView];

直接呼叫下面的方法:

- (void)getHorizontalone
{
//方法一,array 的 mas_distributeViewsAlongAxis
/**
 *  多個控制元件固定間隔的等間隔排列,變化的是控制元件的長度或者寬度值
 *
 *  @param axisType        軸線方向
 *  @param fixedSpacing    間隔大小
 *  @param leadSpacing     頭部間隔
 *  @param tailSpacing     尾部間隔
 */
//    MASAxisTypeHorizontal  水平
//    MASAxisTypeVertical    垂直

[arrayList mas_distributeViewsAlongAxis:MASAxisTypeHorizontal
                       withFixedSpacing:20
                            leadSpacing:5
                            tailSpacing:5];
[arrayList mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.mas_equalTo(60);
    make.height.mas_equalTo(100);
}];

}

方法二:

array de mas_distributeViewsAlongAxis withFixedItemLength 控制元件size不變,變化的是間隙

- (void)getVertical
{
/**
 *  多個固定大小的控制元件的等間隔排列,變化的是間隔的空隙
 *
 *  @param axisType        軸線方向
 *  @param fixedItemLength 每個控制元件的固定長度或者寬度值
 *  @param leadSpacing     頭部間隔
 *  @param tailSpacing     尾部間隔
 */
[arrayList mas_distributeViewsAlongAxis:MASAxisTypeVertical
                    withFixedItemLength:60
                            leadSpacing:40
                            tailSpacing:10];
[arrayList mas_makeConstraints:^(MASConstraintMaker *make) {
    //        make.top.mas_equalTo(100);
    //        make.height.mas_equalTo(100);
    make.left.mas_equalTo(20);
    make.right.mas_equalTo(-20);
}];

}

以上倆方法都在NSArray+MASAdditions
方法三:直接設定multiplier實現等間距
 for (NSUInteger i = 0; i < 4; i++) {
    UIView *itemView = [self getItemViewWithIndex:i];
    [_containerView addSubview:itemView];

    [itemView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.width.and.height.equalTo(@(ITEM_SIZE));
        make.centerY.equalTo(_containerView.mas_centerY);
        make.centerX.equalTo(_containerView.mas_right).multipliedBy(((CGFloat)i + 1) / ((CGFloat)ITEM_COUNT + 1));
    }];
}
方法四: 利用透明等寬度的SpaceView實現等間距
  UIView *lastSpaceView       = [UIView new];
lastSpaceView.backgroundColor = [UIColor greenColor];
[_containerView1 addSubview:lastSpaceView];

[lastSpaceView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.and.top.and.bottom.equalTo(_containerView1);
}];

for (NSUInteger i = 0; i < ITEM_COUNT; i++) {
    UIView *itemView = [self getItemViewWithIndex:i];
    [_containerView1 addSubview:itemView];

    [itemView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.height.and.width.equalTo(@(ITEM_SIZE));
        make.left.equalTo(lastSpaceView.mas_right);
        make.centerY.equalTo(_containerView1.mas_centerY);
    }];

    UIView *spaceView         = [UIView new];
    spaceView.backgroundColor = [UIColor greenColor];
    [_containerView1 addSubview:spaceView];

    [spaceView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(itemView.mas_right).with.priorityHigh(); // 降低優先順序,防止寬度不夠出現約束衝突
        make.top.and.bottom.equalTo(_containerView1);
        make.width.equalTo(lastSpaceView.mas_width);
    }];

    lastSpaceView = spaceView;
}

[lastSpaceView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.right.equalTo(_containerView1.mas_right);
}];
5. 動態改變字型寬度

和麵方法4一樣,利用spaceView來實現

  UIView* bgView       = [[UIView alloc]init];
bgView.backgroundColor = [UIColor yellowColor];
[self.view addSubview:bgView];

[bgView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.and.right.mas_equalTo(0);
    make.top.mas_equalTo(@100);
    make.height.mas_equalTo(@100);
}];

listText = @[@"北京",@"地大吳波啊",@"你大爺",@"我們的愛哎哎"];
UIView *lastSpaceView = nil;
for(int i = 0 ; i < listText.count;  i ++)
{
    UILabel* label = [UILabel new];
    label.text     = listText[i];
    label.backgroundColor = RANDOMCOLOR;
    [bgView addSubview:label];

    UIView* lineView         = [UIView new];
    lineView.backgroundColor = [UIColor redColor];
    [bgView addSubview:lineView];

    [label mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.bottom.mas_equalTo(0);
        if (lastSpaceView)
        {
            NSLog(@"存在 lastView");
            make.left.equalTo(lastSpaceView.mas_right).mas_offset(@20);
        }else
        {
            NSLog(@"不存在存在 lastView");
            make.left.equalTo(bgView.mas_left);
        }
        make.height.equalTo(bgView);
    }];

    lastSpaceView = label;

    [lineView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.and.bottom.mas_equalTo(0);
        make.width.mas_equalTo(1);
        make.left.mas_equalTo(label.mas_right).mas_offset(@10);
    }];
}
效果圖:

6. 父檢視的高度,是裡面倆控制元件高度的和
  UIView* bgView       = [UIView new];
bgView.backgroundColor = [UIColor purpleColor];
[self.view addSubview:bgView];

UILabel* titleLab        = [UILabel new];
titleLab.backgroundColor = [UIColor redColor];
titleLab.textAlignment   = NSTextAlignmentCenter;
titleLab.font            = [UIFont systemFontOfSize:15.f];
titleLab.text            = @"曹操——《短歌行》";
[bgView addSubview:titleLab];

UILabel* contentLab        = [UILabel new];
contentLab.numberOfLines   = 0 ;
contentLab.textAlignment   = NSTextAlignmentCenter;
contentLab.backgroundColor = [UIColor brownColor];
contentLab.font            = [UIFont systemFontOfSize:13.f];
contentLab.text            = @" 對酒當歌,人生幾何? 譬如朝露,去日苦多。\n 慨當以慷,憂思難忘。 何以解憂?唯有杜康。\n 青青子衿,悠悠我心。 但為君故,沉吟至今。\n 呦呦鹿鳴,食野之苹。 我有嘉賓,鼓瑟吹笙。\n 明明如月,何時可掇? 憂從中來,不可斷絕。\n 越陌度阡,枉用相存。 契闊談宴,心念舊恩。\n 月明星稀,烏鵲南飛。 繞樹三匝,何枝可依?\n 山不厭高,海不厭深。 周公吐哺,天下歸心。";

[bgView addSubview:contentLab];
//思路: 父檢視的上間距等於title的上間距,父檢視的下間距等於content的下間距
__weak typeof(self) weakSelf = self;
[bgView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.mas_offset(@30);
    make.right.mas_offset(@-30);
    make.centerY.equalTo(weakSelf.view);
}];

[titleLab mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.top.right.mas_equalTo(@0);
}];

[contentLab mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.right.mas_equalTo(@0);
    make.top.equalTo(titleLab.mas_bottom).mas_offset(@10);
    make.bottom.equalTo(bgView);
}];

效果圖:


以後慢慢更新,記錄方便以後使用



文/棟飛

//一些扒的別人的記錄

自適應佈局允許將寬度或高度設定為固定值.如果你想要給檢視一個最小或最大值,你可以這樣:

//width >= 200 && width <= 400make.width.greaterThanOrEqualTo(@200);make.width.lessThanOrEqualTo(@400)

約束的優先順序

.priority允許你指定一個精確的優先順序,數值越大優先順序越高.最高1000.
.priorityHigh等價於 UILayoutPriorityDefaultHigh .優先順序值為 750.
.priorityMedium介於高優先順序和低優先順序之間,優先順序值在 250~750之間.
.priorityLow等價於 UILayoutPriorityDefaultLow , 優先順序值為 250.

優先順序可以在約束的尾部新增:

make.left.greaterThanOrEqualTo(label.mas_left).with.priorityLow();
make.top.equalTo(label.mas_top).with.priority(600);

center 中心

//使 centerX和 centerY = button1
make.center.equalTo(button1)

//使 centerX = superview.centerX - 5, centerY = superview.centerY + 10make.center.equalTo(superview).centerOffset(CGPointMake(-5, 10))

指定寬度為父檢視的 1/4.

make.width.equalTo(superview).multipliedBy(0.25);



文/魏同學(簡書作者)
原文連結:http://www.jianshu.com/p/a24dd8638d28
著作權歸作者所有,轉載請聯絡作者獲得授權,並標註“簡書作者”。

相關推薦

Masonry 使用一些整理

個人喜歡用純程式碼寫東西,其中用到最多的就是Masonry,我整理一些使用過程中一些點,方便以後使用.(基本的語法就不說了) 首先說幾點: 我一般將數值型別的約束用mas_equalTo,而相對於某個控制元件,或者某個控制元件的某個約束,我會使用equalTo,如:make

oraclevarchar2使用的一些整理

oracle中有三種比較常用的型別:varchar2(byte)、varchar2(char)、nvarchar2()。 那麼這三種類型到底有什麼區別呢? 首先,我們要時刻記清:無論是varchar2還是nvarchar2,最大位元組數都是4000。 ALTER SESSION SET

J2EE一些常用的方法和細節整理

1.setAttribute、getAttribute方法 方法 描述 注意點 void setAttribute(String name,Object o) 設定屬性的名稱及內容

關於numpy、pandas、matplotlib、SciPy使用一些問題的不定期收集整理

1.這幾個元件的關係? 答:這幾個都是python中的庫。都需要import使用。 【1】其中numpy是python進行科學計算的基礎包,核心關注快速高效的資料讀寫處理,包括和其他語言間的配合,當然它也包含眾多對陣列的元素級操作以及相關數學運算函式。 【2】而pandas是使得pyth

vue使用一些整理(componet等)

建立元件 var aaa = Vue.component('labelSearch', { template: '<div>3333333333333333444</div>', data: function ()

JAVA 一些常常混淆的概念 (整理

Person person; person = new Person("張三");   這兩行程式碼實現的功能和上面的一行程式碼是完全一樣的。大家都知道,在Java中new是用來在堆上建立物件用的,如果person是一個物件的話,那麼第二行為何還要通過new來建立物件呢?由此可

關於量子計算機的一些整理 (精心整理原創) (一)

ole comm ip 協議 sse2 工程 5.0 tle 世界 sea 首先祝賀中國在量子計算方面的突出進步。 “5月3日,中國科技大學潘建偉教授宣布,研究團隊在去年首次實現十光子糾纏操縱的基礎上,構建了世界首臺超越早期經典計算機的單光子量子計算機。量子計算利用

numpy一些常用函數的用法總結

num matrix 空白 記錄 維數 補充 結果 創建 array 先簡單記錄一下,後續補充詳細的例子 1. strip()函數 s.strip(rm):s為字符串,rm為要刪除的字符序列 只能刪除開頭或是結尾的字符或者字符串。不能刪除中間的字符或是字符串 當rm為空

gdb一些常用的調試命令

== 指定 函數名 filename expr ons 函數 pre 調用 show version :顯示gdb版本信息 info functions :列出可執行文件的所有函數名稱 step(縮寫s):進入函數(函數必須有調試信息) next(縮寫n):不進入函數,g

總結Selenium WebDriver一些鼠標和鍵盤事件的使用

ict 效果 control window 只需要 html 執行 text keyevent 在使用 Selenium WebDriver 做自動化測試的時候,會經常模擬鼠標和鍵盤的一些行為。比如使用鼠標單擊、雙擊、右擊、拖拽等動作;或者鍵盤輸入、快捷鍵使用、組合鍵使用

Java一些jar包的作用

span 緩存 cxf 6.0 pri tag like servlet license axis.jar SOAP引擎包 commons-discovery-0.2.jar 用來發現、查找和實現可插入式接口,提供一些一般類實例化、單件的生命周期管理的常用方法. j

C#一些字符串操作的經常使用使用方法

mod tel ace pop 頻率 for char replace span 概述 本篇主要解說,字符串string的基本操作知識 倒序輸出 string str = Console.ReadLine(); for (i

前端開發一些容易混淆的概念匯總

提交表單 容易 html text bmi blog 技術分享 mit script ★:HTML中,按鈕button與submit區別是什麽? 1,button 定義可點擊按鈕(多數情況下,用於通過 JavaScript 啟動腳本)。 2,submit 定

如何查找Linux一些特殊數據類型定義,比如pid_t和uid_t(轉)

分享 文件 技術分享 定義 log 相關 uid linux源碼 pid 1. 查看man手冊,找到pid_t,可以通過getpid函數來看 2. 打開sys/types.h 3. 打開bits/types.h 4.

CentOS 7一些參數的設定

linux1、設置時區timedatectl list-timezones #列出所有時區 timedatectl set-local-rtc 1 #將硬件時鐘調整為與本地時鐘一致,0為設置為UTC時間 timedatectl set-timezone Asia/Shan

MapReduce 2 一些基礎數據類型

數據類型 com 浮點 ava key 接口 apr int java 數據類型 1. LongWritable, IntWritable, Text 均是 Hadoop 中實現的用於封裝 Java 數據類型的類,這些類實現了WritableComparable接口,都能夠

python字符串一些函數的用法

strip() strip 左右 art orm 是不是 必須 執行 count() 1..capitalize():字符串的首字母大寫; 2..count():字符串中的某個字母的個數; 3..center(50,‘-‘):對象居中,且左右用‘-’補齊; 4..enco

JS一些常用的代碼塊

最小值 all tran == 驗證 pro 代碼塊 length 需要 本文記錄了一些工作中常用到的js代碼。 1. 生成指定範圍內的隨機數 例如隨機獲取顏色rgba的參數值時 function setRandomNum(m,n){   return Math.floor

Python 一些代碼的功能2

代碼 位置 pen 是不是 python nes fin capital case   name="i have a beautiful flower"   print(name.capitalize())#使name中的首字母大寫   print(name.count("

android一些特殊字符(如:←↑→↓等箭頭符號)的Unicode碼值

lin gb2312 ring clu itl app lan orien lam 在項目中,有時候在一些控件(如Button、TextView)中要添加一些符號,如下圖所示: 這個時候可以使用圖片的方式來顯示,不過這