iOS开发Swift-12-列表UI,TableViewController,动态响应Button勾选-待办事项App(1)

news/2024/11/19 13:37:53/

1.创建新项目
在这里插入图片描述

为项目添加图标
在这里插入图片描述

2.将Table View Controller添加到界面中
在这里插入图片描述

将箭头移动到Table View上来,代表它是首页(根页面).选中ViewController,点击Delete,对它进行删除.将代码ViewController.swift也删除掉.
在这里插入图片描述

新建一个Cocoa Touch Class.
在这里插入图片描述在这里插入图片描述

将TableViewController的class设置成TodosViewController.
在这里插入图片描述

2.为cell取名为TodoCellID.
在这里插入图片描述

3.创建一个Button,将Button的Image改为circle.创建一个Lable,将Lable的Lines改为0,可以自动换行.将Button和Lable放到同一个StackView里,设置约束为垂直居中.
在这里插入图片描述

为Button设定宽高约束,为Stack View设定上下左右约束,设定Stack View的Allgnment为Center(所有字样居中),Distribution为Fill,Spacing(Button与Lable的间距)为12.
在这里插入图片描述

4.创建一个UITableViewCell类型的swift,用于动态响应Button勾选以及文本的变化.
在这里插入图片描述

选择TodoCellID的Class为TodoCell.
在这里插入图片描述

5.创建一个Swift文件Todo.把他放到Modle文件夹下.
在这里插入图片描述

设定默认待办事项,并编码,使其展示在app首页上.

TodosViewController:

import UIKitclass TodosViewController: UITableViewController {let todos = [Todo(name: "学习iOS课程的基础课", checked: false),Todo(name: "学习iOS课程的零基础赏月App开发", checked: false),Todo(name: "学习iOS课程的零基础木琴App开发", checked: false),Todo(name: "学习iOS课程的零基础和风天气App开发", checked: false),Todo(name: "学习iOS课程的零基础待办事项App开发", checked: false),Todo(name: "学习iOS课程的小红书App开发", checked: false)]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//配置TableView的一些数据override func numberOfSections(in tableView: UITableView) -> Int {// #warning Incomplete implementation, return the number of sectionsreturn 1   //总共有1个分类}override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {// #warning Incomplete implementation, return the number of rowsreturn todos.count   //总共有10个待办事项}override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {  //此函数会根据上面两个函数(总共分类数和总共待办事项数)返回的内容多次执行let cell = tableView.dequeueReusableCell(withIdentifier: kTodoCellID , for: indexPath) as! TodoCell//        // Configure the cell...
//        //配置主标题的文本
//        var contentConfiguration = cell.defaultContentConfiguration()
//        contentConfiguration.text = "昵称"   //主标题
//        contentConfiguration.secondaryText = "个性签名"    //副标题
//        contentConfiguration.image = UIImage(systemName: "star")  //图片
//        cell.contentConfiguration = contentConfigurationcell.todoLable.text = todos[indexPath.row].namereturn 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: UITableViewCell.EditingStyle, forRowAt indexPath: IndexPath) {if editingStyle == .delete {// Delete the row from the data sourcetableView.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 func tableView(_ tableView: UITableView, moveRowAt fromIndexPath: IndexPath, to: IndexPath) {}override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: 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 navigationoverride func prepare(for segue: UIStoryboardSegue, sender: Any?) {// Get the new view controller using segue.destination.// Pass the selected object to the new view controller.}}

TodoCell:

import UIKitclass TodoCell: UITableViewCell {@IBOutlet weak var checkBoxBtn: UIButton!@IBOutlet weak var todoLable: UILabel!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}}

Todo:

import Foundationstruct Todo{   //结构体.struck:值类型,class:引用类型. strack不需要再额外写构造器,因为系统已经自动生成.var name: String   //文本var checked: Bool   //是否已经完成
}//相当于class的:
//class Todo{
//    var name = ""
//    var checked = false
//    init(name: String, checked: Bool){
//        self.name = name
//        self.checked = checked
//    }
//}

启动测试:
在这里插入图片描述

6.实现checkBox这个Button被选中之后变色.

将Button的Tint改为Clear Color.使选中后的淡蓝色消失.
在这里插入图片描述在这里插入图片描述

TodosViewController:

import UIKitclass TodosViewController: UITableViewController {let todos = [Todo(name: "学习iOS课程的基础课", checked: false),Todo(name: "学习iOS课程的零基础赏月App开发", checked: false),Todo(name: "学习iOS课程的零基础木琴App开发", checked: false),Todo(name: "学习iOS课程的零基础和风天气App开发", checked: false),Todo(name: "学习iOS课程的零基础待办事项App开发", checked: false),Todo(name: "学习iOS课程的小红书App开发", checked: false)]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//配置TableView的一些数据override func numberOfSections(in tableView: UITableView) -> Int {// #warning Incomplete implementation, return the number of sectionsreturn 1   //总共有1个分类}override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {// #warning Incomplete implementation, return the number of rowsreturn todos.count   //总共有10个待办事项}override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {  //此函数会根据上面两个函数(总共分类数和总共待办事项数)返回的内容多次执行let cell = tableView.dequeueReusableCell(withIdentifier: kTodoCellID , for: indexPath) as! TodoCell//        // Configure the cell...
//        //配置主标题的文本
//        var contentConfiguration = cell.defaultContentConfiguration()
//        contentConfiguration.text = "昵称"   //主标题
//        contentConfiguration.secondaryText = "个性签名"    //副标题
//        contentConfiguration.image = UIImage(systemName: "star")  //图片
//        cell.contentConfiguration = contentConfigurationcell.checkBoxBtn.isSelected = todos[indexPath.row].checked  //将cell的是否被选中属性改为todos的当前行的checked属性cell.todoLable.text = todos[indexPath.row].namereturn 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: UITableViewCell.EditingStyle, forRowAt indexPath: IndexPath) {if editingStyle == .delete {// Delete the row from the data sourcetableView.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 func tableView(_ tableView: UITableView, moveRowAt fromIndexPath: IndexPath, to: IndexPath) {}override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: 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 navigationoverride func prepare(for segue: UIStoryboardSegue, sender: Any?) {// Get the new view controller using segue.destination.// Pass the selected object to the new view controller.}}

TodoCell:

import UIKitclass TodoCell: UITableViewCell {@IBOutlet weak var checkBoxBtn: UIButton!@IBOutlet weak var todoLable: UILabel!override func awakeFromNib() {   //每个cell加载出来之后执行的函数//dequeueReusableCell -> awakeFromNib -> dequeueReusableCell后面的内容super.awakeFromNib()// Initialization codecheckBoxBtn.setImage(UIImage(systemName: "checkmark.circle.fill"), for: .selected)}//设定了当前button被选中之后里边的图片override func setSelected(_ selected: Bool, animated: Bool) {super.setSelected(selected, animated: animated)// Configure the view for the selected state}}

7.实现checkBox这个Lable被选中之后字体变灰色.

TodosViewController:

import UIKitclass TodosViewController: UITableViewController {let todos = [Todo(name: "学习iOS课程的基础课", checked: false),Todo(name: "学习iOS课程的零基础赏月App开发", checked: true),Todo(name: "学习iOS课程的零基础木琴App开发", checked: false),Todo(name: "学习iOS课程的零基础和风天气App开发", checked: false),Todo(name: "学习iOS课程的零基础待办事项App开发", checked: false),Todo(name: "学习iOS课程的小红书App开发", checked: false)]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//配置TableView的一些数据override func numberOfSections(in tableView: UITableView) -> Int {// #warning Incomplete implementation, return the number of sectionsreturn 1   //总共有1个分类}override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {// #warning Incomplete implementation, return the number of rowsreturn todos.count   //总共有10个待办事项}override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {  //此函数会根据上面两个函数(总共分类数和总共待办事项数)返回的内容多次执行let cell = tableView.dequeueReusableCell(withIdentifier: kTodoCellID , for: indexPath) as! TodoCell//        // Configure the cell...
//        //配置主标题的文本
//        var contentConfiguration = cell.defaultContentConfiguration()
//        contentConfiguration.text = "昵称"   //主标题
//        contentConfiguration.secondaryText = "个性签名"    //副标题
//        contentConfiguration.image = UIImage(systemName: "star")  //图片
//        cell.contentConfiguration = contentConfigurationcell.checkBoxBtn.isSelected = todos[indexPath.row].checked  //将cell的是否被选中属性改为todos的当前行的checked属性cell.todoLable.text = todos[indexPath.row].namecell.todoLable.textColor = todos[indexPath.row].checked ? .tertiaryLabel : .label   //三元运算符.根据是否被选中进行判断,如果被选中的话变成浅色,未被选中就是原来的Lable Color.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: UITableViewCell.EditingStyle, forRowAt indexPath: IndexPath) {if editingStyle == .delete {// Delete the row from the data sourcetableView.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 func tableView(_ tableView: UITableView, moveRowAt fromIndexPath: IndexPath, to: IndexPath) {}override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: 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 navigationoverride func prepare(for segue: UIStoryboardSegue, sender: Any?) {// Get the new view controller using segue.destination.// Pass the selected object to the new view controller.}}

启动测试:

在这里插入图片描述


http://www.ppmy.cn/news/1103727.html

相关文章

第15章_瑞萨MCU零基础入门系列教程之Common I2C总线模块

本教程基于韦东山百问网出的 DShanMCU-RA6M5开发板 进行编写,需要的同学可以在这里获取: https://item.taobao.com/item.htm?id728461040949 配套资料获取:https://renesas-docs.100ask.net 瑞萨MCU零基础入门系列教程汇总: ht…

使用@RestControllerAdvice统一处理@ResponseBody的返回前端数据

一、前言 spring mvc下,在controller控制类中,标注了ResponseBody的方法正常来说返回的是json对象,有时候还想额外在特定条件下处理一些数据(使用if),又或者是每个返回json数据的方法都可能需要做同样的处…

Nginx 配置错误导致漏洞

文章目录 Nginx 配置错误导致漏洞1. 环境启动2. CRLF注入漏洞2.1 漏洞描述2.2 漏洞原理2.3 漏洞利用2.4 修复建议 3. 目录穿越漏洞3.1 漏洞描述3.2 漏洞原理3.3 漏洞利用3.4 修复建议 4. add_header被覆盖4.1 漏洞描述4.2 漏洞原理4.3 漏洞利用4.4 修复建议 Nginx 配置错误导致…

ChatGPT是否可以用于虚拟心理治疗和心理健康支持?

ChatGPT可以用于虚拟心理治疗和心理健康支持,但在这个领域中存在一些关键的考虑因素和限制。在探讨这些问题之前,让我们先了解一下ChatGPT在心理健康领域的应用潜力。 ### ChatGPT在虚拟心理治疗中的应用潜力 虚拟心理治疗是一种利用计算机程序或虚拟助…

SpringCloud-Hystrix 服务降级与熔断

接上文SpringCloud-Feign 问题描述 为了解决上述情况,SpringCloud提供了Hystrix熔断器组件,如同保险丝。服务降级则不会直接返回错误,而是提供一个补救措施,正常响应给请求者。 1.服务降级 基于借阅管理服务,不开启…

注意力机制讲解与代码解析

一、SEBlock(通道注意力机制) 先在H*W维度进行压缩,全局平均池化将每个通道平均为一个值。 (B, C, H, W)---- (B, C, 1, 1) 利用各channel维度的相关性计算权重 (B, C, 1, 1) --- (B, C//K, 1, 1) --- (B, C, 1, 1) --- sigmoid 与原特征相…

如何写出一篇爆款产品文案,从目标受众到市场分析!

一篇爆款产品文案意味着什么?意味着更强的种草能力,更高的销售转化和更强的品牌传播力。今天来分享下如何写出一篇爆款产品文案,从目标受众到市场分析! 一、产品文案策略 一篇爆款产品文案,并不是一时兴起造就的。在撰写之前&…

uView实现全屏选项卡

// 直接复制粘贴即可使用 <template><view><view class"tabsBox"><u-tabs-swiper ref"uTabs" :list"list":current"current"change"tabsChange":is-scroll"false"></u-tabs-swiper&g…