I am trying to implement swipe to delete feature with two options, one is to delete and another one is to edit. The things I want is these options should be vertical rather than horizontal.
Thanks in advance for support.
You can easily achieve this swipe to reveal option feature using Custom TablViewCell
Design a view with two buttons and add a swipe gesture to the view to reveal the vertically aligned buttons
Anyway, I think you would rather use default method editActionsForRowAt for similar cases. If not I hope this code will help you.
class TableViewController: UIViewController {
let tableView: UITableView = {
let tableView = UITableView()
tableView.translatesAutoresizingMaskIntoConstraints = false
tableView.register(CustomCell.self,
forCellReuseIdentifier: CustomCell.identifier)
return tableView
}()
var selectedCell: CustomCell?
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .white
view.addSubview(tableView)
setupConstraints()
tableView.dataSource = self
tableView.delegate = self
tableView.reloadData()
}
func setupConstraints() {
NSLayoutConstraint.activate([
tableView.topAnchor.constraint(equalTo: view.topAnchor),
tableView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
tableView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
tableView.trailingAnchor.constraint(equalTo: view.trailingAnchor)
])
}
}
extension TableViewController: UITableViewDelegate & UITableViewDataSource {
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
2
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
guard let cell = tableView.dequeueReusableCell(withIdentifier: CustomCell.identifier, for: indexPath) as? CustomCell else {
return UITableViewCell()
}
cell.delegate = self
return cell
}
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
44
}
func scrollViewDidScroll(_ scrollView: UIScrollView) {
selectedCell?.setInitialState()
}
}
extension TableViewController: CustomCellDelegate {
func didUpdateState(customCell: CustomCell?) {
if customCell != selectedCell {
selectedCell?.setInitialState()
}
selectedCell = customCell
}
}
protocol CustomCellDelegate: class {
func didUpdateState(customCell: CustomCell?)
}
class CustomCell: UITableViewCell {
weak var delegate: CustomCellDelegate?
static let identifier = "Cell"
private let customViewWidth: CGFloat = 100
private let customView: CustomView = {
let view = CustomView()
view.translatesAutoresizingMaskIntoConstraints = false
view.backgroundColor = .yellow
return view
}()
private let fakeContentView: UIView = {
let view = UIView()
view.translatesAutoresizingMaskIntoConstraints = false
return view
}()
enum CustomCellState {
case hiddenCustomView
case showedCustomView
}
private var trailingConstraint = NSLayoutConstraint()
private var cellState: CustomCellState = .hiddenCustomView
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
backgroundColor = .yellow
let panGesture = UIPanGestureRecognizer(target: self, action:(#selector(handleGesture(_:))))
fakeContentView.addGestureRecognizer(panGesture)
contentView.addSubview(fakeContentView)
fakeContentView.addSubview(customView)
setConstraints()
updateCellState()
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func setInitialState() {
self.trailingConstraint.constant = 0
UIView.animate(withDuration: 0.5, animations: {
self.contentView.layoutIfNeeded()
})
}
#objc private func handleGesture(_ recognizer: UIPanGestureRecognizer) {
let location = recognizer.location(in: fakeContentView)
let dx = frame.width - location.x
updateFrame(deltaX: dx)
if recognizer.state == .ended {
cellState = dx > customViewWidth / 2 ? .showedCustomView : .hiddenCustomView
updateCellState()
delegate?.didUpdateState(customCell: self)
}
}
private func updateFrame(deltaX: CGFloat) {
guard abs(deltaX) <= customViewWidth else {
return
}
trailingConstraint.constant = -deltaX
contentView.layoutIfNeeded()
}
private func updateCellState() {
let dx: CGFloat = cellState == .hiddenCustomView ? 0 : customViewWidth
self.trailingConstraint.constant = -dx
UIView.animate(withDuration: 0.5, animations: {
self.contentView.layoutIfNeeded()
}, completion: nil)
}
private func setConstraints() {
trailingConstraint = fakeContentView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor)
trailingConstraint.isActive = true
NSLayoutConstraint.activate([
fakeContentView.topAnchor.constraint(equalTo: contentView.topAnchor),
fakeContentView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
fakeContentView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
customView.topAnchor.constraint(equalTo: fakeContentView.topAnchor),
customView.bottomAnchor.constraint(equalTo: fakeContentView.bottomAnchor),
customView.leadingAnchor.constraint(equalTo: fakeContentView.trailingAnchor),
customView.widthAnchor.constraint(equalToConstant: customViewWidth)
])
}
}
class CustomView: UIView {
private let button1: UIButton = {
let button = UIButton(type: .custom)
button.backgroundColor = .blue
button.translatesAutoresizingMaskIntoConstraints = false
return button
}()
private let button2: UIButton = {
let button = UIButton(type: .custom)
button.backgroundColor = .black
button.translatesAutoresizingMaskIntoConstraints = false
return button
}()
override init(frame: CGRect) {
super.init(frame: frame)
backgroundColor = .gray
addSubview(button1)
addSubview(button2)
setConstraints()
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
private func setConstraints() {
NSLayoutConstraint.activate([
button1.topAnchor.constraint(equalTo: topAnchor),
button1.leadingAnchor.constraint(equalTo: leadingAnchor),
button1.trailingAnchor.constraint(equalTo: trailingAnchor),
button1.bottomAnchor.constraint(equalTo: centerYAnchor),
button2.bottomAnchor.constraint(equalTo: bottomAnchor),
button2.leadingAnchor.constraint(equalTo: leadingAnchor),
button2.trailingAnchor.constraint(equalTo: trailingAnchor),
button2.topAnchor.constraint(equalTo: button1.bottomAnchor)
])
}
}
Image
when I am touching any cell it should be invoked but it invoked when I am holding the touch on any cell for 5 - 6 seconds. you can see in the above image.
I created the same drop-down button separately and it's working normally. but when I include it in my project then it doesn't work properly.
UIViewController
import UIKit
class Registration: UIViewController {
var genderDropDown: DropDownButton = {
let dropDown = DropDownButton(frame: CGRect(x: 0, y: 0, width: 0, height: 0))
dropDown.setTitle("Gender", for: .normal)
dropDown.translatesAutoresizingMaskIntoConstraints = false
dropDown.backgroundColor = setColor(rgbValue: AppColor.pink)
dropDown.setTitleColor(.white, for: .normal)
return dropDown
}()
override func viewDidLoad() {
super.viewDidLoad()
registrationContainer.addSubview(genderDropDown)
NSLayoutConstraint.activate([
genderDropDown.topAnchor.constraint(equalTo: emailTF.bottomAnchor, constant: 30),
genderDropDown.leftAnchor.constraint(equalTo: registrationContainer.leftAnchor, constant: 20),
genderDropDown.heightAnchor.constraint(equalToConstant: 50),
genderDropDown.widthAnchor.constraint(equalToConstant: 100)
])
}
}
DropDownButton
class DropDownButton: UIButton, DropDownProtocol {
func dropDownPressed(string: String) {
self.setTitle(string, for: .normal)
self.dismissDropDown()
}
var dropDown = DropDownView()
var height = NSLayoutConstraint()
override init(frame: CGRect) {
super.init(frame: frame)
self.backgroundColor = .darkGray
dropDown = DropDownView.init(frame: CGRect(x: 0, y: 0, width: 0, height: 0))
dropDown.delegate = self
dropDown.translatesAutoresizingMaskIntoConstraints = false
}
override func didMoveToSuperview() {
self.superview?.addSubview(dropDown)
self.superview?.bringSubviewToFront(dropDown)
dropDown.centerXAnchor.constraint(equalTo: self.centerXAnchor).isActive = true
dropDown.topAnchor.constraint(equalTo: self.bottomAnchor).isActive = true
dropDown.widthAnchor.constraint(equalTo: self.widthAnchor).isActive = true
height = dropDown.heightAnchor.constraint(equalToConstant: 0)
}
var isOpen = false
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
if isOpen == false{
isOpen = true
NSLayoutConstraint.deactivate([self.height])
if self.dropDown.tableView.contentSize.height > 150{
self.height.constant = 150
}
else {
self.height.constant = self.dropDown.tableView.contentSize.height
}
NSLayoutConstraint.activate([self.height])
UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.5, options: .curveEaseInOut, animations: {
self.dropDown.layoutIfNeeded()
self.dropDown.center.y += self.dropDown.frame.height / 2
}, completion: nil)
} else {
isOpen = false
NSLayoutConstraint.deactivate([self.height])
self.height.constant = 0
NSLayoutConstraint.activate([self.height])
UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.5, options: .curveEaseInOut, animations: {
self.dropDown.center.y -= self.dropDown.frame.height / 2
self.dropDown.layoutIfNeeded()
}, completion: nil)
}
}
func dismissDropDown(){
isOpen = false
NSLayoutConstraint.deactivate([self.height])
self.height.constant = 0
NSLayoutConstraint.activate([self.height])
UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.5, options: .curveEaseInOut, animations: {
self.dropDown.center.y -= self.dropDown.frame.height / 2
self.dropDown.layoutIfNeeded()
}, completion: nil)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
DropDownView
class DropDownView: UIView, UITableViewDelegate, UITableViewDataSource{
let items = ["Male", "Female"]
let tableView = UITableView()
var delegate: DropDownProtocol!
override init(frame: CGRect) {
super.init(frame: frame)
tableView.delegate = self
tableView.dataSource = self
tableView.translatesAutoresizingMaskIntoConstraints = false
self.addSubview(tableView)
tableView.backgroundColor = .darkGray
tableView.separatorStyle = .none
tableView.allowsSelection = true
tableView.delaysContentTouches = false
tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cellId")
tableView.leftAnchor.constraint(equalTo: self.leftAnchor).isActive = true
tableView.rightAnchor.constraint(equalTo: self.rightAnchor).isActive = true
tableView.topAnchor.constraint(equalTo: self.topAnchor).isActive = true
tableView.bottomAnchor.constraint(equalTo: self.bottomAnchor).isActive = true
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return items.count
}
func numberOfSections(in tableView: UITableView) -> Int {
return 1
}
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
DispatchQueue.main.async {
self.delegate.dropDownPressed(string: self.items[indexPath.row])
self.tableView.deselectRow(at: indexPath, animated: true)
}
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cellId", for: indexPath)
cell.textLabel?.text = items[indexPath.row]
cell.textLabel?.textColor = .white
cell.backgroundColor = setColor(rgbValue: AppColor.pink)
return cell
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
put your code inside DispatchQueue.
DispatchQueue.main.async {
self.delegate.dropDownPressed(string: items[indexPath.row])
self.tableView.deselectRow(at: indexPath, animated: true)
}
I would like a dropdown menu to drop once the user taps on the right button inside the Navigation Bar. My go to achieve this is as follow:
(1) Created a custom UIView class, which basically is going to contains the tableView to be displayed (dropped) when the user taps the Navigation Bar right button:
import UIKit
class DropdownUIView: UIView, UITableViewDelegate, UITableViewDataSource {
var dropdownTableSections = ["Ascending Order","Descending Order"]
var ascendingAndDescendingOrderSetionItmes = ["Section Designaion","Depth, h","Width, b","Area of Section, A"]
var dropdownTableView = UITableView()
override init(frame: CGRect) {
super.init(frame: frame)
dropdownTableView.delegate = self
dropdownTableView.dataSource = self
self.addSubview(dropdownTableView)
dropdownTableView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
dropdownTableView.leftAnchor.constraint(equalTo: self.leftAnchor),
dropdownTableView.rightAnchor.constraint(equalTo: self.rightAnchor),
dropdownTableView.topAnchor.constraint(equalTo: self.topAnchor),
dropdownTableView.bottomAnchor.constraint(equalTo: self.bottomAnchor)
])
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func numberOfSections(in tableView: UITableView) -> Int {
return dropdownTableSections.count
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return ascendingAndDescendingOrderSetionItmes.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = UITableViewCell()
cell.textLabel?.text = ascendingAndDescendingOrderSetionItmes[indexPath.row]
return cell
}
}
(2) Created a custom UIButton Class, whereby I added to it the above dropdown view as a SubView. This is going to be the button to be added to the custom NavigationBar class as a UIView:
import UIKit
class DropdownUIButton: UIButton {
var dropdownView = DropdownUIView()
var dropdownViewHeight = NSLayoutConstraint()
var isOpen = false
override init(frame: CGRect) {
super.init(frame: frame)
translatesAutoresizingMaskIntoConstraints = false
self.backgroundColor = UIColor.darkGray
dropdownView = DropdownUIView.init(frame: CGRect.init(x: 0, y: 0, width: 0, height: 0))
dropdownView.translatesAutoresizingMaskIntoConstraints = false
self.setTitle("Sort by:", for: .normal)
}
override func didMoveToSuperview() {
self.superview?.addSubview(dropdownView)
self.superview?.bringSubviewToFront(dropdownView)
dropdownView.topAnchor.constraint(equalTo: self.bottomAnchor).isActive = true
dropdownView.centerXAnchor.constraint(equalTo: self.centerXAnchor).isActive = true
dropdownView.widthAnchor.constraint(equalTo: self.widthAnchor).isActive = true
dropdownViewHeight = dropdownView.heightAnchor.constraint(equalToConstant: 0)
}
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
if isOpen == false {
isOpen = true
NSLayoutConstraint.deactivate([self.dropdownViewHeight])
self.dropdownViewHeight.constant = 300
NSLayoutConstraint.activate([self.dropdownViewHeight])
UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.5, options: .curveEaseIn, animations: {
self.dropdownView.layoutIfNeeded()
self.dropdownView.center.y += self.dropdownView.frame.height / 2
}, completion: nil)
} else {
isOpen = false
NSLayoutConstraint.deactivate([self.dropdownViewHeight])
self.dropdownViewHeight.constant = 0
NSLayoutConstraint.activate([self.dropdownViewHeight])
UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.5, options: .curveEaseIn, animations: {
self.dropdownView.center.y -= self.dropdownView.frame.height / 2
self.dropdownView.layoutIfNeeded()
}, completion: nil)
}
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
(3) Created a custom Navigation Bar class and added to it the custom UIButton created above as a UIView to be displayed as a rightBarButtonItem:
import UIKit
import ChameleonFramework
class CustomUINavigationBar: UINavigationBar {
override init(frame: CGRect) {
super.init(frame: frame)
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
convenience init(isNavBarTranslucent: Bool, navBarBackgroundColourHexCode: String, navBarBackgroundColourAlphaValue: CGFloat, navBarStyle: UIBarStyle, preferLargeTitles: Bool, navBarDelegate: UINavigationBarDelegate, navBarItemsHexColourCode: String) {
self.init()
addNavBarRightButton()
setupNavigationBarEssentials(isNavBarTranslucent: isNavBarTranslucent, navBarBackgroundColourHexCode: navBarBackgroundColourHexCode, navBarBackgroundColourAlphaValue: navBarBackgroundColourAlphaValue, navBarStyle: navBarStyle, preferLargeTitles: preferLargeTitles, navBarDelegate: navBarDelegate, navBarItemsHexColourCode: navBarItemsHexColourCode)
}
let customNavigationBarItem = UINavigationItem()
func addNavBarRightButton() {
let button = DropdownUIButton()
let navigationBarRightButtonView: UIView = {
let view = UIView()
view.backgroundColor = .yellow
view.addSubview(button)
return view
}()
NSLayoutConstraint.activate([
button.topAnchor.constraint(equalTo: navigationBarRightButtonView.topAnchor),
button.rightAnchor.constraint(equalTo: navigationBarRightButtonView.rightAnchor),
button.leftAnchor.constraint(equalTo: navigationBarRightButtonView.leftAnchor),
button.bottomAnchor.constraint(equalTo: navigationBarRightButtonView.bottomAnchor)
])
let navigationBarRightViewitem = UIBarButtonItem(customView: navigationBarRightButtonView)
customNavigationBarItem.rightBarButtonItem = navigationBarRightViewitem
}
func setupNavigationBarEssentials(isNavBarTranslucent: Bool, navBarBackgroundColourHexCode: String, navBarBackgroundColourAlphaValue: CGFloat, navBarStyle: UIBarStyle, preferLargeTitles: Bool, navBarDelegate: UINavigationBarDelegate, navBarItemsHexColourCode: String) {
items = [customNavigationBarItem]
isTranslucent = isNavBarTranslucent
barTintColor = UIColor(hexString: navBarBackgroundColourHexCode, withAlpha: navBarBackgroundColourAlphaValue)
barStyle = navBarStyle
prefersLargeTitles = preferLargeTitles
delegate = navBarDelegate
tintColor = UIColor(hexString: navBarItemsHexColourCode)
translatesAutoresizingMaskIntoConstraints = false
}
}
(4) Added the above custom NavigationBar to the ViewController class I am interested in as below:
import UIKit
class tableViewController: UIViewController, UITableViewDelegate, UITableViewDataSource, UINavigationBarDelegate {
lazy var navigationBar = CustomUINavigationBar(isNavBarTranslucent: false, navBarBackgroundColourHexCode: "#FFFFFF", navBarBackgroundColourAlphaValue: 1.0, navBarStyle: .black, preferLargeTitles: false, navBarDelegate: self, navBarItemsHexColourCode: "#FF4F40")
lazy var tableView = CustomTableView(tableViewBackgroundColourHexCode: "#0D0D0D", tableViewDelegate: self, tableViewDataSource: self, tableViewCustomCellClassToBeRegistered: IsectionsCustomTableViewCell.self, tableViewCustomCellReuseIdentifierToBeRegistered: "customCell")
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(navigationBar)
view.addSubview(tableView)
}
override func viewDidLayoutSubviews() {
setupConstraints()
}
func numberOfSections(in tableView: UITableView) -> Int {
return 1
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 5
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "customCell") as! IsectionsCustomTableViewCell
cell.sectionDesignationLabel.text = "Number 1"
return cell
}
func position(for bar: UIBarPositioning) -> UIBarPosition {
return UIBarPosition.topAttached
}
func setupConstraints() {
NSLayoutConstraint.activate([
navigationBar.leftAnchor.constraint(equalTo: view.leftAnchor),
navigationBar.rightAnchor.constraint(equalTo: view.rightAnchor),
navigationBar.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
tableView.topAnchor.constraint(equalTo: navigationBar.bottomAnchor),
tableView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
tableView.leftAnchor.constraint(equalTo: view.leftAnchor),
tableView.rightAnchor.constraint(equalTo: view.rightAnchor)
])
}
}
The button gets added to the NavigationBar on its right hand side as I can see the NavigationBar and the Button. However, however, when I click on the button, nothing happens, the tableview does not get dropped down and up as I expected. Any idea where did I go wrong, and are there any CocoaPods that you can recommend to achieve something similar?
You can simply use this library to achieve drop d https://github.com/AssistoLab/DropDown
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
}
}