소개하다.

Masonry 소스
그 홈페이지에서도 많은 소개를 하였는데, 아래에 저의 견해를 쓰겠습니다.iOS의 시스템NSLayoutConstraints을 사용한 적이 있다면 매우 번거롭다는 것을 이미 알고 있습니다.
다음 코드는 시스템의 제약이다

UIView *superview = self; UIView *view1 = [[UIView alloc] init]; view1.translatesAutoresizingMaskIntoConstraints = NO; view1.backgroundColor = [UIColor greenColor]; [superview addSubview:view1]; UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10); [superview addConstraints:@[ //view1 constraints [NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:superview attribute:NSLayoutAttributeTop multiplier:1.0 constant:padding.top], [NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:superview attribute:NSLayoutAttributeLeft multiplier:1.0 constant:padding.left], [NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:superview attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-padding.bottom], [NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:superview attribute:NSLayoutAttributeRight multiplier:1 constant:-padding.right], ]];

 

설치하다.

github에 직접 들어가서 원본 다운로드

CocoaPod로 다운로드

 

사용

위에서 소개할 때 우리는 시스템이 위아래 좌우가 10이라는 제약을 만들기 위해 많은 코드를 써야 하는 것을 보았지만 지금은 Masonry를 사용하는 효과이다

UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10); [view1 mas_makeConstraints:^(MASConstraintMaker *make) { make.top.equalTo(superview.mas_top).with.offset(padding.top); //with is an optional semantic filler make.left.equalTo(superview.mas_left).with.offset(padding.left); make.bottom.equalTo(superview.mas_bottom).with.offset(-padding.bottom); make.right.equalTo(superview.mas_right).with.offset(-padding.right); }]; 

심지어 저희가 이렇게 더 간결하게 썼어요.

[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.edges.equalTo(superview).with.insets(padding); }];

이제 Masonry에서 자주 사용하는 속성들을 살펴보겠습니다.

//    @property (nonatomic, strong, readonly) MASConstraint *left; //    @property (nonatomic, strong, readonly) MASConstraint *top; //    @property (nonatomic, strong, readonly) MASConstraint *right; //    @property (nonatomic, strong, readonly) MASConstraint *bottom; //    @property (nonatomic, strong, readonly) MASConstraint *leading; //    @property (nonatomic, strong, readonly) MASConstraint *trailing; //   @property (nonatomic, strong, readonly) MASConstraint *width; //   @property (nonatomic, strong, readonly) MASConstraint *height; //    x @property (nonatomic, strong, readonly) MASConstraint *centerX; //    y @property (nonatomic, strong, readonly) MASConstraint *centerY; //      @property (nonatomic, strong, readonly) MASConstraint *baseline;

 

뷰 가운데 맞춤

UIView *myView = [[UIView alloc] init]; myView.backgroundColor = [UIColor blueColor]; [self.view addSubview:myView]; [myView mas_makeConstraints:^(MASConstraintMaker *make) { //     center     center   make.center.mas_equalTo(self.view); //           make.size.mas_equalTo(CGSizeMake(300, 300)); }];

효과도를 보면 중앙에 위치하고 보기 크기가 300인 것을 볼 수 있습니다×300
 

뷰 나란히 설정

UIView *view1 = [[UIView alloc] init]; view1.backgroundColor = [UIColor redColor]; [myView addSubview:view1]; UIView *view2 = [[UIView alloc] init]; view2.backgroundColor = [UIColor yellowColor]; [myView addSubview:view2]; int padding = 10; [view1 mas_makeConstraints:^(MASConstraintMaker *make) { //          Y      make.centerY.mas_equalTo(myView.mas_centerY); //            10    make.left.equalTo(myView).with.offset(padding); //       view2  10    make.right.equalTo(view2.mas_left).with.offset(-padding); //      make.height.mas_equalTo(@120); //       make.width.equalTo(view2); }]; [view2 mas_makeConstraints:^(MASConstraintMaker *make) { make.centerY.mas_equalTo(myView.mas_centerY); make.left.equalTo(view1.mas_right).with.offset(padding); make.right.equalTo(myView).with.offset(-padding); make.height.mas_equalTo(view1); make.width.equalTo(view1); }];

효과도:
알림, 아래 코드 등가

make.left.equalTo(myView).with.offset(padding); //     make.left.equalTo(myView.mas_left).with.offset(padding);

기본적으로 괄호 안에 보기만 적혀 있을 때 현재masxxx를 자동으로 추가합니다.예를 들어 위의 두 줄 코드가 설정한make.left, 괄호 안에 myView만 적혀 있을 때 자동으로 myView로 추가됩니다.mas_left.
 

여러 뷰 간격 동일

아래에 폭을 설정할 때 전달된 그룹이므로 여러 보기가 등거리로 표시될 수 있습니다

UIView *view1 = [[UIView alloc] init]; view1.backgroundColor = [UIColor redColor]; [myView addSubview:view1]; UIView *view2 = [[UIView alloc] init]; view2.backgroundColor = [UIColor yellowColor]; [myView addSubview:view2]; UIView *view3 = [[UIView alloc] init]; view3.backgroundColor = [UIColor greenColor]; [self.view addSubview:view3]; int padding = 10; [view1 mas_makeConstraints:^(MASConstraintMaker *make) { //       make.centerY.mas_equalTo(myView); //          10 make.left.equalTo(myView).with.offset(padding); //        view2     10 make.right.equalTo(view2.mas_left).with.offset(-padding); //      make.height.mas_equalTo(@150); //      view2  view3   make.width.equalTo(@[view2, view3]); }]; [view2 mas_makeConstraints:^(MASConstraintMaker *make) { make.centerY.mas_equalTo(myView); make.height.mas_equalTo(view1); make.width.equalTo(@[view1, view3]); }]; [view3 mas_makeConstraints:^(MASConstraintMaker *make) { make.centerY.mas_equalTo(myView); make.left.equalTo(view2.mas_right).with.offset(padding); make.right.equalTo(myView).with.offset(-padding); make.height.mas_equalTo(view1); make.width.equalTo(@[view2, view1]); }]; 

효과도:
Posted in iOS

Post navigation

← code-highlight

One thought on "Masonry 간편한 사용"

xxx의 iOS 개발자가 다음과 같이 말했습니다.
2015년 4월 30일 16:54
블로거, 여러 개의 보기를 합쳐서 같은 방법으로 만듭니다:weak typeof(self) weakSelf = self;
UIView * tempView = [[UIView alloc]init];NSInteger count = 10;//NSInteger margin = 10;//간격 설정 NSInteger height = 50;//뷰의 높이를 (int i = 0; i < count; i++) {UIView * view = [[[UIView alloc] init]; view = view = [[[UIView alloc alloc] ▲ ▲ view: view = [[[[UIView alloc] alloc]; view;;; if (i=0) {[view.baw.baw=0) [view.baw.makew.backew a loc] [view w w w w a makes = 0) = view;; [view w w w w w a makeConstraintmake make make make * make (MAke MaweakSelf.view);make.height.mas equalTo(height);};else if (i == count – 1){[view mas_makeConstraints:^(MASConstraintMaker *make) {make.right.equalTo(weakSelf.view).offset(-margin);make.left.equalTo(tempView.mas_right).offset(margin);make.centerY.equalTo(tempView);make.height.equalTo(tempView);make.width.equalTo(tempView);}];}else{[view mas_makeConstraints:^(MASConstraintMaker *make) {make.left.equalTo(tempView.mas_right).offset(margin);make.centerY.equalTo(tempView);make.height.equalTo(tempView);make.width.equalTo(tempView);}];}tempView = view;[view layoutIfNeeded];}
회신
 
전재:http://archerzz.ninja/ios/masonry-code.html