- Published on
๐ฑ iOS - CompositionalLayout.02
- Authors
- Name
- ์ด์ฐฝ์ค
Supplementary Item
CollectionView๋ฅผ ์ฌ์ฉํ๋ค๋ณด๋ฉด ์์ฃผ ์ฌ์ฉํ๊ฒ ๋๋ ์์๋ค์ด ์์ต๋๋ค.
Badges, Headers, Footers๋ผ๊ณ ๋ถ๋ฆฌ๋ ์ด๊ฒ๋ค์ ๋ฆฌ์คํธ์ ์์ด๋ ๋ค์ ๋ถ์ด ์ ์ฒด์ ์ธ ๋ฆฌ์คํธ์ ๋ํ ์ ๋ณด๋ฅผ ์ ๊ณตํด์ค๋๋ค.
Badges
CompositionalLayout
์์๋ ์ด๋ฐ SupplementaryItem๋ค์ ์ฌ์ฉํ๊ธฐ ๋์ฑ ์ฝ๊ฒ Anchor ๊ฐ๋
์ ๋์
ํ์ต๋๋ค.
SupplementaryItem๊ณผ CollectionView์ ์๊ฐ์ ์ธ ๊ด๊ณ๋ก์ ์ด๋ค์ ์์น๋ฅผ ์ ํด์ค๋ค๋ ๊ฐ๋ ์ ๋๋ค.
๊ฐ๋ ์์ฒด๋ ๊ต์ฅํ ์ฝ์ฃ ?
์ ์ฉ๋ ๋์ผํ๊ฒ ๋งค์ฐ ์ฝ๊ฒ ๊ตฌํ๋์์ต๋๋ค.
let badgeAnchor = NSCollectionLayoutAnchor(
edges: [.top, .trailing],
fractionalOffset: CGPoint(x: 0.3, y: -0.3)
)
let badgeSize = NSCollectionLayoutSize(
widthDimension: .absolute(20),
heightDimension: .absolute(20)
)
let badge = NSCollectionLayoutSupplementaryItem(
layoutSize: badgeSize,
elementKind: "badge",
containerAnchor: badgeAnchor
)
let item = NSCollectionLayoutItem(
layoutSize: itemSize,
supplementaryItems: [badge]
)
์ฌ๊ธฐ์ ์ ์ฉ๋ badge
๋ผ๋ Item
์ ์ฐ์ธก ์๋จ์ ์์นํ๊ณ 20x20์ ์ฌ์ด์ฆ๋ฅผ ๊ฐ๋๋ค๋ ๊ฒ์ ์ฝ๊ฒ ์ ์ ์์ฃ .
Header & Footer
Header์ Footer๋ Badges์๋ ๋ค๋ฅธ ์ ์ด ์์ต๋๋ค.
Badges๋ Item
์ ํน์ ์์น์ ๊ฒน์ณ๋ณด์ด๋ ์์์ง๋ง, Header์ Footer๋ Item
์ ๋ฐ์ด๋ด๊ณ ๊ณต๊ฐ์ ์ฐจ์งํ๋ฉด์ ์์นํ๋ ์์๋ผ๋ ์ ์
๋๋ค.
๋ฐ๋ผ์ Header์ Footer๋ Boundary
๋ผ๋ ์ถ๊ฐ์ ์ธ ๊ธฐ๋ฅ์ ๊ฐ๊ณ ์์ต๋๋ค.
let header = NSCollectionLayoutBoundarySupplementaryItem(
contentSize: headerSize,
elementKind: "header",
alignment: .top
)
let footer = NSCollectionLayoutBoundarySupplementaryItem(
layoutSize: footerSize,
elementKind: "footer",
alignment: .bottom
)
header.pinToVisibleBounds = true
section.boundarySupplementaryItems = [header, footer]
pinToVisibleBounds
ํ๋กํผํฐ๋ฅผ ์ฌ์ฉํด ํํ ๋งํ๋ Sticky Header ๋ํ ๋ง๋ค๊ธฐ ์ฌ์์ก์ต๋๋ค.
DecorationView
ScrollView
๋ค์ ๋ฐฐ๊ฒฝ์ ๊พธ๋ฉฐ์ฃผ๋ DecorationView
๋ํ ์๋์ฒ๋ผ ์ฌ์ฉํ ์ ์์ต๋๋ค.
let background = NSCollectionLayoutDecorationItem.backgorund(elementKind: "background")
section.backgroundItems = [background]
layout.register(
MyCoolDecorationView.self,
forDecorationViewOfKind: "background"
)
Estimated Self-Sizing
Item
๋ค์ ์์๋ค์ ํฌ๊ธฐ๊ฐ ์ ํด์ง์ง ์๊ณ ๋ณํํ๋ ๊ฒฝ์ฐ๊ฐ ์์ต๋๋ค.
์ปจํ
์ธ ๊ฐ ์๊ฑฐ๋ ์๋ ๊ฒฝ์ฐ๊ฐ ์์์๋ ์๊ณ , OS์ ํ
์คํธ ํฌ๊ธฐ๋ฅผ ๋ณ๊ฒฝํจ์ ๋ฐ๋ผ size
์ ๋ณํ๊ฐ ์๊ธธ์๋ ์์ฃ .
size
๋ฅผ ์ค์ ํด์ค ๋ .estimated
์ ํ์ฉํ๋ฉด ์ด์ ๋ํด ์ ์ฐํ ๋์์ด ๊ฐ๋ฅํด์ง๋๋ค.
let headerSize = NSCollectionLayoutSize(
widthDimension: .fractionalWidth(1.0),
heightDimension: .estimated(44.0)
)
let header = NSCollectionLayoutBoundarySupplementaryitem(
layoutSize: headerSize,
elementKind: "header",
alignment: .top
)
header.pinToVisibleBounds = true
section.boundarySupplementaryItems = [header, footer]
์ ์์์ ๊ฒฝ์ฐ Item
์ ๋์ด๋ฅผ ์ปจํ
์ธ ์ ํฌ๊ธฐ ๋ณํ์ ๋์์ํฌ ์ ์๋ ๊ฒ์ด์ฃ .
Group ์์ Group ๋ฃ๊ธฐ
CollectionView๊ฐ ๋ณต์กํด์ง๋ฉด์ Group
์์ ๋ค๋ฅธ Group
์ ๋ฃ์ ์ผ์ด ์๊ธธ ์๋ ์๊ฒ ์ฃ .
์ฌ์ค NSCollectionLayoutGroup
์ NSCollectionLayoutItem
์ ์์๋ฐ์ ํ์ํ์
์
๋๋ค.
๋ค๋ฅธ ๋ง๋ก, Group
์ ๋ชจ์์ ๋ค๋ฅธ Group
์ ๋ง๋ค์๋ ์๋ค๋ ์๋ฏธ์ฃ .
์ด๋ฐ Nesting์๋ ์ ํ์ด ์๊ธฐ ๋๋ฌธ์ ์๋นํ ๋ค์ํ ํํ์ ๋์์ธ๋ค์ ๋ง๋ค ์ ์๊ฒ ๋์์ต๋๋ค.
์ด๋ฐ ํํ๋ฅผ ๋ง๋๋ ค๋ฉด ์ด๋ป๊ฒ ๋ง๋ค๋ฉด ๋ ๊น์?
let leadingItem = NSCollectionLayoutItem(
layoutSize: leadingItemSize
)
let trailingItem = NSCollectionLayoutItem(
layoutSize: trailingItemSize
)
let trailingGroup = NSCollectionLayoutGroup.vertical(
layoutSize: trailingGroupSize,
subitem: trailingItem,
count: 2
)
let containerGroup = NSCollectionLayoutGroup.horizontal(
layoutSize: containerGroupSize,
subitems: [leadingItem, trailingGroup]
)
์ฌ์ค ๊ต์ฅํ ์ง๊ด์ ์ผ๋ก ๊ตฌ์ฑํ ์ ์์ต๋๋ค.
leadingItem
๊ณผ trailingItem
๋์ด ๋ฌถ์ธ trailingGroup
์ containerGroup
์ผ๋ก ๋ฌถ์ ํํ์
๋๋ค.
CollectionView๋ฅผ CollectionView์ ๋ฃ๊ธฐ
CollectionView
์์ ๋ ๋ค๋ฅธ CollectionView
๊ฐ ์์ ๊ฒฝ์ฐ, ์คํฌ๋กคํ๋ ๋ฐฉํฅ์ด ๋ฐ๋๊ธฐ ๋๋ฌธ์ ๋ถ์์ฐ์ค๋ฌ์ด ๋์์ ๋ณด์ผ ์ ์์ต๋๋ค.
์ด๋ฐ ๊ฒฝ์ฐ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด์๋
section.orthogonalScrollingBehavior = .continuous
์ด ํ ์ค์ ์ฝ๋๋ฅผ ์ถ๊ฐํด์ฃผ๋ฉด ํด๊ฒฐ๋ฉ๋๋ค.
enum UICollectionLayoutSectionOrthogonalScrollingBehavior: Int {
case none
case continuous
case continuousGroupLeadingBoundary
case paging
case groupPaging
case groupPagingCentered
}
์ด๋ ๊ฒ ๋๊ฐ์ continuous
์ต์
๊ณผ 3๊ฐ์ paging ์ต์
์ด ์์ผ๋ ์ํ๋ ๊ฐ์ ์ฐพ์ ๋ฃ์ด๋ด
์๋ค.