how can I display the following scenes hierarchy in swift using collectionView? - ios

Question

I have the following display scenes available. I am getting confused what type of hierarchy of controls I should take to display these type of view in xib .
please give ideas to show these types of scenes. because my items are coming dynamically . Its not fixed. so if I took tableview to display the first items and its categories then where should i display the rest items.
Edited
I took four sections. In 1st section collection and delivery buttons. In 3rd notes and in 4th allergy & checkout .
In 2nd my order items are there. but here I have two level of data.. order item name like chicken kabab small,... etc and 2nd level its addons like plain nan, bottle of drink,... etc. Here my order items is iterating in cell as well as my addons are iterating. I took the order items name in cell. now where should i take the addon items programatically and how to set the size of each cell based on its all contents inside it.
class cartVC: UIViewController ,UITableViewDataSource,UITableViewDelegate,UITextViewDelegate{
var tableData = ["al","dbd","gdge","kjdkas","al","dbd","gdge","kjdkas","al","dbd","gdge","kjdkas","al","dbd","gdge","kjdkas"]
var mainview = UIView()
#IBOutlet weak var cartTableView: UITableView!
#IBAction func backBtn(sender: AnyObject) {
self.dismissViewControllerAnimated(true, completion: nil)
}
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
func changeColor(sender:UISegmentedControl){
switch(sender.selectedSegmentIndex){
case 0:
print("collection clicked")
case 1:
print("delivery clicked")
default:
self.view.backgroundColor = UIColor.blueColor()
}
}
func numberOfSectionsInTableView(tableView: UITableView) -> Int {
return 4
}
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
var rowcount = 0
if section == 0{
rowcount = 0
}
if section == 1 {
rowcount = tableData.count
}
if section == 2{
rowcount == 0
}
if section == 3{
rowcount == 0
}
return rowcount
}
func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
if section == 0{
let headerView = UIView()
//set the frame
let frame = UIScreen.mainScreen().bounds
// headerView.frame = CGRectMake(0, 0, tableView.frame.size.width, 60)
headerView.frame = CGRectMake(frame.minX , frame.minY, frame.width, 60)
headerView.backgroundColor = UIColor.whiteColor()
//Initialize segment control
let items = ["Collection","Delivery"]
let customSC = UISegmentedControl(items: items)
customSC.selectedSegmentIndex = 0
//set the frame amd segmented control
customSC.frame = CGRectMake(frame.minX + 10, frame.minY + 5, frame.width - 20, 30)
// style the segmented control
customSC.layer.cornerRadius = 5.0
customSC.backgroundColor = UIColor.clearColor()
customSC.tintColor = UIColor.redColor()
//add target action method
customSC.addTarget(self, action: #selector(CartViewController.changeColor(_:)), forControlEvents: .ValueChanged)
//add subview
headerView.addSubview(customSC)
//Add label
let headinglbl = UILabel(frame: CGRect(x: frame.minX + 10, y: frame.minY + 40, width: tableView.frame.size.width, height: 20))
headinglbl.text = "Your Order"
headinglbl.font = UIFont.boldSystemFontOfSize(17)
headinglbl.textColor = UIColor.blackColor()
headinglbl.textAlignment = .Center
headerView.addSubview(headinglbl)
mainview = headerView
}
if section == 2{
let totalView = UIView()
totalView.frame = CGRectMake(0, 0, tableView.frame.size.width, 60)
totalView.backgroundColor = UIColor.clearColor()
//Add discount label
let discount = 14.5
let discountlbl = UILabel(frame: CGRectMake(10, 0, tableView.frame.size.width, 20))
discountlbl.text = "Online Collection Discount(\(discount)%)"
discountlbl.font = UIFont.systemFontOfSize(14)
discountlbl.textColor = UIColor.darkGrayColor()
discountlbl.textAlignment = .Left
totalView.addSubview(discountlbl)
//Add discount price
let discountprice = UILabel(frame: CGRectMake(tableView.frame.size.width-60, 0, tableView.frame.size.width, 20))
discountprice.text = "£ 1.27"
discountprice.font = UIFont.systemFontOfSize(14)
discountprice.textColor = UIColor.blackColor()
discountprice.textAlignment = .Left
totalView.addSubview(discountprice)
//Add label
let lbl = UILabel(frame: CGRectMake(10, 20, tableView.frame.size.width, 40))
lbl.text = "Total"
lbl.font = UIFont.boldSystemFontOfSize(20)
lbl.textColor = UIColor.blackColor()
lbl.textAlignment = .Left
totalView.addSubview(lbl)
//calculate amount label
let totalAmountLbl = UILabel(frame: CGRectMake(totalView.frame.width-70, 20, totalView.frame.width, 40))
totalAmountLbl.text = "£ 0.0"
totalAmountLbl.font = UIFont.boldSystemFontOfSize(20)
totalAmountLbl.textColor = UIColor.blackColor()
totalAmountLbl.textAlignment = .Left
totalView.addSubview(totalAmountLbl)
mainview = totalView
}
if section == 3{
let footerView = UIView()
footerView.frame = CGRectMake(0, 0, tableView.frame.size.width, 200)
footerView.backgroundColor = UIColor.clearColor()
//Add note label
let notelbl = UILabel(frame: CGRectMake(10, 10, tableView.frame.size.width, 20))
notelbl.text = "Leave a note"
notelbl.font = UIFont.boldSystemFontOfSize(17)
notelbl.textColor = UIColor.blackColor()
notelbl.textAlignment = .Left
footerView.addSubview(notelbl)
//Add a note textview
let noteTxt = UITextView()
noteTxt.frame = CGRectMake(10, 40, footerView.frame.width-20, 50)
noteTxt.backgroundColor = UIColor.lightGrayColor()
noteTxt.keyboardType = UIKeyboardType.Default
noteTxt.text = "e.g. Instructions about yout order"
noteTxt.textColor = UIColor.blackColor()
noteTxt.delegate = self
footerView.addSubview(noteTxt)
// Add allergy button
let allergyBtn = UIButton(type:.System)
allergyBtn.frame = CGRectMake(50, 100, 200, 20)
allergyBtn.setTitle("Do You have any allergy ?", forState: .Normal)
allergyBtn.setTitleColor(UIColor.redColor(), forState: .Normal)
allergyBtn.titleLabel?.font = UIFont(name: "", size: 10)
footerView.addSubview(allergyBtn)
// Add checkout button
let checkoutBtn = UIButton(type:.System)
checkoutBtn.frame = CGRectMake(100, 140, 100, 40)
checkoutBtn.setTitle("Check out", forState: .Normal)
checkoutBtn.setTitleColor(UIColor.whiteColor(), forState: .Normal)
checkoutBtn.titleLabel?.font = UIFont(name: "", size: 10)
checkoutBtn.backgroundColor = UIColor.redColor()
checkoutBtn.layer.cornerRadius = 5
footerView.addSubview(checkoutBtn)
mainview = footerView
}
return mainview
}
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("cartcell")! as! CartTableViewCell
cell.itemLabel.text = tableData[indexPath.row]
return cell
}
func tableView(tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
var heightCount:CGFloat = 0
if section == 0{
heightCount = 60.0
}
if section == 2{
heightCount = 60.0
}
if section == 3{
heightCount = 200.0
}
return heightCount
}
My customcell code
import UIKit
class CartTableViewCell: UITableViewCell {
let padding: CGFloat = 5
var background: UIView!
var itemLabel: UILabel!
var priceLabel: UILabel!
var deleteBtn:UIButton!
override func awakeFromNib() {
super.awakeFromNib()
backgroundColor = UIColor.clearColor()
selectionStyle = .None
background = UIView(frame: CGRectZero)
background.alpha = 0.6
contentView.addSubview(background)
deleteBtn = UIButton(frame: CGRectZero)
deleteBtn.setImage(UIImage(named: "deleteBin.png"), forState: .Normal)
contentView.addSubview(deleteBtn)
itemLabel = UILabel(frame: CGRectZero)
itemLabel.textAlignment = .Left
itemLabel.textColor = UIColor.whiteColor()
contentView.addSubview(itemLabel)
priceLabel = UILabel(frame: CGRectZero)
priceLabel.textAlignment = .Center
priceLabel.textColor = UIColor.whiteColor()
contentView.addSubview(priceLabel)
}
override func layoutSubviews() {
super.layoutSubviews()
background.frame = CGRectMake(0, padding, frame.width, frame.height-2 * padding)
deleteBtn.frame = CGRectMake(padding, (frame.height - 25)/2, 40, 25)
priceLabel.frame = CGRectMake(frame.width-100, padding, 100, frame.height - 2 * padding)
itemLabel.frame = CGRectMake(CGRectGetMaxX(deleteBtn.frame) + 10, 0, frame.width - priceLabel.frame.width - CGRectGetMaxX(deleteBtn.frame) + 10, frame.height)
}
}

Answer 1

As our mates already said about using tableview and sections, Here we gonna follow the same way.Since it is a broad topic to explain i'll give some hint and at last you can find link for demo project.
First add a tableview in your storyboard then add collection,Delivery & Your order objects as tableview header
Create a new class subclass of UITableviewcell with xib let's name it as Cell1.Now add delete icon, main dish label and price label,for sub items we gonna use another UITableview.
Now create another UITableviewcell with xib name it as Cell2, prepare that xib for sub items and their price.
In cell1 numberOfSectionsInTableView return number of main dish count and in numberOfRowsInSection return 1, Now load name of all main dishes in their respective label's
Upto now we having some number of section(depending on number of main items) each section having one UITableview.
Now we have to change height of tableview cell dynamically depending on SubItems count. so in heightForRowAtIndexPath i have added following lines
func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
let subItems = tableContainer![indexPath.section].valueForKey("additional_items") as! NSArray
var defaultCellHeight:CGFloat = 37//Consider 37 as height of cell without subitems
//Following for loop keeps on increasing defaultCellHeight depending on available count
for _ in subItems {
defaultCellHeight += 37
}
return defaultCellHeight + 20
}
Since it is hard to explain everything deeply i have provide code for heightForRowAtIndexPath.While looking into the demo project you'll understand everything
NOTE : Upto now we have loaded all main dishes details, and we have provided enough room for upcoming sub item's.
In Cell1 class add tableview delegate and datasource in awakeFromNib,add all datasource methods as required.set numberOfSectionsInTableView as 1 and numberOfRowsInSection as subitem count
That's it we have loaded tableview dynamically as per your requirement.
Now at last add discount, total, leave a note& Checkout objects in separate tableviewcell class an load it at last index.
Or add add all those objects inside a UIView and add it as Main tableview's footer.
NOTE : The above hints are just for reference, For better clarification of concept i have added a demo project's github repo.
RESULT :