I have a dynamic collectionView in TableView and there are an bug when I add invalidateLayout (picture is below)
but if I delete invalidateLayout the first four cells are hidden and the layout is not displayed correctly, the video
please help I searched the whole stack but nothing helped thanks
if you need test project
MainViewController
class ViewController: UIViewController, UIScrollViewDelegate {
override func viewDidLoad() {
super.viewDidLoad()
setting()
}
func setting(){
getData()
tableView.dataSource = self
tableView.delegate = self
tableView.estimatedRowHeight = UITableView.automaticDimension
tableView.rowHeight = UITableView.automaticDimension
}
//load data
func pagination(_ completion: (()->())?){
SmartNetworkSevrice.getGoods(with: url) { [unowned self] (data) in
guard data.modals.count > 0 else {
self.tableView.tableFooterView = nil
return
}
self.goods.append(contentsOf: data.modals)
self.offSet += data.modals.count
DispatchQueue.main.async {
let indexPath = IndexPath(row: 0, section: 0)
self.tableView.tableFooterView = nil
if self.goods.count == data.modals.count || self.isRefresh {
self.tableView.reloadRows(at: [indexPath], with: .none)
} else {
if let cell = self.tableView.cellForRow(at: indexPath) as? TVCellGoods {
UIView.performWithoutAnimation {
self.tableView.beginUpdates()
cell.insertGoods(data.modals)
cell.layoutIfNeeded()
cell.collectionViewHeight.constant = cell.collectionView.collectionViewLayout.collectionViewContentSize.height
self.tableView.endUpdates()
}
}
}
completion?()
}
}
// define bottom of tableView
func scrollViewDidScroll(_ scrollView: UIScrollView) {
guard scrollView == self.tableView else { return }
if (!isMoreDataLoading) {
// Вычислить позицию длины экрана до нижней части результатов
let scrollViewContentHeight = scrollView.contentSize.height
let scrollOffsetThreshold = scrollViewContentHeight - scrollView.bounds.size.height
if(scrollView.contentOffset.y > scrollOffsetThreshold && scrollView.isDragging) {
isMoreDataLoading = true
self.tableView.isScrollEnabled = false;
self.tableView.isScrollEnabled = true;
pagination(nil)
}
}
}
}
extension ViewController: UITableViewDataSource {
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 1
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
guard let cell = tableView.dequeueReusableCell(withIdentifier: "goods", for: indexPath) as? TVCellGoods else { return UITableViewCell() }
guard bestGoods.count != 0, goods.count != 0 else { return UITableViewCell() }
cell.delegate = self
cell.configure(bestGoods, goods, categories)
// автообновление высоты
self.tableView.beginUpdates()
cell.collectionViewHeight.constant = cell.collectionView.collectionViewLayout.collectionViewContentSize.height
self.tableView.endUpdates()
return cell
}
}
extension ViewController: UITableViewDelegate, CallDelegate {
func callMethod() {}
func callMethod(push vc:UIViewController) {
self.navigationController?.pushViewController(vc, animated: true)
}
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return UITableView.automaticDimension
}
func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat {
return UITableView.automaticDimension
}
}
TableViewCell with collectionView
class TVCellGoods: UITableViewCell {
#IBOutlet weak var collectionView:UICollectionView!
#IBOutlet weak var collectionViewHeight:NSLayoutConstraint!
weak var delegate:CallDelegate?
var bestGoods = [Goods]() // лучшие товары
var goods = [Goods]() // все товары
var categories = [Menu]()
override func layoutSubviews() {
super.layoutSubviews()
self.collectionView.collectionViewLayout.invalidateLayout()
}
override func awakeFromNib() {
super.awakeFromNib()
collectionView.delegate = self
collectionView.dataSource = self
collectionView.tag = 2
collectionView.isScrollEnabled = false
}
override func setSelected(_ selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)
// Configure the view for the selected state
}
func configure(_ best:[Goods],_ goods:[Goods], _ category:[Menu]) {
self.bestGoods = best
self.goods = goods
self.categories = category
self.collectionView.reloadData()
}
func insertGoods(_ data:[Goods]) {
self.goods.append(contentsOf: data)
let count = self.bestGoods.count + self.categories.count + self.goods.count
let indexPaths = ((count - data.count) ..< count)
.map { IndexPath(row: $0, section: 0) }
self.collectionView.performBatchUpdates({
self.collectionView.insertItems(at: indexPaths)
}, completion: nil)
}
}
and CollectionViewCell
class CVCellGoods: UICollectionViewCell {
#IBOutlet weak var bgView: UIView!
#IBOutlet weak var imageView: UIImageView!
#IBOutlet weak var title: UILabel!
#IBOutlet weak var price: UILabel!
#IBOutlet weak var delivery: UIImageView!
#IBOutlet weak var premium: UIImageView!
override func prepareForReuse() {
super.prepareForReuse()
delivery.image = nil
premium.image = nil
title.text = nil
price.text = nil
imageView.image = nil
imageView.sd_cancelCurrentImageLoad()
}
override func awakeFromNib() {
super.awakeFromNib()
imageView.backgroundColor = UIColor(red: 215/255, green: 215/255, blue: 215/255, alpha: 1)
self.contentView.layer.cornerRadius = 5
self.contentView.layer.masksToBounds = true
self.layer.shadowColor = UIColor.black.cgColor
self.layer.shadowOffset = CGSize(width: 0, height: 0.5)
self.layer.shadowRadius = 1
self.layer.shadowOpacity = 0.3
self.layer.masksToBounds = false
self.layer.shouldRasterize = true
self.layer.rasterizationScale = UIScreen.main.scale
}
}
Edit
if I use
self.collectionView.performBatchUpdates({
self.collectionView.insertItems(at: indexPaths)
}, completion: { _ in
self.collectionView.reloadItems(at: indexPaths)
})
with invalidateLayout then I get an empty space at the bottom of the screen
but if I delete invalidateLayout I get wrong Layout
if you don’t have it like mine, then discard the project with your improvements
SECOND Edit
I noticed that there is an indentation on the iPhone 11 Pro and everything is fine on the iPhone 11 Pro Max
UPDATE: I verified this works on the simulators for iPhone SE, 11, and 11 Max with no dead space at the end of the collection view.
My simulator is set to dark mode to show that the bottom of the collection view is just enough for the loading icon.
I had to make a few changes for this to properly size. First, I changed your insertGoods function in TVCellGoods class to reload only the newly added items after inserting and it no longer has missing items at the top of the list:
self.collectionView.performBatchUpdates({
self.collectionView.insertItems(at: indexPaths)
}, completion: { _ in
self.collectionView.reloadItems(at: indexPaths)
})
A big problem was setting the estimated row height for your tableView cells. I've removed the estimatedHeightForRowAt override and replaced your heightForRowAt with this:
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
if indexPath.row == 0 {
return (tableView.frame.width / 2.5) + 20
} else if indexPath.row == 1 {
return 70
} else {
guard let cell = tableView.cellForRow(at: indexPath) as? TVCellGoods else { return UITableView.automaticDimension }
// print(cell.collectionViewHeight.constant)
return cell.collectionViewHeight.constant
}
}
I also had to add layoutIfNeeded to your cellForRow at in your ViewController UITableViewDataSource extension:
self.tableView.beginUpdates()
cell.collectionViewHeight.constant = cell.collectionView.collectionViewLayout.collectionViewContentSize.height
self.tableView.endUpdates()
cell.collectionView.layoutIfNeeded()
self.tableView.layoutIfNeeded()
Lastly, I had to update your layoutSubviews to assign the correct height after invalidating the layout in TVCellGoods:
override func layoutSubviews() {
super.layoutSubviews()
self.collectionView.collectionViewLayout.invalidateLayout()
self.collectionViewHeight.constant = self.collectionView.collectionViewLayout.collectionViewContentSize.height
}
Here is the updated source code: https://drive.google.com/open?id=1ldr4Ml2prZKmr1C4i1s5Sg7LvvxL7-jO
I have a dynamic collectionView in TableView and there are three errors:
the cells are not displayed correctly when the application starts
when I do inserItem the cells flicker as if they are rebooting
and most importantly when collectionView.insertItems the first four cells are hidden, the video
thanks
MainViewController
class ViewController: UIViewController, UIScrollViewDelegate {
override func viewDidLoad() {
super.viewDidLoad()
setting()
}
func setting(){
getData()
tableView.dataSource = self
tableView.delegate = self
tableView.estimatedRowHeight = UITableView.automaticDimension
tableView.rowHeight = UITableView.automaticDimension
}
//load data
func pagination(_ completion: (()->())?){
SmartNetworkSevrice.getGoods(with: url) { [unowned self] (data) in
guard data.modals.count > 0 else {
self.tableView.tableFooterView = nil
return
}
self.goods.append(contentsOf: data.modals)
self.offSet += data.modals.count
DispatchQueue.main.async {
let indexPath = IndexPath(row: 0, section: 0)
self.tableView.tableFooterView = nil
if self.goods.count == data.modals.count || self.isRefresh {
self.tableView.reloadRows(at: [indexPath], with: .none)
} else {
if let cell = self.tableView.cellForRow(at: indexPath) as? TVCellGoods {
UIView.performWithoutAnimation {
self.tableView.beginUpdates()
cell.insertGoods(data.modals)
cell.layoutIfNeeded()
cell.collectionViewHeight.constant = cell.collectionView.collectionViewLayout.collectionViewContentSize.height
self.tableView.endUpdates()
}
}
}
completion?()
}
}
// define bottom of tableView
func scrollViewDidScroll(_ scrollView: UIScrollView) {
guard scrollView == self.tableView else { return }
if (!isMoreDataLoading) {
// Вычислить позицию длины экрана до нижней части результатов
let scrollViewContentHeight = scrollView.contentSize.height
let scrollOffsetThreshold = scrollViewContentHeight - scrollView.bounds.size.height
if(scrollView.contentOffset.y > scrollOffsetThreshold && scrollView.isDragging) {
isMoreDataLoading = true
self.tableView.isScrollEnabled = false;
self.tableView.isScrollEnabled = true;
pagination(nil)
}
}
}
}
extension ViewController: UITableViewDataSource {
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 1
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
guard let cell = tableView.dequeueReusableCell(withIdentifier: "goods", for: indexPath) as? TVCellGoods else { return UITableViewCell() }
guard bestGoods.count != 0, goods.count != 0 else { return UITableViewCell() }
cell.delegate = self
cell.configure(bestGoods, goods, categories)
// автообновление высоты
self.tableView.beginUpdates()
cell.collectionViewHeight.constant = cell.collectionView.collectionViewLayout.collectionViewContentSize.height
self.tableView.endUpdates()
return cell
}
}
extension ViewController: UITableViewDelegate, CallDelegate {
func callMethod() {}
func callMethod(push vc:UIViewController) {
self.navigationController?.pushViewController(vc, animated: true)
}
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return UITableView.automaticDimension
}
func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat {
return UITableView.automaticDimension
}
}
TableViewCell with collectionView
class TVCellGoods: UITableViewCell {
#IBOutlet weak var collectionView:UICollectionView!
#IBOutlet weak var collectionViewHeight:NSLayoutConstraint!
weak var delegate:CallDelegate?
var bestGoods = [Goods]() // лучшие товары
var goods = [Goods]() // все товары
var categories = [Menu]()
override func awakeFromNib() {
super.awakeFromNib()
collectionView.delegate = self
collectionView.dataSource = self
collectionView.tag = 2
collectionView.isScrollEnabled = false
}
override func setSelected(_ selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)
// Configure the view for the selected state
}
func configure(_ best:[Goods],_ goods:[Goods], _ category:[Menu]) {
self.bestGoods = best
self.goods = goods
self.categories = category
self.collectionView.reloadData()
}
func insertGoods(_ data:[Goods]) {
self.goods.append(contentsOf: data)
let count = self.bestGoods.count + self.categories.count + self.goods.count
let indexPaths = ((count - data.count) ..< count)
.map { IndexPath(row: $0, section: 0) }
self.collectionView.performBatchUpdates({
self.collectionView.insertItems(at: indexPaths)
}, completion: nil)
}
}
and CollectionViewCell
class CVCellGoods: UICollectionViewCell {
#IBOutlet weak var bgView: UIView!
#IBOutlet weak var imageView: UIImageView!
#IBOutlet weak var title: UILabel!
#IBOutlet weak var price: UILabel!
#IBOutlet weak var delivery: UIImageView!
#IBOutlet weak var premium: UIImageView!
override func prepareForReuse() {
super.prepareForReuse()
delivery.image = nil
premium.image = nil
title.text = nil
price.text = nil
imageView.image = nil
imageView.sd_cancelCurrentImageLoad()
}
override func awakeFromNib() {
super.awakeFromNib()
imageView.backgroundColor = UIColor(red: 215/255, green: 215/255, blue: 215/255, alpha: 1)
self.contentView.layer.cornerRadius = 5
self.contentView.layer.masksToBounds = true
self.layer.shadowColor = UIColor.black.cgColor
self.layer.shadowOffset = CGSize(width: 0, height: 0.5)
self.layer.shadowRadius = 1
self.layer.shadowOpacity = 0.3
self.layer.masksToBounds = false
self.layer.shouldRasterize = true
self.layer.rasterizationScale = UIScreen.main.scale
}
}
EDIT: this gives a small bug at startup
TVCellGoods.swift
override func layoutSubviews() {
super.layoutSubviews()
self.collectionView.collectionViewLayout.invalidateLayout()
}
I just figured out how to solve your problem.
You gonna have to invalidate your collection view layout, as you are using an collectionView inside a tableView just add the following method on TVCellGoods.swift
override func layoutSubviews() {
super.layoutSubviews()
self.collectionView.collectionViewLayout.invalidateLayout()
}
I tested it, and worked!!
see video
It's not a good idea to add a scroll view inside another scroll view!
Do you have an example project in order to help you?
the cells are not displayed correctly when the application starts
You calculate collectionView itemSize in ViewDidLoad,
but in ViewDidLoad TableView & TableviewCell width not equal ViewController.
override func viewDidLoad() {
super.viewDidLoad()
print(view.frame.size.width) //320
print(tableView.frame.size.width) //414
}
You can try reloadData in ViewDidAppear.
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
print(view.frame.size.width) //320
print(tableView.frame.size.width) //320
tableView.reloadData()
}
when collectionView.insertItems the first four cells are hidden
Subclass UICollectionViewFlowLayout
class MyCollectionViewFlowLayout: UICollectionViewFlowLayout {
override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
return true
}
}
TVCellGoods.swift
override func awakeFromNib() {
super.awakeFromNib()
collectionView.delegate = self
collectionView.dataSource = self
collectionView.tag = 2
collectionView.isScrollEnabled = false
collectionView.collectionViewLayout = MyCollectionViewFlowLayout()
}
Really I have one issue about set UITableView Height Dynamically correct. I am not using AutoLayout. First time when table Loaded, It contains lots of space top and bottom of the cell and some time images are overlapping with other cells. I am unable to calculate the right height of cell due to images (image can be large in height )Below is code.
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return cellHeight
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell:Templategt4 = tableView.dequeueReusableCell(withIdentifier: "Templategt4Identify", for: indexPath) as! Templategt4
cell.delegate = self;
cell.configure( self.storyData[0], row: indexPath, screenSize: screenSize,
gt4tableview: self.storyTableView);
//self.secondWebViewLable.scrollView.contentSize.height
cellHeight = cell.firstWebViewLable.frame.height + cell.firstImage.frame.height + cell.secondWebViewLable.frame.height;
//cellHeight = cellHeight + 200
print("cellForRowAt cellHeight", cellHeight);
return cell
}
I am using Custom Cell. The cell contains to UiWebView, UIImageView ( Height can be too much long ). Below is the code of cell.
class Templategt4: UITableViewCell, UIWebViewDelegate{
#IBOutlet weak var firstWebViewLable: UIWebView!
#IBOutlet weak var firstImage: UIImageView!
#IBOutlet weak var secondWebViewLable: UIWebView!
#IBOutlet weak var playiconimage: UIImageView!
let padding = 24;
var contentHeights1 : [CGFloat] = [0.0]
var contentHeights2 : [CGFloat] = [0.0]
var imageHeights : [CGFloat] = [0.0]
var gt4tableview: UITableView? = nil
var indexpath: IndexPath? = nil
var delegate:ImageClickedForStoryDetails?
class MyTapGestureRecognizer: UITapGestureRecognizer {
var youTubeCode: String?
}
func configure(_ data: StoryDetailsRequest, row: IndexPath, screenSize: CGRect, gt4tableview: UITableView) {
self.gt4tableview = gt4tableview;
self.indexpath = row;
let callData = data.content[(row as NSIndexPath).row];
let url = Constants.TEMP_IMAGE_API_URL + callData.image;
// this is first webview data.
self.firstWebViewLable.frame.size.height = 1
self.firstWebViewLable.frame.size = firstWebViewLable.sizeThatFits(.zero)
let htmlString1:String! = callData.text1
self.firstWebViewLable.delegate = self;
self.firstWebViewLable.loadHTMLString(htmlString1, baseURL: nil)
// this is second webview data.
self.secondWebViewLable.frame.size.height = 1
self.secondWebViewLable.frame.size = secondWebViewLable.sizeThatFits(.zero)
let htmlString2:String! = callData.text2
self.secondWebViewLable.loadHTMLString(htmlString2, baseURL: nil)
self.secondWebViewLable.delegate = self;
if( !callData.image.isEmpty ) {
let range = url.range(of: "?", options: .backwards)?.lowerBound
var u:URL!
if(url.contains("?")) {
u = URL(string: url.substring(to: range!))
} else {
u = URL(string: url)
}
self.firstImage.image = nil
self.firstImage.kf.setImage(with: u, placeholder: nil,
options: nil, progressBlock: nil, completionHandler: { image, error, cacheType, imageURL in
if( image != nil) {
let imageW = (image?.size.width)!;
let imageheight = (image?.size.height)!;
self.firstImage.image = image;
self.firstImage.contentMode = UIViewContentMode.scaleAspectFit
self.firstImage.clipsToBounds = false
let ratio = self.firstImage.frame.size.width/imageW;
let scaledHeight = imageheight * ratio;
if(scaledHeight < imageheight)
{
//update height of your imageView frame with scaledHeight
self.firstImage.frame = CGRect(x: 0,
y: Int(self.firstWebViewLable.frame.origin.y + self.firstWebViewLable.frame.height),
width: Int(screenSize.width)-self.padding,
height: Int(scaledHeight) )
} else {
self.firstImage.frame = CGRect(x: 0,
y: Int(self.firstWebViewLable.frame.origin.y + self.firstWebViewLable.frame.height),
width: Int(screenSize.width)-self.padding,
height: Int(imageheight) )
}
} else {
self.firstImage.image = UIImage(named: "defaultimg")
}
self.secondWebViewLable.frame = CGRect(x: 0,
y: Int(self.firstImage.frame.origin.y + self.firstImage.frame.height),
width: Int(screenSize.width)-self.padding,
height: Int(self.secondWebViewLable.frame.height) )
if (self.imageHeights[0] == 0.0)
{
self.imageHeights[0] = self.firstImage.frame.height
UIView.performWithoutAnimation {
let ipath = IndexPath(item: (self.indexpath?.row)!, section: (self.indexpath?.section)!)
self.gt4tableview?.reloadRows(at: [ipath], with: UITableViewRowAnimation.none)
}
}
})
}
}
func webViewDidStartLoad(_ webView: UIWebView)
{
//myActivityIndicator.startAnimating()
}
func webViewDidFinishLoad(_ webView: UIWebView)
{
if(webView == self.firstWebViewLable) {
if (contentHeights1[0] != 0.0)
{
// we already know height, no need to reload cell
return
}
contentHeights1[0] = self.firstWebViewLable.scrollView.contentSize.height
UIView.performWithoutAnimation {
let ipath = IndexPath(item: (self.indexpath?.row)!, section: (self.indexpath?.section)!)
self.gt4tableview?.reloadRows(at: [ipath], with: UITableViewRowAnimation.none)
}
} else if(webView == self.secondWebViewLable) {
if (contentHeights2[0] != 0.0)
{
// we already know height, no need to reload cell
return
}
contentHeights2[0] = self.secondWebViewLable.scrollView.contentSize.height
UIView.performWithoutAnimation {
let ipath = IndexPath(item: (self.indexpath?.row)!, section: (self.indexpath?.section)!)
self.gt4tableview?.reloadRows(at: [ipath], with:UITableViewRowAnimation.none)
}
}
}
You should not calculate the cell height in cellForRow method.
and instead of heightForRowAt: use this method
TableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat
and in your viewDidLoad call this.
tableView.rowHeight = UITableViewAutomaticDimension
I have a very primitive problem at hand and that is when I have a tap gesture recognizer added to my custom cell I cant call the didSelectRowAt method.
My Code is the following:
import UIKit
class LanguageViewController: UIViewController {
#IBOutlet weak var titleLabel: AvenirUILabel!
#IBOutlet weak var backButton: UIButton!
#IBOutlet weak var submitButton: PinkUIButton!
#IBOutlet weak var addLanguageButton: UIButton!
#IBOutlet weak var addAnotherLanguageLabel: UILabel!
#IBOutlet weak var tableView: UITableView!
#IBOutlet weak var tableViewHeightConstraint: NSLayoutConstraint!
var numberOfLanguagesSpoken = 2
var pickersStartHeight: CGFloat!
let downArrowImage = UIImage(named: "arrow_drop_down")
let BGColor = UIColor.white.withAlphaComponent(0.1)
var tag = 1001
var selectedCellHeight: CGFloat = 88.0
var unselectedCellHeight: CGFloat = 44.0
var selectedCellIndexPath: IndexPath?
let languages = ["Akan", "Amharic", "Arabic", "Assamese", "Awadhi", "Azerbaijani", "Balochi", "Belarusian", "Bengali", "Bhojpuri", "Burmese", "Cebuano", "Chewa", "Chhattisgarhi", "Chittagonian", "Czech", "Deccan", "Dhundhari", "Dutch", "Eastern Min", "English", "French", "Fula", "Gan Chinese", "German", "Greek", "Gujarati", "Haitian Creole", "Hakka", "Haryanvi", "Hausa", "Hiligaynon/Ilonggo", "Hindi ", "Hmong", "Hungarian", "Igbo", "Ilocano", "Italian", "Japanese", "Javanese", "Jin", "Kannada", "Kazakh", "Khmer", "Kinyarwanda", "Kirundi", "Konkani", "Korean", "Kurdish", "Madurese", "Magahi", "Maithili", "Malagasy", "Malay", "Malayalam", "Mandarin", "Marathi", "Marwari", "Mossi", "Nepali", "Northern Min", "Odia", "Oromo", "Pashto", "Persian", "Polish", "Portuguese", "Punjabi", "Quechua", "Romanian", "Russian", "Saraiki", "Serbo-Croatian", "Shona", "Sindhi", "Sinhalese", "Somali", "Southern Min", "Spanish", "Sundanese", "Swedish", "Sylheti", "Tagalog/Filipino", "Tamil", "Telugu", "Thai", "Turkish", "Turkmen", "Ukrainian", "Urdu", "Uyghur", "Uzbek", "Vietnamese", "Wu", "Xhosa", "Xiang ", "Yoruba", "Yue ", "Zhuang", "Zulu"]
var proficiency = ["Basic","Conversational","Proficient","Fluent","Native"]
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = backgroundTint
// initial set up
let height = self.view.bounds.height
titleLabel.textColor = .white
backButton.addTarget(self, action: #selector(goBack), for: .allTouchEvents)
tableView.dataSource = self
tableView.delegate = self
tableView.register(LanguageProficiencyTableViewCell.self, forCellReuseIdentifier: "Language")
tableView.backgroundColor = backgroundTint
tableView.allowsSelection = true
tableViewHeightConstraint.constant = 2*height/9
addLanguageButton.tintColor = .white
addLanguageButton.addTarget(self, action: #selector(addNewLanguage), for: .allTouchEvents)
addAnotherLanguageLabel.textColor = .white
submitButton.addTarget(self, action: #selector(submitChanges), for: .allEvents)
}
override func viewWillLayoutSubviews() {
unselectedCellHeight = self.view.bounds.height/9
selectedCellHeight = CGFloat(unselectedCellHeight * 2.0)
}
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
self.view.endEditing(true)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
func goBack() {
self.dismiss(animated: true, completion: nil)
}
func submitChanges() {
self.dismiss(animated: true) {
//
}
}
func addNewLanguage() {
numberOfLanguagesSpoken += 1
UIView.animate(withDuration: 0.5) {
//
}
}
/*
// MARK: - Navigation
// In a storyboard-based application, you will often want to do a little preparation before navigation
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
// Get the new view controller using segue.destinationViewController.
// Pass the selected object to the new view controller.
}
*/
}
extension LanguageViewController: UITableViewDataSource, UITableViewDelegate {
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return numberOfLanguagesSpoken
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "Language", for: indexPath) as! LanguageProficiencyTableViewCell
cell.parentVC = self
cell.backgroundColor = .clear
cell.languages = self.languages
cell.proficiency = self.proficiency
return cell
}
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
if selectedCellIndexPath == indexPath {
return selectedCellHeight
} else {
return unselectedCellHeight
}
}
func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCellEditingStyle, forRowAt indexPath: IndexPath) {
//
}
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
if selectedCellIndexPath != nil && selectedCellIndexPath == indexPath as IndexPath {
selectedCellIndexPath = nil
} else {
selectedCellIndexPath = indexPath as IndexPath
}
tableView.beginUpdates()
tableView.endUpdates()
if selectedCellIndexPath != nil {
// This ensures, that the cell is fully visible once expanded
tableView.scrollToRow(at: indexPath as IndexPath, at: .none, animated: true)
}
}
func tableView(_ tableView: UITableView, willSelectRowAt indexPath: IndexPath) -> IndexPath? {
return indexPath
}
}
import UIKit
class LanguageProficiencyTableViewCell: UITableViewCell {
let languageLabel = IndentedTextUILabel()
var languagePicker = UIPickerView()
weak var parentVC: LanguageViewController!
var cellHeight: CGFloat = 80
var open = false
var languages = [""]
var proficiency = [""]
var pickedLanguage = ""
var pickedProficiency = ""
override func awakeFromNib() {
super.awakeFromNib()
// Initialization code
}
override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
self.contentView.addSubview(languageLabel)
self.contentView.addSubview(languagePicker)
self.contentView.backgroundColor = .clear
}
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)!
}
override func layoutSubviews() {
let width = self.bounds.width
let height = cellHeight
let BGColor = UIColor.white.withAlphaComponent(0.1)
languageLabel.frame = CGRect(x: 0.0, y: 1.0, width: width, height: height - 1.0)
languageLabel.textColor = .white
languageLabel.backgroundColor = BGColor
languageLabel.text = "Language(Proficiency)"
languageLabel.leftInset = 25.0
let downArrow = UIButton()
let downArrowImage = UIImage(named: "arrow_drop_down")
downArrow.setImage(downArrowImage, for: .normal)
downArrow.center.y = height/2
downArrow.center.x = 4 * width/5
languageLabel.addSubview(downArrow)
let tap = UITapGestureRecognizer(target: self, action: #selector(cellTapped))
self.addGestureRecognizer(tap)
languagePicker.frame = CGRect(x: 0.0, y: self.cellHeight + 1.0, width: self.bounds.width, height: 0.0)
languagePicker.delegate = self
languagePicker.dataSource = self
languagePicker.backgroundColor = UIColor.white.withAlphaComponent(0.05)
languagePicker.selectRow(20, inComponent: 0, animated: true)
let backGroundView = UIView(frame: CGRect(x: 0.0, y: 1.0, width: width, height: height - 1.0))
backGroundView.backgroundColor = .clear
self.selectedBackgroundView = backGroundView
}
func cellTapped() {
UIView.animate(withDuration: 0.2, animations: {
if !self.open {
self.languagePicker.frame.size.height = self.cellHeight - 2.0
} else {
self.languagePicker.isHidden = true
}
}, completion: { (_) in
if self.open {
self.languagePicker.frame.size.height = 0.0
self.languagePicker.isHidden = false
}
self.open = !self.open
})
}
}
It will not work because the tap gesture is taking the tap on itself and not sending the tap to the views underneath it.
You can make the tap gesture send the tap to be passed to the background views by
mySwipeGesture.cancelsTouchesInView = false
as described in How to pass a 'tap' to UIButton that is underneath UIView with UISwipeGestureRecognizer?
Also if you are using tap gesture just to dismiss your keyboard you can do so in didSelectAt method of the tableView and do any other thing after dismissing the keyboard in that method.
I'm doing something like what you have done and it's working for me.
You have to add the gesture recognizer not inside the TableViewCell class but from your Controller class when you set the cell.
Like this:
class LanguageViewController: UIViewController {
#IBOutlet weak var titleLabel: AvenirUILabel!
#IBOutlet weak var backButton: UIButton!
#IBOutlet weak var submitButton: PinkUIButton!
#IBOutlet weak var addLanguageButton: UIButton!
#IBOutlet weak var addAnotherLanguageLabel: UILabel!
#IBOutlet weak var tableView: UITableView!
#IBOutlet weak var tableViewHeightConstraint: NSLayoutConstraint!
var numberOfLanguagesSpoken = 2
var pickersStartHeight: CGFloat!
let downArrowImage = UIImage(named: "arrow_drop_down")
let BGColor = UIColor.white.withAlphaComponent(0.1)
var tag = 1001
var selectedCellHeight: CGFloat = 88.0
var unselectedCellHeight: CGFloat = 44.0
var selectedCellIndexPath: IndexPath?
let languages = ["Akan", "Amharic", "Arabic", "Assamese", "Awadhi", "Azerbaijani", "Balochi", "Belarusian", "Bengali", "Bhojpuri", "Burmese", "Cebuano", "Chewa", "Chhattisgarhi", "Chittagonian", "Czech", "Deccan", "Dhundhari", "Dutch", "Eastern Min", "English", "French", "Fula", "Gan Chinese", "German", "Greek", "Gujarati", "Haitian Creole", "Hakka", "Haryanvi", "Hausa", "Hiligaynon/Ilonggo", "Hindi ", "Hmong", "Hungarian", "Igbo", "Ilocano", "Italian", "Japanese", "Javanese", "Jin", "Kannada", "Kazakh", "Khmer", "Kinyarwanda", "Kirundi", "Konkani", "Korean", "Kurdish", "Madurese", "Magahi", "Maithili", "Malagasy", "Malay", "Malayalam", "Mandarin", "Marathi", "Marwari", "Mossi", "Nepali", "Northern Min", "Odia", "Oromo", "Pashto", "Persian", "Polish", "Portuguese", "Punjabi", "Quechua", "Romanian", "Russian", "Saraiki", "Serbo-Croatian", "Shona", "Sindhi", "Sinhalese", "Somali", "Southern Min", "Spanish", "Sundanese", "Swedish", "Sylheti", "Tagalog/Filipino", "Tamil", "Telugu", "Thai", "Turkish", "Turkmen", "Ukrainian", "Urdu", "Uyghur", "Uzbek", "Vietnamese", "Wu", "Xhosa", "Xiang ", "Yoruba", "Yue ", "Zhuang", "Zulu"]
var proficiency = ["Basic","Conversational","Proficient","Fluent","Native"]
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = backgroundTint
// initial set up
let height = self.view.bounds.height
titleLabel.textColor = .white
backButton.addTarget(self, action: #selector(goBack), for: .allTouchEvents)
tableView.dataSource = self
tableView.delegate = self
tableView.register(LanguageProficiencyTableViewCell.self, forCellReuseIdentifier: "Language")
tableView.backgroundColor = backgroundTint
tableView.allowsSelection = true
tableViewHeightConstraint.constant = 2*height/9
addLanguageButton.tintColor = .white
addLanguageButton.addTarget(self, action: #selector(addNewLanguage), for: .allTouchEvents)
addAnotherLanguageLabel.textColor = .white
submitButton.addTarget(self, action: #selector(submitChanges), for: .allEvents)
}
override func viewWillLayoutSubviews() {
unselectedCellHeight = self.view.bounds.height/9
selectedCellHeight = CGFloat(unselectedCellHeight * 2.0)
}
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
self.view.endEditing(true)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
func goBack() {
self.dismiss(animated: true, completion: nil)
}
func submitChanges() {
self.dismiss(animated: true) {
//
}
}
func addNewLanguage() {
numberOfLanguagesSpoken += 1
UIView.animate(withDuration: 0.5) {
//
}
}
/*
// MARK: - Navigation
// In a storyboard-based application, you will often want to do a little preparation before navigation
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
// Get the new view controller using segue.destinationViewController.
// Pass the selected object to the new view controller.
}
*/
}
extension LanguageViewController: UITableViewDataSource, UITableViewDelegate {
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return numberOfLanguagesSpoken
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "Language", for: indexPath) as! LanguageProficiencyTableViewCell
cell.parentVC = self
cell.backgroundColor = .clear
cell.languages = self.languages
cell.proficiency = self.proficiency
let tap = UITapGestureRecognizer(target: self, action: #selector("cellTapped:"))
cell.addGestureRecognizer(tap)
return cell
}
//Change here you can't call languagePicker with self but you have to get it from the object tapped that in your case is you cell
func cellTapped(recognizer: UITapGestureRecognizer) {
UIView.animate(withDuration: 0.2, animations: {
if !self.open {
self.languagePicker.frame.size.height = self.cellHeight - 2.0
} else {
self.languagePicker.isHidden = true
}
}, completion: { (_) in
if self.open {
self.languagePicker.frame.size.height = 0.0
self.languagePicker.isHidden = false
}
self.open = !self.open
})
}
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
if selectedCellIndexPath == indexPath {
return selectedCellHeight
} else {
return unselectedCellHeight
}
}
func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCellEditingStyle, forRowAt indexPath: IndexPath) {
//
}
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
if selectedCellIndexPath != nil && selectedCellIndexPath == indexPath as IndexPath {
selectedCellIndexPath = nil
} else {
selectedCellIndexPath = indexPath as IndexPath
}
tableView.beginUpdates()
tableView.endUpdates()
if selectedCellIndexPath != nil {
// This ensures, that the cell is fully visible once expanded
tableView.scrollToRow(at: indexPath as IndexPath, at: .none, animated: true)
}
}
func tableView(_ tableView: UITableView, willSelectRowAt indexPath: IndexPath) -> IndexPath? {
return indexPath
}
}
import UIKit
class LanguageProficiencyTableViewCell: UITableViewCell {
let languageLabel = IndentedTextUILabel()
var languagePicker = UIPickerView()
weak var parentVC: LanguageViewController!
var cellHeight: CGFloat = 80
var open = false
var languages = [""]
var proficiency = [""]
var pickedLanguage = ""
var pickedProficiency = ""
override func awakeFromNib() {
super.awakeFromNib()
// Initialization code
}
override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
self.contentView.addSubview(languageLabel)
self.contentView.addSubview(languagePicker)
self.contentView.backgroundColor = .clear
}
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)!
}
override func layoutSubviews() {
let width = self.bounds.width
let height = cellHeight
let BGColor = UIColor.white.withAlphaComponent(0.1)
languageLabel.frame = CGRect(x: 0.0, y: 1.0, width: width, height: height - 1.0)
languageLabel.textColor = .white
languageLabel.backgroundColor = BGColor
languageLabel.text = "Language(Proficiency)"
languageLabel.leftInset = 25.0
let downArrow = UIButton()
let downArrowImage = UIImage(named: "arrow_drop_down")
downArrow.setImage(downArrowImage, for: .normal)
downArrow.center.y = height/2
downArrow.center.x = 4 * width/5
languageLabel.addSubview(downArrow)
languagePicker.frame = CGRect(x: 0.0, y: self.cellHeight + 1.0, width: self.bounds.width, height: 0.0)
languagePicker.delegate = self
languagePicker.dataSource = self
languagePicker.backgroundColor = UIColor.white.withAlphaComponent(0.05)
languagePicker.selectRow(20, inComponent: 0, animated: true)
let backGroundView = UIView(frame: CGRect(x: 0.0, y: 1.0, width: width, height: height - 1.0))
backGroundView.backgroundColor = .clear
self.selectedBackgroundView = backGroundView
}
}