问题描述
我创建了Expandable table view单元格,就像下面提到的图像一样.使用的库为 JExpandableTableView .
I created the Expandable table view cells which is like Below mentioned image.Library used is JExpandableTableView.
下面给出了创建此ExpandableTable视图的代码:
Code for Creating This ExpandableTable View is given below :
板块模型:
class SectionInfo: NSObject {
var cells = [CellInfo]()
var CategoryName: String
var CategoryCount: String
var CategoryImage: UIImage
init(_ text: String,SubCount: String, Image: UIImage ) {
self.CategoryName = text
self.CategoryCount = SubCount
self.CategoryImage = Image
}
}
SubCategoryCell的模型:
class CellInfo: NSObject {
var SubcategoryName: String!
var SubcategoryCount: String!
init(_ SubName: String, SubCount: String) {
self.SubcategoryName = SubName
self.SubcategoryCount = SubCount
}
}
视图控制器:
class CategoryVC: BaseVC,JExpandableTableViewDataSource,JExpandableTableViewDelegate{
@IBOutlet weak var tblViewCategory: JExpandableTableView!
var tableViewData = [SectionInfo]()
var expandedIndexPath: IndexPath?
override func viewDidLoad() {
super.viewDidLoad()
self.title = "Category"
self.tblViewCategory.dataSource = self
self.tblViewCategory.delegate = self
self.tblViewCategory.keepPreviousCellExpanded = false
self.LoadData()
}
func LoadData() {
var cellInfo = CellInfo("SubCategory 1",SubCount: "10")
let sec1 = SectionInfo("Category 1", SubCount: "5", Image: UIImage(named: "Category3")!)
sec1.cells.append(cellInfo)
let sec2 = SectionInfo("Category 2", SubCount: "8", Image: UIImage(named: "Category3")!)
cellInfo = CellInfo("SubCategory 2",SubCount: "20")
sec2.cells.append(cellInfo)
cellInfo = CellInfo("SubCategory 2.1",SubCount: "30")
sec2.cells.append(cellInfo)
let sec3 = SectionInfo("Category 3", SubCount: "10", Image: UIImage(named: "Category3")!)
cellInfo = CellInfo("SubCategory 3",SubCount: "30")
sec3.cells.append(cellInfo)
tableViewData.append(sec1)
tableViewData.append(sec2)
tableViewData.append(sec3)
let celNib = UINib.init(nibName: "SubCategoryCell", bundle: nil)
tblViewCategory.register(celNib, forCellReuseIdentifier: "SubCategoryCell")
let headerNib = UINib.init(nibName: "HeaderView", bundle: nil)
tblViewCategory.register(headerNib, forHeaderFooterViewReuseIdentifier: "HeaderView")
}
@IBAction func DrawerMenutap(_ sender: Any) {
self.OpenDrawerMenu()
}
func tableView(_ tableView: JExpandableTableView, numberOfRowsInSection section: Int, callback: @escaping (Int) -> Void) {
let sectionInfo = self.tableViewData[section]
callback(sectionInfo.cells.count)
}
func tableView(_ tableView: JExpandableTableView, heightForHeaderInSection section: Int) -> CGFloat {
return 150
}
func tableView(_ tableView: JExpandableTableView, heightForRowAtIndexPath indexPath: IndexPath) -> CGFloat {
return 44
}
func tableView(_ tableView: JExpandableTableView, initialNumberOfRowsInSection section: Int) -> Int {
// let sectionInfo = self.tableViewData[section]
return 0
}
func numberOfSections(in tableView: JExpandableTableView) -> Int {
return tableViewData.count
}
func tableView(_ tableView: JExpandableTableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell{
let section = tableViewData[indexPath.section]
let row = section.cells[indexPath.row]
let cell = tableView.dequeueReusableCell(withIdentifier: "SubCategoryCell", for: indexPath) as! SubCategoryCell
cell.contentView.backgroundColor = UIColor.white
cell.lblSubCategoryName.text = row.SubcategoryName
return cell
}
func tableView(_ tableView: JExpandableTableView, viewForHeaderInSection section: Int) -> UIView? {
let section = self.tableViewData[section]
let header = tableView.dequeueReusableHeaderFooterView(withIdentifier: "HeaderView") as! HeaderView
header.contentView.backgroundColor = UIColor.groupTableViewBackground
header.CatName.text = section.CategoryName
header.CatImgView.image = UIImage(named: "Category4")
header.CatCount.text = section.CategoryCount
return header
}
}
//MARK: Table View Cell for Category
class CatCell: UITableViewCell {
@IBOutlet weak var lblName: UILabel!
}
我的进一步要求是我想扩展单元格(子类别2,子类别2.1),以便容纳SubSubCategory(子类别的子代)(如果存在).那么实现这一目标的方法应该是什么.
推荐答案
UITableView的设计确实可以显示两个级别,节和行.
但是要显示两个以上的级别,您可以根据部分,子类别的模型来操纵将增加/扩展或减少/折叠的行.
But to show more then two levels you can manipulate rows that will increase/expand or decrease/collapse according to your model for Section, SubCategory.
所以表结构看起来像这样
section_header_1
subCategory_1.0
subSubCategory_1.0.1
subCategory_1.1
subSubCategory_1.1.1
subCategory_1.2
subSubCategory_1.2.1
section_header_2
subCategory_2.0
subSubCategory_2.0.1
subCategory_2.1
subSubCategory_2.1.1
subCategory_2.2
subSubCategory_2.2.1
对于标题,您必须创建自己的自定义标题行,并将其作为每个节的第一行.您可以像标题一样将单元格设置为LOOK,然后设置tableView:didSelectRowAt
手动展开或折叠其所在的节,subCategory或SubSubCategory.第一行之后的行将是您的subCategory和subSubCategory.
For Header you have to make your own custom header row and put that as the first row of each section. You could set up a cell to LOOK like a header, and setup the tableView:didSelectRowAt
to manually expand or collapse the section, subCategory or SubSubCategory it is in. the rows after first row will be your subCategory and subSubCategory.
然后创建一个用于节SubCategory和SubSubCategory的模型,以存储一个布尔值,该布尔值对应于您的每个节subCategories的"expend"值.如果只存储其名称,则可以避免使用SubSubCategory模型,但是这样做很容易理解.例如,一个用于保存Section的结构,SubCategory"expend"布尔值.
Then a Model For Section, SubCategory and SubSubCategory to store a booleans corresponding the the "expend" value of each of your sections, subCategories. you can avoid SubSubCategory model if it's only store it's name but it's easy to understand if you do so. for an example a struct for holding Section, SubCategory "expend" booleans.
public struct Section {
var name: String
var expand: Bool
var subCategory:[SubCategory]
public init(name: String, expand: Bool = false ,subCategory: [SubCategory]) {
self.name = name
self.expand = expand
self.subCategory = subCategory
}
}
public struct SubCategory {
var name: String
var expand: Bool
var subSubCategory: SubSubCategory
public init(name: String, expand: Bool = false, subSubCategory: SubSubCategory) {
self.name = name
self.expand = expand
self.subSubCategory = subSubCategory
}
}
public struct SubSubCategory {
var name: String
public init(name: String) {
self.name = name
}
}
创建3个自定义单元格,一个用于Header
,另一个用于SubCategory
和SubSubCategory
,并将其显示在每个部分Header Cell
的第一行中,并在展开或折叠相应显示您的SubCategory
或SubSubCategory
单元格.
Create 3 Custom cell one for Header
other for SubCategory
and SubSubCategory
and display it in the first row of every section Header Cell
and after expand or collapse show your SubCategory
or SubSubCategory
Cell accordingly.
毕竟,您的代码应该看起来像这样.
after all together your code should be look that that.
import UIKit
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
@IBOutlet weak var tableView: UITableView!
var sampleData: [Section] = [
Section(name: "Category 1", expand: false,
subCategory: [
SubCategory(name: "Category 1.1", expand: false, subSubCategory: SubSubCategory(name: "SubSubCategory 1.1.1")),
SubCategory(name: "Category 1.2", expand: false, subSubCategory: SubSubCategory(name: "SubSubCategory 1.2.1"))
]
),
Section(name: "Category 2", expand: false,
subCategory: [
SubCategory(name: "Category 2.1", expand: false, subSubCategory: SubSubCategory(name: "SubSubCategory 2.1.1")),
SubCategory(name: "Category 2.2", expand: false, subSubCategory: SubSubCategory(name: "SubSubCategory 2.2.1"))
]
)
]
override func viewDidLoad() {
super.viewDidLoad()
}
//
// MARK: - View Controller DataSource and Delegate
//
func numberOfSections(in tableView: UITableView) -> Int {
return sampleData.count
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
var expandCount = 0
if sampleData[section].expand {
// if header is expanded all subCategory will be also expanded
expandCount = sampleData[section].subCategory.count
for subCategory in sampleData[section].subCategory{
//check for how many subSubCategory is expanded
if subCategory.expand{
expandCount += 1
}
}
}
// returning the count of total expanded SubCategories and SubSubCategories
// 1 is for header you can remove if you are using `viewForHeaderInSection`
return 1 + expandCount
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
// Header cell
if indexPath.row == 0 {
let cell = tableView.dequeueReusableCell(withIdentifier: "header")!
return cell
}else{
var countValue = 0
var indexSubCategory = 0
let sampleDataSection = sampleData[indexPath.section]
// check for how many "subCategory" expanded or collapsed
if sampleDataSection.expand{
for (index, subCategory) in sampleDataSection.subCategory.enumerated(){
countValue += 1
if countValue >= indexPath.row{
indexSubCategory = index
break
}
// check for how many "subSubCategory" expanded or collapsed
if subCategory.expand{
if index == sampleDataSection.subCategory.count-1{
countValue += 2
indexSubCategory = index + 1
}else{
countValue += 1
}
}
}
// if countValue is grater then indexPath.row it will return "subSubCategory" cell
// else/countValue = indexPath.row then return "subCategory" cell
if countValue > indexPath.row{
// Cell subSubCategory
let cell = tableView.dequeueReusableCell(withIdentifier: "subSubCategory")!
cell.textLabel?.text = self.sampleData[indexPath.section].subCategory[indexSubCategory - 1].subSubCategory.name
return cell
}else{
// Cell subCategory
let cell = tableView.dequeueReusableCell(withIdentifier: "subCategory")!
cell.textLabel?.text = self.sampleData[indexPath.section].subCategory[indexSubCategory].name
return cell
}
}
else{
// Cell subCategory
let cell = tableView.dequeueReusableCell(withIdentifier: "subCategory")!
cell.textLabel?.text = self.sampleData[indexPath.section].subCategory[indexPath.row].name
return cell
}
}
}
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
// then header cell is selected switch between collapse or expand between "subCategory"
if indexPath.row == 0{
let expand = !sampleData[indexPath.section].expand
//Toggle collapse
sampleData[indexPath.section].expand = expand
self.tableView.reloadSections([indexPath.section], with: .none)
}else{
var countValue = 0
var indexSubCategory = 0
let sampleDataSection = sampleData[indexPath.section]
if sampleDataSection.expand{
for (index, subCategory) in sampleDataSection.subCategory.enumerated(){
countValue += 1
if countValue >= indexPath.row{
indexSubCategory = index
break
}
if subCategory.expand{
if index == sampleDataSection.subCategory.count-1{
countValue += 2
indexSubCategory = index + 1
}else{
countValue += 1
}
}
}
// and if "subCategory" cell is selected switch between collapse or expand between "subSubCategory"
if countValue == indexPath.row{
let subSubCategory = sampleData[indexPath.section].subCategory[indexSubCategory]
let expand = !subSubCategory.expand
sampleData[indexPath.section].subCategory[indexSubCategory].expand = expand
UIView.performWithoutAnimation {
self.tableView.reloadSections([indexPath.section], with: .none)
self.tableView.layoutIfNeeded()
}
}
}
}
}
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return UITableViewAutomaticDimension
}
func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
return CGFloat.leastNormalMagnitude
}
}
从下载演示项目 此处
这篇关于扩展可扩展表格View单元格到进一步的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!