I'm Working on TableViewCell and i'm using swift. As my Design I want a UIlabel in vertical align like "Confirm"
I have set this in Cell class
class AppointmentCell: UITableViewCell {
#IBOutlet weak var appointmentStatus: UILabel!
override func awakeFromNib() {
super.awakeFromNib()
// Initialization code
let height = self.appointmentStatus.frame.size.height
let width = self.appointmentStatus.frame.size.width
appointmentStatus.transform = CGAffineTransform(rotationAngle: CGFloat.pi/2)
appointmentStatus.frame.size.width = height
appointmentStatus.frame.size.height = width
appointmentStatus.sizeToFit()
}
override func setSelected(_ selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)
// Configure the view for the selected state
}
}
But this solution is not Satisfied. This way taking more width in horizontal if i set constraints on width and height that is shrink the world in 3 characters "Con..." If I remove the constraints UIlabel take more space like...
This Screenshot From Iphone8 plus but on small Device IphoneSE label not showing.
My Question is how can I Achieve Vertical UILabel with correct frame size and constraints? How can I meet with my Design.
I know this is duplicate question there is more solutions on Stack overflow but i have not achieved my solution.
Thanks in Advance
Related
I am trying to make my table view cells look "material". Here is something similar to what I want to do (source):
Note that there is a shadow around the whole table view in the above image. What I want is that shadow, but applied to each table view cell, instead of the whole table view.
I first designed my cell in an XIB file. I put a UIView called containerView as a subview of the content view. I added constraints so that the containerView has a top, bottom, left, right margin of 8. This is so that the containerView is a little smaller than the content view, so that the shadow I put on it will be visible.
I also added a UILabel called label as the subview of containerView to show some text.
This is the UITableViewCell subclass:
class QueueItemCell: UITableViewCell {
#IBOutlet var label: UILabel!
#IBOutlet var container: UIView!
override func setHighlighted(_ highlighted: Bool, animated: Bool) {
...
}
override func setSelected(_ selected: Bool, animated: Bool) {
...
}
override func awakeFromNib() {
container.layer.shadowColor = UIColor.black.cgColor
container.layer.shadowOpacity = 0.7
container.layer.shadowOffset = CGSize(width: 3, height: 9)
container.layer.shadowRadius = 4
container.layer.cornerRadius = 4
container.layer.shadowPath = UIBezierPath(roundedRect: container.bounds, cornerRadius: 4).cgPath
selectionStyle = .none
}
}
There is nothing special about the data source and delegate methods except that I set the cells' height to 61 in heightForRowAt.
When I run the app, I got something like this:
The shadow on the bottom and left edges are quite good. But the right edge is a total disaster. The top edge also does not have a shadow, which is undesirable. I tried to do trial and error with shadowPath and shadowOffset but there's always one or two edges that looks bad.
How can I achieve a shadow on all edges of the cell, as shown in the first image?
in awakeFromNib you have wrong view size. You need to move container.layer.shadowPath = UIBezierPath(roundedRect: container.bounds, cornerRadius: 4).cgPath into layoutSubviews
or remove this code
container.layer.shadowPath = UIBezierPath(roundedRect: container.bounds, cornerRadius: 4).cgPath
so shadow will be configured automatically
I am using a UITextView inside a tableView cell to hold varying sized text content with scrolling disabled.
In order to auto-size the UITextView I've used auto-layout to pin it to the layout and also added this method to adjust the height:
override func viewWillAppear(_ animated: Bool) {
tableView.estimatedRowHeight = 50
tableView.rowHeight = UITableViewAutomaticDimension
}
This works correctly on the initial view - when the content first loads. However, I also want the user to be able to edit the text when they tap into the content (similar to the Apple Reminders app). This works correctly with one limitation: UITextView does not expand as the content grows.
How do I enable UITextView to expand during editing without scrolling?
New details:
Here is a screenshot of the current settings.
Per Matt's recommendations below, I created the following subclass.
class MyTextView: UITextView {
#IBOutlet var heightConstraint : NSLayoutConstraint?
override func awakeFromNib() {
super.awakeFromNib()
self.heightConstraint?.isActive = false
}
}
I had to modify the forced unwrapping to avoid a fatal error.
How do I enable UITextView to expand during editing without scrolling
A self-sizing text view is very simple; for a non-scrolling text view with no height constraint, it's the default. In this example, I've added some code to remove the existing height constraint, though you could do that in the storyboard just by indicating that the height constraint is a placeholder:
class MyTextView : UITextView {
#IBOutlet var heightConstraint : NSLayoutConstraint!
override func awakeFromNib() {
super.awakeFromNib()
self.heightConstraint.isActive = false
}
}
Screencast of the result:
If you subsequently do a batch update on the table view, and assuming the cell's other internal constraints are right, the cell will be remeasured as well (but I didn't demonstrate that as part of the example).
Everyone was very diligent about trying to help me resolve this issue. I tried each one and was not able to implement any of them with satisfactory results.
I was directed to this solution by an associate: https://stackoverflow.com/a/36070002/152205 and with the following modifications was able to solve my problem.
// MARK: UITextViewDelegate
func textViewDidChange(_ textView: UITextView) {
let startHeight = textView.frame.size.height
let calcHeight = textView.sizeThatFits(textView.frame.size).height
if startHeight != calcHeight {
UIView.setAnimationsEnabled(false)
self.tableView.beginUpdates()
self.tableView.endUpdates()
// let scrollTo = self.tableView.contentSize.height - self.tableView.frame.size.height
// self.tableView.setContentOffset(CGPoint(x: 0, y: scrollTo), animated: false)
UIView.setAnimationsEnabled(true)
}
}
Note: The scrollTo option caused the content to shift up several cell. With that removed everything worked as expected.
you could use var sizeThatFits
override func viewDidLoad() {
super.viewDidLoad()
textView = UITextView()
textView.sizeThatFits(CGSize(width: textView.frame.size.width, height: textView.frame.size.height))
}
This question has been around for a while, but this is a slightly different variation. I want to increase the height of the separator in the UITableView so it REALLY increases the height and doesn't just take up space within the cell. I am also putting a radius on the cell as well.
The code I have to customise the cell is below. I have also tried a variant in cellForRowAtindexPath adding a view to each cell, which has the same effect. They only take up space within the cell, rather than replacing the separator with a new view.
I want the space between the cells to be 20pt and clear color.... is this possible?
class CustomTVC: UITableViewCell {
override func awakeFromNib() {
super.awakeFromNib()
// Initialization code
let mScreenSize = UIScreen.main.bounds
let mSeparatorHeight = CGFloat(20.0) // Change height of speatator as you want
let mAddSeparator = UIView.init(frame: CGRect(x: 0, y: self.frame.size.height - mSeparatorHeight, width: mScreenSize.width, height: mSeparatorHeight))
mAddSeparator.backgroundColor = UIColor.orange // Change backgroundColor of separator
self.addSubview(mAddSeparator)
}
override func setSelected(_ selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)
// THIS ADDS THE CORNER RADIUS
self.layer.cornerRadius = 20
self.layer.masksToBounds = true
}
What we usually do is embed cell's subviews in a view and constrain this view so that it is 10px from top and bottom of the contentview. Make sure to se tableView's backgound color to .clear.
I am trying to get a UIImageView to change its height dynamically according to the picture that it is given. The UIImageView its inside a custom cell.
Here are the constraints:
Must span from the edge of the screen to the other edge.
Its height must be dynamic and not surpass the frame's width.
So far I've added the following constraints to the UIImageView using the Interface Builder:
I use the height constraint in code (referred as postHeight)to change the height of the UIImageView as shown below:
import UIKit
class ImageTableViewCell: UITableViewCell {
#IBOutlet weak var postImage: UIImageView!
#IBOutlet weak var postHeight: NSLayoutConstraint!
var post:UIImage! = nil {
didSet {
let x = post.size.width
let y = post.size.height
var newHeight = (y / x) * self.frame.width
newHeight = newHeight > self.frame.width ? self.frame.width : newHeight
postHeight.constant = newHeight
postImage.contentMode = .ScaleAspectFit
postImage.image = post
}
}
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
}
}
When running, the console shows that it was unable to satisfy some constraints. And outputs:
TryImageView[89952:2477907] Unable to simultaneously satisfy constraints.
Probably at least one of the constraints in the following list is one you don't want.
Try this:
(1) look at each constraint and try to figure out which you don't expect;
(2) find the code that added the unwanted constraint or constraints and fix it.
(
"<NSLayoutConstraint:0x7aef8560 V:[UIImageView:0x7aef96b0(291.355)]>",
"<NSLayoutConstraint:0x7aef9b30 UIImageView:0x7aef96b0.top == UITableViewCellContentView:0x7aef9340.topMargin - 8>",
"<NSLayoutConstraint:0x7aef9b90 UITableViewCellContentView:0x7aef9340.bottomMargin == UIImageView:0x7aef96b0.bottom - 8.5>",
"<NSLayoutConstraint:0x7ae5e990 'UIView-Encapsulated-Layout-Height' V:[UITableViewCellContentView:0x7aef9340(291)]>"
)
Will attempt to recover by breaking constraint
<NSLayoutConstraint:0x7aef8560 V:[UIImageView:0x7aef96b0(291.355)]>
The table view has this in its viewDidLoad() since the cells need to resize as well.
override func viewDidLoad() {
super.viewDidLoad()
self.tableView.estimatedRowHeight = 90
self.tableView.rowHeight = UITableViewAutomaticDimension
}
Any ideas as to why my constraints are not working?
Thanks
You are setting constraints for your image view as:
Connected to top, left, right, and bottom
Fixed Height
Remove the height constraint. Say the height of your cell is 50. You cannot fix the height of your image view. If it covers the entire cell, its height will be 50 as well. You need to find out your images' heights, and put them in an array.
var heights = [CGFloat]()
When you find your heights:
heights = [50, 60, 70]
Then in the heightForRowAtIndexPath method, return these heights.
func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
return heights[indexPath.row]
}
You also should set the contentMode of your image view.
imageView.contentMode = .ScaleAspectFit
I am using a UITableView and using the UITableViewCell Subtitle Style that is provided by Apple.
I am also using the Preferred Fonts so that they work with the Dynamic Type. If the user goes to Settings and changes the UI font size, it also affects the font in my view.
I am also allowing it to dynamically choose the row height based on the length of the text using row.estimatedRowHeight. This is great because with larger fonts and having multiple line text, the cells will adjust accordingly.
Using images is what is the problem. Images are of different sizes so scale them down. The scaling is sort of a hit or miss for the automatic cell height. It may not be done in time so the system calculation of the height may compute wrong.
My question then is, can I manually add constraints to the UITableViewCell's imageView property so that it has a set width and height of 88 pixels. This way, even if the picture isn't done resizing yet, it will at least calculate the height of the containing cell properly?
OR, maybe better to ask this: Is it possible to have a static width/height for the image when the cell and text labels resize dynamically based on content length and size?
Thanks!
There is a good library for creating UI dynamically. It's called Cartography
https://github.com/robb/Cartography
Here code that helps to create resizable cell by image view height:
import UIKit
import Cartography
class TableViewCell: UITableViewCell {
#IBOutlet weak var resizableImage: UIImageView!
override func awakeFromNib() {
super.awakeFromNib()
// Initialization code
}
override func setSelected(selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)
}
func configurate() {
constrain(self.resizableImage) { view1 in
view1.width == view1.height
view1.top == view1.superview!.top
view1.bottom == view1.superview!.bottom
}
constrain(self.resizableImage) { view1 in
view1.height == 88
}
}
}