欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

IOS开发入门之利用纯代码写UI

程序员文章站 2023-11-12 09:53:22
接上一节,我们了解到简简单单的几行代码就可以写出一个动画,本节将进一步对ios的纯代码ui开发做简单的入门。 什么是ui开发:这是给小白解释,熟人请绕过。手机的app可以认为是由一个一个页面组成。就...

接上一节,我们了解到简简单单的几行代码就可以写出一个动画,本节将进一步对ios纯代码ui开发做简单的入门。

什么是ui开发:这是给小白解释,熟人请绕过。手机的app可以认为是由一个一个页面组成。就好比你现在正在看的这个网页,就可以认为是一个页面,如果点击了这个网页上的一个按钮,就会跳到另外一个地方,这就跳到另外一个页面了。编写这些页面内容,就叫ui开发。ui开发直接影响用户的体验,在移动app开发中占有很重的比例,每一个ios开发人员都必须掌握。本节介绍一种ui开发方法:用纯代码来写ui。

一、创建工程

打开xcode创建一个ios的"single view app"工程,不懂创建的人请参看"ios开发入门之二——第一个app",创建后的界面如下图所示:

IOS开发入门之利用纯代码写UI

二、工程目录简介

上图界面中左侧有很多的文件夹,大致了解一些这些文件夹的作用:

外侧的四个大文件夹:

1. products: 主要用于mac电脑开发,ios开发用不到。

2. myfirstapptests: 用于单元测试。

3. myfirstappuitests: 用于ui测试。

3.myfirstapp:ios开发的内容主要都是存放在这个文件夹中。

myfirstapp这个文件夹又包含:

3.1 appdelegate.swift:代表应用程序,app初始化需要的内容都在这里做,app是从这里开始启动的,这个文件暂时不做深入。

3.2 viewcontroller.swift: 这是ios视图控制器,其实说白了就是一个页面的容器,我们编写ui代码都要写在这个容器里,这是本节重点关注的文件。

3.3 main.storyboard: storyboard文件可以帮助我们用比较直观的方式来快速的开发ui,通过这个文件我们可以看到我们设计的页面长什么样子。比如,我们要在页面上添加一张图片,我们只要将一个图片的控件直接拉到storyboard上,就可以看到这个图片在页面上到底是大是小,位置在哪里等等。这是ios推荐的ui开发模式。有人要问了,那我们还要用代码写ui,不是很麻烦吗?其实这两种方式写ui各有优缺点,我们可以取长补短,这在后面讲到storyboard的时候再讨论。main.storyboard顾名思义就是主页面。storyboard设计后效果如下图。

IOS开发入门之利用纯代码写UI

4. assets.xcassets: 这个文件夹主要用于存放资源文件,比如图片

5. lauchscreen.storyboard: 顾名思义就是启动页面,在打开一个app的时候,一般不会直接跳到主页面,经常会先来个某某公司或则广告图片什么的,这就是启动页。

6. info.plist: 这个文件是项目的配置文件。比如主页面是哪个页面,所以main.storyborad也不一定就是主页面,因为在这里可以修改。

三、认识视图

下面我们重点关注viewcontroller.swift这个文件,单击这个文件,得到如下界面(红框和箭头是我做的标记),下面逐一解释代码的作用

IOS开发入门之利用纯代码写UI

import uikit:uikit是ios提供给我们专门用于编写ui代码的库,import是导入的意思,导入uikit这个库后就可以在后续代码中用其提供的类来写ui。以后要使用第三方提供的库,类似也要这么导入。

viewcontroller:uikit库中一个重要的类,顾名思义“视图控制器”。可以先这么认为吧,一个viewcontroller代表一个页面的容器。也就是一个页面对应一个viewcontroller。所以很明显,我们的ui代码应该写在viewcontroller类里面。

viewdidload(): 这是uiviewcontroller中的一个方法,代表页面已经初始化完毕,这时页面还是空白的,可以往页面中添加其他的ui元素了,比如图片、文字。我们要添加的ui代码都是写在红色箭头所指的地方。每个页面都有一个完整的生命周期,从它开始被创建一直到它被销毁回收,uiviewcontroller还提供很多的方法,对应这些不同的生命阶段,有兴趣可以自己查找学习,在这里不做介绍。

四、uiview

uiview是uikit库中视图的基类,代表页面中的一个块,如下图大红框框中的部分就是一个页面,而其中的红色的块就是一个uiview。

IOS开发入门之利用纯代码写UI

1. 属性和布局

我们对视图最关心的有两点:

a)它长什么样:这称为视图的属性,比如是什么颜色、是否有边框、边框的颜色、边框的大小等

b)它应该放在页面的哪个位置:这就是布局,布局有两种方法。一种使用frame,另一种是用autolayout。

(1)属性

对于以后要用到的其他更高级的视图控件,比如uilabel(专门显示文字)、uiimageview(专门显示图片)、uibutton(按钮)等都是类似的。只是他们有更多的属性而已。我们学习这些视图,无非就是熟悉他们的属性和布局,因此可以举一反三。

下面是一段最简单的例子:

  let purpleview = uiview()
  purpleview.backgroundcolor=uicolor.purple
  purpleview.frame=cgrect(x: 0, y: 100, width: 150, height: 150)
  view.addsubview(purpleview)

可以拷贝到如下图所示的位置(以后的代码都是拷贝到类似的位置,就不再贴出这些图):

IOS开发入门之利用纯代码写UI

let purpleview = uiview() //这句是创建一个视图

purpleview.backgroundcolor = uicolor.purple //这句是将视图的背景色设置为紫色

purpleview.frame = cgrect(x: 0, y: 100, width: 150, height: 150) //这句是设置视图的大小和位置:x:0表示视图与页面的左边距离为0,y:150表示视图与页面的上边距离为150,width:150代表视图宽度为150,height:150代表视图的高度为150

view.addsubview(purpleview) //这句是表示将purpleview这个视图添加到的页面里

写完这些代码就可以点击运行app了,效果即使上面的红色方块图。

ios用//来注释代码,可以用这个方法将临时不用的代码注释起来,也可以用来对代码进行说明。被//注释后的代码在程序运行时,将不会执行。如下图绿色部分的代码就是将临时不用的代码注释起来。

IOS开发入门之利用纯代码写UI

(2)布局

还可以用自动布局autolayout的约束方式来限制视图的位置:

//创建一个视图
  let redview = uiview()
  //禁止将autoresizingmask转化为constraints
  redview.translatesautoresizingmaskintoconstraints = false
  // 背景色为红色
  redview.backgroundcolor = uicolor.red
  // 将视图添加到页面中
  view.addsubview(redview)
  //创建约束,注意:要在视图添加到其父容器(在此为页面)后,才能进行约束设置,否则app会奔溃
  //宽度约束
  let widthconstraint = nslayoutconstraint(item: redview, attribute: .width, relatedby: .equal, toitem: nil, attribute: .notanattribute, multiplier: 0, constant: 150)
  //高度约束
  let heightconstraint = nslayoutconstraint(item: redview, attribute: .height, relatedby: .equal, toitem: nil, attribute: .notanattribute, multiplier: 0, constant: 150)
  //顶部约束
  let topconstraint = nslayoutconstraint(item: redview, attribute: .top, relatedby: .equal, toitem: view, attribute: .top, multiplier: 1.0, constant: 100)
  //左侧约束
  let leftconstraint = nslayoutconstraint(item: redview, attribute: .left, relatedby: .equal, toitem: view, attribute: .left, multiplier: 1.0, constant: 150)
  //在页面中添加多个约束
  view.addconstraints([widthconstraint,heightconstraint,leftconstraint,topconstraint])
用自动布局autolayout的约束来设置视图的位置是比较灵活的,但是ios提供的这种写法,明显太繁琐。所以一般使用第三方提供的snapkit库来简化代码的写法,有兴趣的人可以查阅相关资料,不懂如何导入第三方库的可以参考:ios如何导入第三方库-cocoapods。

2. 动画

上面谈到的属性和布局都是设置静止不动的内容,有时我们想让这些图片或文字能够动起来,这样看起来比较有趣。"ios开发入门之三——从一个动画开始"那节我们只是简单的演示如何产生一个动画,没有对代码做任何解释,下面将对动画代码做详细说明。主要代码如下:

animview.frame=cgrect(x:0,y:0,width:100,height:100) //设置动画视图的尺寸
animview.center=view.center //动画视图放在父视图的正*
animview.backgroundcolor=uicolor.green//动画视图的背景色设置为绿色
view.addsubview(animview)//将动画视图添加到父视图(即页面)
uiview.animate(withduration: 2,delay:1,usingspringwithdamping:0.2,initialspringvelocity:0,options:[.repeat,.autoreverse], animations:{
  self.animview.transform=cgaffinetransform(scalex: 0.5, y: 0.5)//将动画视图大小缩小为原来的一半
},completion:nil)

前面四行,是设置属性和布局可以参看上面的,不做说明。我们重点关注最后一个方法:

uiview.animate()这个方法是uiview类提供的一个静态方法,专门用于播放和控制视图动画。里面的参数有:

withduration: 2表示动画总的时长为2秒

delay:1表示动画延时1秒才开始播放,就是这段动画代码被执行后不马上播放,而要等1秒钟后才开始播放。

usingspringwithdamping:0.2弹簧动画的阻尼值,也就是相当于摩擦力的大小,该属性的值从0.0到1.0之间,越靠近0,阻尼越小,弹动的幅度越大,反之阻尼越大,弹动的幅度越小,如果大道一定程度,会出现弹不动的情况。

initialspringvelocity:0弹簧动画的速率,或者说是动力。值越小弹簧的动力越小,弹簧拉伸的幅度越小,反之动力越大,弹簧拉伸的幅度越大。这里需要注意的是,如果设置为0,表示忽略该属性,由动画持续时间和阻尼计算动画的效果。

options后面可以设置很多可选项,.repeat这个选项表示动画是重复的,.autoreverse这个选项表示动画播放完毕后会自动倒播,注意这些选项前面要加一个点。

animations:{}这个大括号里面我们要指定视图最终属性值。比如我们要让一个原来透明度为1的视图慢慢变为透明度为0.5,这个过程我们不需要关心,我们只要在这个大括号中将视图最终0.5这个值设置好就行了。系统会根据视图最初的透明度以及我们设置的这个0.5自动生成中间值并用这些值来控制完成动画过程。也就是说,我们代码只要告诉系统,视图最终的属性值是多少系统就会为我们自动生成这些动画过程。

scanx:0.5,y:0.5表示这是一个缩放动画,并且视图在x方向缩小为原来的一半,y方向也缩小为原来的一半,总体看就是方块整体慢慢缩小一半。

2.1 动画类型

按照动作,动画可分为以下几个类型:

(1)平移:

self.animview.transform=cgaffinetransform(translationx: -200, y: 20)

translationx: -200, y: 0表示视图向左移动200距离,同时向下移动20距离。x正值表示向右移动,负值表示向左移动;y正值表示向下移动,负值表示向上移动。

(2)缩放:

self.animview.transform=cgaffinetransform(scalex: 0.5, y: 0.5)

scanx:0.5,y:0.5表示视图在x方向缩小为原来的一半,y方向也缩小为原来的一半,总体看就是方块整体慢慢缩小一半。x和y的值一般要大于等于0

(3)旋转:

self.animview.transform=cgaffinetransform(rotationangle:cgfloat.pi/4)

rotaionangle:cgfloat.pi/4表示顺时针旋转45度,cgfloat.pi/4代表旋转的角度。

2.1 组合动画

有的人说了:我想同时变可以吗?当然可以啦。要几个动画一起来可以这样写:

let scale=cgaffinetransform(scalex:0.6,y:0.6)//缩小到原来的0.6倍
let rotation=cgaffinetransform(rotationangle:cgfloat.pi/4)//顺时针旋转45度
self.animview.transform=rotation.concatenating(scale)

用concatenating()这个方法,你想套几个动画都可以,比如还有一个平移动画可以这样写:

let transy=cgaffinetransform(translationx: 0, y: 150)//向下移动150的距离
let scale=cgaffinetransform(scalex:0.6,y:0.6)//缩小到原来的0.6倍
let rotation=cgaffinetransform(rotationangle:cgfloat.pi/4)//顺时针旋转45度
self.animview.transform=transy.concatenating(rotation.concatenating(scale))