iOS开发关于可视化编程StoryBoard的基本使用方法

5DF1DA99-D931-4154-ABA3-D9AE1CB8C0C8.png

]( http://upload-images.jianshu.io/upload_images/1714255-0060fa53d2022e31.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

点击进入Main.storyBoard会出现一个默认的视图控制器View controller (点击选中按Delete先将其删除以方便后边视图的创建)

65454508-3672-450D-A1A4-FB903BA109DF.png

接下来我们来介绍一下基本的用法:

一.

新建一个导航控制器

在右下角的输入框中输入navigation Controller

DEBE7546-F641-40E1-8D30-D037235C228C.png

点住搜索出来的带<的Navigation Controller 向左边空白的编辑框拖入

733C9A36-B723-41A9-AC5F-FF3B7D07ECC8.png

如图所示一个导航控制器就创建好了它会自动带一个根视图控制器Root View Controller 需要的可以留下,如不需要可点住按Delete删除

729BACF9-75ED-49D5-89E0-A521C99FBD4D.png

其他的如视图控制器(View Controller) 标签控制器(Tab Bar Controller), 等都可以通过这个方法进行拖拽创建.

二.

基本控件的创建:

1.创建一个imageView

DD553CFC-E210-4E83-AE2A-490570CB599A.png

如果想添加图片到imageView上时 ,先把图片拖入工程:

8A14D06B-3825-42F3-8F6B-6A79DFC38458.png

然后在右侧编辑栏中添加图片名字即可:(添加图片回车后图片就会加入到imageView上

409EC65F-9700-4851-BBA2-1F0454FEC46C.png

)

2.创建一个Button(按钮):

在右下角输入框中输入button ,点住button拖入空白编辑处的View 上

5DF1DA99-D931-4154-ABA3-D9AE1CB8C0C8.png

许多控件需要我们规定它们的尺寸,颜色,文字等基本属性,这里以Button为例为大家简单介绍一下,其他控件的规定格式与Button基本相同:

首先选定已经拖入View 的 button 点击右下方规定尺寸的键

67A88ADA-6E2A-456C-932A-9AD4BADD1963.png

在弹出的小界面栏修改Button的尺寸[距离上下左右的距离,宽度,高度,是否需要流出20的间隔等等]

778CFD07-0A9F-4723-BD9D-51FC7E9CC1DE.png

如上图,规定完以后会把Button的理想位置大小给出 ,接下来点击下一个更新尺寸的键:

D2492AFE-09CA-4A0E-91EF-23E70DD56659.png

在弹出的编辑栏中选择Update Frames 更新Button的位置坐标

F7D71C8E-8316-46EF-9716-A542FDBD8ED4.png

如图为定义位置距离上边框50,距左右各100,高度为50的Button, 这样还远远不能达到我们的标准,接下来点开右上角的编辑栏:

2913A29E-30F6-497A-B0CF-B9657C5FAC45.png

控件常用的基本属性:( 还有很多细节属性都可以设置,实际应用中大家会慢慢理解,这里不过多介绍 )

Button的标题文字 : Title 中输入登录

Button的标题颜色 : Text Color 选取白色

Button的标题文字大小 : Font 选取20

Button的背景图片 : image (输入想要添加的图片名字即可)

Button的背景颜色 : Background 选取红色

Button的透明度 : Alpha 选取0.8

Button的标题文字位置 : control中的Alignment 居中

4A057812-2C6D-4C9B-AC4B-E005ABBDC764.png

很重要的一点就是Button一般都带有点击事件,通过StoryBoard也可以实现:

点击右上角 show the identity inspector 编辑栏来选取Button的根视图控制器:

394D3C73-F7A7-4AE6-ABF8-BFD0864A74F3.png

如上图设置ViewController为根视图控制器.

然后点击右上角的拖拽栏的双圈图标,把Button拖拽到ViewController.m中

37565586-FF61-454C-84FB-87BC71B24C0C.png

在弹出的的界面中填写事件名字.

3F7D7A64-96EB-40EA-8CCC-FEE3A2554795.png

点击Connect创建就可以了,Button的点击事件的方法就写好了.

EF539F16-6209-4453-B464-856356EC238E.png

很多其他控件的创建方法也大多是这样的,希望大家以后学习中共同探讨.