AI 编程探索- iOS动态标签控件

在这里插入图片描述

需求分析

  1. 标签根据文字长度,自适应
  2. 标签居中显示
  3. 扩展 超过内容显示范围,需要换行显示,且保持居中显示

AI实现过程

提问:

在这里插入图片描述

回答:
在这里插入图片描述

import UIKit
import SnapKitclass DynamicLabelsContainerView: UIView {private let horizontalSpacing: CGFloat = 8.0private let verticalSpacing: CGFloat = 4.0// 初始化方法override init(frame: CGRect) {super.init(frame: frame)}required init?(coder: NSCoder) {fatalError("init(coder:) has not been implemented")}// 配置容器视图func configure(with strings: [String]) {// 先清除所有子视图self.subviews.forEach { $0.removeFromSuperview() }var lastLabel: UILabel? = nilvar isFirstLabelInLine = truefor string in strings {let label = UILabel()label.text = stringlabel.backgroundColor = .lightGray // 仅为了可视化,实际使用时可移除label.numberOfLines = 1self.addSubview(label)label.snp.makeConstraints { make inif let lastLabel = lastLabel {make.top.equalTo(isFirstLabelInLine ? lastLabel.snp.bottom : lastLabel.snp.top).offset(isFirstLabelInLine ? verticalSpacing : 0)make.left.equalTo(isFirstLabelInLine ? self.snp.left : lastLabel.snp.right).offset(horizontalSpacing)} else {make.top.equalTo(self.snp.top).offset(verticalSpacing)make.left.equalTo(self.snp.left).offset(horizontalSpacing)}// 确保标签不会超出容器视图的宽度make.right.lessThanOrEqualTo(self.snp.right).offset(-horizontalSpacing)}// 使用布局完成回调来决定是否需要换行label.snp.makeConstraints { make inmake.width.equalTo(label.intrinsicContentSize.width).priority(.high)}// 强制立即布局以获取label的frameself.layoutIfNeeded()// 检查是否需要换行if label.frame.maxX > self.bounds.width {isFirstLabelInLine = truelabel.snp.remakeConstraints { make inmake.top.equalTo(lastLabel?.snp.bottom ?? self.snp.top).offset(verticalSpacing)make.left.equalTo(self.snp.left).offset(horizontalSpacing)make.width.equalTo(label.intrinsicContentSize.width).priority(.high)}} else {isFirstLabelInLine = false}lastLabel = label}// 更新容器视图的高度约束以适应所有标签self.snp.makeConstraints { make inmake.bottom.equalTo(lastLabel?.snp.bottom ?? self.snp.top).offset(verticalSpacing)}}
}

验证

在这里插入图片描述

问题:

  • 超出范围没有换行展示

解决:
将下面这句代码注释
在这里插入图片描述

验证:

在这里插入图片描述
问题:

  • 第二排第二个label的布局有问题

解决问题后的最终代码:

import UIKit
import SnapKitclass DynamicLabelsView: UIView {private let horizontalSpacing: CGFloat = 8.0private let verticalSpacing: CGFloat = 4.0// 初始化方法override init(frame: CGRect) {super.init(frame: frame)}required init?(coder: NSCoder) {fatalError("init(coder:) has not been implemented")}// 配置容器视图func configure(with strings: [String]) {// 先清除所有子视图self.subviews.forEach { $0.removeFromSuperview() }var lastLabel: UILabel? = nilfor string in strings {let label = UILabel()label.text = stringlabel.backgroundColor = .lightGray // 仅为了可视化,实际使用时可移除label.numberOfLines = 1self.addSubview(label)label.snp.makeConstraints { make inif let lastLabel = lastLabel {make.top.equalTo(lastLabel.snp.top).offset(0)make.left.equalTo(lastLabel.snp.right).offset(horizontalSpacing)} else {make.top.equalTo(self.snp.top).offset(verticalSpacing)make.left.equalTo(self.snp.left).offset(horizontalSpacing)}}// 使用布局完成回调来决定是否需要换行label.snp.makeConstraints { make inmake.width.equalTo(label.intrinsicContentSize.width).priority(.high)}// 强制立即布局以获取label的frameself.layoutIfNeeded()// 检查是否需要换行if label.frame.maxX > self.bounds.width {label.snp.remakeConstraints { make inmake.top.equalTo(lastLabel?.snp.bottom ?? self.snp.top).offset(verticalSpacing)make.left.equalTo(self.snp.left).offset(horizontalSpacing)make.width.equalTo(label.intrinsicContentSize.width).priority(.high)}}lastLabel = label}// 更新容器视图的高度约束以适应所有标签self.snp.makeConstraints { make inmake.bottom.equalTo(lastLabel?.snp.bottom ?? self.snp.top).offset(verticalSpacing)}}
}

效果:

在这里插入图片描述

总结

到这里我们通过AI快速实现了动态标签控件的核心部分,只需再稍微调整一下label的样式就能完美实现我们的需求。AI帮我们写了大部分的可用的代码,虽然不能完全采用,但是确实提升了我们的开发效率,代码质量也是很不错的,我们要做的就是根据自己的需求进行修改一下。后面继续在实战中探索如何高效使用AI来帮助我们开发和学习。


感谢您的阅读和参与,HH思无邪愿与您一起在技术的道路上不断探索。如果您喜欢这篇文章,不妨留下您宝贵的赞!如果您对文章有任何疑问或建议,欢迎在评论区留言,我会第一时间处理,您的支持是我前行的动力,愿我们都能成为更好的自己!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/34621.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

命令行中关于windows hash md5 , mac hash md5 , linux hash md5 文件校验方式

md5, sha-1 ,sha256. windows certutil -hashfile filename md5certutil -hashfile filename sha1certutil -hashfile filename sha256macos 平台 md5 filenameshasum -a 1 filenameshasum -a 256 filenamelinux 平台 md5sum filenameshasum -a 1 fil…

CEWEY C9自动猫砂盆测评:千元级安全实用稳定输出,解放铲屎官双手!

最近邻居姐姐成为新晋铲屎官,猫咪的吃喝还好,因为是打工人每天要早出晚归,铲屎这项不能等待的任务就让她很苦恼,猫砂盆太脏猫咪要么憋着不上要么乱拉乱尿,搞得小姐姐身心俱疲。看着她日渐憔悴的脸色,我这个…

Linux 动态监控系统

top与ps命令很相似。它们都用来显示正在执行的进程。Top与ps最大的不同之处,在于top在执行一段时间可以更新正在运行的的进程。 一、基本指令 top top -d: 秒数 :每隔设定值秒数更新,未设置下默认为3秒 top -i:使top不显示任何闲置或者僵死进…

chkstk.asm未经处理的异常

【1】异常图片 【2】异常原因 运行程序时,程序尝试分配的内存超出了当前线程的堆栈边界 【3】定位:如下图,数组分配过大

定时触发-uniapp + uniCloud 订阅消息实战教程(三)

上一节已经对云函数有了一定的了解,但是,为了发送订阅消息,只会云函数还是差了那么一点意思,所以接下来的这一节,将带领大家熟悉一下定时触发。 熟悉定时触发 如果云函数需要定时/定期执行,即定时触发&…

【力扣C++】爬楼梯

假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢? 示例 1: 输入:n 2 输出:2 解释:有两种方法可以爬到楼顶。 1. 1 阶 1 阶 2. 2 阶 示例 2&#x…

昇思25天学习打卡营第1天|初学教程

文章目录 背景创建环境熟悉环境打卡记录学习总结展望未来 背景 参加了昇思的25天学习记录,这里给自己记录一下所学内容笔记。 创建环境 首先在平台注册账号,然后登录,按下图操作,创建环境即可 创建好环境后进入即可&#xff0…

文华财经wh7均线ema金叉死叉预警指标公式源码

文华财经wh7均线ema金叉死叉预警指标公式源码: 文华财经均线EMA预警指标公式源码: EMA25:EMA(C,25); EMA70:EMA(C,70); EMA580:EMA(C,580); //在EMA580上方EMA25和EMA70金叉EMA70在EMA580上方创1日新高创前5根K线最高 EMA25>EMA580&&EM…

Jenkins教程-8-上下游关联自动化测试任务构建

上一小节小节我们学习了一下Jenkins自动化测试任务发送测试结果邮件的方法,本小节我们讲解一下Jenkins上下游关联自动化测试任务的构建。 下面我们以一个真实的自动化测试场景来讲解Jenkins如何管理上下游关联任务的触发和构建,比如我们有两个jenkin任务…

病毒防护:恶意代码检测技术,病毒分类、传播方式,恶意代码的清除与防护

「作者简介」:冬奥会网络安全中国代表队,CSDN Top100,就职奇安信多年,以实战工作为基础著作 《网络安全自学教程》,适合基础薄弱的同学系统化的学习网络安全,用最短的时间掌握最核心的技术。 这一章节我们需…

惠海 HC070N06LS 6N06 沟槽型NMOS管 皮实耐抗 丝印HC606A 抗雪崩能力强

产品详情 HC070N06LS 60V/6A MOS管 低Vth 惠海半导体原厂 抖频过认证EMC&EMI:0 产品详情 型号HC070N06LS品牌惠海半导体 封装SOT23-3输入电压60V 驱动方式内置MOS耐压150V。 Features : N-Channel Enhancement mode Very low on-resistance VGS4.5V Fast S…

力扣每日一题 下一个更大元素 II 单调栈 循环数组

Problem: 503. 下一个更大元素 II 思路 &#x1f468;‍&#x1f3eb; 参考题解 Code class Solution {public int[] nextGreaterElements(int[] nums) {int n nums.length;int[] res new int[n];Arrays.fill(res,-1);Stack<Integer> stack new Stack<>();//…

docker-compose部署Flink及Dinky

docker-compose部署Flink及Dinky 服务器环境&#xff1a;centos7 1. 配置hosts vim /etc/hostsx.x.x.x jobmanager x.x.x.x taskmanager x.x.x.x dinky-mysql2. 文件目录结构 . ├── conf │ ├── JobManager │ │ ├── flink-conf.yaml │ │ ├── log…

Appium+python自动化(二十三)- 真假美猴王Monkeyrunner与Monkey傻傻的分不清楚(超详解)

简介 看《西游记》第五十七回&#xff0c;说是“六耳猕猴”化作孙悟空的摸样&#xff0c;伤了唐僧&#xff0c;后又和孙悟空大打出手…… 这位假孙悟空&#xff0c;实力不用多说了吧&#xff0c;和真孙悟空一般无二&#xff0c;大战孙悟空&#xff0c;闹到上天入地下海。 在唐僧…

服装连锁企业批发零售一体化解决方案

在现代商业环境中&#xff0c;服装连锁企业面临着市场竞争激烈、消费者需求多样化和供应链复杂化的挑战。为了有效应对这些挑战&#xff0c;建立一体化的批发零售解决方案已成为提升运营效率、优化客户体验的关键举措。这种解决方案不仅整合了进销存管理&#xff0c;还有效整合…

Kotlin设计模式:工厂方法详解

Kotlin设计模式&#xff1a;工厂方法详解 工厂方法模式&#xff08;Factory Method Pattern&#xff09;在Kotlin中是一种常见的设计模式&#xff0c;用于将对象创建的责任委派给单一的方法。本文将详细讲解这一模式的目的、实现方法以及使用场景&#xff0c;并通过具体的示例…

核心原因:如果互联网设计师是青春饭,为何别人的青春那么久?

大家好&#xff0c;我是大千UI工场&#xff0c;从事UI设计和前端开发快10年了&#xff0c;算是老司机&#xff0c;经常看到UI设计师在群里抱怨&#xff0c;说这行是青春饭&#xff0c;干几年就换行&#xff0c;真相是这样吗&#xff1f; 一、互联网设计师相较于传统设计师 互…

ventoy制作PE盘系统镜像安装盘,别再用什么软碟通UltraISO刻录进贼慢的U盘里做系统了。

还用U盘呢&#xff0c;10块钱傲腾读取900MB/sNVMe硬盘盒30多块钱&#xff0c;别再用什么软碟通UltraISO刻录进贼慢的U盘里做系统了。 官方下载地址&#xff1a;https://www.ventoy.net/cn/download.html 下载对应版本 运行Ventory2Disk.exe自动识别你的移动介质&#xff0c;然…

Kotlin设计模式:深入理解桥接模式

Kotlin设计模式&#xff1a;深入理解桥接模式 在软件开发中&#xff0c;随着系统需求的不断增长和变化&#xff0c;类的职责可能会变得越来越复杂&#xff0c;导致代码难以维护和扩展。桥接模式&#xff08;Bridge Pattern&#xff09;是一种结构型设计模式&#xff0c;它通过…

SVN学习(001 svn安装)

尚硅谷SVN高级教程(svn操作详解) 总时长 4:53:00 共72P 此文章包含第1p-第p19的内容 介绍 为什么使用版本控制工具 版本控制工具的功能 版本控制简介 客户端服务器结构 c/s结构 服务端的结构&#xff1a; 服务程序 、版本库(存放我们上传的文件) 客户端的三个基本操作&#…