I got a large UITableViewCell representing a place. Elements of the cell are two Buttons starButton and infoButton. Both of them have a targetAction which never gets executed and I'm clueless why.. All touches are being eaten by the didSelectRowAt by the tableview. The thing that gets me so confused is the fact that It all worked well some hours ago and I did not change properties of the two buttons. Does someone has an idea what's going on?
The Hierarchy looks like this:
UITableView
OverviewTableCell UITableViewCell
dotsButton, thumbnailImageView UIButton , UIImageView
blackView UIView
titleLabel, descriptionLabel, starButton, infoButton UILabel , UIButton
Cell:
class OverviewTableViewCell: UITableViewCell, ReusableView {
lazy var dotsButton: UIButton = {
let button = UIButton()
button.setImage(UIImage(named: GSSettings.UI.otherIcons.dotsHorizontal)?.withRenderingMode(.alwaysTemplate), for: .normal)
button.setImage(UIImage(named: GSSettings.UI.otherIcons.dotsVertical)?.withRenderingMode(.alwaysTemplate), for: .selected)
button.addTarget(self, action: #selector(seeMore), for: .touchUpInside)
button.fixHeightAndWidth(width: 28, height: 28)
button.tintColor = UIColor.gray
return button
}()
let thumbnailImageView: UIImageView = {
let imageview = UIImageView()
imageview.contentMode = .scaleAspectFill
imageview.clipsToBounds = true
imageview.image = UIImage(named: "testbild")
return imageview
}()
let blackView: UIImageView = {
let imageview = UIImageView()
imageview.backgroundColor = UIColor.black.withAlphaComponent(0.35)
return imageview
}()
let titleLabel : UILabel = {
let label = UILabel()
label.text = "Titel Titel"
label.font = GSSettings.UI.Fonts.helveticaMedium?.withSize(22)
label.textColor = UIColor.white
return label
}()
lazy var starButton: GSFavSpotButton = {
let button = GSFavSpotButton()
button.tintColor = UIColor.white//GSSettings.UI.Colors.nightOrange
button.addTarget(self, action: #selector(handleStarButton), for: .touchUpInside)
return button
}()
lazy var infoButton: GSInfoButton = {
let button = GSInfoButton()
button.tintColor = UIColor.white//GSSettings.UI.Colors.nightOrange
button.addTarget(self, action: #selector(handleInfoButton), for: .touchUpInside)
return button
}()
let addFriendView = GSInviteAFriendView()
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
self.clipsToBounds = false
self.selectionStyle = .none
setupSubviews()
setupConstraints()
perform(#selector(printBounds), with: nil, afterDelay: 5)
}
func setupSubviews() {
self.addSubview(dotsButton)
self.addSubview(thumbnailImageView)
thumbnailImageView.addSubview(blackView)
blackView.addSubview(titleLabel)
blackView.addSubview(descriptionLabel)
blackView.addSubview(starButton)
blackView.addSubview(infoButton)
self.addSubview(addFriendView)
blackView.isHidden = true
descriptionLabel.isHidden = true
}
func setupConstraints() {
dotsButton.anchor(top: topAnchor, leading: nil, bottom: nil, trailing: trailingAnchor, paddingTop: 0, paddingLeading: 0, paddingBottom: 0, paddingTrailing: 16, width: 0, height: 0)
thumbnailImageView.anchor(top: dotsButton.bottomAnchor, leading: leadingAnchor, bottom: nil, trailing: trailingAnchor, paddingTop: 4, paddingLeading: 16, paddingBottom: 0, paddingTrailing: 16, width: 0, height: 0)
thumbnailImageView.heightAnchor.constraint(equalTo: thumbnailImageView.widthAnchor, multiplier: 9/16).isActive = true
blackView.fillSuperview(unsafeArea: true)
titleLabel.anchor(top: thumbnailImageView.topAnchor, leading: thumbnailImageView.leadingAnchor, bottom: nil, trailing: starButton.leadingAnchor, paddingTop: 8, paddingLeading: 8, paddingBottom: 0, paddingTrailing: 8, width: 0, height: 20)
infoButton.anchor(top: thumbnailImageView.topAnchor, leading: nil, bottom: nil, trailing: thumbnailImageView.trailingAnchor, paddingTop: 8, paddingLeading: 0, paddingBottom: 0, paddingTrailing: 8, width: 30, height: 30)
starButton.anchor(top: thumbnailImageView.topAnchor, leading: nil, bottom: nil, trailing: infoButton.leadingAnchor, paddingTop: 8, paddingLeading: 0, paddingBottom: 0, paddingTrailing: 4, width: 30, height: 30)
addFriendView.anchor(top: thumbnailImageView.bottomAnchor, leading: nil, bottom: nil, trailing: nil, paddingTop: -GSSettings.UI.Sizes.addFriendButtonSize/2 + 10, paddingLeading: 0, paddingBottom: 0, paddingTrailing: 0, width: GSSettings.UI.Sizes.addFriendButtonSize, height: GSSettings.UI.Sizes.addFriendButtonSize)
addFriendView.centerXAnchor.constraint(equalTo: centerXAnchor, constant: 0).isActive = true
}
#objc func seeMore() {
dotsButton.isSelected.toggle()
if dotsButton.isSelected {
blackView.isHidden = false
} else {
blackView.isHidden = false
}
layoutIfNeeded()
}
#objc func handleStarButton() {
starButton.isSelected.toggle()
}
#objc func handleInfoButton() {
infoButton.isSelected.toggle()
}
#objc func printBounds() {
print("::::")
print(thumbnailImageView.bounds)
print(infoButton.bounds)
print(starButton.bounds)
print("_____")
print(thumbnailImageView.frame)
print(infoButton.frame)
print(starButton.frame)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
extension UIView {
func anchor(top: NSLayoutYAxisAnchor?, leading: NSLayoutXAxisAnchor?, bottom: NSLayoutYAxisAnchor?, trailing: NSLayoutXAxisAnchor?, paddingTop: CGFloat, paddingLeading: CGFloat, paddingBottom: CGFloat, paddingTrailing: CGFloat, width: CGFloat, height: CGFloat) {
translatesAutoresizingMaskIntoConstraints = false
if let top = top {
topAnchor.constraint(equalTo: top, constant: paddingTop).isActive = true
}
if let leading = leading {
leadingAnchor.constraint(equalTo: leading, constant: paddingLeading).isActive = true
}
if let bottom = bottom {
bottomAnchor.constraint(equalTo: bottom, constant: -paddingBottom).isActive = true
}
if let trailing = trailing {
trailingAnchor.constraint(equalTo: trailing, constant: -paddingTrailing).isActive = true
}
if width != 0 {
widthAnchor.constraint(equalToConstant: width).isActive = true
}
if height != 0 {
heightAnchor.constraint(equalToConstant: height).isActive = true
}
}
Tableview:
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: OverviewTableViewCell.reuseIdentifier, for: indexPath) as! OverviewTableViewCell
return cell
}
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
tableView.deselectRow(at: indexPath, animated: false)
delegate?.pushTo()
}
The printBounds() function in the cell shows that the frame and bounds are okay (I guess)
(0.0, 0.0, 382.0, 215.0)
(0.0, 0.0, 30.0, 30.0)
(0.0, 0.0, 30.0, 30.0)
(16.0, 32.0, 382.0, 215.0)
(344.0, 8.0, 30.0, 30.0)
(310.0, 8.0, 30.0, 30.0)
You can try
blackView.isUserInteractionEnabled = true
also add the subviews to
self.contentView and create the constraints of cell subviews with it
Related
Problem
I am trying to do everything programmatically, so I have created this ResultController. For some reason, two of my buttons work but the other three don't work. The program doesn't even notice the touch-up event. I have read many posts on this topic but none of the solutions worked for me.
The two buttons that work are the language button and the swap button, which are embedded in a stack view towards the top of the screen. The 3 buttons that don't work are the soundButton, loopButton, and addFlashcardButton on the result card shown in the image below.
Question
What do I need to do such that these buttons respond to touch events?
Here is the code for this viewController, as well as a picture of the result. I will post the important parts and the whole code for reference. The Buttons are laid out in two functions, setupResultsView() and setupScrollView():
Button Instantiation
var soundButton: UIButton = {
let button = UIButton()
button.setImage(UIImage(systemName: "speaker.3.fill"), for: .normal)
button.backgroundColor = .white
button.tintColor = .black
button.addTarget(self, action: #selector(soundButtonPressed), for: .touchUpInside)
return button
}()
var loopButton: UIButton = {
let button = UIButton()
button.setImage(UIImage(systemName: "repeat"), for: .normal)
button.backgroundColor = .white
button.tintColor = .black
button.addTarget(self, action: #selector(loopButtonPressed), for: .touchUpInside)
return button
}()
var addFlashcardButton: UIButton = {
let button = UIButton(frame: CGRect(x: 0, y: 0, width: 30, height: 30))
button.setImage(UIImage(systemName: "plus"), for: .normal)
button.backgroundColor = K.Colors.purple
button.tintColor = .white
button.roundCorners(cornerRadius: 15)
button.addTarget(self, action: #selector(addFlashcardButtonPressed), for: .touchUpInside)
return button
}()
Selector Functions
#objc func soundButtonPressed() {
print("soundButton")
}
#objc func loopButtonPressed() {
print("loopButton")
}
#objc func addFlashcardButtonPressed() {
print("adding flashcard")
}
Complete Code
import UIKit
class ResultsController: UIViewController {
//MARK: - Info
let cellID = "SoundItOutCell"
//MARK: - Views
var centerTitle: UILabel = {
let label = UILabel(frame: CGRect(x: 10, y: 0, width: 50, height: 40))
label.backgroundColor = K.Colors.purple
label.font = UIFont.boldSystemFont(ofSize: 30)
label.text = "Aura"
label.numberOfLines = 2
label.textColor = .white
label.textAlignment = .center
return label
}()
var languageBarView: UIView = {
let view = UIView()
view.backgroundColor = .white
view.setUnderlineStyle(color: K.Colors.purple)
return view
}()
var langStackView: UIStackView = {
let stackView = UIStackView()
stackView.backgroundColor = .white
stackView.alignment = .center
stackView.distribution = .fillEqually
return stackView
}()
var languageButton: UIButton = {
let button = UIButton()
button.setTitle("Japanese", for: .normal)
button.addTarget(self, action: #selector(languageButtonPressed), for: .touchUpInside)
button.backgroundColor = .white
button.setTitleColor(UIColor.systemBlue, for: .normal)
return button
}()
var swapButton: UIButton = {
let button = UIButton()
button.setImage(UIImage(systemName: "repeat"), for: .normal)
button.addTarget(self, action: #selector(swapButtonPressed), for: .touchUpInside)
button.tintColor = .black
button.backgroundColor = .white
return button
}()
var englishLabel: UILabel = {
let label = UILabel()
label.text = "English"
label.textColor = .black
label.backgroundColor = .white
label.textAlignment = .center
return label
}()
var textViewBackgroundView = UIView()
var textView: UITextView = {
let textView = UITextView()
textView.returnKeyType = .search
textView.text = "Enter text"
textView.textColor = .lightGray
textView.font = .systemFont(ofSize: 20)
textView.textContainerInset = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 50)
return textView
}()
var cancelButton: UIButton = {
let button = UIButton()
button.setImage(UIImage(systemName: "multiply"), for: .normal)
button.backgroundColor = .white
button.tintColor = .black
button.addTarget(self, action: #selector(cancelButtonPressed), for: .touchUpInside)
button.isHidden = true
return button
}()
var scrollView: UIScrollView = {
let scrollView = UIScrollView()
scrollView.backgroundColor = K.Colors.lightGrey
return scrollView
}()
var contentView: UIView = {
let view = UIView()
view.backgroundColor = K.Colors.lightGrey
return view
}()
var resultCardView: UIView = {
let view = UIView()
view.backgroundColor = .white
view.roundCorners(cornerRadius: 10)
return view
}()
var topLabel = UILabel()
var bottomLabel = UILabel()
var soundButton: UIButton = {
let button = UIButton()
button.setImage(UIImage(systemName: "speaker.3.fill"), for: .normal)
button.backgroundColor = .white
button.tintColor = .black
button.addTarget(self, action: #selector(soundButtonPressed), for: .touchUpInside)
return button
}()
var loopButton: UIButton = {
let button = UIButton()
button.setImage(UIImage(systemName: "repeat"), for: .normal)
button.backgroundColor = .white
button.tintColor = .black
button.addTarget(self, action: #selector(loopButtonPressed), for: .touchUpInside)
return button
}()
var lineDividerView: UIView = {
let view = UIView()
view.backgroundColor = K.Colors.purple
return view
}()
var addFlashcardButton: UIButton = {
let button = UIButton(frame: CGRect(x: 0, y: 0, width: 30, height: 30))
button.setImage(UIImage(systemName: "plus"), for: .normal)
button.backgroundColor = K.Colors.purple
button.tintColor = .white
button.roundCorners(cornerRadius: 15)
button.addTarget(self, action: #selector(addFlashcardButtonPressed), for: .touchUpInside)
return button
}()
// Background Views
let resultBackgroundView = UIView ()
let addFlashcardBackgroundView = UIView()
//MARK: - Class Functions
override func viewDidLoad() {
super.viewDidLoad()
setupView()
view.backgroundColor = K.Colors.lightGrey
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
setupShadows()
}
}
extension ResultsController {
//MARK:- View Setup Functions
func setupView() {
self.setupToHideKeyboardOnTapOnView()
setupNavBar()
setupLanguageSelectionView()
setupTextView()
setupScrollView()
}
func setupShadows() {
textViewBackgroundView.setShadow(color: UIColor.black, opacity: 0.3, offset: .init(width: 0, height: 3), radius: 2)
resultBackgroundView.setShadow(color: .black, opacity: 0.3, offset: CGSize(width: 5, height: 5), radius: 2, cornerRadius: 10)
addFlashcardBackgroundView.setShadow(color: .black, opacity: 0.5, offset: CGSize(width: 2, height: 2), radius: 2, cornerRadius: 15)
}
func setupNavBar() {
// Add Center Title
self.navigationItem.titleView = centerTitle
// Add userbutton
self.navigationItem.rightBarButtonItem = UIBarButtonItem(image: UIImage(systemName: "person"),
style: .plain,
target: self,
action: #selector(profileButtonTapped))
// Make bar color purple, and buttons white
self.navigationController?.navigationBar.tintColor = .white
self.navigationController?.navigationBar.barTintColor = K.Colors.purple
}
func setupLanguageSelectionView() {
// Add Language Bar View
view.addSubview(languageBarView)
languageBarView.anchor(top: view.safeAreaLayoutGuide.topAnchor,
bottom: nil, leading: view.leadingAnchor,
trailing: view.trailingAnchor,
height: 60,
width: nil)
// Add Stack View
languageBarView.addSubview(langStackView)
langStackView.anchor(top: languageBarView.topAnchor,
bottom: languageBarView.bottomAnchor,
leading: languageBarView.leadingAnchor,
trailing: languageBarView.trailingAnchor,
height: nil,
width: nil,
padding: UIEdgeInsets(top: 0, left: 0, bottom: -2, right: 0))
// Add Language Button
langStackView.addArrangedSubview(languageButton)
// Add Swap Button
langStackView.addArrangedSubview(swapButton)
// Add English Label
langStackView.addArrangedSubview(englishLabel)
}
func setupTextView() {
// Add View
view.addSubview(textViewBackgroundView)
textViewBackgroundView.anchor(top: langStackView.bottomAnchor,
bottom: nil,
leading: view.leadingAnchor,
trailing: view.trailingAnchor,
height: 60,
width: nil,
padding: UIEdgeInsets(top: 2, left: 0, bottom: 0, right: 0))
// Add TextView
textView.delegate = self
view.addSubview(textView)
textView.anchor(top: textViewBackgroundView.topAnchor,
bottom: textViewBackgroundView.bottomAnchor,
leading: textViewBackgroundView.leadingAnchor,
trailing: textViewBackgroundView.trailingAnchor,
height: nil,
width: nil,
padding: UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0))
// Add X Button
view.addSubview(cancelButton)
cancelButton.anchor(top: textView.topAnchor,
bottom: nil,
leading: nil,
trailing: textView.trailingAnchor,
height: 40,
width: 40,
padding: UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0))
}
func setupScrollView() {
// Add scroll view and content view
view.addSubview(scrollView)
view.sendSubviewToBack(scrollView)
scrollView.addSubview(contentView)
// Anchor Scroll View
scrollView.anchorXCenter(top: textView.topAnchor,
bottom: view.safeAreaLayoutGuide.bottomAnchor,
centerAnchor: view.centerXAnchor,
width: view.widthAnchor,
height: nil)
// Anchor Content View
contentView.anchorXCenter(top: scrollView.topAnchor,
bottom: scrollView.bottomAnchor,
centerAnchor: scrollView.centerXAnchor,
width: scrollView.widthAnchor,
height: nil)
// Setup Results Background
contentView.addSubview(resultBackgroundView)
resultBackgroundView.anchorXCenter(top: contentView.topAnchor,
bottom: nil,
centerAnchor: contentView.centerXAnchor,
width: contentView.widthAnchor,
height: nil,
padding: UIEdgeInsets(top: 90, left: 0, bottom: 0, right: 0),
widthOffset: -40)
// Setup Results Card
resultBackgroundView.addSubview(resultCardView)
resultCardView.anchorXCenter(top: resultBackgroundView.topAnchor,
bottom: resultBackgroundView.bottomAnchor,
centerAnchor: resultBackgroundView.centerXAnchor,
width: resultBackgroundView.widthAnchor,
height: nil)
setupResultsView(resultCardView)
}
func setupResultsView(_ resultCardView: UIView) {
let searchInput = "Hello"
let searchOutput = "Yo what's up dog congratulations"
// Configure Top Label
topLabel.attributedText = NSAttributedString(string: searchInput)
topLabel.configureBasedOnInput()
// Configure Bottom Label
bottomLabel.attributedText = NSAttributedString(string: searchOutput)
bottomLabel.configureBasedOnInput()
// Add Flashcard Button to its Background View
addFlashcardBackgroundView.addSubview(addFlashcardButton)
addFlashcardButton.anchor(top: addFlashcardBackgroundView.topAnchor,
bottom: addFlashcardBackgroundView.bottomAnchor,
leading: addFlashcardBackgroundView.leadingAnchor,
trailing: addFlashcardBackgroundView.trailingAnchor,
height: nil,
width: nil)
// Add subviews to Result Card
resultCardView.addSubview(topLabel)
resultCardView.addSubview(bottomLabel)
resultCardView.addSubview(soundButton)
resultCardView.addSubview(loopButton)
resultCardView.addSubview(lineDividerView)
resultCardView.addSubview(addFlashcardBackgroundView)
// Autolayout Constraints For Result Card Subviews
topLabel.translatesAutoresizingMaskIntoConstraints = false
topLabel.topAnchor.constraint(equalTo: resultCardView.topAnchor, constant: 10).isActive = true
topLabel.centerXAnchor.constraint(equalTo: resultCardView.centerXAnchor, constant: 0).isActive = true
topLabel.leadingAnchor.constraint(greaterThanOrEqualTo: resultCardView.leadingAnchor, constant: 10).isActive = true
topLabel.trailingAnchor.constraint(lessThanOrEqualTo: resultCardView.trailingAnchor, constant: -10).isActive = true
lineDividerView.anchor(top: topLabel.bottomAnchor,
bottom: nil, leading: resultCardView.leadingAnchor,
trailing: resultCardView.trailingAnchor,
height: 1,
width: nil,
padding: UIEdgeInsets(top: 10, left: 0, bottom: 0, right: 0))
loopButton.anchor(top: lineDividerView.bottomAnchor,
bottom: nil,
leading: nil,
trailing: resultCardView.trailingAnchor,
height: nil,
width: nil,
padding: UIEdgeInsets(top: 10, left: 0, bottom: 0, right: -10))
soundButton.anchor(top: lineDividerView.bottomAnchor,
bottom: nil,
leading: nil,
trailing: loopButton.leadingAnchor,
height: nil,
width: nil,
padding: UIEdgeInsets(top: 10, left: 0, bottom: 0, right: -10))
bottomLabel.translatesAutoresizingMaskIntoConstraints = false
bottomLabel.topAnchor.constraint(equalTo: soundButton.bottomAnchor, constant: 10).isActive = true
bottomLabel.centerXAnchor.constraint(equalTo: resultCardView.centerXAnchor, constant: 0).isActive = true
bottomLabel.leadingAnchor.constraint(greaterThanOrEqualTo: resultCardView.leadingAnchor, constant: 10).isActive = true
bottomLabel.trailingAnchor.constraint(lessThanOrEqualTo: resultCardView.trailingAnchor, constant: -10).isActive = true
addFlashcardBackgroundView.anchor(top: bottomLabel.bottomAnchor,
bottom: resultCardView.bottomAnchor,
leading: nil,
trailing: resultCardView.trailingAnchor,
height: 30,
width: 30,
padding: UIEdgeInsets(top: 10, left: 0, bottom: -10, right: -10))
}
//MARK:- Selector Functions
#objc func profileButtonTapped() {
print(0)
}
#objc func languageButtonPressed() {
print(1)
}
#objc func swapButtonPressed() {
print(2)
}
#objc func cancelButtonPressed() {
textView.text = ""
textView.textColor = .lightGray
textView.text = "Enter text"
cancelButton.isHidden = true
}
#objc func soundButtonPressed() {
print("soundButton")
}
#objc func loopButtonPressed() {
print("loopButton")
}
#objc func addFlashcardButtonPressed() {
print("adding flashcard")
}
}
Output: Circled Buttons are ones that don't work
I am trying to get my itemLabel UILabel to be multiline and do word wrapping, but I can't figure out where I'm going wrong here. I have numberOfLines = 0 and .byWordWrapping set. I'm sure it's a simple line of code I messed up, but I can't find it.
import UIKit
import Foundation
protocol ListItemCellDelegate {
func setChecked(cell: ListItemCell)
}
class ListItemCell: UITableViewCell {
var delegate: ListItemCellDelegate?
override func awakeFromNib() {
super.awakeFromNib()
// Initialization code
}
override func setSelected(_ selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)
// Configure the view for the selected state
}
override func prepareForReuse() {
super.prepareForReuse()
self.delegate = nil
}
let cellView: UIView = {
let view = UIView()
view.backgroundColor = UIColor.white
view.setCellShadow()
return view
}()
let checkButton: UIButton = {
let button = UIButton(type: .custom)
button.setImage(UIImage(named: "UnChecked"), for: .normal)
button.setImage(UIImage(named: "Checked"), for: .selected)
button.frame = CGRect(x: 0, y: 0, width: 50, height: 50)
return button
}()
let priorityButton: UIButton = {
let button = UIButton(type: .custom)
button.frame = CGRect(x: 0, y: 0, width: 40, height: 40)
button.setTitleColor(.black, for: .normal)
button.backgroundColor = UIColor.white
button.layer.borderWidth = 2
button.layer.borderColor = UIColor.black.cgColor
button.titleLabel?.font = UIFont.init(name: "Avenir Next", size: 24)
return button
}()
let itemLabel: UILabel = {
let label = UILabel()
label.textColor = UIColor.black
label.font = UIFont.init(name: "Avenir Next", size: 16)
return label
}()
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
setupCell()
checkButton.addTarget(self, action: #selector(setChecked), for: .touchUpInside)
itemLabel.translatesAutoresizingMaskIntoConstraints = false
itemLabel.numberOfLines = 0
itemLabel.lineBreakMode = .byWordWrapping
}
func setupCell() {
addSubview(cellView)
cellView.addSubview(checkButton)
cellView.addSubview(priorityButton)
cellView.addSubview(itemLabel)
cellView.setAnchor(top: topAnchor, left: leftAnchor, bottom: bottomAnchor, right: rightAnchor, paddingTop: 4, paddingLeft: 8, paddingBottom: 4, paddingRight: 8)
checkButton.setAnchor(top: nil, left: cellView.leftAnchor, bottom: nil, right: nil, paddingTop: 0, paddingLeft: 8, paddingBottom: 0, paddingRight: 0, width: 50, height: 50)
checkButton.centerYAnchor.constraint(equalTo: cellView.centerYAnchor).isActive = true
priorityButton.setAnchor(top: nil, left: checkButton.rightAnchor, bottom: nil, right: nil, paddingTop: 0, paddingLeft: 8, paddingBottom: 0, paddingRight: 0, width: 40, height: 40)
priorityButton.centerYAnchor.constraint(equalTo: checkButton.centerYAnchor).isActive = true
itemLabel.setAnchor(top: nil, left: priorityButton.rightAnchor, bottom: nil, right: rightAnchor, paddingTop: 0, paddingLeft: 20, paddingBottom: 0, paddingRight: 20)
itemLabel.centerYAnchor.constraint(equalTo: priorityButton.centerYAnchor).isActive = true
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
#objc private func setChecked() {
self.delegate?.setChecked(cell: self)
}
}
I expect the UILabel to wrap the text and take up as much space as needed to fit the whole label text in the cell. Right now it is not displaying the entire message, only what the size will allow. But, I want it to resize based on the length of the string. I did this easily in Storyboard, but I'm trying to get it to work programmatically.
I have done that before like in UITableView() there was an array of Strings and the length of the String was not fixed it can be in 3 lines or more.
So for that, i have given the constraints to UILabel() like top, bottom,leading, trailing all constraint to 0.
In UITableView(), there is a method called :
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return UITableViewAutomaticDimension
}
Try this one it will definitly help you i guess.
In my case, part of the solution was what Varsha Shivhare suggested, and the other was setting the heightAnchor constraint to >= 60 which is what I'm using right now. Thank you!
I have a collectionview that contains a video, a caption, profile image and a few other labels in each cell. When I load the collection view the first cell loads perfectly. Everything is all showing in the correct position. The rest however is loaded incorrectly for example sometimes the video does not fit properly within the imageview so it looks like its been cut out or sometimes the caption doesn't show at all.
But when I scroll down more a cell might randomly show everything in the correct positions again. I am using a library MMPlayerView to load my videos into the cell. I have been trying to figure out why the first cell loads perfectly but then the rest doesn't?
I am trying to create a collectionview that just plays videos like Instagram. I've also build out the collectionview programmatically if someone needs to know.
viewController
lazy var mmPlayerLayer: MMPlayerLayer = {
let l = MMPlayerLayer()
l.cacheType = .memory(count: 5)
l.coverFitType = .fitToPlayerView
l.videoGravity = AVLayerVideoGravityResizeAspectFill
l.replace(cover: CoverA.instantiateFromNib())
return l
}()
#IBOutlet weak var newsfeedCollectionView: UICollectionView!
var videoPosts = [videoPost]()
override func viewDidLoad() {
super.viewDidLoad()
newsfeedCollectionView?.register(videoListCollectionViewCell.self, forCellWithReuseIdentifier: cellId)
newsfeedCollectionView.addObserver(self, forKeyPath: "contentOffset", options: [.new], context: nil)
newsfeedCollectionView.contentInset = UIEdgeInsets(top: 0, left: 0, bottom: 20, right:0)
DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
self.updateByContentOffset()
self.startLoading()
}
fetchAllPosts()
}
fileprivate func landscapeAction() {
// just landscape when last result was finish
if self.newsfeedCollectionView.isDragging || self.newsfeedCollectionView.isTracking || self.presentedViewController != nil {
return
}
if UIDevice.current.orientation.isLandscape {
let full = UIStoryboard.init(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "FullScreenViewController") as! FullScreenViewController
MMLandscapeWindow.shared.makeKey(root: full, playLayer: self.mmPlayerLayer, completed: {
print("landscape completed")
})
}
}
override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
if keyPath == "contentOffset" {
self.updateByContentOffset()
NSObject.cancelPreviousPerformRequests(withTarget: self)
self.perform(#selector(startLoading), with: nil, afterDelay: 0.3)
} else {
super.observeValue(forKeyPath: keyPath, of: object, change: change, context: context)
}
}
func fetchAllPosts() {
//posts are loaded from firebase
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return videoPosts.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath) as! videoListCollectionViewCell
let postModelInfo = videoPosts[indexPath.item]
cell.post = postModelInfo
return cell
}
fileprivate func updateByContentOffset() {
let p = CGPoint(x: newsfeedCollectionView.frame.width/2, y: newsfeedCollectionView.contentOffset.y + newsfeedCollectionView.frame.width/2)
if let path = newsfeedCollectionView.indexPathForItem(at: p),
self.presentedViewController == nil {
self.updateCell(at: path)
}
}
fileprivate func updateCell(at indexPath: IndexPath) {
if let cell = newsfeedCollectionView.cellForItem(at: indexPath) as? videoListCollectionViewCell {
cell.delegate = self
cell.videoDelegate = self
// this thumb use when transition start and your video dosent start
mmPlayerLayer.thumbImageView.image = cell.photoImageView.image
// set video where to play
if !MMLandscapeWindow.shared.isKeyWindow {
mmPlayerLayer.playView = cell.photoImageView
}
// set url prepare to load
mmPlayerLayer.set(url: URL(string:(cell.post?.videoUrl)!), state: { (status) in
switch status {
case .failed(let err):
let alert = UIAlertController(title: "error", message: err.description, preferredStyle: .alert)
alert.addAction(UIAlertAction(title: "OK", style: .default, handler: nil))
self.present(alert, animated: true, completion: nil)
case .ready:
print("Ready to Play")
case .playing:
print("Playing")
case .pause:
print("Pause")
case .end:
print("End")
default: break
}
})
cell.layoutIfNeeded()
}
}
#objc fileprivate func startLoading() {
if self.presentedViewController != nil {
return
}
// start loading video
mmPlayerLayer.startLoading()
self.landscapeAction()
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let post = videoPosts[indexPath.item]
let width = (view.frame.width)
let imageWidth = post.imageWidth?.floatValue,
imageHeight = post.imageHeight?.floatValue
let oldHeight = CGFloat(imageWidth! / imageHeight!)
let height = CGFloat(width / oldHeight + 138)
let rect = NSString(string: post.postCaption!).boundingRect(with: CGSize(width:view.frame.width, height:1000), options: NSStringDrawingOptions.usesFontLeading.union(NSStringDrawingOptions.usesLineFragmentOrigin), attributes: [NSFontAttributeName : UIFont.systemFont(ofSize: 14)], context: nil)
return CGSize(width:view.frame.width, height:rect.height + height)
}
CollectionViewCell
protocol mmPlayerDelegate{
func startLoading(for cell: videoListCollectionViewCell)
}
class videoListCollectionViewCell: UICollectionViewCell {
var delegate: PostCellDelegate?
var videoDelegate: videoDelegate?
var mmPlayerDelegate: mmPlayerDelegate?
var post: videoPost? {
didSet {
guard let postImageUrl = post?.imageUrl else { return }
self.photoImageView.sd_setImage(with: URL(string: postImageUrl), placeholderImage: UIImage(named: "blurLogo"))
self.userProfileImageView.sd_setImage(with: URL(string: post?.profilePic), placeholderImage: UIImage(named: "blurLogo"))
usernameLabel.text = post?.fullName
captionLabel.text = post!.postCaption
}
override func prepareForReuse() {
super.prepareForReuse()
post = nil
}
let userProfileImageView: CustomImageView = {
var iv = CustomImageView()
iv.image = UIImage(named:"blurLogo")
iv.contentMode = .scaleAspectFill
iv.translatesAutoresizingMaskIntoConstraints = false
iv.backgroundColor = UIColor.darkGray
iv.clipsToBounds = true
return iv
}()
var photoImageView: CustomImageView = {
var iv = CustomImageView()
iv.image = UIImage(named:"blurLogo")
iv.contentMode = .scaleAspectFill
iv.backgroundColor = UIColor.clear
iv.translatesAutoresizingMaskIntoConstraints = false
iv.clipsToBounds = true
iv.layer.masksToBounds = true
return iv
}()
let usernameLabel: UILabel = {
let label = UILabel()
label.text = ""
label.textColor = UIColor.white
label.font = UIFont.boldSystemFont(ofSize: 14)
return label
}()
let postDate: UILabel = {
let label = UILabel()
label.text = ""
label.font = UIFont.boldSystemFont(ofSize: 10)
label.textColor = UIColor.gray
return label
}()
let likeCount: UILabel = {
let label = UILabel()
label.text = "0"
label.textColor = UIColor.white
label.font = UIFont.systemFont(ofSize: 14)
return label
}()
let optionsButton: UIButton = {
let button = UIButton(type: .system)
button.translatesAutoresizingMaskIntoConstraints = false
button.setTitle("•••", for: .normal)
button.setTitleColor(.white, for: .normal)
return button
}()
lazy var likeButton: UIButton = {
let button = UIButton(type: .system)
let stencil = imageLiteral(resourceName: "like_unselected").withRenderingMode(.alwaysTemplate)
button.setImage(stencil, for: .normal)
button.tintColor = UIColor.white
button.addTarget(self, action: #selector(handleLike), for: .touchUpInside)
return button
}()
lazy var commentButton: UIButton = {
let button = UIButton(type: .system)
let stencil = imageLiteral(resourceName: "comment").withRenderingMode(.alwaysTemplate)
button.setImage(stencil, for: .normal)
button.tintColor = UIColor.white
button.addTarget(self, action: #selector(handleComment), for: .touchUpInside)
return button
}()
let captionLabel: UILabel = {
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.numberOfLines = 0
label.textColor = UIColor.white
label.font = UIFont.systemFont(ofSize: 14)
return label
}()
override init(frame: CGRect) {
super.init(frame: frame)
addSubview(userProfileImageView)
addSubview(usernameLabel)
addSubview(optionsButton)
addSubview(photoImageView)
userProfileImageView.anchor(top: topAnchor, left: leftAnchor, bottom: nil, right: nil, paddingTop: 8, paddingLeft: 8, paddingBottom: 0, paddingRight: 0, width: 40, height: 40)
userProfileImageView.layer.cornerRadius = 40 / 2
usernameLabel.anchor(top: topAnchor, left: userProfileImageView.rightAnchor, bottom: photoImageView.topAnchor, right: optionsButton.leftAnchor, paddingTop: 0, paddingLeft: 8, paddingBottom: 0, paddingRight: 0, width: 0, height: 0)
photoImageView.anchor(top: userProfileImageView.bottomAnchor, left: leftAnchor, bottom: nil, right: rightAnchor, paddingTop: 16, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: 0)
addSubview(postDate)
postDate.anchor(top: topAnchor, left: nil, bottom: photoImageView.topAnchor, right: rightAnchor, paddingTop: 0, paddingLeft: 0, paddingBottom: 0, paddingRight: 8, width: 0, height: 0)
optionsButton.anchor(top: photoImageView.bottomAnchor, left: nil, bottom: nil, right: rightAnchor, paddingTop: 15, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 44, height: 0)
addSubview(fullScreen)
fullScreen.anchor(top: nil, left: nil , bottom: photoImageView.bottomAnchor, right: photoImageView.rightAnchor, paddingTop: 0, paddingLeft: 0, paddingBottom: 15, paddingRight: 15, width: 30, height: 30)
addSubview(activityIndicatorView)
activityIndicatorView.anchor(top: photoImageView.centerYAnchor, left: photoImageView.centerXAnchor , bottom: nil, right: nil, paddingTop: -15, paddingLeft: -15, paddingBottom: 0, paddingRight: 0, width: 0, height: 0)
setupActionButtons()
addSubview(likeCountButton)
likeCountButton.anchor(top: photoImageView.bottomAnchor, left: likeButton.rightAnchor, bottom: nil, right: nil, paddingTop: 16, paddingLeft: -18, paddingBottom: 0, paddingRight: 0, width: 0, height: 0)
addSubview(captionLabel)
captionLabel.anchor(top: likeButton.bottomAnchor, left: leftAnchor, bottom: nil, right: rightAnchor, paddingTop: 0, paddingLeft: 8, paddingBottom: 6, paddingRight: 8, width: 0, height: 0)
addSubview(viewCount)
viewCount.anchor(top: captionLabel.bottomAnchor, left: leftAnchor, bottom: bottomAnchor, right: rightAnchor, paddingTop: 10, paddingLeft: 8, paddingBottom: 6, paddingRight: 8, width: 0, height: 0)
}
fileprivate func setupActionButtons() {
let stackView = UIStackView(arrangedSubviews: [likeButton, likeCount,commentButton, commentCount])
stackView.distribution = .fillProportionally
addSubview(stackView)
stackView.anchor(top: photoImageView.bottomAnchor, left: leftAnchor, bottom: nil, right: nil, paddingTop: 0, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 190, height: 50)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
Couple of things which might need changing in your code to achieve what you need:
Dont use sizeForItemAt to derive the height of custom cell.
Instead use estimatedItemSize in your viewDidLoad.
Compute the height for the cell depending on the content for the cell in didSet function for post.
I have a textview instead of a textfield so I can autowrap text. However, the text itself is not auto wrapping. When the line gets too long the following text just disappears. If I go to an earlier point in the line and start deleting text, then the text that wasn't visible begins to appear.It should autoresize itself butit does not.
import UIKit
protocol CommentInputAccessoryViewDelegate {
func handleSubmit(for comment: String?)
}
class CommentInputAccessoryView: UIView, UITextViewDelegate {
var delegate: CommentInputAccessoryViewDelegate?
/*
// Only override draw() if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
override func draw(_ rect: CGRect) {
// Drawing code
}
*/
fileprivate let submitButton: UIButton = {
let submitButton = UIButton(type: .system)
submitButton.setTitle("Submit", for: .normal)
submitButton.setTitleColor(.black, for: .normal)
submitButton.titleLabel?.font = UIFont.boldSystemFont(ofSize: 14)
submitButton.addTarget(self, action: #selector(handleSubmit), for: .touchUpInside)
//submitButton.isEnabled = false
return submitButton
}()
lazy var commentTextView: UITextView = {
let textView = UITextView()
// textView.placeholder = "Add a comment"
textView.delegate = self
textView.isScrollEnabled = false
textView.backgroundColor = .red
textView.font = UIFont.boldSystemFont(ofSize: 12)
textView.textContainer.lineBreakMode = .byWordWrapping
// textView.addTarget(self, action: #selector(textFieldDidChange(_:)), for: .editingChanged)
return textView
}()
override init(frame: CGRect) {
super.init(frame: frame)
// backgroundColor = .red
//1
autoresizingMask = .flexibleHeight
addSubview(submitButton)
submitButton.anchor(top: topAnchor, left: nil, bottom: bottomAnchor, right:rightAnchor, paddingTop: 0, paddingLeft: 0, paddingBottom: 0, paddingRight: 12, width: 50, height: 0)
addSubview(commentTextView)
//3
if #available(iOS 11.0, *){
commentTextView.anchor(top: topAnchor, left: leftAnchor, bottom: safeAreaLayoutGuide.bottomAnchor, right: submitButton.leftAnchor, paddingTop: 0, paddingLeft: 12, paddingBottom: 0, paddingRight: 0, width: 0, height: 0)
}else{
//fallback on earlier versions
}
setupLineSeparatorView()
}
//2
override var intrinsicContentSize: CGSize{
return .zero
}
fileprivate func setupLineSeparatorView(){
let lineSeparatorView = UIView()
lineSeparatorView.backgroundColor = UIColor.rgb(red: 230, green: 230, blue: 230)
addSubview(lineSeparatorView)
lineSeparatorView.anchor(top:topAnchor, left: leftAnchor, bottom: nil, right: rightAnchor, paddingTop: 0, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: 0.5)
}
#objc func handleSubmit(){
guard let commentText = commentTextView.text else{
return
}
delegate?.handleSubmit(for: commentText)
}
#objc func textFieldDidChange(_ textField: UITextView) {
let isCommentValid = commentTextView.text?.count ?? 0 > 0
if isCommentValid {
submitButton.isEnabled = true
}else{
submitButton.isEnabled = false
}
}
func clearCommentTextField(){
commentTextView.text = nil
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
I'm thinking it is the anchors but I'm not entirely sure.
Look hear for edits
So I have a comments feature in my app that users use to communicate. Each comment has a pic, some text and button that lets you either flag or reply to comments. As seen in the picture below
However as seen in the picture there is a clear problem. If you add too much text it seems to run right over the button. Is there anyway I can prevent this from happening I think it looks really bad.
Below is my sorce code for reference I'm thinking it might be my constraints but I am not entirely sure.
import Foundation
import UIKit
import Firebase
protocol CommentCellDelegate: class {
func optionsButtonTapped(cell: CommentCell)
func handleProfileTransition(tapGesture: UITapGestureRecognizer)
}
class CommentCell: UICollectionViewCell {
weak var delegate: CommentCellDelegate? = nil
override var reuseIdentifier : String {
get {
return "cellID"
}
set {
// nothing, because only red is allowed
}
}
var didTapOptionsButtonForCell: ((CommentCell) -> Void)?
var comment: CommentGrabbed?{
didSet{
guard let comment = comment else{
return
}
// print("apples")
// textLabel.text = comment.content
//shawn was also here
profileImageView.loadImage(urlString: comment.user.profilePic!)
// print(comment.user.username)
let attributedText = NSMutableAttributedString(string: comment.user.username!, attributes: [NSAttributedStringKey.font: UIFont.boldSystemFont(ofSize: 14)])
attributedText.append(NSAttributedString(string: " " + (comment.content), attributes: [NSAttributedStringKey.font: UIFont.systemFont(ofSize: 14)]))
textView.attributedText = attributedText
}
}
let textView: UITextView = {
let textView = UITextView()
textView.font = UIFont.systemFont(ofSize: 14)
textView.isScrollEnabled = false
textView.isEditable = false
return textView
}()
lazy var profileImageView: CustomImageView = {
let iv = CustomImageView()
iv.clipsToBounds = true
iv.isUserInteractionEnabled = true
iv.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(handleProfileTransition)))
iv.contentMode = .scaleAspectFill
return iv
}()
lazy var flagButton: UIButton = {
let flagButton = UIButton(type: .system)
flagButton.setImage(#imageLiteral(resourceName: "icons8-Info-64"), for: .normal)
flagButton.addTarget(self, action: #selector(optionsButtonTapped), for: .touchUpInside)
return flagButton
}()
#objc func optionsButtonTapped (){
didTapOptionsButtonForCell?(self)
}
#objc func onOptionsTapped() {
delegate?.optionsButtonTapped(cell: self)
}
#objc func handleProfileTransition(tapGesture: UITapGestureRecognizer){
delegate?.handleProfileTransition(tapGesture: tapGesture)
// print("Tapped image")
}
override init(frame: CGRect){
super.init(frame: frame)
addSubview(textView)
addSubview(profileImageView)
addSubview(flagButton)
textView.anchor(top: topAnchor, left: profileImageView.rightAnchor, bottom: bottomAnchor, right: rightAnchor, paddingTop: 4, paddingLeft: 4, paddingBottom: 4, paddingRight: 4, width: 0, height: 0)
profileImageView.anchor(top: topAnchor, left: leftAnchor, bottom: nil, right: nil, paddingTop: 8, paddingLeft: 8, paddingBottom: 0, paddingRight: 0, width: 40, height: 40)
profileImageView.layer.cornerRadius = 40/2
flagButton.anchor(top: topAnchor, left: nil, bottom: nil, right: rightAnchor, paddingTop: 4, paddingLeft: 0, paddingBottom: 0, paddingRight: 4, width: 40, height: 40)
flagButton.addTarget(self, action: #selector(CommentCell.onOptionsTapped), for: .touchUpInside)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
You need to assign textView's right anchor to the button's left one so they got aligned on sides. This would be the correct layout setup for the textView:
textView.anchor(top: topAnchor, left: profileImageView.rightAnchor, bottom: bottomAnchor, right: flagButton.leftAnchor, paddingTop: 4, paddingLeft: 4, paddingBottom: 4, paddingRight: 4, width: 0, height: 0)