AirBnB's MagazineLayout implementation -> dynamically resizing cells in MenuViewController, TODO: test resizing on real device, simulator delays resizing until after scrolling (possibly a bug)

This commit is contained in:
Deniz Duezgoeren
2019-07-16 11:51:50 +02:00
parent 2f3ce29a4d
commit 7e23bb2e5d
22 changed files with 1702 additions and 914 deletions
+12 -58
View File
@@ -42,16 +42,16 @@
<stackView opaque="NO" contentMode="scaleToFill" axis="vertical" spacingType="standard" translatesAutoresizingMaskIntoConstraints="NO" id="Szc-6F-3eJ">
<rect key="frame" x="12" y="12" width="332" height="68"/>
<subviews>
<stackView opaque="NO" contentMode="scaleToFill" ambiguous="YES" spacingType="standard" translatesAutoresizingMaskIntoConstraints="NO" id="9OH-kZ-TWT">
<stackView opaque="NO" contentMode="scaleToFill" ambiguous="YES" alignment="center" spacingType="standard" translatesAutoresizingMaskIntoConstraints="NO" id="9OH-kZ-TWT">
<rect key="frame" x="0.0" y="0.0" width="332" height="20.333333333333332"/>
<subviews>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" ambiguous="YES" text="Label" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="s5x-MZ-cys">
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalCompressionResistancePriority="749" ambiguous="YES" text="Label" lineBreakMode="wordWrap" baselineAdjustment="alignBaselines" minimumScaleFactor="0.5" translatesAutoresizingMaskIntoConstraints="NO" id="s5x-MZ-cys">
<rect key="frame" x="0.0" y="0.0" width="282.33333333333331" height="20.333333333333332"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" ambiguous="YES" text="Label" textAlignment="right" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="vmZ-so-40w">
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" ambiguous="YES" text="Label" textAlignment="right" lineBreakMode="wordWrap" baselineAdjustment="alignBaselines" minimumScaleFactor="0.5" translatesAutoresizingMaskIntoConstraints="NO" id="vmZ-so-40w">
<rect key="frame" x="290.33333333333331" y="0.0" width="41.666666666666686" height="20.333333333333332"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
@@ -59,16 +59,16 @@
</label>
</subviews>
</stackView>
<stackView opaque="NO" contentMode="scaleToFill" ambiguous="YES" spacingType="standard" translatesAutoresizingMaskIntoConstraints="NO" id="mB7-DS-Ukk">
<stackView opaque="NO" contentMode="scaleToFill" ambiguous="YES" alignment="center" spacingType="standard" translatesAutoresizingMaskIntoConstraints="NO" id="mB7-DS-Ukk">
<rect key="frame" x="0.0" y="28.333333333333336" width="332" height="20.333333333333336"/>
<subviews>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" ambiguous="YES" text="Label" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="LtQ-go-Loc">
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" ambiguous="YES" text="Label" lineBreakMode="wordWrap" baselineAdjustment="alignBaselines" minimumScaleFactor="0.5" translatesAutoresizingMaskIntoConstraints="NO" id="LtQ-go-Loc">
<rect key="frame" x="0.0" y="0.0" width="41.666666666666664" height="20.333333333333332"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" ambiguous="YES" text="Label" textAlignment="right" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="8wi-UM-ePc">
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" ambiguous="YES" text="Label" textAlignment="right" lineBreakMode="wordWrap" baselineAdjustment="alignBaselines" minimumScaleFactor="0.5" translatesAutoresizingMaskIntoConstraints="NO" id="8wi-UM-ePc">
<rect key="frame" x="49.666666666666657" y="0.0" width="282.33333333333337" height="20.333333333333332"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
@@ -76,17 +76,17 @@
</label>
</subviews>
</stackView>
<stackView opaque="NO" contentMode="scaleToFill" ambiguous="YES" spacingType="standard" translatesAutoresizingMaskIntoConstraints="NO" id="Vr3-yI-gCi">
<stackView opaque="NO" contentMode="scaleToFill" ambiguous="YES" alignment="center" spacingType="standard" translatesAutoresizingMaskIntoConstraints="NO" id="Vr3-yI-gCi">
<rect key="frame" x="0.0" y="56.666666666666671" width="332" height="11.333333333333329"/>
<subviews>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" ambiguous="YES" text="Label" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Lsb-TY-Oms">
<rect key="frame" x="0.0" y="0.0" width="41.666666666666664" height="11.333333333333334"/>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalCompressionResistancePriority="749" ambiguous="YES" text="Label" lineBreakMode="wordWrap" baselineAdjustment="alignBaselines" minimumScaleFactor="0.5" translatesAutoresizingMaskIntoConstraints="NO" id="Lsb-TY-Oms">
<rect key="frame" x="0.0" y="0.0" width="282.33333333333331" height="11.333333333333334"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" ambiguous="YES" text="Label" textAlignment="right" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="f4b-16-4Nr">
<rect key="frame" x="49.666666666666657" y="0.0" width="282.33333333333337" height="11.333333333333334"/>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" ambiguous="YES" text="Label" textAlignment="right" lineBreakMode="wordWrap" baselineAdjustment="alignBaselines" minimumScaleFactor="0.5" translatesAutoresizingMaskIntoConstraints="NO" id="f4b-16-4Nr">
<rect key="frame" x="290.33333333333331" y="0.0" width="41.666666666666686" height="11.333333333333334"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
@@ -350,64 +350,18 @@
<navigationItem title="Food Menu" id="mFX-6q-tAs"/>
</items>
</navigationBar>
<collectionView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" dataMode="prototypes" translatesAutoresizingMaskIntoConstraints="NO" id="GXo-AH-UZe">
<rect key="frame" x="0.0" y="88" width="414" height="725"/>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<collectionViewFlowLayout key="collectionViewLayout" minimumLineSpacing="1" minimumInteritemSpacing="1" id="7xu-lu-j4n">
<size key="itemSize" width="380" height="140"/>
<size key="headerReferenceSize" width="0.0" height="0.0"/>
<size key="footerReferenceSize" width="0.0" height="0.0"/>
<inset key="sectionInset" minX="0.0" minY="0.0" maxX="0.0" maxY="0.0"/>
</collectionViewFlowLayout>
<cells>
<collectionViewCell opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" layoutMarginsFollowReadableWidth="YES" reuseIdentifier="cell" id="GNK-S9-s6Y" customClass="MenuViewCell" customModule="AvH_Plan" customModuleProvider="target">
<rect key="frame" x="17" y="0.0" width="380" height="100"/>
<autoresizingMask key="autoresizingMask"/>
<view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" insetsLayoutMarginsFromSafeArea="NO">
<rect key="frame" x="0.0" y="0.0" width="380" height="100"/>
<autoresizingMask key="autoresizingMask"/>
<subviews>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" lineBreakMode="wordWrap" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="FiL-oG-5NS">
<rect key="frame" x="24" y="4" width="332" height="92"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
</view>
<constraints>
<constraint firstAttribute="bottom" secondItem="FiL-oG-5NS" secondAttribute="bottom" constant="4" id="Luj-VM-NXr"/>
<constraint firstAttribute="trailing" secondItem="FiL-oG-5NS" secondAttribute="trailing" constant="24" id="MRl-Fb-lcN"/>
<constraint firstItem="FiL-oG-5NS" firstAttribute="top" secondItem="GNK-S9-s6Y" secondAttribute="top" constant="4" id="tSv-yf-nyx"/>
<constraint firstItem="FiL-oG-5NS" firstAttribute="leading" secondItem="GNK-S9-s6Y" secondAttribute="leading" constant="24" id="uoj-TR-t8r"/>
</constraints>
<size key="customSize" width="380" height="100"/>
<connections>
<outlet property="content" destination="FiL-oG-5NS" id="9CZ-mR-oqN"/>
</connections>
</collectionViewCell>
</cells>
<connections>
<outlet property="dataSource" destination="bBH-of-tdd" id="hWU-Ox-LbT"/>
<outlet property="delegate" destination="bBH-of-tdd" id="Goe-Im-LUU"/>
</connections>
</collectionView>
</subviews>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<constraints>
<constraint firstItem="2XG-5F-awv" firstAttribute="trailing" secondItem="R10-r1-giF" secondAttribute="trailing" id="2ph-BT-xaa"/>
<constraint firstItem="GXo-AH-UZe" firstAttribute="top" secondItem="R10-r1-giF" secondAttribute="bottom" id="LJZ-CD-zAQ"/>
<constraint firstItem="R10-r1-giF" firstAttribute="top" secondItem="2XG-5F-awv" secondAttribute="top" id="MXM-m5-w5i"/>
<constraint firstItem="GXo-AH-UZe" firstAttribute="leading" secondItem="nOs-f2-7qu" secondAttribute="leading" id="MZD-gw-lhn"/>
<constraint firstItem="2XG-5F-awv" firstAttribute="trailing" secondItem="GXo-AH-UZe" secondAttribute="trailing" id="gFX-sE-QMR"/>
<constraint firstItem="R10-r1-giF" firstAttribute="leading" secondItem="nOs-f2-7qu" secondAttribute="leading" id="hI9-lC-axL"/>
<constraint firstItem="2XG-5F-awv" firstAttribute="bottom" secondItem="GXo-AH-UZe" secondAttribute="bottom" id="zs4-d5-ZjJ"/>
</constraints>
<viewLayoutGuide key="safeArea" id="2XG-5F-awv"/>
</view>
<tabBarItem key="tabBarItem" title="Menu" image="ic_tomato" selectedImage="ic_tomato" id="IfX-2p-YWq"/>
<connections>
<outlet property="collectionView" destination="GXo-AH-UZe" id="S49-xr-MOj"/>
<outlet property="toolbar" destination="R10-r1-giF" id="t9w-Yn-Waj"/>
</connections>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="8Cd-nN-1G8" userLabel="First Responder" sceneMemberID="firstResponder"/>
+22
View File
@@ -0,0 +1,22 @@
//
// MenuViewCell.swift
// AvH Plan
//
// Created by Deniz Duezgoeren on 16.07.19.
// Copyright © 2019 Deniz Duezgoeren. All rights reserved.
//
import UIKit
import MagazineLayout
class MenuViewCell: MagazineLayoutCollectionViewCell {
@IBOutlet weak var content: UILabel!
override func awakeFromNib() {
super.awakeFromNib()
// Initialization code
}
}
+42
View File
@@ -0,0 +1,42 @@
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="14490.70" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
<device id="retina6_1" orientation="portrait">
<adaptation id="fullscreen"/>
</device>
<dependencies>
<deployment identifier="iOS"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14490.49"/>
<capability name="Safe area layout guides" minToolsVersion="9.0"/>
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
</dependencies>
<objects>
<placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
<placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
<collectionViewCell opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" id="gTV-IL-0wX" customClass="MenuViewCell" customModule="AvH_Plan" customModuleProvider="target">
<rect key="frame" x="0.0" y="0.0" width="512" height="64"/>
<autoresizingMask key="autoresizingMask"/>
<view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center">
<rect key="frame" x="0.0" y="0.0" width="512" height="64"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<subviews>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="natural" lineBreakMode="wordWrap" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="LRg-M9-Mh9">
<rect key="frame" x="24" y="16" width="464" height="32"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
</view>
<constraints>
<constraint firstItem="LRg-M9-Mh9" firstAttribute="top" secondItem="gTV-IL-0wX" secondAttribute="top" constant="16" id="5zo-M7-gZh"/>
<constraint firstAttribute="trailing" secondItem="LRg-M9-Mh9" secondAttribute="trailing" constant="24" id="Bsa-Fp-zBH"/>
<constraint firstItem="LRg-M9-Mh9" firstAttribute="leading" secondItem="gTV-IL-0wX" secondAttribute="leading" constant="24" id="bVa-ZP-z1d"/>
<constraint firstAttribute="bottom" secondItem="LRg-M9-Mh9" secondAttribute="bottom" constant="16" id="yRL-dW-1Yd"/>
</constraints>
<viewLayoutGuide key="safeArea" id="ZTg-uK-7eu"/>
<connections>
<outlet property="content" destination="LRg-M9-Mh9" id="aQ0-nX-edG"/>
</connections>
</collectionViewCell>
</objects>
</document>
+65 -12
View File
@@ -7,21 +7,42 @@
//
import UIKit
import MagazineLayout
class MenuViewController : UIViewController, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
class MenuViewController : UIViewController, UICollectionViewDataSource, UICollectionViewDelegateMagazineLayout {
let reuseIdentifier = "cell"
@IBOutlet weak var collectionView: UICollectionView!
var items = [String]()
private let refreshControl = UIRefreshControl()
let df = DataFetcher()
@IBOutlet weak var toolbar: UINavigationBar!
let layout = MagazineLayout()
var collectionView: UICollectionView
let identifier = "menu_cell"
required init?(coder decoder: NSCoder) {
collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
super.init(coder: decoder)
}
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
view.addSubview(collectionView)
collectionView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
collectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
collectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
collectionView.topAnchor.constraint(equalTo: self.toolbar.bottomAnchor),
collectionView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
])
collectionView.register(UINib(nibName: "MenuViewCell", bundle: nil), forCellWithReuseIdentifier: identifier)
collectionView.dataSource = self
collectionView.delegate = self
if #available(iOS 10.0, *) {
collectionView.refreshControl = refreshControl
} else {
collectionView.addSubview(refreshControl)
collectionView.addSubview(refreshControl) // likely unnecessary
}
refreshControl.addTarget(self, action: #selector(objDoAsync(_:)), for: .valueChanged)
refreshControl.tintColor = UIColor(red: 0.39, green: 0.71, blue: 0.96, alpha: 1.0)
@@ -47,23 +68,55 @@ class MenuViewController : UIViewController, UICollectionViewDataSource, UIColle
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return self.items.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath as IndexPath) as! MenuViewCell
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: identifier, for: indexPath as IndexPath) as! MenuViewCell
if self.items.count != 0 {
cell.content.text = self.items[indexPath.item]
}
cell.backgroundColor = UIColor(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)
return cell
}
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
print("You selected cell#\(indexPath.item)!")
}
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
print("You selected cell#\(indexPath.item)!")
}
// generated stubs filled with return values
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: view.frame.size.width, height: 64)
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeModeForItemAt indexPath: IndexPath) -> MagazineLayoutItemSizeMode {
let widthMode = MagazineLayoutItemWidthMode.fullWidth(respectsHorizontalInsets: true)
let heightMode = MagazineLayoutItemHeightMode.dynamic
return MagazineLayoutItemSizeMode(widthMode: widthMode, heightMode: heightMode)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, visibilityModeForHeaderInSectionAtIndex index: Int) -> MagazineLayoutHeaderVisibilityMode {
return .hidden
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, visibilityModeForFooterInSectionAtIndex index: Int) -> MagazineLayoutFooterVisibilityMode {
return .hidden
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, visibilityModeForBackgroundInSectionAtIndex index: Int) -> MagazineLayoutBackgroundVisibilityMode {
return .hidden
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, horizontalSpacingForItemsInSectionAtIndex index: Int) -> CGFloat {
return 0
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, verticalSpacingForElementsInSectionAtIndex index: Int) -> CGFloat {
return 1
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetsForSectionAtIndex index: Int) -> UIEdgeInsets {
return UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetsForItemsInSectionAtIndex index: Int) -> UIEdgeInsets {
return UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
}
}