TableView中有两个自定义单元格布局

时间:2017-05-27 16:48:52

标签: ios swift

我在mainStoryboard上有一个带有两个自定义单元格的tableView。

我想在不同的行再设置两个单元格。我试图找到答案,但无法找到答案。

我在下面添加了图片和代码。

enter image description here

enter image description here

   class HomeViewController: UIViewController, UITableViewDelegate, UITableViewDataSource, MFMailComposeViewControllerDelegate {

        @IBOutlet var tblStoryList: UITableView!

        var array = PLIST.shared.mainArray



        override func viewDidLoad() {
            super.viewDidLoad()


        //spacing between header and cell
            self.tblStoryList.contentInset = UIEdgeInsetsMake(-20, 0, 0, 0)

          //delete separator of UITableView
        tblStoryList.separatorStyle = .none

        }
       func numberOfSections(in tableView: UITableView) -> Int {
            return 1
        }

        func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
            return self.array.count + 1
        }



         func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
            if indexPath.row == 0 {
                let cell  = tableView.dequeueReusableCell(withIdentifier: "HeaderCell", for: indexPath) as! HeaderCell
                cell.headerTitle.text = "First Stage"
                return cell
            }

            let cell = tableView.dequeueReusableCell(withIdentifier: "StoryTableviewCell", for: indexPath) as! StoryTableviewCell


            //making plist file
            let dict = self.array[indexPath.row - 1]
            let title = dict["title"] as! String
            let imageName = dict["image"] as! String
            let temp = dict["phrases"] as! [String:Any]
            let arr = temp["array"] as! [[String:Any]]
            let detail = "progress \(arr.count)/\(arr.count)"

            //property to plist file
            cell.imgIcon.image = UIImage.init(named: imageName)
            cell.lblTitle.text = title
            cell.lblSubtitle.text = detail

            cell.selectionStyle = UITableViewCellSelectionStyle.none


            return cell
        }

2 个答案:

答案 0 :(得分:1)

更新HeaderCell的条件,并使用三元运算符设置headerTitle

if indexPath.row == 0 || indexPath.row == 3 || indexPath.row == 5 {
    let cell  = tableView.dequeueReusableCell(withIdentifier: "HeaderCell", for: indexPath) as! HeaderCell
    cell.headerTitle.text = indexPath.row == 0 ? "First Stage" : indexPath.row == 3 ? "Second Stage" : "Third Stage"
    return cell
}

答案 1 :(得分:0)

不要将Stages用作行,而是将它们用作节标题。您可以在标题部分放置自定义视图。

主要想法: 将您的行与阶段一起划分,将单元格的数据放入数组中,并将它们添加到字典中,并将section值作为其键。为了使您的案例可视化,字典将如下所示。

@{
     @"First Stage" : @[object_for_basic_grammar_1,
                        object_for_basic_grammar_2
                       ],
     @"Second Stage": @[object_for_basic_grammar3],
     ...
     ...
}

并且需要另一个数组来存储字典键的顺序,这些数组将可视化到下面的

@[@"First Stage", @"Second Stage"
]

现在一步一步地按照列表:

  1. 使用numberOfSections(in:)提供此处有多少个阶段。返回存储节的数组的计数。
  2. 使用tableView(_:numberOfRowsInSection:)提供该部分中的行数。从稍后声明的节列表数组中获取节字符串对象,并搜索字典中的行。你会在这里找到一组语法,返回那个数组的计数。
  3. 使用tableView(_:cellForRowAt:)为语法单元格提供该行的特定单元格。
  4. 使用tableView(_:heightForHeaderInSection:)为部分标题提供高度。
  5. 现在实现tableView(_:viewForHeaderInSection:)并返回视图以指定剖面视图,在您的情况下是阶段。
  6. 希望它对你有所帮助,祝你好运。