# MasonryLoginDemo

**Repository Path**: uil/MasonryLoginDemo

## Basic Information

- **Project Name**: MasonryLoginDemo
- **Description**: 使用 Masonry 做界面布局的一个简易登录页面。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2015-06-01
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MasonryLoginDemo

## 准备部分

### 了解 Auto Layout 机制

首先要了解下 Auto Layout 以及 Auto Layout 之前苹果的一些自动布局的相关内容，先从图形化的 StoryBoard 设计入手比较直观，看完下面的教程之后就了解了 Auto Layout 里面靠**约束**来定位 UI 元素的机制：[Beginning Auto Layout Tutorial in iOS 7: Part 1 - Ray Wenderlich](http://www.raywenderlich.com/50317/beginning-auto-layout-tutorial-in-ios-7-part-1)

### 用代码实现 Auto Layout

只是实际开发的时候一般是用代码来写 UI 布局，但是不慌，一般能用图形化的 StoryBoard 里面实现的用代码也能够实现。

使用代码实现 Auto Layout 的方法有几种，有官方提供的，也有第三方开发的类库，各自的特点在 [PureLayout/README.md](https://github.com/smileyborg/PureLayout/blob/master/README.md) 中有一段很好的比较：

> *	Apple [NSLayoutConstraint SDK API](https://developer.apple.com/library/ios/documentation/AppKit/Reference/NSLayoutConstraint_Class/index.html#//apple_ref/occ/clm/NSLayoutConstraint/constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant:)
 	*	Pros: Raw power
	*	Cons: Extremely verbose, tedious to write, difficult to read
*	Apple [Visual Format Language](https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/VisualFormatLanguage/VisualFormatLanguage.html)
	*	Pros: Concise, convenient
	*	Cons: Doesn't support some use cases, incomplete compile-time checks, must learn syntax, hard to debug
*	Apple Interface Builder
	*	Pros: Visual, simple
	* 	Cons: Difficult for complex layouts, cannot dynamically set constraints at runtime, encourages hardcoded magic numbers, not always WYSIWYG
*	**PureLayout**
	*	Pros: Simple, efficient, minimal third party code, consistent with Cocoa API style, compatible with Objective-C and Swift codebases
	*	Cons: Not the most concise expression of layout code
*	High-level Auto Layout Libraries/DSLs ([Cartography](https://github.com/robb/Cartography), [Masonry](https://github.com/Masonry/Masonry), [KeepLayout](https://github.com/iMartinKiss/KeepLayout))
	*	Pros: Very clean, concise, and convenient 
	*	Cons: Unique API style is foreign to Cocoa APIs, mixed compatibility with Objective-C & Swift, greater dependency on third party code

Masonry 比较简洁好用些，封装的恰到好处。当然有时间的话其他的也可以尝试下，比较下就更能抓住各自的优缺点。

### Masonry

由上面的比较中可以看出 Masonry 是高等级的 Auto Layout 库。确实如此。

可以翻阅下这篇文章：[Masonry与iOS自动布局](http://www.infoq.com/cn/news/2014/02/ios-auto-layout)，记录下里面的一些关键点可能更方便理解自动布局。

Masonry 的项目地址如下：[Masonry/Masonry](https://github.com/Masonry/Masonry)，下载一份，里面有 Demo Project，列出了常用的使用方法和场景，之后实际开发的时候是一份很好的参考。

## 制作 Demo

### 热身——使用 Masonry 搭建一个简单的 UI

![](./imgs/out4.png)

约束就是背景 View 的上、左、右和整个屏幕贴近，下方有一定的距离。

关键代码如下：

```
- (void)initComponents {
	self.halfBackgroundView = [[UIView alloc] initWithFrame:CGRectZero];
	self.halfBackgroundView.backgroundColor = [UIColor greenColor];
	[self.halfBackgroundView addSubview:self.logoView];
    
   [self.view setNeedsUpdateConstraints];
}

- (void)updateViewConstraints {
    // 上半部分的背景 View @四边的对齐约束
    [self.halfBackgroundView mas_makeConstraints:^(MASConstraintMaker *make) {
        // 写法自由，left、right、top 可以分开写，也可以一起写。
        make.left.right.top.equalTo(self.view);
        // 偏移
        make.bottom.equalTo(self.view).offset(-235);
    }];
    
    [super updateViewConstraints];
}    
```

### Masonry 中一些关键的概念

#### 属性

属性，就是上下左右距离其他的距离，还有自身的高低，中心的位置，此外还有 baseline。有了这些就能够确定一个 View 的大小和位置了！

MASViewAttribute           |  NSLayoutAttribute
-------------------------  |  --------------------------
view.mas_left              |  NSLayoutAttributeLeft
view.mas_right             |  NSLayoutAttributeRight
view.mas_top               |  NSLayoutAttributeTop
view.mas_bottom            |  NSLayoutAttributeBottom
view.mas_leading           |  NSLayoutAttributeLeading
view.mas_trailing          |  NSLayoutAttributeTrailing
view.mas_width             |  NSLayoutAttributeWidth
view.mas_height            |  NSLayoutAttributeHeight
view.mas_centerX           |  NSLayoutAttributeCenterX
view.mas_centerY           |  NSLayoutAttributeCenterY
view.mas_baseline          |  NSLayoutAttributeBaseline

#### 关系

- `equalTo`
- `greaterThanOrEqualTo`
- `lessThanOrEqualTo`

#### 优先级

- `priorityLow`
- `priorityMedium`
- `priorityHigh`

#### 常量

- `insets`
- `sizeOffset`
- `centerOffset`
- `offset`
- `valueOffset`

#### 抽象

- `multipliedBy`
- `dividedBy`

### 制作登录界面 Demo

使用了更多的约束时候做成的界面：如下

![](./imgs/out.png)

Git 地址：https://git.oschina.net/binderclip/MasonryLoginDemo.git

为了不同屏幕下的适配还需要添加一些额外的约束，区分一下优先级，需要具体情况具体分析这里就不多说了。

一些如 UILabel 之类的元素的大小可以不用设置，因为它自己会根据自身的内容提供一个大小。同样用这个属性也可以给自己的自定义 View 添加类似的属性，这样就可以省去很多判断和代码。