Adaptive Collection View

Slide 1

Slide 1 text

Adaptive Collection View ishkawa

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Adaptivity

Slide 6

Slide 6 text

“Supporting any size display or orientation of a device allows you to create a great user experience with your app. With the latest advancements with View Controllers in iOS 8 and Auto Layout in Xcode, it’s now even easier for you to adapt your user interface to context and different sized devices.”

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

UICollectionView?

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

UICollectionView UITableView

Slide 13

Slide 13 text

UICollectionViewController UICollectionView UICollectionViewCell UITableViewController UITableView UITableViewCell

Slide 14

Slide 14 text

UICollectionViewDelegate UICollectionViewController UICollectionView UICollectionViewCell UICollectionViewDataSource UITableViewDelegate UITableViewController UITableView UITableViewCell UITableViewDataSource

Slide 15

Slide 15 text

େม͡ΌΜʜ

Slide 16

Slide 16 text

ಉ͡Α͏ͳίʔυΛ ճॻ͘ඞཁ͕͋Δʜ

Slide 17

Slide 17 text

ͭͷมߋΛՕॴʹ ద༻͢Δඞཁ͕͋Δʜ

Slide 18

Slide 18 text

UICollectionView UITableView

Slide 19

Slide 19 text

UICollectionView UITableView?

Slide 20

Slide 20 text

UICollectionView UICollectionView!

Slide 21

Slide 21 text

6*$PMMFDUJPO7JFXͰ 6*5BCMF7JFXͬΆ͍΋ͷΛ ࣮૷͢Δͷ͸࣮͸؆୯

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

UICollectionViewCell Decoration View

Slide 24

Slide 24 text

UICollectionViewLayout

Slide 25

Slide 25 text

6*$PMMFDUJPO7JFX'MPX-BZPVU ͱ͍͏ศརͳ΋ͷ͕͋Δ

Slide 26

Slide 26 text

class CollectionViewLayout: UICollectionViewFlowLayout

Slide 27

Slide 27 text

ͭͷϞʔυΛ༻ҙ

Slide 28

Slide 28 text

class CollectionViewLayout: UICollectionViewFlowLayout { enum Mode { case Table case Flow } var mode: Mode = (UIDevice.currentDevice().userInterfaceIdiom == .Pad) ? .Flow : .Table }

Slide 29

Slide 29 text

ϞʔυʹԠͨ͡ FTUJNBUFE*UFN4J[FΛઃఆ ߴ͕͞ݻఆͷ৔߹͸JUFN4J[FΛઃఆ

Slide 30

Slide 30 text

override var estimatedItemSize: CGSize { get { let spacing = minimumLineSpacing var size = super.estimatedItemSize if let width = collectionView?.frame.size.width { switch mode { case .Table: size.width = width case .Flow: size.width = width / 2.0 - spacing } } return size } set { super.estimatedItemSize = newValue } }

Slide 31

Slide 31 text

6*$PMMFDUJPO7JFX -BZPVU"UUSJCVUFΛ 6*5BCMF7JFXʹࣅͤΔ mode == .Tableͷ৔߹

Slide 32

Slide 32 text

override func layoutAttributesForElementsInRect(rect: CGRect) -> [ var attributes = [UICollectionViewLayoutAttributes]() if let superAttributes = super.layoutAttributesForElementsInRe for attributes in superAttributes { attributes.frame.origin.x = 0.0 } attributes += superAttributes } return attributes } override func layoutAttributesForItemAtIndexPath(indexPath: NSInde let attributes = super.layoutAttributesForItemAtIndexPath(inde if mode == .Table { attributes.frame.origin.x = 0.0 } return attributes }

Slide 33

Slide 33 text

Ҏ্

Slide 34

Slide 34 text

Demo https://github.com/ishkawa/sandbox/tree/master/Adaptive

Slide 35

Slide 35 text

ͭͷ7JFX$POUSPMMFS $FMMͰ J1IPOF J1BEʹରԠͰ͖Δ

Slide 36

Slide 36 text

ΞμϓςΟϒʂ

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

ηϧ΋ग़͠෼͚͍ͨ৔߹͸ʁ

Slide 39

Slide 39 text

- Size Classes - ~ipad

Slide 40

Slide 40 text

- Size Classes - ~ipad

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

ηϧαΠζͷܭࢉ͸ Ͳ͏ͳͬͯΔͷʁ

Slide 46

Slide 46 text

Self Sizing Cell introduced in iOS 8

Slide 47

Slide 47 text

✓ UITableView ✓ UICollectionView

Slide 48

Slide 48 text

/4-BZPVU$POTUSBJOUΛ ద੾ʹ഑ஔ͢Δͱηϧͷ େ͖͞Λࣗಈతʹܭࢉ

Slide 49

Slide 49 text

ίʔυෆཁ UICollectionViewͷ৔߹͸ඞཁͳ৔߹΋͋Δ

Slide 50

Slide 50 text

࠷ߴʂ

Slide 51

Slide 51 text

ͨͩ͠

Slide 52

Slide 52 text

6*$PMMFDUJPO7JFXͷ৔߹ ᠘͕ͨ͘͞Μ͋ΔͷͰ ֮ޛ͕ඞཁ

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

J04͸ʁ

Slide 55

Slide 55 text

4FMG4J[JOH$FMMΛ ਅࣅ͠Α͏

Slide 56

Slide 56 text

TZTUFN-BZPVU4J[F 'JUUJOH4J[FΛ JUFN4J[F'PS*OEFY1BUI Ͱݺ΂͹0, ηϧͷग़͠෼͚͸Interface BuilderͰ׬݁ͯ͠Δ͸ͣ

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

ຊ౰ʹ͋ͬͨ࿩

Slide 59

Slide 59 text

lੴ઒͞ΜɺJ1IPOF͚ͩͰ͍͍ͷͰ ͜ͷػೳΛ͜ͷόʔδϣϯʹ৐͍ͤͯͩ͘͞z اըऀ

Slide 60

Slide 60 text

l͕Μ͹Γ·͢ʂz ੴ઒

Slide 61

Slide 61 text

lͰ͖·ͨ͠ʂ֬ೝΛ͓ئ͍͠·͢ʂz ੴ઒

Slide 62

Slide 62 text

lJ1BE΋࣮૷ͯ͘͠ΕͨΜͰ͢Ͷʂ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂz اըऀ

Slide 63

Slide 63 text

l͑ͬz ੴ઒

Slide 64

Slide 64 text

"EBQUJWF$PMMFDUJPO7JFXΛ ࢖ͬͯJ1IPOF൛ͷ࣮૷Λͨ͠Β

Slide 65

Slide 65 text

J1BE൛΋࣮૷͞Εͯͨ

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

·ͱΊ

Slide 68

Slide 68 text

✓ UITableView͸UICollectionView ✓ iPhone͸iPad ✓ ಉ͡ίʔυ͸2౓ॻ͔ͳ͍