In my application users can post comments on posts. Everything works fine however the lines do not wrap when creating a long text thus I get this
numberOfLines is set to = 0
Here is the code in the commentCell setting the constraints
let commentLabel: ActiveLabel = {
let label = ActiveLabel()
label.font = UIFont.systemFont(ofSize: 13)
label.numberOfLines = 0
return label
}()
override init(frame: CGRect) {
super.init(frame: frame)
addSubview(profileImageView)
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
addSubview(optionsButton)
optionsButton.anchor(top: topAnchor, left: nil, bottom: nil, right: rightAnchor, paddingTop: 12, paddingLeft: 0, paddingBottom: 0, paddingRight: 8, width: 20, height: 20)
addSubview(commentLabel)
commentLabel.anchor(top: topAnchor, left: profileImageView.rightAnchor, bottom: bottomAnchor, right: optionsButton.leftAnchor, paddingTop: 15, paddingLeft: 5, paddingBottom: 15, paddingRight: 8, width: 0, height: 0)
addSubview(commentTimeLabel)
commentTimeLabel.anchor(top: commentLabel.bottomAnchor, left: commentLabel.leftAnchor, bottom: nil, right: nil, paddingTop: 3, paddingLeft: 1, paddingBottom: 0, paddingRight: 0, width: 0, height: 0)
optionsButton.isEnabled = true
optionsButton.isUserInteractionEnabled = true
commentLabel.isUserInteractionEnabled = true
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
And here is the CommentViewController code that should be resizing the cell for me but it doesn't. I've used this before in the past so I'm not sure if I am missing anything
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let frame = CGRect(x: 0, y: 0, width: view.frame.width, height: 50)
let dummyCell = CommentCell(frame: frame)
dummyCell.comment = comments[indexPath.item]
dummyCell.layoutIfNeeded()
let targetSize = CGSize(width: view.frame.width, height: 1000)
let estimatedSize = dummyCell.systemLayoutSizeFitting(targetSize)
let height = max(40 + 8 + 8, estimatedSize.height)
return CGSize(width: view.frame.width, height: height)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return 15
}
You need to set
commentLabel.lineBreakMode = .byWordWrapping
By default it's set to .byTruncatingTail.
Also you may need to set .numberOfLines if you want to limit text to certain number of lines
After revisiting this issue, the problem was my constraints.
on
commentLabel.anchor
I changed it to
bottom: commentTimeLabel.topAnchor
and
optionsButton.anchor
changed bottom to
bottom: bottomAnchor
Related
I have a UITableView embedded inside of my container view which is being modally presented over current context. The videos load fine but there is no way for me to simply dismiss the video and return back to my UITableView. I would like the option for the video to be able to be closed and simply return to the original tableView.
class MotivationViewController: UIViewController, UITableViewDelegate, UITableViewDataSource, YTPlayerViewDelegate {
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(playerView)
playerView.delegate = self
search()
self.tableView.delegate = self
self.tableView.dataSource = self
print(dataArray)
tableView.register(YouTubeTableCell.self, forCellReuseIdentifier: cellID)
view.addSubview(containerView)
view.addSubview(titleLabel)
containerView.anchor(top: view.topAnchor, left: view.leftAnchor, bottom: view.bottomAnchor, right: view.rightAnchor, paddingTop: 200, paddingLeft: 20, paddingBottom: 200, paddingRight: 20, width: 0, height: 0)
containerView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
containerView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
containerView.addSubview(tableView)
tableView.translatesAutoresizingMaskIntoConstraints = false
tableView.layer.cornerRadius = 20
tableView.anchor(top: containerView.topAnchor, left: containerView.leftAnchor, bottom: containerView.bottomAnchor, right: containerView.rightAnchor, paddingTop: 0, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: 0)
titleLabel.anchor(top: nil, left: nil, bottom: containerView.topAnchor, right: nil, paddingTop: 0, paddingLeft: 0, paddingBottom: 10, paddingRight: 0, width: 0, height: 0)
titleLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: cellID, for: indexPath) as! YouTubeTableCell
let item = titlesArray[indexPath.row]
cell.titleLabel.text = item
let imageURL = URL(string: thumbnailArray[indexPath.row])
cell.thumbnailImageView.sd_setImage(with: imageURL)
return cell
}
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
let item = videoID[indexPath.row]
view.addSubview(playerView)
playerView.layer.cornerRadius = 20
playerView.anchor(top: containerView.topAnchor, left: containerView.leftAnchor, bottom: containerView.bottomAnchor, right: containerView.rightAnchor, paddingTop: 0, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: 0)
let playerVars = ["playsinline": 1] // 0: will play video in fullscreen
self.playerView.load(withVideoId: item, playerVars: playerVars)
}
func dismiss() {
self.playerView.removeFromSuperview()
}
}
I ended up adding a close button and constraining it on the top right of my containerView and setting it to hidden once the video was dismissed.
#objc func dismissVideo() {
self.playerView.removeFromSuperview()
closeButton.isHidden = true
}
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
let item = videoID[indexPath.row]
view.addSubview(playerView)
playerView.layer.cornerRadius = 20
playerView.anchor(top: containerView.topAnchor, left: containerView.leftAnchor, bottom: containerView.bottomAnchor, right: containerView.rightAnchor, paddingTop: 0, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: 0)
let playerVars = ["playsinline": 1] // 0: will play video in fullscreen
self.playerView.load(withVideoId: item, playerVars: playerVars)
closeButton.addTarget(self, action: #selector(dismissVideo), for: .touchUpInside)
closeButton.isHidden = false
}
class ListCell: UICollectionViewCell {
let snapshotTitle: UILabel = {
let label = UILabel()
label.attributes(text: "Title", textColor: .white, alignment: .left, font: Fonts.rubikMedium, size: 15, characterSpacing: -0.05, backgroundColor: nil)
return label
}()
let snapshotOne: UILabel = {
let label = UILabel()
label.attributes(text: "Item 1", textColor: Colors.appDarkGrey, alignment: .left, font: Fonts.rubikRegular, size: 12, characterSpacing: -0.04, backgroundColor: nil)
return label
}()
let snapshotTwo: UILabel = {
let label = UILabel()
label.attributes(text: "Item 2", textColor: Colors.appDarkGrey, alignment: .left, font: Fonts.rubikRegular, size: 12, characterSpacing: -0.04, backgroundColor: nil)
return label
}()
let snapshotThree: UILabel = {
let label = UILabel()
label.attributes(text: "Item 3", textColor: Colors.appDarkGrey, alignment: .left, font: Fonts.rubikRegular, size: 12, characterSpacing: -0.04, backgroundColor: nil)
return label
}()
let snapshotFour: UILabel = {
let label = UILabel()
label.attributes(text: "Item 4", textColor: Colors.appDarkGrey, alignment: .left, font: Fonts.rubikRegular, size: 12, characterSpacing: -0.04, backgroundColor: nil)
return label
}()
let snapshotContainer: UIView = {
let view = UIView()
view.backgroundColor = .white
view.layer.cornerRadius = 12
return view
}()
let snapshotGradientBackground: UIImageView = {
let imageView = UIImageView()
imageView.image = #imageLiteral(resourceName: "itemCellBackgroundPink")
imageView.contentMode = .scaleAspectFill
imageView.layer.cornerRadius = 12
imageView.clipsToBounds = true
return imageView
}()
override init(frame: CGRect) {
super.init(frame: frame)
contentView.addSubview(snapshotGradientBackground)
snapshotGradientBackground.setAnchors(top: contentView.topAnchor, paddingTop: 0, bottom: contentView.bottomAnchor, paddingBottom: 0, left: contentView.leftAnchor, paddingLeft: 0, right: contentView.rightAnchor, paddingRight: 0, width: 0, height: 0)
contentView.addSubview(snapshotContainer)
snapshotContainer.setAnchors(top: contentView.topAnchor, paddingTop: 45, bottom: contentView.bottomAnchor, paddingBottom: 0, left: contentView.leftAnchor, paddingLeft: 0, right: contentView.rightAnchor, paddingRight: 0, width: 0, height: 0)
contentView.addSubview(snapshotTitle)
snapshotTitle.setAnchors(top: contentView.topAnchor, paddingTop: 0, bottom: snapshotContainer.topAnchor, paddingBottom: 0, left: contentView.leftAnchor, paddingLeft: 12, right: contentView.rightAnchor, paddingRight: 12, width: 0, height: 0)
contentView.addSubview(snapshotOne)
snapshotOne.setAnchors(top: snapshotContainer.topAnchor, paddingTop: 18, bottom: nil, paddingBottom: 0, left: snapshotContainer.leftAnchor, paddingLeft: 12, right: snapshotContainer.rightAnchor, paddingRight: 12, width: 0, height: 14)
contentView.addSubview(snapshotTwo)
snapshotTwo.setAnchors(top: snapshotOne.bottomAnchor, paddingTop: 14, bottom: nil, paddingBottom: 0, left: snapshotContainer.leftAnchor, paddingLeft: 12, right: snapshotContainer.rightAnchor, paddingRight: 12, width: 0, height: 14)
contentView.addSubview(snapshotThree)
snapshotThree.setAnchors(top: snapshotTwo.bottomAnchor, paddingTop: 14, bottom: nil, paddingBottom: 0, left: snapshotContainer.leftAnchor, paddingLeft: 12, right: snapshotContainer.rightAnchor, paddingRight: 12, width: 0, height: 14)
contentView.addSubview(snapshotFour)
snapshotFour.setAnchors(top: snapshotThree.bottomAnchor, paddingTop: 14, bottom: nil, paddingBottom: 0, left: snapshotContainer.leftAnchor, paddingLeft: 12, right: snapshotContainer.rightAnchor, paddingRight: 12, width: 0, height: 14)
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
I am using a completely programmatic approach to this app
To help understand this code better, I used extensions for UILabel and UIView:
".attributes" specifies text, text color, text alignment, font, text size, and background color
".setAnchors" specifies autolayout constraints
Instead of adding each of these labels (snapshotOne, snapshotTwo, snapshotThree, snapshotFour) manually, how would I iterate over a list of items and set the label to that item? Currently, I am just creating separate closures for each item and then adding them in one by one. If it helps, the maximum amount of items I want to show is four (first four items in the list of items).
Here is an image to show what the current code does:
This is a huge question that I have, and any help is very much appreciated. I am fairly new to Swift programming, so feel free to point out any other concerns in my code if you see any. Thank you!
For the 4 snapshot labels, you can put them in an array:
let snapshotLabels = (1...4).map { number in
let label = UILabel()
label.attributes(text: "Item \(number)", // note the use of "number" here
textColor: Colors.appDarkGrey,
alignment: .left,
font: Fonts.rubikRegular,
size: 12,
characterSpacing: -0.04,
backgroundColor: nil)
return label
}
For the layout, you could use a UIStackView or a UITableView, depending on how you want it to look when the number of items is fewer than 4.
With UIStackView, you could do
let stackView = UIStackView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
stackView.setAnchors(...)
stackView.axis = .vertical
stackView.alignment = .leading
stackView.distribution = .fillEqually
for label in snapshotLabels {
stackView.addArrangedSubview(label)
}
I have a base UIView that has a visualEffectView as it's subview. I set the visualEffectView's view frame.height as 80. When presenting to ViewController, I want to reset its height to 120. Currently, when presented, the height is initially 120 but then quickly clips back down to 80. Shouldn't my frame in my ViewController override the frame set in the UIView? My frame in the ViewController gets called first but later it gets called from the UIView, causing the clipping bug.
class CardView: UIView {
let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .light))
override init(frame: CGRect) {
super.init(frame: frame)
clipsToBounds = true
addSubview(visualEffectView)
}
override func layoutSubviews() {
super.layoutSubviews()
visualEffectView.anchor(top: topAnchor, left: leftAnchor, bottom: nil, right: rightAnchor, paddingTop: 0, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: 80)
}
}
class ViewController: ViewController {
let cardView: CardView = {
let cv = CardView()
cv.imageView.clipsToBounds = true
cv.layer.cornerRadius = 18
return cv
}()
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
let superviewFrame = view.frame.height
cardView.frame = CGRect(x: 10, y: superviewFrame / 8, width: view.frame.width - 20, height: superviewFrame - (superviewFrame / 5))
cardView.visualEffectView.anchor(top: cardView.topAnchor, left: cardView.leftAnchor, bottom: nil, right: cardView.rightAnchor, paddingTop: 0, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: 120)
}
}
try moving this code
visualEffectView.anchor(top: topAnchor, left: leftAnchor, bottom: nil, right: rightAnchor, paddingTop: 0, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: 80)
from override func layoutSubviews() { to override init(frame: CGRect) {
after super.init()
You may need a guard condition and if there is a constraint, just pass.
override func layoutSubviews() {
super.layoutSubviews()
guard visualEffectView.constraintsAffectingLayout(for: .vertical).count == 0 else {return}. // Here
visualEffectView.anchor(top: topAnchor, left: leftAnchor, bottom: nil, right: rightAnchor, paddingTop: 0, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: 80)
}
I have a UICollectionViewController header cell that displays information for a business.
A business may or may not have a description.
In my header cell I set a business object, and then set all the text for the labels etc. In here I also try calculating the required text field height based off of this post
What I need is to actually set my header cells height dynamically in the UICollectionViewController where it is used.
BusinessDetailHeader class:
var maxTextViewHeight: CGFloat = 0
var business: Business? {
didSet {
guard let imageUrl = business?.logoUrl else {return}
let url = URL(string: imageUrl)
logoView.kf.setImage(with: url)
headerImageView.kf.setImage(with: url)
guard let businessName = business?.name else {return}
guard let address = business?.address else {return}
guard let hoursOfOperation = business?.hoursOfOperation else {return}
guard let phoneNumber = business?.phoneNumber else {return}
businessNameLabel.text = businessName
addressLabel.text = address
hoursofOperationLabel.text = hoursOfOperation
phoneNumberLabel.text = phoneNumber
if let description = business?.description {
detailsTextField.text = description
let amountOfLinesToBeShown:CGFloat = 6
if let height = detailsTextField.font?.lineHeight {
maxTextViewHeight = height * amountOfLinesToBeShown
}
}
}
}
override init(frame: CGRect) {
super.init(frame: frame)
layoutViews()
}
fileprivate func layoutViews() {
addSubview(headerImageView)
headerImageView.anchor(top: topAnchor, left: leftAnchor, bottom: nil, right: rightAnchor, paddingTop: 0, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: 130)
//ADJUST DETAIL HEIGHT HERE BASED ON CALCULATED HEIGHT FOR TEXTVIEW
addSubview(detailView)
detailView.anchor(top: headerImageView.bottomAnchor, left: leftAnchor, bottom: nil, right: rightAnchor, paddingTop: 0, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: 200+maxTextViewHeight)
detailView.addSubview(businessNameLabel)
businessNameLabel.anchor(top: logoView.bottomAnchor, left: nil, bottom: nil, right: nil, paddingTop: 4, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: 0)
businessNameLabel.centerXAnchor.constraint(equalTo: detailView.centerXAnchor).isActive = true
detailView.addSubview(detailsTextField)
detailsTextField.anchor(top: businessNameLabel.bottomAnchor, left: leftAnchor, bottom: nil, right: rightAnchor, paddingTop: 0, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: maxTextViewHeight)
detailView.addSubview(addressLabel)
addressLabel.anchor(top: detailsTextField.bottomAnchor, left: nil, bottom: nil, right: nil, paddingTop: 4, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: 0)
addressLabel.centerXAnchor.constraint(equalTo: detailView.centerXAnchor).isActive = true
detailView.addSubview(hoursofOperationLabel)
hoursofOperationLabel.anchor(top: addressLabel.bottomAnchor, left: nil, bottom: nil, right: nil, paddingTop: 4, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: 0)
hoursofOperationLabel.centerXAnchor.constraint(equalTo: detailView.centerXAnchor).isActive = true
detailView.addSubview(phoneNumberLabel)
phoneNumberLabel.anchor(top: hoursofOperationLabel.bottomAnchor, left: nil, bottom: nil, right: nil, paddingTop: 4, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: 0)
phoneNumberLabel.centerXAnchor.constraint(equalTo: detailView.centerXAnchor).isActive = true
}
The height is updated properly with no issues but sometimes when the height is too big, the text and all the following elements overflow out of the header cell. I think this has to do with how I address the height of the cell in my UICollecitonViewController.
I set it's height like this:
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
return CGSize(width: view.frame.width, height: 330)
}
The height of 330 here needs to be dynamic. Is this possible? Should I be setting the height property like this? I've seen posts like this one that try addressing this, but the solutions don't seem like they are the best.
Please check this link, it will be really helpful in how to make UIcollectionView header dynamic height?. Basically you need to set autolayout constraint according to your requirement; Need to call setNeedlayout() in referenceSizeForHeaderInSection (collectionViewFlowLayout delegate) method.
So I have a cell that is setup to have a collectionView inside of it. The height for that cell is given in this function.
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
if indexPath.section == 0 {
return CGSize(width: view.frame.width, height: 300)
}
return CGSize(width: view.frame.width, height: 280)
}
Inside the class for this cell I create a collectionView and again create a collection of cells inside of it.
#objc func setupViews(){
backgroundColor = .red
addSubview(categoryCollectionView)
addSubview(sectionNameLabel)
sectionNameLabel.anchor(top: topAnchor, left: leftAnchor, bottom: nil, right: nil, paddingTop: 0, paddingLeft: 14, paddingBottom: 0, paddingRight: 0, width: 0, height: 0)
categoryCollectionView.anchor(top: sectionNameLabel.bottomAnchor, left: leftAnchor, bottom: bottomAnchor, right: rightAnchor, paddingTop: 0, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: 0)
categoryCollectionView.delegate = self
categoryCollectionView.dataSource = self
categoryCollectionView.showsHorizontalScrollIndicator = false
categoryCollectionView.register(CategoryEventCell.self, forCellWithReuseIdentifier: cellID)
}
Each cell has a background image and a title that is below the image. However the text is always somewhat cut off. My current constraints are here
#objc func setupViews(){
backgroundColor = .clear
setCellShadow()
addSubview(backgroundImageView)
addSubview(eventNameLabel)
backgroundImageView.anchor(top: topAnchor, left: leftAnchor, bottom: bottomAnchor, right: rightAnchor, paddingTop: 0, paddingLeft: 0, paddingBottom: 9, paddingRight: 0, width: 0, height: 0)
eventNameLabel.anchor(top: backgroundImageView.bottomAnchor, left: leftAnchor, bottom: nil, right: nil, paddingTop: 0, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: 0)
}
How would I change my constraints or text/element size to make sure everything fits?
My current view looks like so
You are pinning the image to the bottom of its cell, and the label has no say in how to fit in. Instead you should pin the image's to the label's top, and the label's bottom to the cell's bottom. Like this in the visual format language: [image]-[label]-|. You also need to edit the backgroundImageView's content compression resistance.
Here is the fixed version where the label causes the image's height to shrink upwards to fit in:
#objc func setupViews(){
backgroundColor = .clear
setCellShadow()
addSubview(backgroundImageView)
addSubview(eventNameLabel)
// ensure the image compresses, not the eventNameLabel, by lowering its priority
backgroundImageView.setContentCompressionResistancePriority(UILayoutPriority(600), for: .vertical)
backgroundImageView.anchor(top: topAnchor, left: leftAnchor, bottom: eventNameLabel.topAnchor, right: rightAnchor, paddingTop: 0, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: 0)
eventNameLabel.anchor(top: backgroundImageView.bottomAnchor, left: leftAnchor, bottom: bottomAnchor, right: nil, paddingTop: 0, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: 0)
}