Disposition en maçonnerie d'iOS Autolayout

Enterprise 2023-07-22 22:10:49 views: null

Maçonnerie

Masonry est un cadre de mise en page léger avec sa propre syntaxe de description. Il utilise une syntaxe de chaîne plus élégante pour encapsuler NSAutoLayout. Il est concis et très lisible et prend en charge à la fois iOS et Max OS X. Utilisez Masonry pour utiliser une syntaxe simple pour la mise en page automatique


Le tableau de comparaison entre les attributs communs de Masonry et NSLayoutAttribute est le suivant

Maçonnerie NSAutoLayout illustrer
vue.mas_left NSLayoutAttributeLeft côté gauche
vue.mas_top NSLayoutAttributeTop à l'étage
vue.mas_right NSLayoutAttributeRight Droite
vue.mas_bottom NSLayoutAttributeBottomNSLayoutAttributeBottom côté inférieur
vue.mas_leading NSLayoutAttributeLeading capital
vue.mas_trailing NSLayoutAttributeTrailingNSLayoutAttributeTrailing queue
view.mas_width NSLayoutAttributeWidthNSLayoutAttributeWidth Largeur
vue.mas_height NSLayoutAttributeHeight haut
view.mas_centerX NSLayoutAttributeCenterX milieu latéral
view.mas_centerY NSLayoutAttributeCenterY milieu longitudinal
vue.mas_baseline NSLayoutAttributeBaselineNSLayoutAttributeBaseline ligne de base du texte

Mise en page automatique à l'aide de la maçonnerie

Maçonnerie trois types de mise en page automatique Comparer

  • .equalToégal NSLayoutRelationEqualà
  • .lessThanOrEqualTo est équivalent NSLayoutRelationLessThanOrEqualà inférieur ou égal à
  • .greaterThanOrEqualToégal à NSLayoutRelationGreaterThanOrEqual, supérieur ou égal à
    // **使用UIView/NSView进行比较**
    [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
            //these two constraints are exactly the same
            make.left.greaterThanOrEqualTo(label.mas_left);
            make.left.right.equalTo(lable);
        }];
        ..
    //2. **直接使用NSNumber进行比较**
    [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
            //width >= 200 && width <= 400
            make.width.greaterThanOrEqualTo(@200);
            make.width.lessThanOrEqualTo(@400)
    }];
    ..
    //3. **使用CGFloat**
    [subGreenView mas_makeConstraints:^(MASConstraintMaker *make) {
            //width >= 200 && width <= 400
            make.width.mas_lessThanOrEqualTo(200);
            make.width.mas_greaterThanOrEqualTo(400);
    }];


Deux vues de même niveau sont contraintes

    [subGreenView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.equalTo(subGreenView.mas_left).offset(10);
            make.right.equalTo(subGreenView.mas_right).offset(10);
    }];

gauche, droite, haut, bas, centreX, centreY, début, fin, largeur, hauteur


La mise en page peut être effectuée en mas_makeConstraintsassociant à View left, right, top, bottom, centerX, centerY, leading, trailing, width, height
.

  1. Utiliser UIView/NSView pour la mise en page
    [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(sv).with.offset(5); //with 不是必要的，只是方便理解
            make.left.equalTo(sv).with.offset(10);
            make.bottom.equalTo(sv).offset(15);
            make.right.equalTo(sv).offset(20);
    }];

ou

    [subRedView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(subRedView);
            make.left.equalTo(subRedView);
            make.width.equalTo(subRedView);
            make.height.equalTo(subRedView);
    }];
  1. Utiliser NSNumber directement pour la mise en page
    [subRedView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(@18);
            make.left.equalTo(@16);
            make.width.equalTo(@16);
            make.height.equalTo(@16);
    }];
  1. Utilisez CGFloat directement pour la mise en page
    [subRedView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.centerX.mas_equalTo(18);
            make.centerY.mas_equalTo(16);
            make.width.mas_equalTo(16);
            make.height.mas_equalTo(16);
    }];
  1. TableauNS
    [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.height.equalTo(@[view1, view2]);
        make.left.equalTo(@[view1, @100, view3.right]);
    }];

Lorsque le tableau contient plusieurs valeurs déraisonnables, obtenez toujours la valeur minimale à utiliser. Cela équivaut à prendre la valeur minimale. Un tableau composé d'un mélange de l'un des types précédents

bords, taille, centre

  • make.edges équivaut à définir MASAttributeTop, MASAttributeLeft, MASAttributeRight, MASAttributeBottom en même temps
  • make.size équivaut à définir MASAttributeWidth et MASAttributeHeight en même temps
  • make.center équivaut à définir MASAttributeCenterX et MASAttributeCenterY en même temps
    [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
            make.edges.equalTo(superview).insets(UIEdgeInsetsMake(5, 10, 15, 20));
            make.size.equalTo(superview).sizeOffset(CGSizeMake(100, 50));
            make.center.equalTo(superview).centerOffset(CGPointMake(-5, 10));
    }];

équivalent à

    [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
            //.insets
            make.top.equalTo(sv).with.offset(5);
            make.left.equalTo(sv).with.offset(10);
            make.bottom.equalTo(sv).with.offset(-15);//使用offset,统一方向,所以这里是-15
            make.right.equalTo(sv).with.offset(-20);// 统一方向.
            //.size
            make.width.equalTo(sv).offset(100);
            make.height.equalTo(sv).offset(50);
            //.centerOfoffset
            make.centerX.equalTo(sv).offset(-5);
            make.centerY.equalTo(sv).offset(10);
    }];

Masonryz définit la priorité : il existe quatre façons de définir la priorité :

  • .priority pour définir une valeur de priorité claire, il existe des paramètres
  • .priorityHigh Aucun paramètre, utilisez la valeur par défaut MASLayoutPriorityDefaultHigh
  • .priorityMedium, en utilisant la valeur par défaut MASLayoutPriorityDefaultMedium
  • .priorityLow, utilisez la valeur par défaut de MASLayoutPriorityDefaultLow.

    Semblable à NSAutolayout, Masonry donnera la priorité au paramètre de haute priorité et abandonnera le paramètre de faible priorité en cas de conflit.

Tenir et faire des mises à jour de mise en page automatique à d'autres moments


Si vous souhaitez définir des contraintes nécessitant des mises à jour automatiques de la disposition. Par exemple, mettre à jour l'état des effets d'animation via l'existence de cette contrainte, ou mettre à jour et supprimer des contraintes.

Il existe trois méthodes dans Masonry pour mettre à jour les contraintes de contraintes.
1. mas_updateConstraints

Utiliser mas_updateConstraintsdes contraintes qui peuvent être utilisées pour mettre à jour des vues, mais mas_makeConstraintsne peuvent être utilisées que pour créer des contraintes.

Généralement, créez d'abord des contraintes, puis utilisez-les aux endroits appropriés mas_updateConstraintspour mettre à jour les contraintes de vue.

    [self.likeNumberView mas_updateConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.locationView.mas_bottom)
        .offset(kTopOffsetOfLikeNumberView);
        make.height.mas_equalTo(kHeightOfLikeNumberView);
    }];
  1. mas_remakeConstraints

    mas_updateConstraintsIl ne peut être utilisé que pour mettre à jour des contraintes, mais seule la valeur des contraintes existantes peut être mise à jour et les contraintes existantes ne peuvent pas être supprimées.

    La mas_remakeConstraintsméthode utilisée est mas_updateConstraintsla même que celle-ci, mais elle supprimera toutes les contraintes précédentes avant de mettre à jour la vue, puis créera de nouvelles contraintes pour mettre à jour la vue.
    [self.button mas_remakeConstraints:^(MASConstraintMaker *make) {
            make.size.equalTo(self.buttonSize);
            if (topLeft) {
                make.top.and.left.offset(10);
            } else {
                make.bottom.and.right.offset(-10);
            }
    }];
  1. References

    Il peut également MASConstraintêtre conservé localement en conservant un type de contrainte, puis utiliser et supprimer la contrainte via la méthode installest plus compliqué que les deux premiers, mais il est très flexible et la contrainte peut être supprimée et mise à jour en même temps.uninstall

@property (nonatomic, strong) MASConstraint *topConstraint;
..
[subRedView mas_makeConstraints:^(MASConstraintMaker *make) {
_topConstraint = make.top.equalTo(superView.mas_top).with.offset(10);
//这里是保存了已经设定好的约束
make.left.equalTo(superView.mas_left).with.offset(10);
}];
..
//之后需要取消的时候
[_topConstraint uninstall];
..
//也可以安装
[_topConstraint install];

⚠️ Considérations sur la disposition de la maçonnerie

  • UILabelPas besoin de définir la hauteur et la largeur, la hauteur est définie, les caractères sont facilement tronqués
  • Si les contraintes définies sont en conflit, la console affichera un journal des erreurs, tel que
2018-03-28 17:50:55.761481+0800 OMI[7256:2846471] [LayoutConstraints] Unable to simultaneously satisfy constraints.
Probably at least one of the constraints in the following list is one you don't want.
Try this:
(1) look at each constraint and try to figure out which you don't expect;
(2) find the code that added the unwanted constraint or constraints and fix it.
(
"<MASLayoutConstraint:0x1c80bc0e0 OMISettingsGenderSelectView:0x11be22d30.width == UITableViewCellContentView:0x11be229d0.width>",
"<MASLayoutConstraint:0x1c00adec0 OMISelectionIndicator:0x11bd160d0.left == OMISingleSelectionView:0x11bd15ed0.left + 20>",
"<MASLayoutConstraint:0x1c00ae220 UILabel:0x11bd16a70.left == OMISelectionIndicator:0x11bd160d0.right + 14>",
"<MASLayoutConstraint:0x1c00ae280 UILabel:0x11bd16a70.right == OMISingleSelectionView:0x11bd15ed0.right + 10>",
"<MASLayoutConstraint:0x1c00af540 OMISingleSelectionView:0x11bd15ed0.width == OMISettingsGenderSelectView:0x11be22d30.width>",
"<NSLayoutConstraint:0x1c8284d80 UITableViewCellContentView:0x11be229d0.width == 0>"
)

Comme mentionné dans la sortie, faites un point d'arrêt symbolique à UIViewAlertForUnsatisfiableConstraints pour l'attraper dans le débogueur, introduisez maintenant la méthode de débogage à l'aide de UIViewAlertForUnsatisfiableConstraints.

Ajoutez un point d'arrêt symbolique à UIViewAlertForUnsatisfiableConstraints :

1. Ouvrez la navigation des points d'arrêt (cmd+7)
2. Cliquez sur le bouton + dans le coin inférieur gauche
3. Sélectionnez Ajouter un point d'arrêt symbolique
4. Ajoutez UIViewAlertForUnsatisfiableConstraints dans le symbole
5. Ajoutez po [[UIWindow keyWindow] _autolayoutTrace] (projet OC) ou expr -l objc++ -O – [[UIWindow keyWindow] > _autolayout Trace] (projet Swift)

Ensuite, vous pouvez voir ce qui s'est mal passé :

po [[UIWindow keyWindow] _autolayoutTrace]

UIWindow:0x7f9481c93360
|   •UIView:0x7f9481c9d680
|   |   *UIView:0x7f9481c9d990- AMBIGUOUS LAYOUT for UIView:0x7f9481c9d990.minX{
   
   id: 13}, UIView:0x7f9481c9d990.minY{
   
   id: 16}
|   |   *_UILayoutGuide:0x7f9481c9e160- AMBIGUOUS LAYOUT for _UILayoutGuide:0x7f9481c9e160.minY{
   
   id: 17}
|   |   *_UILayoutGuide:0x7f9481c9ebb0- AMBIGUOUS LAYOUT for _UILayoutGuide:0x7f9481c9ebb0.minY{
   
   id: 27}

Parmi elles, les vues liées à AMBIGUOUS sont des contraintes problématiques. 0x7f9481c9d990 est la première adresse de la vue problématique. Vous pouvez localiser rapidement les sous-contrôles associés.

Autres conseils de débogage

Bien sûr, un débogage supplémentaire nécessite des commandes LLDB. Par exemple

Objet de la vue d'impression :

(lldb) po 0x7f9481c9d990
<UIView: 0x7f9481c9d990; frame = (0 0; 768 359); autoresize = RM+BM; layer = <CALayer: 0x7fc82d338960>>

Pour changer la couleur :

(lldb) expr ((UIView *)0x174197010).backgroundColor = [UIColor redColor]
(UICachedDeviceRGBColor *) $4 = 0x0000000174469cc0

Il ne reste plus qu'à trouver la vue dans le code et à modifier ses contraintes.


Informations complémentaires

Guide de mise en page automatique

Maçonnerie

Guess you like

Origin blog.csdn.net/sinat_15735647/article/details/79806878
Recommended
Ranking
[Nodejs] Native nodejs routing, getting parameters, static directory
Introduction and use of the datetime module in python - used to process date and time, calculate time intervals, etc.
Java bytecode decompiler in IntelliJIDEA for Scala
Resolved local variable 'str' referenced before assignment
Transformer Vision (2) || ViT-B/16 network structure
Translation: The most impressive YouTube channel that allows you to learn AI, machine learning and data science
gRPC- interceptor simple to use
Fortunately, three times faster investment has been lost how to do? There Baoying tutor you fly 69,937,609
Using Django to create a new project in the Windows10 environment gives an error [django-admin.py: The "django-admin.py" item cannot be recognized as the name of a cmdlet, function, script file, or executable program. 】
What should I do if I need to prepare the product standard
Daily
More
2024-06-05(0)
2024-06-04(0)
2024-06-03(1)
2024-06-02(0)
2024-06-01(1)
2024-05-31(1)
2024-05-30(0)
2024-05-29(1)
2024-05-28(1)
2024-05-27(1)

Code World

© 2018 codetd.com