026-代码创建控件-iOS笔记

学习目标

1.【理解】代码创建控件过程

2.【理解】代码实现QQ登陆界面

3.【理解】图片浏览器

4.【理解】汤姆猫小游戏

一、代码创建控件过程

所有控件都是类的对象,不同的类创建可以不同类型的控件。也是就说创建一个控件其实就是创建一个对应类的对象。

常用控件类型

UIButton:按钮,界面上可点击的大都是按钮

UILabel:标签,界面上只显示文字不能点击大都是标签

UITextField:文本框,界面上可输入数据的文本框

UIImageView:图片框,界面上不可点击的图片大都是图片框

使用代码创建控件的过程

注意

一定不要使用titleLabel去设置文本内容和颜色,因为按钮是有状态的。而状态的文本值是title里面取。所以如果为titleLabel设置文本,那和以系统不知道这个文本是那一种状态下显示的文本,干脆不显示。

二、代码实现QQ登陆界面

我们通过一个实例来对常用控件的基本属性、方法做个了解,和昨晚写的案例一样都是QQ登陆界面,不过这次使用纯代码的方式来实现。最终效果如下图:

026-代码创建控件-iOS笔记

首先还是先创建一个Single View Application,设置界面尺寸,导入案例需要用到的素材,本次素材就两个按钮背景图,自行网上搜索素材。搞好相关设置然后就可以开始编写代码了。

具体实现代码如下

总结

要学会如何使用代码创建控件,首先得了解代码创建控件的基本过程(创建对象、设置对象的属性、添加对象到父容器)。并且还应该了解不同控件的一些必要属性和方法,这和我们前面OC中学习的创建对象、调用方法是没有任何区别的。

三、图片浏览器

这个案例的主要目的是熟悉UIButtonUIImageView的使用,通过这个案例要全面了按钮的常用属性的设置,添加的业务逻辑也会提升我们对代码的熟练程度。同时加强封装的思想,初步使用外部的plist文件,这在之后plist文件会频繁的使用。

UIButton:当点击图片后能够有相应操作,或者点击后有高亮效果就使用UIButton。

UIImageView:当仅仅是静态展示图片,不需要对图片进行相应的操作就使用UIImageView。

下图就是我们案例完成后的样子,点击左右按钮能够切换图片、图片对应标题和索引,第一张和最有一张有按钮禁用。

026-代码创建控件-iOS笔记

创建好项目导入需要用到的图片素材,再次强调Assets.xcassets中只能放png格式的图片,在使用时省略扩展名。

026-代码创建控件-iOS笔记

拖拽两个Label控件、两个Button控件、一个Image View控件,并调整到尺寸、按钮默认、高亮背景图等等。

026-代码创建控件-iOS笔记

通过控件连线,定义好对应属性、方法,还有数组和图片索引用于操作我们的图片资源。

026-代码创建控件-iOS笔记

新建一个Property List(.plist)文件,用于封装数据。

026-代码创建控件-iOS笔记

然后选择创建好的img.plist文件,创建如下图所示的plist文件。一个数组里有5个字典,每个字典有两个键值对,img、title是键,分别对应图片名称、图片文字描述内容。

026-代码创建控件-iOS笔记

图片浏览器代码实现

使用plist文件的好处

1.数据被封装,不再暴露在外面。

2.如果想修改或者添加删除数据,不需要修改源代码,只需要修改外部的plist文件。

3.plist文件的本质就是XML文件,所以后期可以通过对XML文件的读写操作来完成一些数据持久化操作。

创建plist文件的注意事项

1.一个字典中可以有多个key—value,多个字典包含在一个数组中。

2.plist文件名称最好不要包含info,否则会认为是系统的plist文件。

3.plist文件是物理文件,所以需要获取文件目录,通过目录+文件名进行数据读取。

获取plist文件所在的文件全路径

读取plist中的数据存储到数组中

四、帧动画之汤姆猫

这个案例的主要目的是了解什么是帧动画,同时掌握UIImageView的使用方式,为UIImageView控件添加动画效果和一般动画效果的添加及相关的参数设置。

png图片:一般存放在Images.xcassets中,同时在使用图片的时候不需要添加扩展名。

JPG图片:一般图片存储在Supporting Files下面,在使用jpg图片的时候一般添加扩展名。

创建项目并拖拽好各种控件,这里是先拖一个UIImageView控件占满整个屏幕,然后再为Image属性设置一张默认图片。然后拖拽6个图片按钮、3个没有任何样式的按钮(头部、双脚),并设置相关属性。

026-代码创建控件-iOS笔记

将Button用到的png格式图片拖拽到Images.xcassets,其他图片拖拽到Supporting Files,这些文件夹里包含了大量图片。

026-代码创建控件-iOS笔记

实现代码如下

最终效果如下图,由于动画图片太大就么有整动态图:

026-代码创建控件-iOS笔记

常见错误

1. jpg文件没有添加扩展名。

2. 读取全路径的jpg素材文件的时候却没有将jpg没有添加到 Supporting Files造成无法获取到。

3. 清空资源的时候没有关注self是实际含义.

注意事项

1. 使用图片文件全路径而不是使用图片名称。

2. 动画播放完毕之后及时将当前图片资源释放。

3. 拼接生成正确的文件名。

4. 在制作动画的时候,如果想设置其它属性注意要先设置好其它属性再开始动画,否则可能动画没有效果。

六阿哥

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: