一 .资源学习
- 静态TableView
- TableView概述
- 自定义TableView
- TableView改造-表头表尾
- TableView样式优化:背景亮度/单元格透明/分割线亮度
二.使用(动态单元格)
-
故事版中直接拖入一个TableViewController
TableViewController.png - 新建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.
}
*/
}
指定tableview的代理.png
-
布局与控制器建立关联,使控制器来控制场景布局
布局与控制器建立关联.png - 设计原型单元格
- 原型单元格个数默认为1
- 单元格命名(identifier属性）
- 设置行高:一般手动配置即能满足,代码设置如下
//self.tableView.estimatedRowHeight = 500//预计行高
//self.tableView.rowHeight = UITableView.automaticDimension//实际行高
override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return 600.0
}
- 添加各种控件并设置样式和约束(自动布局)
(1)图片:不宜太大,一般为6060,2020
图片圆角设置-运行时属性
注:圆角属性可可以通过属性拓展来直接设置
技巧:手动排版完控件后点击"Add Missing Constraints"会自动添加约束
原型单元格.png
- 新建原型单元格对应的控制器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
}
}
备注:原型单元格控制器的命名需与单元格identifier的命名保持一致
屏幕快照 2019-01-07 上午11.16.57.png
-
原型单元格与原型单元格控制器建立关联(与第3步的布局与控制器建立关联方法一致),并在单元格控制器中添加单元格控件的引用
控件引用.png - 数据获取:网络/本地
(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)
- 数据填充:实现数据源代理方法(主要是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.
}
*/
}
-
运行后界面如下
image.png
三.注意
//静态单元格不需要下面两段代码,否则会导致界面显示不全
// 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
// }
四.其它
- 下拉刷新
- 整型字段的获取与显示
-
示例1(将本地数据模型中整型字段获取的整数转为字符串)
本地整型字段.png
或类型转换:String = (int/float/double).description
-
示例2(直接将网络整型数据转为字符串)
网络整型字段.png