I am trying to create a vertical UICollectionView over a horizontal collection view, and in my vertical collection view are three items: WKWebview, UILabel, and a another UICollectionView. The problem is, how can I define the height of the vertical cell based on the content of it? I have tried different approaches but none of them seem to work.
The vertical UICollectionViewCell contains these three items:
class ContentCell: UICollectionViewCell, UICollectionViewDelegateFlowLayout, UICollectionViewDelegate, UICollectionViewDataSource, WKUIDelegate, WKNavigationDelegate, UIScrollViewDelegate {
lazy var articleWebView: WKWebView = {
var webView = WKWebView()
webView.isHidden = false
let webConfiguration = WKWebViewConfiguration()
webView = WKWebView(frame: .zero, configuration: webConfiguration)
webView.backgroundColor = .blue
webView.scrollView.delegate = self
webView.translatesAutoresizingMaskIntoConstraints = false
return webView
}()
var upNextLabel: UILabel = {
let label = UILabel()
label.text = "Up Next"
label.textColor = .black
label.font = label.font.withSize(20)
label.translatesAutoresizingMaskIntoConstraints = false
label.backgroundColor = .lightGray
return label
}()
lazy var upNextCollectionView: UICollectionView = {
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .vertical
let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
cv.isHidden = true
cv.translatesAutoresizingMaskIntoConstraints = false
cv.backgroundColor = .white
cv.dataSource = self
cv.delegate = self
return cv
}()
override init(frame: CGRect) {
super.init(frame: frame)
setUpView()
let myURL = URL(string:"https://google.com")
let myRequest = URLRequest(url: myURL!)
articleWebView.load(myRequest)
}
func setUpView() {
addSubview(articleWebView)
addSubview(upNextLabel)
addSubview(upNextCollectionView)
articleWebView.navigationDelegate = self
addConstraints(NSLayoutConstraint
.constraints(withVisualFormat: "V:|-0-[v0]-18-[v1(60)]-18-[v2(300)]-0-|", options:
NSLayoutConstraint.FormatOptions() ,metrics: nil, views: ["v0": articleWebView,"v1":upNextLabel,
"v2":upNextCollectionView]))
addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|[v0]|", options: NSLayoutConstraint.FormatOptions() , metrics: nil, views: ["v0": articleWebView]))
addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-16-[v0]|", options: NSLayoutConstraint.FormatOptions() , metrics: nil, views: ["v0": upNextLabel]))
addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|[v0]|", options: NSLayoutConstraint.FormatOptions() , metrics: nil, views: ["v0": upNextCollectionView]))
upNextCollectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "upNextContentCell")
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 3
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "upNextContentCell", for: indexPath)
cell.backgroundColor = .brown
return cell
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: frame.width, height: 100)
}
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
webView.scrollView.isScrollEnabled = false
var frame = webView.frame
//frame.size.width = frame.width
frame.size.height = 1
webView.frame = frame
frame.size.height = webView.scrollView.contentSize.height
webView.frame = frame;
}
required init?(coder aDecoder: NSCoder) {
fatalError()
}
}
The vertical Collection view code is like this
class DetailCell: UICollectionViewCell, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {
lazy var contentCollectionView: UICollectionView = {
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .vertical
let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
cv.translatesAutoresizingMaskIntoConstraints = false
cv.backgroundColor = .lightGray
cv.dataSource = self
cv.delegate = self
return cv
}()
override init(frame: CGRect) {
super.init(frame: frame)
setUpViews()
}
let cellId = "contentCell"
let upNextCellId = "upNextCellId"
func setUpViews() {
addSubview(contentCollectionView)
addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-1-[v0]-1-|", options: NSLayoutConstraint.FormatOptions() , metrics: nil, views: ["v0": contentCollectionView]))
addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-0-[v0]-0-|", options: NSLayoutConstraint.FormatOptions() , metrics: nil, views: ["v0": contentCollectionView]))
contentCollectionView.register(ContentCell.self, forCellWithReuseIdentifier: "contentCell")
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "contentCell", for: indexPath) as! ContentCell
cell.backgroundColor = .lightGray
return cell
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 1
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
/// the height here is just a random height just to see the ouput
return CGSize(width: frame.width , height: 6000)
}
I want to layout this cell in such a way that all my content will look properly aligned. What do i need to do.
