I have this table with cells which have an image and a text
First thing that I want is to add a padding to cells so that the image with the circle and the scissors doesn't hit the border of the cell. I already tried things like cell.layoutMargins = UIEdgeInsets(top: 50, left: 50, bottom: 50, right: 50) or cell.bounds = CGRect(x: 0, y: 0, width: 100, height: 100), cell.separatorInset = UIEdgeInsets(top: 100, left: 100, bottom: 100, right: 100) but nothing has changed.
Second thing that I would like is to add a spacing between the cell, I tried all the solutions that I found but it doesn't seem to work
CODE (some of the solutions that I tried are written below all toghether, but I also tried them one by time)
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "difficultyCell", for: indexPath)
cell.textLabel?.text = myDict[indexPath.row].key
cell.textLabel?.font = .boldSystemFont(ofSize: 20)
let imageCell = UIImage(named: "scissors.png")
cell.imageView?.image = imageCell
cell.backgroundColor = Esercizio.hexStringToUIColor(hex: "#4cf584").withAlphaComponent(0.85)
cell.layer.borderColor = UIColor.orange.cgColor
cell.layer.borderWidth = 1
cell.layer.cornerRadius = 8
cell.layoutMargins = UIEdgeInsets(top: 50, left: 50, bottom: 50, right: 50)
cell.bounds = CGRect(x: 0, y: 0, width: 100, height: 100)
cell.separatorInset = UIEdgeInsets(top: 100, left: 100, bottom: 100, right: 100)
return cell
}
to solve it easily , if you are using custom UITableViewCell file, in your cell class override the layoutsubView method of the class and there you can add the UIEdgeInset to the frame of the contentView, and also dont forget the added padding amount into total RowHeight estimation in your tableview: this code will work for you for sure,
override func layoutSubviews() {
super.layoutSubviews()
contentView.frame = contentView.frame.inset(by: UIEdgeInsets(top: 0, left: 0, bottom: 10, right: 0))
}
this way you can create padding to whatever direction you want to add the padding.
The best solution here is to create your own cell, add your own image, labels, etc. inside of contentView and tweak them how you want using auto layout constraints.
see: https://www.raywenderlich.com/8549-self-sizing-table-view-cells
Related
My problem is..
when I set contentInset like below
membershipCollectionView.contentInset = UIEdgeInsets(top: 1, left: 0, bottom: 1, right: 0)
UICollectionViewCell disappear. If I change the parameter value of top, bottom to 0 it appears. Is there anyone who explain this disappearing situation?
On contentInset = UIEdgeInsets(top: 1, left: 0, bottom: 1, right: 0)
On contentInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
Here is my UICollectionView and UICollectionViewCell
UICollectionView
height = 50
also I set estimatedItemSize to automaticSize
#IBOutlet weak var collectionLayout: UICollectionViewFlowLayout! {
didSet {
collectionLayout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
}
}
UICollectionViewCell
height = 40
this is label inside UICollectionViewCell. Height is 40
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
I want to adjust the space between text and image on UIButton,
let space = 10
button.contentHorizontalAlignment = .left
button.titleEdgeInsets = UIEdgeInsets(top: 0, left: space, bottom: 0, right: 0)
It looks well, the space in the picture is absolutely 10.
And now, I want them center,
let space = 10
button.contentHorizontalAlignment = .center
button.titleEdgeInsets = UIEdgeInsets(top: 0, left: space, bottom: 0, right: 0)
It looks much smaller, and the space is only 5. I find it from Reveal.
Why the space is reduced by half?
I searched, and this tells me how to make title and image center as a single entity. And it adjust their space like this:
CGFloat spacing = 10; // the amount of spacing to appear between image and title
tabBtn.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, spacing);
tabBtn.titleEdgeInsets = UIEdgeInsetsMake(0, spacing, 0, 0);
Yes, it truly works well, but why? From the letter, the space should be 20, doesn't it?
Here is an example, any helps?
Thanks in advance.
You Didn't set imageEdgeInsets like this :
rightButton.imageEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 10)
So total Code is here :
leftButton.contentHorizontalAlignment = .left
leftButton.imageView?.backgroundColor = .red
leftButton.titleLabel?.backgroundColor = .gray
leftButton.titleEdgeInsets = UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 0)
rightButton.contentHorizontalAlignment = .center
rightButton.imageView?.backgroundColor = .red
rightButton.titleLabel?.backgroundColor = .gray
rightButton.imageEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 10)
rightButton.titleEdgeInsets = UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 0)
Reason:
Actually you need to set imageEdgeInsets both time left alignment or center alignment
But when its left alignment image there is no space to set Insets at the right side.
Seet this code :
leftButton.imageEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 100)
Here is also no space .
So home you get some idea how insets work :
For your more Help :
Click here
I can't figure out what is wrong in this code. i want to display button and image in tableview section header
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let view = UIView()
let image = UIImageView()
image.frame = CGRect(x: view.frame.width - 10 , y: 0, width: 20, height: 20)
image.image = UIImage.init(named: "triangle.png")
let button = UIButton(type: .system)
button.frame = CGRect(x: view.frame.origin.x, y: view.frame.origin.y, width: view.frame.width - 30, height: view.frame.height)
button.setTitle("Open", for: .normal)
button.backgroundColor = .yellow
button.addTarget(self, action: #selector(buttonclick), for: .touchUpInside)
view.addSubview(image)
view.addSubview(button)
return view
}
You shouldn't set imageView and button frame by view frame. Because when viewForHeaderInSection function is being called view frame will be 0.
Instead of view you can use tableview
image.frame = CGRect(x: tableView.frame.width - 20 , y: 0, width: 20, height: 20)
button.frame = CGRect(x: 0, y: 0, width: tableView.frame.width - 30, height: 50)
It is recommended to use autolayout instead of setting frame.
Add below code just after initialising view :
view.frame = CGRect(x: 0 , y: 0, width: tableView.frame.width, height: heightForHeaderInSection)
you forgot to set the view's frame.
Here is my code:
override func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
let whiteRoundedView : UIView = UIView(frame: CGRect(x: 10, y: 8, width: self.view.frame.size.width - 20, height: 140))
whiteRoundedView.layer.backgroundColor = CGColor(colorSpace: CGColorSpaceCreateDeviceRGB(), components: [1.0, 1.0, 1.0, 0.9])
whiteRoundedView.layer.masksToBounds = false
whiteRoundedView.layer.cornerRadius = 2.0
whiteRoundedView.layer.shadowOffset = CGSize(width: -1, height: 1)
whiteRoundedView.layer.shadowOpacity = 0.2
whiteRoundedView.layer.borderWidth = 0.5
whiteRoundedView.layer.borderColor = UIColor.orange.cgColor
cell.contentView.backgroundColor = UIColor.clear
cell.contentView.addSubview(whiteRoundedView)
cell.contentView.sendSubview(toBack: whiteRoundedView)
cell.accessoryType = .disclosureIndicator
cell.clipsToBounds = true;
}
Every cell is cut off from the bottom and not showing the complete cell structure.
Any idea?
There is not enough space for the whiteRoundedView over cell height.
Hence, reduce the height <140 of whiteRoundedView while initialization.
let whiteRoundedView : UIView = UIView(frame: CGRect(x: 10, y: 8, width:self.view.frame.size.width - 20, height: YOUR_NEW_HEIGHT))
Your whiteRoundedView should be within the cell content view.
So, try using heightForRowAt indexPath and use the same height for whiteRoundedView in your willDisplay cell