如何使用collectionView在swift中显示以下场景层次结构?

时间:2016-08-09 14:24:57

标签: ios swift storyboard tableview xib

我有以下显示场景可用。我很困惑我应该采用什么类型的控件层次来在xib中显示这些类型的视图。

enter image description here

enter image description here

请提供展示这些类型场景的想法。因为我的物品是动态的。它没有固定。因此,如果我使用tableview显示第一个项目及其类别,那么我应该在哪里显示其余项目。

被修改

我选了四节。在第1部分收集和交付按钮。在第3注释和第4次过敏&查看 。 在第二个我的订单项目在那里。但在这里我有两个级别的数据..订购项目名称像鸡肉kabab小,...等和第二级其插件像纯纳,瓶饮料,...等。这里我的订单项目也在细胞中迭代因为我的插件正在迭代。我在单元格中输入了订单商品名称。现在我应该在哪里以编程方式获取插件项目以及如何根据其中的所有内容设置每个单元格的大小。

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
  }

我的自定义单元代码

 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)
}

}

1 个答案:

答案 0 :(得分:2)

正如我们的伙伴已经说过使用tableview和部分,在这里我们将采用相同的方式。因为这是一个广泛的主题来解释我会给出一些提示,最后你可以找到演示项目的链接。 / p>

  • 首先在故事板中添加一个tableview,然后添加集合投放& 您的订单对象作为tableview 标题
  • 使用UITableviewcell创建xib的新类子类,并将其命名为 Cell1 。现在添加删除图标,< strong>主菜标签和价格标签,对于我们将使用其他UITableview的子项目。
  • 现在创建另一个UITableviewcell,其xib名称为 Cell2 ,为子项及其价格准备xib。
  • 在cell1 numberOfSectionsInTableView返回主菜计数,并在numberOfRowsInSection返回1,现在加载各自标签中的所有主菜的名称
  • 到目前为止,我们有一些部分(取决于主要项目的数量)每个部分有一个UITableview
  • 现在我们必须根据 SubItems count 更改tableview单元格的高度动态。所以在heightForRowAtIndexPath我添加了以下行

    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
    }
    

    由于很难解释所有内容,我已为heightForRowAtIndexPath提供代码。在查看演示项目时,您将了解所有内容

注意:目前我们已经加载了所有主菜的详细信息,并且我们已经为即将到来的子项目提供了足够的空间。

  • Cell1 类中,在awakeFromNib中添加tableview委托和数据源,根据需要添加所有数据源方法。将numberOfSectionsInTableView设置为 1 numberOfRowsInSection 子项目计数

  • 我们根据您的要求动态加载了tableview 动态

  • 现在最后添加折扣总计留言&amp;单独的tableviewcell类中的 Checkout 对象会在最后一个索引处加载它。

  • 或者添加在UIView中添加所有这些对象,并将其添加为Main tableview's页脚。

注意:以上提示仅供参考,为了更好地说明概念,我添加了demo project's github repo

结果:

enter image description here enter image description here