与单视图应用程序相比，今天的UICollectionView扩展具有不同的行为 [英] Today Extension with UICollectionView different behaviour compared to Single View Application
问题描述
我尝试将集合视图添加到今天扩展，每行指定3个项目，并且将顶部，左侧，底部和右侧的部分插图设置为20.当我在Single View应用程序中执行此操作时，一切都与预期的一样，但是当我以编程方式对今日扩展"执行相同操作时，集合视图看起来会有所不同，尤其是右侧和底部的空间似乎与Single View应用程序中的有所不同.有什么区别的原因是什么?我希望今天的扩展"具有与单视图应用程序"相同的行为.
I try to add a collection view to a Today Extension with specifying the items per row of 3 items and also with setting the section insets for with 20 for top, left, bottom and right. When I do this in a Single View Application everything is like expected, but when I do the same programmatically for the Today Extension the collection view looks different, especially the space of the right and bottom seems not to be like in the Single View Application. What's the reason why there is this difference? I expected the same behaviour for the Today Extension like in the Single View Application.
为了更好地理解我的问题，下面是带有屏幕截图的Single View Application和Today Extension的代码:
To understand my problem better below is the code of the Single View Application and the Today Extension, both with Screenshots:
单视图应用程序的ViewController:
ViewController of the Single View Application:
import UIKit
class ViewController: UIViewController, UICollectionViewDelegateFlowLayout, UICollectionViewDataSource {
var collectionView: UICollectionView!
let sectionInsets = UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20)
let itemsPerRow: CGFloat = 3
override func viewDidLoad() {
super.viewDidLoad()
let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
layout.sectionInset = sectionInsets
collectionView = UICollectionView(frame: view.frame, collectionViewLayout: layout)
collectionView.dataSource = self
collectionView.delegate = self
collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "cellId")
collectionView.backgroundColor = .white
view.addSubview(collectionView)
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 6
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cellId", for: indexPath)
cell.backgroundColor = .blue
return cell
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let paddingSpace = sectionInsets.left * (itemsPerRow + 1)
let availableWidth = view.frame.width - paddingSpace
let widthPerItem = availableWidth / itemsPerRow
return CGSize(width: widthPerItem, height: widthPerItem)
}
}
单视图应用程序的屏幕截图:
Screenshot of the Single View Application:
Today扩展程序的TodayViewController:
TodayViewController of the Today Extension:
import UIKit
import NotificationCenter
class TodayViewController: UIViewController, NCWidgetProviding, UICollectionViewDelegateFlowLayout, UICollectionViewDataSource {
var collectionView: UICollectionView!
let sectionInsets = UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20)
let itemsPerRow: CGFloat = 3
override func viewDidLoad() {
super.viewDidLoad()
extensionContext?.widgetLargestAvailableDisplayMode = .expanded
let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
layout.sectionInset = sectionInsets
collectionView = UICollectionView(frame: view.frame, collectionViewLayout: layout)
collectionView.dataSource = self
collectionView.delegate = self
collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "cellId")
collectionView.backgroundColor = .white
view.addSubview(collectionView)
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 6
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cellId", for: indexPath)
cell.backgroundColor = .blue
return cell
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let paddingSpace = sectionInsets.left * (itemsPerRow + 1)
let availableWidth = view.frame.width - paddingSpace
let widthPerItem = availableWidth / itemsPerRow
return CGSize(width: widthPerItem, height: widthPerItem)
}
func widgetActiveDisplayModeDidChange(_ activeDisplayMode: NCWidgetDisplayMode, withMaximumSize maxSize: CGSize) {
// toggle height in case of more/less button event
if activeDisplayMode == .compact {
self.preferredContentSize = CGSize(width: 0, height: 110)
} else {
self.preferredContentSize = CGSize(width: 0, height: 220)
}
}
}
今日扩展的屏幕截图:
推荐答案
I solved my own problem with the help of this answer. The solution so far is that I just setup the collection view in viewDidAppear(_:) instead of viewDidLoad() in the TodayViewController of the Today Extension (The space to the bottom currently looks like that, because I set a fix height of 220):
import UIKit
import NotificationCenter
class TodayViewController: UIViewController, NCWidgetProviding, UICollectionViewDelegateFlowLayout, UICollectionViewDataSource {
var collectionView: UICollectionView!
let sectionInsets = UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20)
let itemsPerRow: CGFloat = 3
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
extensionContext?.widgetLargestAvailableDisplayMode = .expanded
let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
layout.sectionInset = sectionInsets
collectionView = UICollectionView(frame: view.frame, collectionViewLayout: layout)
collectionView.dataSource = self
collectionView.delegate = self
collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "cellId")
collectionView.backgroundColor = .white
view.addSubview(collectionView)
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 6
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cellId", for: indexPath)
cell.backgroundColor = .blue
return cell
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let paddingSpace = sectionInsets.left * (itemsPerRow + 1)
let availableWidth = view.frame.width - paddingSpace
let widthPerItem = availableWidth / itemsPerRow
return CGSize(width: widthPerItem, height: widthPerItem)
}
func widgetActiveDisplayModeDidChange(_ activeDisplayMode: NCWidgetDisplayMode, withMaximumSize maxSize: CGSize) {
// toggle height in case of more/less button event
if activeDisplayMode == .compact {
self.preferredContentSize = CGSize(width: 0, height: 110)
} else {
self.preferredContentSize = CGSize(width: 0, height: 220)
}
}
}
现在我得到的结果与单视图应用程序中的结果相同:
Now I get the same result as in the Single View Application:
更新:
不幸的是，上面的解决方案仍然没有预期的行为.当Today Extension在构建之前处于展开状态时，它看起来像上面的屏幕截图，与预期的一样.问题是当它在构建之前处于折叠状态并且我要扩展扩展时，结果看起来像这样(集合视图的扩展部分刚刚被切除):
Unfortunately the solution from above had still a not expected behaviour. When the Today Extension was in an expanded state before the build, it looks like the screenshot from above, like expected. The problem is when it's in a collapsed state before the build and I want to expand the extension, the result looks like this (the expanded part of the collection view is just cutted off):
到目前为止，解决此问题的方法是将集合视图的初始框架设置为.zero，并在viewWillLayoutSubviews()中将框架设置为这样:
The solution for this problem is so far to set the initial frame of the collection view to .zero and set the frame in viewWillLayoutSubviews() like this:
import UIKit
import NotificationCenter
class TodayViewController: UIViewController, NCWidgetProviding, UICollectionViewDelegateFlowLayout, UICollectionViewDataSource {
var collectionView: UICollectionView!
let sectionInsets = UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20)
let itemsPerRow: CGFloat = 3
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
extensionContext?.widgetLargestAvailableDisplayMode = .expanded
let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
layout.sectionInset = sectionInsets
collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
collectionView.dataSource = self
collectionView.delegate = self
collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "cellId")
collectionView.backgroundColor = .white
view.addSubview(collectionView)
}
override func viewWillLayoutSubviews() {
let frame = view.frame
collectionView?.frame = CGRect(x: frame.origin.x, y: frame.origin.y, width: frame.size.width, height: frame.size.height)
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 6
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cellId", for: indexPath)
cell.backgroundColor = .blue
return cell
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let paddingSpace = sectionInsets.left * (itemsPerRow + 1)
let availableWidth = view.frame.width - paddingSpace
let widthPerItem = availableWidth / itemsPerRow
return CGSize(width: widthPerItem, height: widthPerItem)
}
func widgetActiveDisplayModeDidChange(_ activeDisplayMode: NCWidgetDisplayMode, withMaximumSize maxSize: CGSize) {
// toggle height in case of more/less button event
if activeDisplayMode == .compact {
self.preferredContentSize = CGSize(width: 0, height: 110)
} else {
self.preferredContentSize = CGSize(width: 0, height: 220)
}
}
}
现在，行为就像预期的一样，就像今天的扩展程序第一次折叠一样，如第一个结果屏幕截图所示.
Now the behaviour is like expected, like shown in the first result screenshot even if the Today Extension was first collapsed.
这篇关于与单视图应用程序相比，今天的UICollectionView扩展具有不同的行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
