Marsonryライブラリ学習ノート
11985 ワード
複数の類似コントローラテンプレートの書き方
- (id)initWithTitle:(NSString *)title viewClass:(Class)viewClass {
self = [super init];
if (!self) return nil;
self.title = title;
self.viewClass = viewClass;
return self;
}
- (void)loadView {
self.view = self.viewClass.new;
self.view.backgroundColor = [UIColor whiteColor];
}
基本
MASExampleBasicView
int padding = 10;
[greenView makeConstraints:^(MASConstraintMaker *make) {
// greenView >=10
make.top.greaterThanOrEqualTo(superview.top).offset(padding);
// greenView ==10
make.left.equalTo(superview.left).offset(padding);
// greenView blueView ==-10, blueView greenView
make.bottom.equalTo(blueView.top).offset(-padding);
// greenView redView ==-10, redView greenView
make.right.equalTo(redView.left).offset(-padding);
// greenView ==redView
make.width.equalTo(redView.width);
// greenView ==redView
make.height.equalTo(redView.height);
// greenView ==blue
make.height.equalTo(blueView.height);
}];
変更の更新
MASExampleUpdateView
+ (BOOL)requiresConstraintBasedLayout {
// View 。 Auto Layout ， YES。
return YES;
}
//
- (void)updateConstraints {
[self.growingButton updateConstraints:^(MASConstraintMaker *make) {
make.center.equalTo(self);
// ，
make.width.equalTo(@(self.buttonSize.width)).priorityLow();
make.height.equalTo(@(self.buttonSize.height)).priorityLow();
// self /
make.width.lessThanOrEqualTo(self);
make.height.lessThanOrEqualTo(self);
}];
//
[super updateConstraints];
}
- (void)didTapGrowButton:(UIButton *)button {
self.buttonSize = CGSizeMake(self.buttonSize.width * 1.3, self.buttonSize.height * 1.3);
// self
[self setNeedsUpdateConstraints];
//
[self updateConstraintsIfNeeded];
[UIView animateWithDuration:0.4 animations:^{
//
[self layoutIfNeeded];
}];
}
リセット
MASExampleRemakeView
再設定の使用方法remakeConstraints remakeConstraintsはupdateConstraintsと似ていますが、remakeConstraintsは古い制約を削除し、新しい制約を追加し、updateConstraintsはblockに表示される制約を更新します.
定数の使用
MASExampleConstantsView
Masonryはスカラーや構造体(CGPoint、CGSizeなど)を使用できます
Edges
MASExampleSidesView
[view mas_makeConstraints:^(MASConstraintMaker *make) {
//
make.edges.equalTo(lastView).insets(UIEdgeInsetsMake(5, 10, 15, 20));
}];
AspectFit
MASExampleAspectFitView
//
[self addSubview:_topView];
[_topView makeConstraints:^(MASConstraintMaker *make) {
make.top.left.and.right.equalTo(self);
}];
[self addSubview:_bottomView];
[_bottomView makeConstraints:^(MASConstraintMaker *make) {
make.left.right.and.bottom.equalTo(self);
make.top.equalTo(_topView.mas_bottom);
make.height.equalTo(_topView.mas_height);
}];
[_topView addSubview:_topInnerView];
[_topInnerView makeConstraints:^(MASConstraintMaker *make) {
make.width.equalTo(_topInnerView.mas_height).multipliedBy(3);
make.center.equalTo(_topView);
make.width.and.height.lessThanOrEqualTo(_topView);
make.width.and.height.equalTo(_topView).priorityLow();
}];
[_bottomView addSubview:_bottomInnerView];
[_bottomInnerView makeConstraints:^(MASConstraintMaker *make) {
make.height.equalTo(_bottomInnerView.mas_width).multipliedBy(3);
make.center.equalTo(_bottomView);
make.width.and.height.lessThanOrEqualTo(_bottomView);
make.width.and.height.equalTo(_bottomView).priorityLow();
}];
PS:コンストレイントを設定するときに2つのビューが同じ親ビューにあるか、または関係があるか
単純アニメーション
MASExampleAnimatedView
- (void)makeConstraints {
int padding = self.padding;
UIEdgeInsets paddingInserts = UIEdgeInsetsMake(padding, padding, padding, padding);
[self.greenView makeConstraints:^(MASConstraintMaker *make) {
[self.animateArray addObjectsFromArray:@[
make.edges.equalTo(self).offset(paddingInserts).priorityLow(),
make.right.equalTo(self.redView.mas_left).offset(-padding),
make.bottom.equalTo(self.blueView.mas_top).offset(-padding)
]
];
make.size.equalTo(self.redView);
make.height.equalTo(self.blueView);
}];
[self.redView makeConstraints:^(MASConstraintMaker *make) {
[self.animateArray addObjectsFromArray:@[
make.edges.equalTo(self).offset(paddingInserts).priorityLow(),
make.bottom.equalTo(self.blueView.mas_top).offset(-padding)
]
];
}];
[self.blueView makeConstraints:^(MASConstraintMaker *make) {
[self.animateArray addObject:make.edges.equalTo(self).offset(paddingInserts).priorityLow()];
}];
}
// window
- (void)didMoveToWindow {
[self layoutIfNeeded];
if (self.window) {
self.isAnimating = YES;
[self anmateWithInvertedInserts:NO];
}
}
- (void)willMoveToWindow:(UIWindow *)newWindow {
self.isAnimating = newWindow != nil;
}
- (void)anmateWithInvertedInserts:(BOOL)invertedInserts {
if (!self.isAnimating) {
return;
}
int padding = invertedInserts ? 100 : self.padding;
UIEdgeInsets paddingInserts = UIEdgeInsetsMake(padding, padding, padding, padding);
// 、
for (MASConstraint *constraint in self.animateArray) {
constraint.insets = paddingInserts;
}
//
[UIView animateWithDuration:1.0 animations:^{
[self layoutIfNeeded];
} completion:^(BOOL finished) {
[self anmateWithInvertedInserts:!invertedInserts];
}];
}
長いテキスト制約
MASExampleLabelView
主に二つのケースがある.右の短いテキスト、左の長いテキスト.layoutSubviewsメソッドを書き換えて短いテキスト幅を決定し、長いテキスト幅を決定し、preferredMaxLayoutWidth左の短いテキスト、右の長いテキストを設定します.上と同じように処理する
[self.longLabel makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(self.left).insets(kPadding);
make.top.equalTo(self.top).insets(kPadding);
}];
[self.shortLabel makeConstraints:^(MASConstraintMaker *make) {
make.centerY.equalTo(self.longLabel.centerY);
make.right.equalTo(self.right).insets(kPadding);
}];
- (void)layoutSubviews {
[super layoutSubviews];
// Autolayout， frame
CGFloat width = CGRectGetMinX(self.shortLabel.frame) - kPadding.left;
width -= CGRectGetMinX(self.longLabel.frame);
self.longLabel.preferredMaxLayoutWidth = width;
// ，
[super layoutSubviews];
}
2.上の長いテキスト、下の固定
- (void)makeConstraints {
UIView *superView = self;
[self.longLabel makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(superView.top).offset(kPadding);
make.left.equalTo(superView.left).offset(kPadding);
make.right.equalTo(superView.right).offset(-kPadding);
make.bottom.equalTo(self.shortLabel.top).offset(-kPadding);
}];
[self.shortLabel makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(superView).offset(kInserts).priorityLow();
make.left.equalTo(superView.left).offset(kPadding);
}];
}
ScrollView
ScrollViewのコンストレイントは、通常、その上にcontentViewを追加し、このcontentViewをコンストレイントすることで効果を達成します。
- (void)generateContent {
UIView* contentView = UIView.new;
[self.scrollView addSubview:contentView];
[contentView makeConstraints:^(MASConstraintMaker *make) {
// scrollView 0， , scrollView
make.edges.equalTo(self.scrollView);
make.width.equalTo(self.scrollView);
}];
// contentView
UIView *lastView;
CGFloat height = 25;
for (int i = 0; i < 10; i++) {
UIView *view = UIView.new;
view.backgroundColor = [self randomColor];
[contentView addSubview:view];
UITapGestureRecognizer *singleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(singleTap:)];
[view addGestureRecognizer:singleTap];
[view mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(lastView ? lastView.bottom : @0);
make.left.equalTo(@0);
make.width.equalTo(contentView.width);
make.height.equalTo(@(height));
}];
height += 25;
lastView = view;
}
[contentView makeConstraints:^(MASConstraintMaker *make) {
// contentView
make.bottom.equalTo(lastView.bottom);
}];
}
Array
複数のview位置合わせのコンストレイント
- (void)updateConstraints {
[self.buttonViews updateConstraints:^(MASConstraintMaker *make) {
// baseline
make.baseline.equalTo(self.mas_centerY).with.offset(self.offset);
}];
//
[super updateConstraints];
}
AttributeChaining
チェーン構文
[greenView mas_makeConstraints:^(MASConstraintMaker *make) {
// chain attributes
make.top.and.left.equalTo(superview).insets(padding);
//
// make.top.greaterThanOrEqualTo(superview).insets(padding);
// make.left.greaterThanOrEqualTo(superview).insets(padding);
make.bottom.equalTo(blueView.mas_top).insets(padding);
make.right.equalTo(redView.mas_left).insets(padding);
make.width.equalTo(redView.mas_width);
make.height.equalTo(@[redView, blueView]);
}];
間隔
予め設定されたピッチレイアウトで
view.layoutMargins = UIEdgeInsetsMake(5, 10, 15, 20);
[self addSubview:view];
[view mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(lastView.topMargin);
make.bottom.equalTo(lastView.bottomMargin);
make.left.equalTo(lastView.leftMargin);
make.right.equalTo(lastView.rightMargin);
}];
複数のコントロールの固定間隔の等間隔配列
MASExampleDistributeView
/**
* ，
*
* @param axisType
* @param fixedSpacing
* @param leadSpacing
* @param tailSpacing
*/
- (void)mas_distributeViewsAlongAxis:(MASAxisType)axisType
withFixedSpacing:(CGFloat)fixedSpacing l
eadSpacing:(CGFloat)leadSpacing
tailSpacing:(CGFloat)tailSpacing;
/**
* ,
*
* @param axisType
* @param fixedItemLength
* @param leadSpacing
* @param tailSpacing
*/
- (void)mas_distributeViewsAlongAxis:(MASAxisType)axisType
withFixedItemLength:(CGFloat)fixedItemLength
leadSpacing:(CGFloat)leadSpacing
tailSpacing:(CGFloat)tailSpacing;
LayoutGuide
MASExampleLayoutGuideViewController
[topView makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.mas_topLayoutGuide);
make.left.equalTo(self.view);
make.right.equalTo(self.view);
make.height.equalTo(@40);
}];
[topSubview makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.mas_topLayoutGuide);
make.centerX.equalTo(@0);
make.width.equalTo(@20);
make.height.equalTo(@20);
}];
[bottomView makeConstraints:^(MASConstraintMaker *make) {
make.bottom.equalTo(self.mas_bottomLayoutGuide);
make.left.equalTo(self.view);
make.right.equalTo(self.view);
make.height.equalTo(@40);
}];