yfujiki

func setupCatFoodsSection() -> NSCollectionLayoutSection {
    // 1. Configuring Section Layout. Item -> Group -> Section
    // Item
    let item = NSCollectionLayoutItem(
        layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),
                                           heightDimension: .fractionalHeight(0.5)))
    item.contentInsets = NSDirectionalEdgeInsets(top: 4.0,
                                                 leading: 0.0,
                                                 bottom: 4.0,
                                                 trailing: 0.0)

yfujiki

func setupBrandNamesSection() -> NSCollectionLayoutSection {
    // 1. Creating section layout. Item -> Group -> Section
    // Item
    let item = NSCollectionLayoutItem(
        layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),
                                           heightDimension: .fractionalHeight(1.0)))
    item.contentInsets = NSDirectionalEdgeInsets(top: 0.0,
                                                 leading: 8.0,
                                                 bottom: 0.0,
                                                 trailing: 8.0)

yfujiki

private lazy var compositionalLayout: UICollectionViewCompositionalLayout = {
    let layout = UICollectionViewCompositionalLayout { [weak self]
        (sectionIndex: Int, layoutEnvironment: NSCollectionLayoutEnvironment) -> NSCollectionLayoutSection? in
        switch Section(rawValue: sectionIndex) {
        case .brandNames:
            return self?.setupBrandNamesSection()
        case .catFoods:
            return self?.setupCatFoodsSection()
        case .cats:
            return self?.setupCatsSection()

yfujiki

ScrollView {
    VStack(alignment: .leading, spacing: 16) {
        // MARK: - Brand Names Section
        HeaderView(headerText: "Brand Names")
        ScrollView(showsHorizontalIndicator: false) {
            HStack {...}
        }
            .frame(height: 64)

yfujiki

ForEach(cats.identified(by: \.self)) {
    Image($0)
        .resizable()
        .frame(width: UIScreen.main.bounds.width - 20, height: (UIScreen.main.bounds.width - 20) * 0.67)
        .cornerRadius(10)
        .padding(EdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10))
}

yfujiki

HStack {
    ForEach(stride(from: 0, to: catFoods.count, by: 2).map{ $0 }) { i in
        VStack {
            Image(catFoods[i])
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: UIScreen.main.bounds.width / 2 - 40, height: 100)
                .padding(EdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10))
            Image(catFoods[i + 1])
                .resizable()

yfujiki

HStack {
    ForEach(brandNames.identified(by: \.self)) {
        Text("\($0)")
            .frame(width: UIScreen.main.bounds.width / 3 - 30)
            .padding(10)
            .border(Color.black, width: 1, cornerRadius: 22)
    }
}.padding(10)

yfujiki

struct HeaderView: View {
    @State var headerText: String

    var body: some View {
        HStack {
            Text(headerText)
                .color(.white)
                .padding(10)
            }
            .frame(width: UIScreen.main.bounds.width, height: 44, alignment: Alignment.leading)

yfujiki

         ...
         val fragmentManager = supportFragmentManager
         val fragment = MapFragment(this)

         val details = TransitionSet()
         details.addTransition(ChangeBounds())
         details.setDuration(1000)

+        fragmentManager.fragments.first().exitTransition = FADE_OUT_TRANSITION
+        fragment.enterTransition = FADE_IN_TRANSITION

yfujiki

val FADE_IN_TRANSITION = {
    val fade = Fade()
    fade.duration = 1000
    fade
}()

val FADE_OUT_TRANSITION = {
    val fade = Fade()
    fade.duration = 200
    fade