5DF1DA99-D931-4154-ABA3-D9AE1CB8C0C8.png
](https://img.haomeiwen.com/i1714255/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
很多其他控件的创建方法也大多是这样的,希望大家以后学习中共同探讨.
网友评论