iOS13,14 CollectionView(1)Grid實現(xiàn)簡介

前情提要

????iOS13對CollectionView進行了大的更新之后,一個CollectionView幾乎可以應對開發(fā)中90%的UI需求棺牧。

????開發(fā)過程中,我們不再需要思考"怎么做"而是"需要什么"。比如有些CollectionView嵌套CollectionView或者TableView甚至ScrollView的問題截歉,無論是UI,數(shù)據(jù)源烟零,還是邊界滑動問題都會讓人頭大瘪松,效率很低。

? ? 本文依據(jù)WWDC2019/20關于CollectionView的session锨阿,與大家共同學習宵睦。



正文內(nèi)容

示例代碼:

https://developer.apple.com/documentation/uikit/views_and_controls/collection_views/implementing_modern_collection_views

1.GridViewController:


從最簡單的入手來看CollectionView的基本使用:

一:把CollectionView添加到控制器上,就是代碼中的configureHierarchy()方法墅诡;

二:寫布局壳嚎,也就是createLayout()方法;

下圖是iOS13中CollectionView中的布局關系:

所以在createLayout中需要我們配置itemSize,groupSize,以及section;

private func createLayout() -> UICollectionViewLayout {

//fractionalWidth:?dimension is computed as a fraction of the width of the containing group

//fractionalHeight:?dimension is computed as a fraction of the height of the containing group

//absolute:?dimension with an absolute point value

//estimated:?dimension is estimated with a point value. Actual size will be determined when the content is rendered.

? ? ? ? let?itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.2),

?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? heightDimension: .fractionalHeight(1.0))

? ? ? ? let?item = NSCollectionLayoutItem(layoutSize: itemSize)

? ? ? ? let?groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? heightDimension: .fractionalWidth(0.2))

? ? ? ? let?group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize,

?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? subitems: [item])

? ? ? ? let?section = NSCollectionLayoutSection(group: group)

? ? ? ? let?layout = UICollectionViewCompositionalLayout(section: section)

? ? ? ? return?layout

? ? }

三:處理數(shù)據(jù)源,也就是configureDataSource()方法:

private func configureDataSource() {

//注冊cell 系統(tǒng)默認給了3個cell,Text..,List..,Label..也可以自定義cell

? ? ? ? let?cellRegistration =UICollectionView.CellRegistration<TextCell, Int> { (cell, indexPath, identifier)in

? ? ? ? ? ? // Populate the cell with our item description.

? ? ? ? ? ? cell.label.text="\(identifier)"

? ? ? ? ? ? cell.contentView.backgroundColor = .cornflowerBlue

? ? ? ? ? ? cell.layer.borderColor = UIColor.black.cgColor

? ? ? ? ? ? cell.layer.borderWidth=1

? ? ? ? ? ? cell.label.textAlignment= .center

? ? ? ? ? ? cell.label.font=UIFont.preferredFont(forTextStyle: .subheadline)

? ? ? ? }

? ? ? ? dataSource = UICollectionViewDiffableDataSource<Section, Int>(collectionView: collectionView) {

? ? ? ? ? ? (collectionView:UICollectionView, indexPath:IndexPath, identifier:Int) ->UICollectionViewCell?in

? ? ? ? ? ? // Return the cell.

? ? ? ? ? ? return?collectionView.dequeueConfiguredReusableCell(using: cellRegistration, for: indexPath, item: identifier)

? ? ? ? }

? ? ? ? // initial data

//?snapshot

// Truth of UI state

// Unique identifiers for sections and items

// No more IndexPaths

//?snapshot還有很多方法,足夠處理UI變化的方方面面

? ? ? ? var snapshot = NSDiffableDataSourceSnapshot<Section, Int>()

? ? ? ? snapshot.appendSections([.main])

? ? ? ? snapshot.appendItems(Array(0..<94))

// 更新末早,提交數(shù)據(jù)

? ? ? ? dataSource.apply(snapshot, animatingDifferences:false)

? ? }

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末烟馅,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子然磷,更是在濱河造成了極大的恐慌焙糟,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,198評論 6 514
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件样屠,死亡現(xiàn)場離奇詭異穿撮,居然都是意外死亡缺脉,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,334評論 3 398
  • 文/潘曉璐 我一進店門悦穿,熙熙樓的掌柜王于貴愁眉苦臉地迎上來攻礼,“玉大人,你說我怎么就攤上這事栗柒〗赴纾” “怎么了?”我有些...
    開封第一講書人閱讀 167,643評論 0 360
  • 文/不壞的土叔 我叫張陵瞬沦,是天一觀的道長太伊。 經(jīng)常有香客問我,道長逛钻,這世上最難降的妖魔是什么僚焦? 我笑而不...
    開封第一講書人閱讀 59,495評論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮曙痘,結果婚禮上芳悲,老公的妹妹穿的比我還像新娘。我一直安慰自己边坤,他們只是感情好名扛,可當我...
    茶點故事閱讀 68,502評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著茧痒,像睡著了一般肮韧。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上旺订,一...
    開封第一講書人閱讀 52,156評論 1 308
  • 那天惹苗,我揣著相機與錄音,去河邊找鬼耸峭。 笑死桩蓉,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的劳闹。 我是一名探鬼主播院究,決...
    沈念sama閱讀 40,743評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼本涕!你這毒婦竟也來了业汰?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,659評論 0 276
  • 序言:老撾萬榮一對情侶失蹤菩颖,失蹤者是張志新(化名)和其女友劉穎样漆,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體晦闰,經(jīng)...
    沈念sama閱讀 46,200評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡放祟,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,282評論 3 340
  • 正文 我和宋清朗相戀三年鳍怨,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片跪妥。...
    茶點故事閱讀 40,424評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡鞋喇,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出眉撵,到底是詐尸還是另有隱情侦香,我是刑警寧澤,帶...
    沈念sama閱讀 36,107評論 5 349
  • 正文 年R本政府宣布纽疟,位于F島的核電站罐韩,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏污朽。R本人自食惡果不足惜散吵,卻給世界環(huán)境...
    茶點故事閱讀 41,789評論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望膘壶。 院中可真熱鬧错蝴,春花似錦洲愤、人聲如沸颓芭。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,264評論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽亡问。三九已至,卻和暖如春肛宋,著一層夾襖步出監(jiān)牢的瞬間州藕,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,390評論 1 271
  • 我被黑心中介騙來泰國打工酝陈, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留床玻,地道東北人。 一個月前我還...
    沈念sama閱讀 48,798評論 3 376
  • 正文 我出身青樓沉帮,卻偏偏與公主長得像锈死,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子穆壕,可洞房花燭夜當晚...
    茶點故事閱讀 45,435評論 2 359