iOS - 可扩展和重新排序的 TableView
iOS - Expandable and reordering TableView
我正在 Swift 3 中开发一个应用程序,但是我有一个问题,因为我想制作一个 table :
- 当我们点击单元格展开并看到自定义内容时。
- 当我们 select 单元格时,我们可以更改 table 的显示顺序。
嗯,我附上 "class of the legend" 和 "customCell" 之一的代码:
class LeftSideViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
var selectedIndex = -1
//var menuItems:[String] = ["RGB","PCB", "PCD Zonificado","PCD Arbol","Target Sectors", "Variability Map"]
@IBOutlet weak var tableSideLeft: UITableView!
@IBAction func opacityDelivery(_ sender: UISlider) {
print(sender.value)
}
override func viewDidLoad() {
super.viewDidLoad()
tableSideLeft.isEditing = true
}
func numberOfSections(in tableView: UITableView) -> Int {
return 1
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return snapShotsLegend.legendEntries[0].deliverables.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cellIdentifier = "Cell"
let cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier, for: indexPath) as! customCell
cell.firstViewLabel.text = snapShotsLegend.legendEntries[0].deliverables[indexPath.row].type
cell.secondViewLabel.text = "Option " + snapShotsLegend.legendEntries[0].deliverables[indexPath.row].type
cell.idDeliveryResponse.text = snapShotsLegend.legendEntries[0].deliverables[indexPath.row].options[0].id
cell.initialMaxDeliveryResponse.text = String(snapShotsLegend.legendEntries[0].deliverables[indexPath.row].options[0].initial_max_value)
cell.initialMinDeliveryResponse.text = String(snapShotsLegend.legendEntries[0].deliverables[indexPath.row].options[0].initial_min_value)
cell.maxRangeDeliveryResponse.text = String(snapShotsLegend.legendEntries[0].deliverables[indexPath.row].options[0].max_range)
cell.minRangeDeliveryResponse.text = String(snapShotsLegend.legendEntries[0].deliverables[indexPath.row].options[0].min_range)
cell.backgroundColor = UIColor.init(red: 170/255, green: 170/255, blue: 170/255, alpha: 1)
return cell
}
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
if(selectedIndex == indexPath.row){
return 300
}else{
return 60
}
}
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
if(selectedIndex == indexPath.row){
selectedIndex = -1
}else {
selectedIndex = indexPath.row
}
self.tableSideLeft.beginUpdates()
self.tableSideLeft.reloadRows(at: [indexPath], with: UITableViewRowAnimation.automatic)
self.tableSideLeft.endUpdates()
}
//MARK: FUNCTIONS ALLOWS REORDERING OF CELLS
func tableView(_ tableView: UITableView, canMoveRowAt indexPath: IndexPath) -> Bool {
return true
}
func tableView(_ tableView: UITableView, moveRowAt sourceIndexPath: IndexPath, to destinationIndexPath: IndexPath) {
let item = snapShotsLegend.legendEntries[0].deliverables[sourceIndexPath.row]
snapShotsLegend.legendEntries[0].deliverables.remove(at: sourceIndexPath.row)
snapShotsLegend.legendEntries[0].deliverables.insert(item, at: destinationIndexPath.row)
}
func tableView(_ tableView: UITableView, editingStyleForRowAt indexPath: IndexPath) -> UITableViewCellEditingStyle {
return UITableViewCellEditingStyle.none
}
}
自定义单元格是:
import UIKit
class customCell: UITableViewCell {
//MARK: OUTLETS VIEW 1
@IBOutlet weak var firstView: UIView!
@IBOutlet weak var firstViewLabel: UILabel!
@IBOutlet weak var swichtActiveLayer: UISwitch!
@IBOutlet weak var secondView: UIView!
@IBOutlet weak var secondViewLabel: UILabel!
@IBOutlet weak var secondHeightConstraint: NSLayoutConstraint!
@IBOutlet weak var idDeliveryResponse: UILabel!
@IBOutlet weak var minRangeDeliveryResponse: UILabel!
@IBOutlet weak var maxRangeDeliveryResponse: UILabel!
@IBOutlet weak var initialMinDeliveryResponse: UILabel!
@IBOutlet weak var initialMaxDeliveryResponse: UILabel!
@IBAction func sliderOpacity(_ sender: UISlider) {
print(sender.value)
}
//MARK: OUTLETS VIEW 2
override func awakeFromNib() {
super.awakeFromNib()
// Initialization code
}
override func setSelected(_ selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)
// Configure the view for the selected state
}
var showsDetails = false {
didSet {
secondHeightConstraint.priority = showsDetails ? 250 : 900
}
}
}
何时我可以重新排序单元格(取消注释行“tableSideLeft.isEditing = true
") 我看到了:
当我评论 "tableSideLeft.isEditing = true" 行时,您可以看到:
问题是,如果我离开行 "tableSideLeft.isEditing = true",我可以更改 table 的顺序。但是,我消失了扩大细胞的作用。但是如果我留下那行评论,如果我可以扩展单元格,但不交换单元格。
我怎样才能让他们同时做:)?
谢谢!!
我昨晚刚刚发布了 expanding/collapsing table 查看单元格的另一个问题的答案。还有一个链接到 github 的工作示例项目:
至于更改顺序,通常通过为 table 视图控制器输入 "Edit mode" 来完成。编辑模式包括对插入、删除和重新排序控件的支持。该功能主要是内置的,只需要一点代码来设置它。
要进入该模式,请进行以下调用。
self.tableView.setEditing(editing, animated: animated)
TableViewCell 是您配置编辑选项的地方。在 Interface builder 中,当您 select 原型单元格时,您可以在检查器中设置以下内容:
- 在编辑模式下显示的附件
- 编辑时是否缩进
- 是否显示重排序控制
最后一项是您要确保已选中的内容。
Apple tableView.setEditing docs在描述中给出了一个不错的概述。
在此 post 中是一个如何使用自动版式进行操作的示例
http://sweettutos.com/2016/07/31/how-to-make-expandable-uitableviewcells-for-dynamic-text-height-with-auto-layout/
我正在 Swift 3 中开发一个应用程序,但是我有一个问题,因为我想制作一个 table :
- 当我们点击单元格展开并看到自定义内容时。
- 当我们 select 单元格时,我们可以更改 table 的显示顺序。
嗯,我附上 "class of the legend" 和 "customCell" 之一的代码:
class LeftSideViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
var selectedIndex = -1
//var menuItems:[String] = ["RGB","PCB", "PCD Zonificado","PCD Arbol","Target Sectors", "Variability Map"]
@IBOutlet weak var tableSideLeft: UITableView!
@IBAction func opacityDelivery(_ sender: UISlider) {
print(sender.value)
}
override func viewDidLoad() {
super.viewDidLoad()
tableSideLeft.isEditing = true
}
func numberOfSections(in tableView: UITableView) -> Int {
return 1
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return snapShotsLegend.legendEntries[0].deliverables.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cellIdentifier = "Cell"
let cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier, for: indexPath) as! customCell
cell.firstViewLabel.text = snapShotsLegend.legendEntries[0].deliverables[indexPath.row].type
cell.secondViewLabel.text = "Option " + snapShotsLegend.legendEntries[0].deliverables[indexPath.row].type
cell.idDeliveryResponse.text = snapShotsLegend.legendEntries[0].deliverables[indexPath.row].options[0].id
cell.initialMaxDeliveryResponse.text = String(snapShotsLegend.legendEntries[0].deliverables[indexPath.row].options[0].initial_max_value)
cell.initialMinDeliveryResponse.text = String(snapShotsLegend.legendEntries[0].deliverables[indexPath.row].options[0].initial_min_value)
cell.maxRangeDeliveryResponse.text = String(snapShotsLegend.legendEntries[0].deliverables[indexPath.row].options[0].max_range)
cell.minRangeDeliveryResponse.text = String(snapShotsLegend.legendEntries[0].deliverables[indexPath.row].options[0].min_range)
cell.backgroundColor = UIColor.init(red: 170/255, green: 170/255, blue: 170/255, alpha: 1)
return cell
}
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
if(selectedIndex == indexPath.row){
return 300
}else{
return 60
}
}
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
if(selectedIndex == indexPath.row){
selectedIndex = -1
}else {
selectedIndex = indexPath.row
}
self.tableSideLeft.beginUpdates()
self.tableSideLeft.reloadRows(at: [indexPath], with: UITableViewRowAnimation.automatic)
self.tableSideLeft.endUpdates()
}
//MARK: FUNCTIONS ALLOWS REORDERING OF CELLS
func tableView(_ tableView: UITableView, canMoveRowAt indexPath: IndexPath) -> Bool {
return true
}
func tableView(_ tableView: UITableView, moveRowAt sourceIndexPath: IndexPath, to destinationIndexPath: IndexPath) {
let item = snapShotsLegend.legendEntries[0].deliverables[sourceIndexPath.row]
snapShotsLegend.legendEntries[0].deliverables.remove(at: sourceIndexPath.row)
snapShotsLegend.legendEntries[0].deliverables.insert(item, at: destinationIndexPath.row)
}
func tableView(_ tableView: UITableView, editingStyleForRowAt indexPath: IndexPath) -> UITableViewCellEditingStyle {
return UITableViewCellEditingStyle.none
}
}
自定义单元格是:
import UIKit
class customCell: UITableViewCell {
//MARK: OUTLETS VIEW 1
@IBOutlet weak var firstView: UIView!
@IBOutlet weak var firstViewLabel: UILabel!
@IBOutlet weak var swichtActiveLayer: UISwitch!
@IBOutlet weak var secondView: UIView!
@IBOutlet weak var secondViewLabel: UILabel!
@IBOutlet weak var secondHeightConstraint: NSLayoutConstraint!
@IBOutlet weak var idDeliveryResponse: UILabel!
@IBOutlet weak var minRangeDeliveryResponse: UILabel!
@IBOutlet weak var maxRangeDeliveryResponse: UILabel!
@IBOutlet weak var initialMinDeliveryResponse: UILabel!
@IBOutlet weak var initialMaxDeliveryResponse: UILabel!
@IBAction func sliderOpacity(_ sender: UISlider) {
print(sender.value)
}
//MARK: OUTLETS VIEW 2
override func awakeFromNib() {
super.awakeFromNib()
// Initialization code
}
override func setSelected(_ selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)
// Configure the view for the selected state
}
var showsDetails = false {
didSet {
secondHeightConstraint.priority = showsDetails ? 250 : 900
}
}
}
何时我可以重新排序单元格(取消注释行“tableSideLeft.isEditing = true ") 我看到了:
当我评论 "tableSideLeft.isEditing = true" 行时,您可以看到:
问题是,如果我离开行 "tableSideLeft.isEditing = true",我可以更改 table 的顺序。但是,我消失了扩大细胞的作用。但是如果我留下那行评论,如果我可以扩展单元格,但不交换单元格。
我怎样才能让他们同时做:)?
谢谢!!
我昨晚刚刚发布了 expanding/collapsing table 查看单元格的另一个问题的答案。还有一个链接到 github 的工作示例项目:
至于更改顺序,通常通过为 table 视图控制器输入 "Edit mode" 来完成。编辑模式包括对插入、删除和重新排序控件的支持。该功能主要是内置的,只需要一点代码来设置它。
要进入该模式,请进行以下调用。
self.tableView.setEditing(editing, animated: animated)
TableViewCell 是您配置编辑选项的地方。在 Interface builder 中,当您 select 原型单元格时,您可以在检查器中设置以下内容:
- 在编辑模式下显示的附件
- 编辑时是否缩进
- 是否显示重排序控制
最后一项是您要确保已选中的内容。
Apple tableView.setEditing docs在描述中给出了一个不错的概述。
在此 post 中是一个如何使用自动版式进行操作的示例 http://sweettutos.com/2016/07/31/how-to-make-expandable-uitableviewcells-for-dynamic-text-height-with-auto-layout/