Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Understanding Autolayout

Understanding Autolayout

Slides accompanying a talk for NSFargo on Sep 16, '14

Some Image Attributions
- Trowel designed by Blake Kimmel from the thenounproject.com
- Tools designed by Kenton Quatman from the thenounproject.com

Sri Kadimisetty

September 16, 2014
Tweet

More Decks by Sri Kadimisetty

Other Decks in Programming

Transcript

  1. Layout Mechanisms MANUAL 081548078241222430869710810810 512409583414642032064766037894 201537013247343349501021753306 639736108154807824122243086971 081081051240958341464203206476 603789420153701324734334950102 175330663973610815480782412224

    308697108108105124095834146420 320647660378942015370132473433 495010217533066397361081548078 241222430869710810810512409583 414642032064766037894201537013 247343349501021753306639736108 154807824122243086971081081051 240958341464203206476603789420 153701324734334950102175330663 973610815480782412224308697108 108105124095834146420320647660 378942015370132473433495010217 533066397361081548078241222430 869710810810512409583414642010 815480782412224308693086930869 308693086930869308693086912323
  2. Layout Mechanisms MANUAL 081548078241222430869710810810 512409583414642032064766037894 201537013247343349501021753306 639736108154807824122243086971 081081051240958341464203206476 603789420153701324734334950102 175330663973610815480782412224

    308697108108105124095834146420 320647660378942015370132473433 495010217533066397361081548078 241222430869710810810512409583 414642032064766037894201537013 247343349501021753306639736108 154807824122243086971081081051 240958341464203206476603789420 153701324734334950102175330663 973610815480782412224308697108 108105124095834146420320647660 378942015370132473433495010217 533066397361081548078241222430 869710810810512409583414642010 815480782412224308693086930869 308693086930869308693086912323 AUTO RESIZING MASKS
  3. Layout Mechanisms MANUAL 081548078241222430869710810810 512409583414642032064766037894 201537013247343349501021753306 639736108154807824122243086971 081081051240958341464203206476 603789420153701324734334950102 175330663973610815480782412224

    308697108108105124095834146420 320647660378942015370132473433 495010217533066397361081548078 241222430869710810810512409583 414642032064766037894201537013 247343349501021753306639736108 154807824122243086971081081051 240958341464203206476603789420 153701324734334950102175330663 973610815480782412224308697108 108105124095834146420320647660 378942015370132473433495010217 533066397361081548078241222430 869710810810512409583414642010 815480782412224308693086930869 308693086930869308693086912323 AUTOLAYOUT AUTO RESIZING MASKS
  4. An incremental algorithm based on the dual simplex method that

    can solve systems of constraints efficiently. Cassowary
  5. Constraint Programming You specify constraints as requirements or preferences The

    Solver updates constrained variables to values that satisfy your constraints.
  6. Intrinsic Content Size The natural size of the view based

    on it’s intrinsic properties like the size of an image or the length of a label Your custom view can have an Intrinsic Content Size too. Small Button Slightly Longer Button
  7. Rule of Four A view should have four constraints; two

    in each dimension. *conditions apply
  8. Content Hugging Priority with which a view holds on to

    the edges of it’s super view. Tiny Button Tiny Button
  9. Compression Resistance Priority with which a view resists being made

    smaller than its intrinsic size. Slightly Longer Button Sligh … utton
  10. r Group Not all sub views need to be laid

    out together. Group conservatively.
  11. r Order Choose one view as the “leader” and base

    it’s sibling’s constraints off it.
  12. r Order Choose one view as the “leader” and base

    it’s sibling’s constraints off it. 1
  13. r Order Choose one view as the “leader” and base

    it’s sibling’s constraints off it. 1 2
  14. r Order Choose one view as the “leader” and base

    it’s sibling’s constraints off it. 1 2 3
  15. Animation Update constraint and ask for the layout pass. [UIView

    animateWithDuration: 1 animations: ^{ }]; aView.frame = updatedFrame; [UIView animateWithDuration: 1 animations: ^{ }]; // Update constraints here [aView layoutIfNeeded]; [aView layoutIfNeeded];
  16. Visual Format Language NSLayoutConstraint UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10,

    10); [superview addConstraints:@[ [NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:superview attribute:NSLayoutAttributeTop multiplier:1.0 constant:padding.top], / Masonry [self.childView makeConstraints:^(MASConstraintMaker *make) { }]; make.width.equalTo(superView) [self.view addConstraints: [NSLayoutConstraint constraintsWithVisualFormat: options:0 metrics:nil views:@{} ]]; @“V:|-(20)—[childView]”