![AppDevKit Solution
4.
func setup(cell: SSSmallCardCollectionViewCell,
indexPath: IndexPath) {
let productInfo = self.products[indexPath.row]
cell.contentView.layoutIfNeeded()
cell.titleLabel?.text = productInfo.productTitle
...
}](https://image.slidesharecdn.com/mopcon-self-sizing-release-161101050652/85/iOS-self-sizing-cell-30-320.jpg)
![How AppDevKit works?
•
CGSize resultSize = [contentView
systemLayoutSizeFittingSize:UILayoutFittingCompr
essedSize];
resultSize.width = preferredSize.width;
resultSize.height = MAX(resultSize.height,
preferredSize.height);](https://image.slidesharecdn.com/mopcon-self-sizing-release-161101050652/85/iOS-self-sizing-cell-39-320.jpg)
iOS 上 self-sizing cell 的過去、現在、與未來
- 1. iOS self-sizing cell (Jeff Lin)
- 2. • Yahoo AppDevKit - - (Anistar) • https://github.com/yahoo/AppDevKit • – iOS BDD - (qcl) • https://github.com/qcl/zizhi
- 3. About me • YAHOO App Engineer • iOS App • AppDevKit
- 4. Agenda • Self-sizing • Self-sizing • Xcode 8
- 5. Self-sizing
- 8. /
- 9. /
- 10. Expandable cell
- 11. • iOS dynamic type • UIFont.preferredFontForTex tStyle:
- 13. • • UIImageView, UILabel, UITextView… • Container • UITableView, UICollectionView • • storyboard, xib, constraint
- 14. Layout
- 15. Self-sizing ?
- 17. • NSString • sizeWithAttributes • boundingRectWithSize:options:attributes:context: • UILabel • sizeToFit: • UIScrollView/UITextView • contentSize
- 18. • size ceil() • sizeToFit: frame constraint
- 19. UITextView contentSize • sizeForItemAtIndexPath: • textView.ContentSize
- 20. iOS ?
- 21. UITableview self sizing • UILabel numberOfLines = 0 • AutoLayout self.tableView?.rowHeight = UITableViewAutomaticDimension self.tableView?.estimatedRowHeight = 100
- 22. That’s all!
- 23. UITableview self sizing • • layout
- 24. UICollectionView • Grid view, • / layout •
- 26. AppDevKit • UICollectionViewCell • subclass ADKTableViewDynamicSizeCell/ ADKCollectionViewDynamicSizeCell • constraint • collectionView:layout:sizeForItemAtIndexPath: • ADKNibCacheManager cell • cell
- 28. AppDevKit Solution collectionView:layout:sizeForItemAtIndexPath: 1. cell let appName = Bundle.main.object(forInfoDictionaryKey: "CFBundleName") as! String? let cell = ADKSWNibCacheManager.sharedInstance().instance( className: appName?.appending(". (SSSmallCardCollectionViewCell.self)")) as! SSSmallCardCollectionViewCell
- 29. AppDevKit Solution 2. let preferSize = CGSize.init(width: collectionView.frame.size.width / 2.0 - 10, height: 100.0) cell.frame = CGRect.init(origin: .zero, size: preferSize) 3. layoutIfNeeded constraint cell.contentView.layoutIfNeeded()
- 30. AppDevKit Solution 4. func setup(cell: SSSmallCardCollectionViewCell, indexPath: IndexPath) { let productInfo = self.products[indexPath.row] cell.contentView.layoutIfNeeded() cell.titleLabel?.text = productInfo.productTitle ... }
- 31. AppDevKit Solution 5. let size = ADKCellDynamicSizeCalculator.sharedInstance().size (forDynamicHeightCellInstance: cell, preferredSize: preferSize) return size
- 32. Sample Code @objc(collectionView:layout:sizeForItemAtIndexPath:) func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { // 1. cell let appName = Bundle.main.object(forInfoDictionaryKey: "CFBundleName") as! String? let cell = ADKSWNibCacheManager.sharedInstance().instance(className: appName?.appending(".(SSSmallCardCollectionViewCell.self)")) as! SSSmallCardCollectionViewCell // 2. let preferSize = CGSize.init(width: collectionView.frame.size.width / 2.0 - 10, height: 100.0) cell.frame = CGRect.init(origin: .zero, size: preferSize) // 3. layoutIfNeeded constraint cell.contentView.layoutIfNeeded() // 4. setup(cell: cell, indexPath: indexPath) // 5. let size = ADKCellDynamicSizeCalculator.sharedInstance().size(forDynamicHeightCellInstance: cell, preferredSize: CGSize.init(width: collectionView.frame.size.width / 2.0 - 10, height: 0.0)) return size }
- 36. Recap 1. cell 2. 3. layoutIfNeeded constraint 4. 5. ImageView Title Description Price ImageView SO NICE $ 790
- 37. ImageView SO NICE 790 Recap 1. cell 2. 3. layoutIfNeeded constraint 4. 5. ImageView SO NICE $ 790 SO NICE , ,
- 38. AppDevKit Solution ADKCellDynamicSizeCalculator.sharedInsta nce().size(forDynamicHeightCellInstance: cell, preferredSize: CGSize.init(width: collectionView.frame.size.width / 2.0 - 10, height: 0.0)) 10px
- 39. How AppDevKit works? • CGSize resultSize = [contentView systemLayoutSizeFittingSize:UILayoutFittingCompr essedSize]; resultSize.width = preferredSize.width; resultSize.height = MAX(resultSize.height, preferredSize.height);
- 40. systemLayoutSizeFittingSize • UILayoutFittingCompressedSize • view constraints size • UILayoutFittingExpandedSize • view constraints size
- 41. layoutIfNeeds • layoutIfNeeds • reloadData contentSize • Animate autoLayout
- 42. contentSize // contentSize: {0, 0} collectionView.dataSource = self.delegator // contentSize: {0, 0} collectionView.reloadData() // contentSize: {0, 0} collectionView.layoutIfNeeded // contentSize: {375, 2557.5}
- 43. layoutIfNeeds-Animation viewForAnimate.someConstraint.constanst = 0.0 UIView.animate(withDuration: 0.3) { viewForAnimate.layoutIfNeeded() } UIView.animate(withDuration: 0.3) { viewForAnimate.frame = CGRect.init(origin: .zero, size: CGSize.init(width: 100, height: 100)) } Frame base layout Constraint Autolayout
- 44. iOS ?
- 45. cell • collectionView:layout:sizeForItemAtIndexPath: • Customized UICollectionViewLayout
- 47. estimatedItemSize • iOS 8 above • UICollectionViewFlowLayout • estimatedItemSize • UICollectionViewCell • preferredLayoutAttributesFittingAttributes
- 48. estimatedItemSize • UITableView estimatedRowHeight • UICollectionViewFlowLayout flowLayout.estimatedItemSize = CGSize.init(width: UIScreen.main.bounds.size.width / 2 - 20, height: 100)
- 49. Sample Code func preferredLayoutAttributesFitting(_ layoutAttributes: UICollectionViewLayoutAttributes) -> UICollectionViewLayoutAttributes { self.contentView.layoutIfNeeded() layoutAttributes.frame.size.height = systemLayoutSizeFitting(UILayoutFittingCompressedSi ze).height layoutAttributes.frame.size.width = self.bounds.size.width return layoutAttributes }
- 50. • class reference super.preferredLayoutAttributesFitting(layoutAttributes) • newLayoutAttributes size 1000x1000 • iOS 10 self.contentView.layoutIfNeeded()
- 51. • estimatedItemSize cell preferredLayoutAttributesFitting • estimatedItemSize sizeForItemAtIndexPath
- 56. Expandable cell • • estimatedItemSize+invalidLayout +UIViewAnimation • sizeForCellAtIndexPath+performBatchUpdate:
- 57. • TableView • estimatedRowHeight • CollectionView • cell estimatedItemSize • sizeForItemAtIndexPath • Custom flowLayout • AppDevKit might help for nib!
- 58. Xcode 8 & iOS 10
- 59. self-sizing in iOS 10 • WWDC 216 What's New in UICollectionView in iOS 10 • flowLayout.estimatedItemSize = UICollectionViewFlowLayoutAutomaticSize
- 60. xib in Xcode 8
- 61. xib in Xcode 8 • xib constraint frame • init frame • Update:Xcode 8.1
- 62. Frame size1000!
- 63. xib in Xcode 8 NSLayoutConstraint(item: star, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 0.0, constant: self.frame.height).isActive = true; ” ”
- 64. 1000x1000 star!
- 65. Solution • or 0 NSLayoutConstraint(item: star, attribute: .height, relatedBy: .equal, toItem: self, attribute: .height, multiplier: 1.0, constant: 0.0).isActive = true;
- 67. constraint...
- 68. • auto layout constraint • contentView layoutIfNeeded • preferredMaxLayoutWidth
- 70. • xib • size constraint • constraint self.frame.size
- 71. constraint ...
- 72. Self-sizing checklist • estimatedItemSize • cell preferredLayoutAttributesFittingAttributes • self-sizing constraint
- 73. Self-sizing checklist • sizeForItemAtIndexPath: • cache cell • constraint frame • self-sizing constraint • ADKNibSizeCalculator & ADKCellDynamicSizeCalculator can help!
- 74. … • self-sizing constraint • ( ) • preferredMaxLayoutWidth
- 75. Thank you!