Two label align vertically in tableView cell auto resizing swift - ios

Try to auto resizing two labels align vertically within a cell, is that possible?
In the storyboard, we have to set autolayout, since I want to auto resizing two labels(one is on top of another).
I can't set each height so that the storyboard doesn't know what is the height of these two labels so it shows an error for autolayout.
if I click "Add Missing Constraints" button it will add a height for "subtitle"
or I can set height for "title" rather than "subtitle",
or make "title" equal to "subtitle" it will still accept.
here is the result:
A workaround will be separate these two to a different cell.
Any better solution? or am I just simply forget to do anything?
P.S. I'm using Xcode 8 with iOS 10.3.

Try setting out Proper constraints for both the labels-:
Storyboard-:
Constraints for first label-:
Constraints for second label-:
Controller class(use Automatic Dimensions for table view)-:
class ViewController1: UIViewController {
var dataForTableView:[ProductImage]?
#IBOutlet weak var secondTable: UITableView!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
secondTable.estimatedRowHeight = 96
secondTable.rowHeight = UITableViewAutomaticDimension
// CHECK FOR DATA
//print(dataForTableView?[0].url as Any)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
extension ViewController1 : UITableViewDelegate,UITableViewDataSource{
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int{
return 1
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell{
let cell = tableView.dequeueReusableCell(withIdentifier: "cell1") as! testingCell2
cell.backgroundColor = UIColor.blue;
cell.secondLabel.text = "agfhjsgfhjsgdshgfhjsfjhvhssajs hjfbvhjfbvjhfgafgfhlgkaghkfakfhkflbvhfbvhfvbhfv ah fvfhbvfjhvbfhdavhfvhv"
return cell
}
// Number of sections in table
func numberOfSections(in tableView: UITableView) -> Int {
return 1
}// Default is 1 if not implemented
public func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat{
return UITableViewAutomaticDimension
}
}
Output-:
I hope that is what you looking for, let me know if any issues.Thanks

Related

ios scrollview with a full screen video as main content

this is the layout i want to acheive
I am trying to figure out how to make this layout work on different screens. i have tried to get the screen height and programatically set the video layer height equal to it. The volume button constrains are 25 from the right margin and 25 from the bottom of the video. The problem is that when i try to run the app the volume button shows in the middle right of the screen instead on the right of the bottom corner. Also the image views are overlapping the video instead of showing up under it. My assumption is that the constrains of these elements see the height of the video layer in the story board, not the height that i set programatically in the ViewController.swift.
You can achieve a more coherent layout with a table view and having a section for your full screen video and the rest of the image views in another section. The section for your video will have UIScreen.main.bounds.height for the cell height so that you can have a dynamic full screen height regardless of the device.
class ViewController: UITableViewController {
var arr: [[String]] = {
var arr = [[String]]()
arr.append(["Video"])
var imageArr = [String]()
for index in 1...20 {
imageArr.append(String(index))
}
arr.append(imageArr)
return arr
}()
override func viewDidLoad() {
super.viewDidLoad()
tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cell")
}
override func numberOfSections(in tableView: UITableView) -> Int {
return arr.count
}
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return arr[section].count
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
cell.textLabel?.text = arr[indexPath.section][indexPath.row]
return cell
}
override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
if indexPath.section == 0 {
return UIScreen.main.bounds.height
} else {
return 100
}
}
}
As for the volume button, you can create a custom cell for the video section and load it in the cellForRowAt method. Make sure you're using Autolayout and not CGRect to position it.
first of all you are working with ScrollView so you need to give each item in you screen a height so you will give the video screen height "Fixed Height" then you will give your button a fixed height as well and connect it from trailing, leading, bottom and Top and I think it will work with you, and if there is any issue appeared feel free to comment with it

UITableViewCell Auto Sizing Issue Swift

This is the custom UITableViewCell I've designed In a xib. The selected element is a UILabel, which is required to be expand with respect to amount of text.
In storyboard cell each element has a constant height with spacing.
Here's the code that I have in a UITableViewController:
class TableViewController: UITableViewController {
private var exampleContent = ["This is a short text.", "This is another text, and it is a little bit longer.", "Wow, this text is really very very long! I hope it can be read completely! Luckily, we are using automatic row height!, Wow, this text is really very very long! I hope it can be read completely! Luckily, we are using automatic row height!"]
override func viewDidLoad() {
super.viewDidLoad()
self.tableView.delegate = self
self.tableView.dataSource = self
tableView.estimatedRowHeight = 224.0
tableView.rowHeight = UITableViewAutomaticDimension
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = Bundle.main.loadNibNamed("DescriptionOnlyCell", owner: self, options: nil)?.first as! DescriptionOnlyCell
cell.label.numberOfLines = 0
cell.label.text = exampleContent[indexPath.row]
return cell
}
override func numberOfSections(in tableView: UITableView) -> Int {
return 1
}
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return exampleContent.count
}
override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return UITableViewAutomaticDimension
}
Output of the code is same exactly as the storyboard cell, no dynamic resizing.
I've read a few threads on stackover and most of them explains same like the code posted above. Though I suspect there's some issue with the storyboard constraints. Any hint would be really helpful.
Instead of setting the constant height values for your labels, set the top and the bottom spacing constraints for all elements and remove height constraints or set their priority lower.
Do the following for the selected label :
Set number of lines = 0
Set lineBreak mode = WordWrap
Set height constraint to >= 15
I am relying on the info you shared that vertical spacing for all UI components is set.
I hope this would fix your resizing.
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
tableView.layoutIfNeeded()
}

How do I set the height for a custom UITableView?

I will be using a dynamic number of cells and resizing the height of the table on that basis. I could work out how to do this myself by I can't seem to resize the table. Whether I use 100 cells or 10 the view is set at the same height.
class generalTableViewController: UITableViewController {
override func viewWillAppear(_ animated: Bool) {
tableView.rowHeight = UITableViewAutomaticDimension
// self.tableView.contentSize.height = 2000
// self.tableView.frame.size.height = 2000
}
override func viewDidLoad() {
super.viewDidLoad()
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
override func numberOfSections(in tableView: UITableView) -> Int {
return 1
}
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 1000
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
return cell
}
}
UITableViewControllers generally take over the entire view. To occupy only a portion of the view with a UITableView use a UIViewController.
You should use a UIViewController subclass rather than a subclass of UITableViewController to manage a table view if the view to be managed is composed of multiple subviews, only one of which is a table view. The default behavior of the UITableViewController class is to make the table view fill the screen between the navigation bar and the tab bar (if either are present).
See here for Apple guidance. You basically just need to take care of some of the things the controller would normally handle for you.

Autosizing UITableView inside custom UIView for section

I have created UIViewController and added UITableView on it (pinned to all four edges with autolayout).
Then I set estimatedRowHeight (44) and rowHeight (UITableViewAutomaticDimension) and returned 5 custom cells. And it worked.
Now, I want to add custom UITableViewHeaderFooterView that would have dynamic height.
I'm doing next:
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return 88.0
}
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
return R.nib.orderStatusHeaderView.firstView(owner: self)!
}
My OrderStatusHeaderView is a xib view that has UITableView on it pinned to all 4 edges with autolayout.
OrderStatusHeaderView:
final class OrderStatusHeaderView: UITableViewHeaderFooterView {
#IBOutlet weak var tableView: UITableView! {
didSet {
tableView.dataSource = self
tableView.delegate = self
tableView.rowHeight = 44.0
}
}
}
extension OrderStatusHeaderView: UITableViewDataSource, UITableViewDelegate {
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 2
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = UITableViewCell(style: .default, reuseIdentifier: "\(indexPath.row)")
cell.textLabel?.text = "\(indexPath.row)"
cell.backgroundColor = .red
return cell
}
}
This displays like:
And when I tap or scroll, all red cells disappears. What could it be? And how to make UITableView dynamically load content and UITableViewHeaderFooterView will size itself so it fit UITableView.contentSize. Is it possible?
Check out:
tableView(_:estimatedHeightForFooterInSection:)
and
tableView(_:heightForFooterInSection:)
You also have the equilavant for headerInSection.
Since you are asking for a table's header and footer view, you can skip the delegate methods you describe. Those (as the name implies) are for SECTION headers and footers.
When you set a view that is using AutoLayout as the table's header or footer, the its frame still has a zero height (That's why buttons in such view for example won't work as they are not receiving the touches).
To correctly size a table's header or footer views using AutoLayout you have to apply a trick to actually calculate the height yourself, and set the headerView again. It is described in detail in many posts like these:
https://stackoverflow.com/a/28102157/756039
https://gist.github.com/marcoarment/1105553afba6b4900c10
http://collindonnell.com/2015/09/29/dynamically-sized-table-view-header-or-footer-using-auto-layout/
http://roadfiresoftware.com/2015/05/how-to-size-a-table-header-view-using-auto-layout-in-interface-builder/
Hope this helps.

Custom UITableView Header set background colour fail

I created a custom UITableViewHeaderFooterView, and the tableview's background colour is white.
self.contentView.backgroundColor = UIColor.clearColor()
However, the section header's background always appears like gray. How can I remove the gray background??
Since I have override the drawRect func of the UITableView, so I want something to appear behind the header view.
I have tried the following:
a) Change the UITableView style to Grouped, the problem goes, but the header cannot glued on top of the table.
b) Use section header title instead of header view
func tableView(tableView: UITableView, titleForHeaderInSection section: Int) -> String?
the header's background is transparent, but I have multiple labels.
Can anyone help me to figure this out?
Thanks to #Omkar, the correct way is set
cell.layer.backgroundColor = UIColor.clearColor().CGColor
You need to set the background colour of the content view to clear color and at the same time you also need to set the background color of the tableView cell to clear color. Place this in your viewForHeaderInSection method. You will then be able to see the color set to the tableView.
YourCell.contentView.backgroundColor = UIColor.clearColor()
YourCell.backgroundColor = UIColor.clearColor()
Please find the attached image for my code and also the table view whose style is plain style in storyboard. And i have also added the image of how it looks after running
Thanks
This is my ViewController code, the only difference is I use headerfootview subclass. I set the tableview's background to blue, and if i pull down a little bit, you will see there looks like a mask on header.
class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
#IBOutlet weak var tableView: UITableView!
override func viewDidLoad() {
super.viewDidLoad()
tableView.dataSource = self
tableView.delegate = self
tableView.registerClass(UITableViewHeaderFooterView.self, forHeaderFooterViewReuseIdentifier: "HeaderCell")
// Do any additional setup after loading the view, typically from a nib.
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
func numberOfSectionsInTableView(tableView: UITableView) -> Int {
return 4
}
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 10
}
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("CustomCell", forIndexPath: indexPath)
cell.textLabel?.text = "\(indexPath.row)"
return cell
}
func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let cell = tableView.dequeueReusableHeaderFooterViewWithIdentifier("HeaderCell") as UITableViewHeaderFooterView!
cell!.textLabel?.text = "Header"
cell!.contentView.backgroundColor = UIColor.clearColor()
cell.backgroundColor = UIColor.clearColor()
return cell
}
}

Resources