【iOS开发】在界面上显示“HELLO”

大家学习iOS开发,都想有朝一日看到自己的第一个界面程序。本文介绍了在界面上显示“HELLO”的整个开发过程,可供iOS初学者参考。

第一步 打开Xcode开发工具
在MAC电脑的Launchpad中打开Xcode工具,如图1所示。

图1 打开Xcode工具示意图

要新建工程,选择图1中的“Create a new Xcode project”。

第二步 创建iOS工程
选择图1中的“Create a new Xcode project”之后,即可进入如图2所示的界面。

图2 选择iOS应用的类型

在图2中,我们选择iOS的Application中的Single View Application,并单击Next,即可进入图3所示的界面。

图3 确定工程名字、所用语言、运行设备等

在图3中,我们可以输入Product Name,选择Language和Devices,并单击Next,即可进入图4所示的界面。

图4 选择工程存放位置

在图4中,我们可以选择工程的存放位置。选择好之后,单击Create,即可成功创建工程。

第三步 设置界面内容
创建好iOS工程之后,我们可以看到整个工程的程序布局,如图5所示。

图5 iOS工程的程序布局

由于本次我们只是在界面上显示HELLO,并不涉及其他内容,因此,我们只要关注图5中的红色框中的Main.storyboard。单击Main.storyboard,可看到如图6所示的空白界面。

图6 空白的界面

由于我们没有对界面做任何操作,因此整个界面是空空如也,啥东西也没有。此时,我们要将5个文本框拉入界面中,并依次展示H、E、L、L、O五个字母。操作完成之后的界面如图7所示。

图7 拉入文本框之后的界面

我们在图7中的红色框1处输入“text”,即可出现Text文本框。由于要显示五个字母,因此我们要将五个文本框拉入到界面上,并双击每一个文本框,将对应的字母输进去。

第四步 运行程序
将五个文本框排列整齐之后,我们接下来就可以看到程序的实际运行效果了。在运行程序之前,我们要选择将程序运行在哪类设备上。选择运行设备并运行程序的操作如图8所示。

图8 选择运行设备并运行程序

在图8中,红色框1所示的设备(iPhone 6s)即为我们选择的运行设备。我们单击红色框1,还可以看到有更多的设备,如图9所示。

图9 iOS程序运行设备

单击图8中的红色框2,整个程序便运行起来了。运行完成之后的效果如图10所示。

图10 程序运行效果示意图

我们之前所做的所有工作都展示在了图10中,当看到它的时候,我们会有一种所有的付出都得到了回报的感觉。但是,有的时候,我们会觉得结果不尽如人意,那么我们就要对程序做一些修改,或者改变一下界面元素的布局,等等。在这里,我们也可以对文本框的大小、位置和文字的字体等做一些修改,如图11所示。

图11 界面元素的属性修改示意图

如图11所示,我们选中某个文本框,便可以在右边的属性列表中对文字样式、颜色、字体、对齐方式等进行修改了。此外,我们也可以拉动整个文本框,对其位置和大小进行修改。

总结
本文中的内容比较简单,只是在界面上显示了文字,并没有涉及到具体的代码的修改。尽管如此,通过本文中的整个程序开发流程,我们可以感受到iOS开发工具(Xcode)的强大及整个iOS开发过程的趣味性。在以后的文章中,我们会更加深入地认识iOS开发,会涉及到更加有趣的东西。

时间: 2024-10-23 07:59:16

【iOS开发】在界面上显示“HELLO”的相关文章

ios 语音通话的问题。听不到对方的声音,界面上显示没有通化数据。

问题描述 直接用的下载的demo3.0和一个android端的测试,我说话对方能听到,对方说话我这儿听不到,并且界面上显示"没有通话数据",请问是怎么回事呢,难道是xcode模拟器的问题?暂时还没有真机调试. 解决方案 真机测试下.

ios开发在表视图显示cell里的内容时出现failed to obtain a cell from its datasource

问题描述 ios开发在表视图显示cell里的内容时出现failed to obtain a cell from its datasource 这是代码 -(NSInteger)tableView:(UITableView )tableView numberOfRowsInSection:(NSInteger)section{ return 1; } -(UITableViewCell)tableView:(UITableView )tableView cellForRowAtIndexPath:

vc-VC、Matlab混合编程之VC界面上显示Matlab窗口

问题描述 VC.Matlab混合编程之VC界面上显示Matlab窗口 各位大神,VC中如何获取隐藏窗口的句柄,FindWindow()为什么不行呢?还有VC和matlab混个编程中怎么样在VC中找到隐藏了的matlab窗口句柄?求赐教 解决方案 Matlab VC C++ 混合编程MATLAB与VC混合编程VC与Matlab混合编程

时间组件 精确到分-ExtJS 前台时间组件取值,在界面上显示,精确到分

问题描述 ExtJS 前台时间组件取值,在界面上显示,精确到分 ExtJS的时间组件,取值之后在界面上显示精确到分.应该如何获取? 要在下面的显示框中显示,精确到分. 解决方案 如果有源码,自己继承一下,修改一下返回值方法. 类似http://shuimomo.blog.51cto.com/1141396/1293750/ 改写一下返回值就行了或者格式化返回值. 解决方案二: ext没有2个结合的组件吧,自己扩展的看源代码是否有格式化参数设置 如Ext.picker.Time这个插件配置**fo

android编程怎么在锁屏界面上显示文字

问题描述 android编程怎么在锁屏界面上显示文字 android编程中怎么在锁屏界面上显示文字,请大家帮我一下.

xml-XML是如何使用的?如何在程序界面上显示类似word里面的文本和图片

问题描述 XML是如何使用的?如何在程序界面上显示类似word里面的文本和图片 老师叫我做一个字典软件,数据用XML存储!如何从程序中去读取XML的内容,那些标签如何过滤识别! 还有TextPanel如何使用!!! 解决方案 xml使用的标签都是自定义的,你获取数据的时候首先要获取到文档对象,再获取头元素,再获取子元素,一直下去带内容

VIUC++ 6.0语言怎么在界面上显示波纹图

问题描述 VIUC++ 6.0语言怎么在界面上显示波纹图 VIUC++ 6.0语言根据读取的数组求导以后绘制波纹图,并且可以用鼠标释放大小 解决方案 参考:http://bbs.csdn.net/topics/390509580 有例子代码 解决方案二: 是Visual C++ 6.0么?首先把数据算成要显示在窗口中的坐标,然后用GDI绘图去画图,鼠标的操作要添加鼠标的消息处理函数

ios开发 布局-IOS开发中Scrollview怎么显示图片和标题

问题描述 IOS开发中Scrollview怎么显示图片和标题 如题,怎么显示成类似九宫格的样式,可以点击进入别的页面,小白,请多多指教 解决方案 用collection view吧.用法和tableview差不多 解决方案二: Scrollview显示图片,直接在Scrollview上面加载一个imageview显示图片就行,标题也是一样,直接加label就行.Scrollview只是用来滑动而已.可以在Scrollview的点击回调函数里面实现页面跳转. 解决方案三: iOS 开发中如何显示网

图片-JAVA在当前程序界面上显示出一个对话框,关闭后当前程序界面乱了。

问题描述 JAVA在当前程序界面上显示出一个对话框,关闭后当前程序界面乱了. 这是刚运行后的界面点击确定后成这样了 刚下面的回答看不懂啊 我新手. 圈着的是那个弹出对话框的的代码..放到RigisterFrame注册界面内的. 解决方案 好像没有设定页面刷新吧.错误提示代码以后,加个页面刷新试试. 解决方案二: //a代表教徒,b代表非教徒 public class Test { /** Enter Content. @author zhangjing @date 2015-5-19 @para