• Collection View Layouts make it easy to build rich interactive collections. Learn how to make dynamic and responsive layouts that range in complexity from basic lists to an advanced, multi-dimensional browsing experience.

    Resources

    • Implementing modern collection views
      • HD Video
      • SD Video
    • Presentation Slides (PDF)

    Related Videos

    WWDC20

    • Advances in UICollectionView
    • Build for iPad
    • Lists in UICollectionView

    WWDC19

    • Advances in UI Data Sources
    • What’s New in AppKit for macOS
  • 0:00

    0:18

    0:26

    0:48

    0:52

    1:00

    1:04

    1:20

    1:28

    1:40

    1:48

    2:05

    2:11

    2:27

    2:36

    2:47

    2:58

    3:03

    3:25

    3:37

    3:51

    3:54

    4:00

    4:15

    4:36

    5:02

    5:20

    5:30

    5:40

    5:48

    6:22

    6:24

    6:49

    6:53

    7:02

    7:11

    7:19

    7:22

    7:33

    7:47

    7:54

    8:00

    8:09

    8:25

    8:35

    8:39

    8:44

    8:47

    8:54

    9:03

    9:20

    9:25

    9:29

    9:33

    9:35

    9:45

    10:00

    10:05

    10:12

    10:17

    10:23

    10:39

    10:45

    10:55

    11:07

    11:11

    11:19

    11:23

    11:27

    11:45

    11:59

    12:03

    12:09

    12:13

    12:34

    12:37

    13:14

    13:25

    13:44

    13:59

    14:07

    14:37

    14:45

    14:59

    15:31

    15:38

    15:47

    15:51

    16:02

    16:38

    16:42

    16:45

    16:59

    17:06

    17:14

    17:26

    17:35

    17:46

    18:03

    18:10

    18:21

    18:29

    18:37

    18:59

    19:26

    19:33

    19:42

    19:48

    19:59

    20:22

    21:01

    21:04

    21:21

    21:25

    21:33

    21:49

    22:01

    22:08

    22:37

    22:45

    22:56

    23:19

    23:40

    23:42

    23:46

    24:02

    24:08

    24:14

    24:21

    24:30

    24:39

    24:40

    24:49

    25:01

    25:07

    25:14

    25:22

    25:30

    25:40

    25:44

    26:00

    26:36

    27:04

    27:07

    27:22

    27:28

    27:42

    28:41

    29:21

    29:33

    29:50

    29:56

    30:08

    30:18

    30:53

    31:04

    31:09

    31:20

    31:27

    31:37

    31:50

    32:15

    32:29

    32:39

    32:59

    33:08

    33:16

    33:20

    33:25

    33:36

    33:47

    33:54

    34:11

    34:12

    34:21

    34:39

    34:45

    34:52

    35:01

    35:02

    35:17

    35:23

    35:29

    35:38

    35:52

    36:01

    36:05

    36:15

    36:34

    36:48

    36:57

    37:07

    37:25

    37:30

    38:02

    38:17

    38:40

    38:42

    39:04

    39:08

    39:26

    39:36

    39:41

    And continuous is just like you'd expect it. This is a very simple, straightforward scroll view-like behavior, you know? You -- you had me at bounce, right? It's got that great -- gosh, I could do this for hours, right? All right. So that's just the normal scroll view behavior. But we have an additional one for this continuous, you know, fluid kind of scrolling that we call continuous group-leading boundary. And that's a mouthful but it's pretty descriptive. So as we scroll and we impart volume to it, we naturally come to rest at that group's semantic-leading boundary. So you people that clap have done targeted content offset or proposed offset before and you know it's a pain. All right. So with the addition of the continuous behaviors, we have some paging behaviors. And this gets really cool. So this is just like the normal scroll view paging behavior, and we named this behavior paging.

    40:33

    40:34

    40:46

    40:53

    40:59

    41:03

    41:31

    41:40

    41:53

    42:05

    42:35

    42:42

    42:51

    42:57

    43:00

    43:11

    43:27

    43:37

    43:42

    43:59

    44:10

    44:22

    44:34

    44:39

    44:49

    45:05

    45:17

    45:40

    45:52

    46:29

    46:42

    46:51

    47:10

    47:38

    47:46

    47:50

    48:23

    48:34

    48:49

    48:58

    49:14

    49:33

    50:01

    50:03