CompositionalLayoutでiOS Music AppのUIを再現

完成品

CompositionalLayout組む際に毎回どう実装するんだっけ？となるケースが多く、Appleのサンプルコードも参考になるんですが、ちょっと足りない要素があるので自分のリファレンス用にMusicアプリのUIを再現してメモ

※UIのレイアウトの再現なのでアーキテクチャなどは適用せずにViewにベタ書きしています

UICollectionViewDiffableDataSource

Assciated valuesなenumでセクションを管理しています

    private enum Section {
        case navigation(items: [Navigation])
        case recentlyAddAlbums(items: [Album])
        var ids: [AnyHashable] {
            switch self {
                case .navigation(let items): return items
                case .recentlyAddAlbums(let albums): return albums.map { $0.id }
            }
        }
    }

    private enum Navigation: Hashable, CaseIterable {
        case playlist
        case artist
        case album
        case song
        case recommend
        case downloaded
    }

    private var dataSource: UICollectionViewDiffableDataSource<Int, AnyHashable>?

全体コード

import UIKit


class LibraryViewController: UIViewController {
    private enum Section {
        case navigation(items: [Navigation])
        case recentlyAddAlbums(items: [Album])
        var ids: [AnyHashable] {
            switch self {
                case .navigation(let items): return items
                case .recentlyAddAlbums(let albums): return albums.map { $0.id }
            }
        }
    }

    private enum Navigation: Hashable, CaseIterable {
        case playlist
        case artist
        case album
        case song
        case recommend
        case downloaded

        var cellContent: (UIImage?, String) {
            switch self {
                case .playlist: return (UIImage(systemName: "music.note.list"), "プレイリスト")
                case .artist: return (UIImage(systemName: "music.mic"), "アーティスト")
                case .album: return (UIImage(systemName: "square.stack"), "アルバム")
                case .song: return (UIImage(systemName: "music.note"), "曲")
                case .recommend: return (UIImage(systemName: "person.crop.square"), "あなたにおすすめ")
                case .downloaded: return (UIImage(systemName: "arrow.down.circle"), "ダウンロード済み")
            }
        }
    }

    private var collectionView: UICollectionView!
    private var dataSource: UICollectionViewDiffableDataSource<Int, AnyHashable>?

    private let recentlyAddAlbums: [Album] = (0..<40).map {
        .init(name: "album \($0)", artist: .init(name: "artist name"), songs: [])
    }

    private var sections: [Section] {
        [.navigation(items: Navigation.allCases),
         .recentlyAddAlbums(items: recentlyAddAlbums)]
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        self.title = "ライブラリ"
        configureCollectionView()
        // mock data append
        var snapshot = NSDiffableDataSourceSnapshot<Int, AnyHashable>()
        sections.enumerated().forEach {
            snapshot.appendSections([$0.offset])
            snapshot.appendItems($0.element.ids, toSection: $0.offset)
        }
        self.dataSource?.apply(snapshot)
    }

    private func configureCollectionView() {
        // layout
        self.collectionView = UICollectionView(frame: view.frame, collectionViewLayout: compositionalLayout())
        self.collectionView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        self.view.addSubview(collectionView)
        // cell register
        let recentlyAddAlbumCellRegistration = UICollectionView.CellRegistration<MusicItemCell, Album> { cell, indexPath, item in
            cell.configure(content: item)
        }
        let navigationCellRegistration = UICollectionView.CellRegistration<UICollectionViewListCell, Navigation> { cell, indexPath, item in
            var content = cell.defaultContentConfiguration()
            content.image = item.cellContent.0
            content.imageProperties.tintColor = .systemPink
            content.text = item.cellContent.1
            content.textProperties.font = UIFont.preferredFont(forTextStyle: .title3)
            cell.contentConfiguration = content
            cell.accessories = [.disclosureIndicator()]
        }
        let headerRegistration = UICollectionView
            .SupplementaryRegistration<HeaderSupplementaryView>(elementKind: UICollectionView.elementKindSectionHeader) { (supplementaryView, string, indexPath) in
            supplementaryView.label.text = "最近追加した項目"
        }
        // datasource
        dataSource = .init(collectionView: collectionView, cellProvider: { collectionView, indexPath, itemIdentifier in
            switch self.sections[indexPath.section] {
                case .recentlyAddAlbums(let items):
                    return collectionView.dequeueConfiguredReusableCell(using: recentlyAddAlbumCellRegistration,
                                                                        for: indexPath,
                                                                        item: items[indexPath.item])
                case .navigation(let items):
                    return collectionView.dequeueConfiguredReusableCell(using: navigationCellRegistration,
                                                                        for: indexPath,
                                                                        item: items[indexPath.item])
            }
        })
        dataSource?.supplementaryViewProvider = {
            $0.dequeueConfiguredReusableSupplementary(using: headerRegistration, for: $2)
        }
        collectionView.dataSource = dataSource
    }

    private func compositionalLayout() -> UICollectionViewCompositionalLayout {
        UICollectionViewCompositionalLayout { (sectionIndex: Int,
                                               layoutEnvironment: NSCollectionLayoutEnvironment) -> NSCollectionLayoutSection? in
            switch self.sections[sectionIndex] {
                case .recentlyAddAlbums:
                    let itemSize = NSCollectionLayoutSize(widthDimension: .estimated(72.0),
                                                          heightDimension: .estimated(72.0))
                    let item = NSCollectionLayoutItem(layoutSize: itemSize)
                    let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),
                                                           heightDimension: .estimated(72.0))
                    let itemCount: Int
                    if layoutEnvironment.container.contentSize.width > 1000 {
                        itemCount = 4
                    } else if layoutEnvironment.container.contentSize.width > 600 {
                        itemCount = 3
                    } else {
                        itemCount = 2
                    }
                    let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize,
                                                                   subitem: item,
                                                                   count: itemCount)
                    let spacing = 16.0
                    group.interItemSpacing = .fixed(spacing)
                    let section = NSCollectionLayoutSection(group: group)
                    section.interGroupSpacing = spacing
                    section.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: spacing, bottom: 0, trailing: spacing)
                    let headerSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),
                                                            heightDimension: .estimated(32))
                    let sectionHeader = NSCollectionLayoutBoundarySupplementaryItem(layoutSize: headerSize,
                                                                                    elementKind: UICollectionView.elementKindSectionHeader,
                                                                                    alignment: .top,
                                                                                    absoluteOffset: .init(x: 0, y: -spacing))
                    section.boundarySupplementaryItems = [sectionHeader]
                    return section
                case .navigation:
                    let listSection: NSCollectionLayoutSection = .list(using: .init(appearance: .plain),
                                                                       layoutEnvironment: layoutEnvironment)
                    listSection.contentInsets = .init(top: 0, leading: 0, bottom: 24, trailing: 0)
                    return listSection
            }
        }
    }
}

// MARK: - Custom Cell

extension ViewController {
    class AlbumCell: UICollectionViewCell {
        let imageView = UIImageView()
        let albumNameLabel = UILabel()
        let artistNameLabel = UILabel()

        override init(frame: CGRect) {
            super.init(frame: frame)
            // layout
            imageView.translatesAutoresizingMaskIntoConstraints = false
            albumNameLabel.translatesAutoresizingMaskIntoConstraints = false
            artistNameLabel.translatesAutoresizingMaskIntoConstraints = false
            contentView.addSubview(imageView)
            contentView.addSubview(albumNameLabel)
            contentView.addSubview(artistNameLabel)
            NSLayoutConstraint.activate([
                // imageView constraint
                imageView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
                imageView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
                imageView.topAnchor.constraint(equalTo: contentView.topAnchor),
                imageView.heightAnchor.constraint(equalTo: imageView.widthAnchor, multiplier: 1.0),
                // albumNameLabel constraint
                albumNameLabel.topAnchor.constraint(equalTo: imageView.bottomAnchor, constant: 5),
                albumNameLabel.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
                albumNameLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
                // artistNameLabel constraint
                artistNameLabel.topAnchor.constraint(equalTo: albumNameLabel.bottomAnchor),
                artistNameLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
                artistNameLabel.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
                artistNameLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
            ])
            // Appearance
            imageView.backgroundColor = .systemPink
            imageView.layer.cornerRadius = 8
            artistNameLabel.textColor = .secondaryLabel
        }

        func configure(_ album: Album) {
            self.albumNameLabel.text = album.name
            self.artistNameLabel.text = album.artist.name
        }

        required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") }
    }

    class HeaderSupplementaryView: UICollectionReusableView {
        let label = UILabel()

        override init(frame: CGRect) {
            super.init(frame: frame)
            addSubview(label)
            label.translatesAutoresizingMaskIntoConstraints = false
            label.adjustsFontForContentSizeCategory = true
            NSLayoutConstraint.activate([
                label.topAnchor.constraint(equalTo: topAnchor, constant: 24),
                label.leadingAnchor.constraint(equalTo: leadingAnchor),
                label.trailingAnchor.constraint(equalTo: trailingAnchor),
                label.bottomAnchor.constraint(equalTo: bottomAnchor),
            ])
            if let descriptor = UIFontDescriptor
                .preferredFontDescriptor(withTextStyle: .title2)
                .withSymbolicTraits(.traitBold) {
                label.font = UIFont(descriptor: descriptor, size: 0)
            }
        }
        required init?(coder: NSCoder) { fatalError() }
    }
}

// MARK: - Data Model

struct Album: Identifiable {
    let id: UUID = UUID()
    let name: String
    let artist: Artist
}

struct Artist {
    let name: String
}