입문

이제 재료 설계를 위한 옵션 카드 UI 샘플이 만들어졌습니다.
완성 이미지는 다음과 같습니다.

사용자 인터페이스 구조

UI의 구조는 다음과 같습니다.
여기까지는 일반적인 CollectionView 제작 방법과 같습니다.
MenuView (UIView)
- CollectionView
-- MenuCell (UICollectionViewCell)

득점

점은 선택한 태그 표시기입니다.
NSLayoutAnchor를 사용하면 기분이 좋습니다.
또 다음 샘플은 네 개의 라벨을 표시할 때의 예이다.
MenuBar.swift

    var horizontalBarLeftAnchorConstranit: NSLayoutConstraint?

    /// 選択中のインジケータを更新する
    func collectionView(_ collectionView: UICollectionView,
                        didSelectItemAt indexPath: IndexPath) {

        let x = CGFloat(indexPath.item) * frame.width / 4
        horizontalBarLeftAnchorConstranit?.constant = x
    }

    /// 選択中のインジケータを設定する
    private func setupHorizontalBar() {

        let horizontalBarView = UIView()
        horizontalBarView.backgroundColor = .white //インジケータの色
        horizontalBarView.translatesAutoresizingMaskIntoConstraints = false
        addSubview(horizontalBarView)

        horizontalBarLeftAnchorConstranit = horizontalBarView.leftAnchor.constraint(equalTo: self.leftAnchor)
        horizontalBarLeftAnchorConstranit?.isActive = true
        horizontalBarView.bottomAnchor.constraint(equalTo: self.bottomAnchor).isActive = true
        horizontalBarView.widthAnchor.constraint(equalTo: self.widthAnchor, multiplier: 1/4).isActive = true

        //インジケータの高さ                                 　　
        horizontalBarView.heightAnchor.constraint(equalToConstant: 4).isActive = true
    } 

경품

선택한 탭 표시기에 애니메이션을 추가하면 더욱 멋집니다.
MenuBar.swift

    func collectionView(_ collectionView: UICollectionView,
                        didSelectItemAt indexPath: IndexPath) {

        let x = CGFloat(indexPath.item) * frame.width / 4
        horizontalBarLeftAnchorConstranit?.constant = x

        //アニメーションをつける
        UIView.animate(withDuration: 0.75,
                       delay: 0,
                       usingSpringWithDamping: 1,
                       initialSpringVelocity: 1,
                       options: .curveEaseOut,
                       animations: {
                        self.layoutIfNeeded()

        }, completion: nil)
    }