一 .资源学习
0.「静态TableView」(http://www.xiaoboswift.com/course/47/task/397/show)
1.「TableView概述」(http://www.xiaoboswift.com/course/90/task/780/show)
2.「自定义TableView」(http://www.xiaoboswift.com/course/91/task/789/show)
3.「TableView改造」(http://www.xiaoboswift.com/course/91/task/802/show)
4.「TableView样式优化:背景亮度/单元格透明/分割线亮度」(http://www.xiaoboswift.com/course/91/task/803/show)
二.使用
1.故事版中直接拖入一个TableViewController
TableViewController.png
2.新建TableViewController对应的控制器MyTableViewController,父类为UITableViewController
//
// MyTableViewController.swift
// JackUChat
//
// Created by 徐云 on 2019/1/4.
// Copyright © 2019 Liy. All rights reserved.
//
import UIKit
class MyTableViewController: UITableViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Uncomment the following line to preserve selection between presentations
// self.clearsSelectionOnViewWillAppear = false
// Uncomment the following line to display an Edit button in the navigation bar for this view controller.
// self.navigationItem.rightBarButtonItem = self.editButtonItem
}
// MARK: - Table view data source
override func numberOfSections(in tableView: UITableView) -> Int {
// #warning Incomplete implementation, return the number of sections
return 0
}
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
// #warning Incomplete implementation, return the number of rows
return 0
}
/*
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "reuseIdentifier", for: indexPath)
// Configure the cell...
return cell
}
*/
/*
// Override to support conditional editing of the table view.
override func tableView(_ tableView: UITableView, canEditRowAt indexPath: IndexPath) -> Bool {
// Return false if you do not want the specified item to be editable.
return true
}
*/
/*
// Override to support editing the table view.
override func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCellEditingStyle, forRowAt indexPath: IndexPath) {
if editingStyle == .delete {
// Delete the row from the data source
tableView.deleteRows(at: [indexPath], with: .fade)
} else if editingStyle == .insert {
// Create a new instance of the appropriate class, insert it into the array, and add a new row to the table view
}
}
*/
/*
// Override to support rearranging the table view.
override func tableView(_ tableView: UITableView, moveRowAt fromIndexPath: IndexPath, to: IndexPath) {
}
*/
/*
// Override to support conditional rearranging of the table view.
override func tableView(_ tableView: UITableView, canMoveRowAt indexPath: IndexPath) -> Bool {
// Return false if you do not want the item to be re-orderable.
return true
}
*/
/*
// MARK: - Navigation
// In a storyboard-based application, you will often want to do a little preparation before navigation
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
// Get the new view controller using segue.destination.
// Pass the selected object to the new view controller.
}
*/
}
备注:若是在故事版中ViewController中拖入一个TableView控件,则新建的ViewController对应的控制器需在代码中手动配置数据源,即需遵从TableView的数据源协议UITableViewDataSource.
//
// MyViewController.swift
// JackUChat
//
// Created by 徐云 on 2019/1/4.
// Copyright © 2019 Liy. All rights reserved.
//
import UIKit
class MyViewController: UIViewController,UITableViewDataSource {
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
<#code#>
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
<#code#>
}
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
/*
// MARK: - Navigation
// In a storyboard-based application, you will often want to do a little preparation before navigation
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
// Get the new view controller using segue.destination.
// Pass the selected object to the new view controller.
}
*/
}
3.布局与控制器建立关联,使控制器来控制场景布局
布局与控制器建立关联.png
4.设计原型单元格
「拓展」(http://www.xiaoboswift.com/course/50/task/496/show)
4.1 原型单元格个数默认为1
4.2 设置行高:一般手动配置即能满足,代码设置如下
//self.tableView.estimatedRowHeight = 500//预计行高
//self.tableView.rowHeight = UITableView.automaticDimension//实际行高
override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return 600.0
}
4.3 添加各种控件并设置样式和约束(自动布局)
(1)图片:不宜太大,一般为6060,2020
「图片圆角设置-运行时属性」(http://www.xiaoboswift.com/course/50/task/496/show)
注:圆角属性可可以通过属性拓展来直接设置
「属性拓展」(https://www.jianshu.com/p/00e684212977)
技巧:手动排版完控件后点击"Add Missing Constraints"会自动添加约束
原型单元格.png
5.新建原型单元格对应的控制器MyTableViewCell,父类为UITableViewCell
//
// MyTableViewCell.swift
// JackUChat
//
// Created by 徐云 on 2019/1/4.
// Copyright © 2019 Liy. All rights reserved.
//
import UIKit
class MyTableViewCell: UITableViewCell {
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
}
}
6.原型单元格与原型单元格控制器建立关联(与第3步的布局与控制器建立关联方法一致),并在单元格控制器中添加单元格控件的引用
控件引用.png
7.数据获取:网络/本地
(1)数据模型Device.swift
struct Device:Codable{
var deviceId:String
var deviceName:String
var deviceCount:String
}
(2)自定义数组对象(数据)
var devices = [MyDevice(deviceId: "001", deviceName: "平缝机", deviceCount: "1"),MyDevice(deviceId: "002", deviceName: "包缝机", deviceCount: "2"),MyDevice(deviceId: "003", deviceName: "绷缝机", deviceCount: "3"),MyDevice(deviceId: "004", deviceName: "特种机", deviceCount: "4"),MyDevice(deviceId: "005", deviceName: "裁床", deviceCount: "5"),MyDevice(deviceId: "006", deviceName: "绣花机", deviceCount: "6"),MyDevice(deviceId: "001", deviceName: "平缝机", deviceCount: "6"),MyDevice(deviceId: "002", deviceName: "包缝机", deviceCount: "5"),MyDevice(deviceId: "003", deviceName: "绷缝机", deviceCount: "4"),MyDevice(deviceId: "004", deviceName: "特种机", deviceCount: "3"),MyDevice(deviceId: "005", deviceName: "裁床", deviceCount: "2"),MyDevice(deviceId: "006", deviceName: "绣花机", deviceCount: "1")]
备注:数据也可通过json文件获取,参考「JSON解析」(https://www.jianshu.com/p/015b5750d582)
8.数据填充:实现数据源代理方法(主要是TableView的numberOfRowsInSection和cellForRowAt方法)
//
// MyTableViewController.swift
// JackUChat
//
// Created by 徐云 on 2019/1/4.
// Copyright © 2019 Liy. All rights reserved.
//
import UIKit
class MyTableViewController: UITableViewController {
var devices = [MyDevice(deviceId: "001", deviceName: "平缝机", deviceCount: "1"),MyDevice(deviceId: "002", deviceName: "包缝机", deviceCount: "2"),MyDevice(deviceId: "003", deviceName: "绷缝机", deviceCount: "3"),MyDevice(deviceId: "004", deviceName: "特种机", deviceCount: "4"),MyDevice(deviceId: "005", deviceName: "裁床", deviceCount: "5"),MyDevice(deviceId: "006", deviceName: "绣花机", deviceCount: "6"),MyDevice(deviceId: "001", deviceName: "平缝机", deviceCount: "6"),MyDevice(deviceId: "002", deviceName: "包缝机", deviceCount: "5"),MyDevice(deviceId: "003", deviceName: "绷缝机", deviceCount: "4"),MyDevice(deviceId: "004", deviceName: "特种机", deviceCount: "3"),MyDevice(deviceId: "005", deviceName: "裁床", deviceCount: "2"),MyDevice(deviceId: "006", deviceName: "绣花机", deviceCount: "1")]
override func viewDidLoad() {
super.viewDidLoad()
// Uncomment the following line to preserve selection between presentations
// self.clearsSelectionOnViewWillAppear = false
// Uncomment the following line to display an Edit button in the navigation bar for this view controller.
// self.navigationItem.rightBarButtonItem = self.editButtonItem
}
// MARK: - Table view data source
// override func numberOfSections(in tableView: UITableView) -> Int {
// // #warning Incomplete implementation, return the number of sections
// return 0
// }
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
// #warning Incomplete implementation, return the number of rows
return devices.count
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
// Configure the cell...
let cellId = String(describing: MyTableViewCell.self)
let cell = tableView.dequeueReusableCell(withIdentifier: cellId, for: indexPath) as! MyTableViewCell
let device = devices[indexPath.row]
cell.deviceNameLabel.text = device.deviceName
cell.deviceNoLabel.text = device.deviceId
cell.countLabel.text = device.deviceCount
return cell
}
/*
// Override to support conditional editing of the table view.
override func tableView(_ tableView: UITableView, canEditRowAt indexPath: IndexPath) -> Bool {
// Return false if you do not want the specified item to be editable.
return true
}
*/
/*
// Override to support editing the table view.
override func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCellEditingStyle, forRowAt indexPath: IndexPath) {
if editingStyle == .delete {
// Delete the row from the data source
tableView.deleteRows(at: [indexPath], with: .fade)
} else if editingStyle == .insert {
// Create a new instance of the appropriate class, insert it into the array, and add a new row to the table view
}
}
*/
/*
// Override to support rearranging the table view.
override func tableView(_ tableView: UITableView, moveRowAt fromIndexPath: IndexPath, to: IndexPath) {
}
*/
/*
// Override to support conditional rearranging of the table view.
override func tableView(_ tableView: UITableView, canMoveRowAt indexPath: IndexPath) -> Bool {
// Return false if you do not want the item to be re-orderable.
return true
}
*/
/*
// MARK: - Navigation
// In a storyboard-based application, you will often want to do a little preparation before navigation
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
// Get the new view controller using segue.destination.
// Pass the selected object to the new view controller.
}
*/
}
9.运行后界面如下
image.png
三.其它
1.「下拉刷新」(http://www.xiaoboswift.com/course/50/task/496/show)
2.整型字段的获取与显示
image.png
网友评论