iOS开发学习(一)着手创建自己的第一个App


        了解了iOS开发的基础知识,就要着手写一个小小的App了。这也是本文的目的。


        1.1创建新项目


        打开xcode,选择new 一个project,选择single view Application,创建一个project.

        


        1.2 添加用户界面元素.


        1)选择项目导航器中的 MainStoryboard.storyboard,将对象库中的用户界面 (UI) 元素拖移到画布上的视图中,来添加用户界面元素。UI 元素添加到视图后,可以适度移动它们的位置和调整大小。


        对象库出现在实用工具区域的底部。如果看不到对象库,您可以点按其按钮,即库选择栏中从左边起的第三个按钮。

        

        如果想添加什么界面元素可以用下面的搜索栏目直接搜索.我们下面添加几个界面元素到画布上.


        2)添加一个Image View,

        1.在object library中找到image view,并拖到视图中,image view会拉伸充满整个界面。

        

        

        image view上有8个点供开发者调整image view的大小,鼠标放在某个点就可以拖动其大小。如下:

        

        2.上传图片,让imageview 显示图片。选中一张图片,拖动到项目导航器中的supporting files中,如下图:

        

        按照图上中点击,选中Destination的checkbox,把图片复制到项目中,其他保留默认值即可。然后选择finish,这样一个图片就导入到项目中来了。

 

       3.让imageview 显示导入的图片.

        


        这样图片就可以显示在imageview中了,

        

        默认情况下,图片会拉伸到和imageview一致的大小,图片的显示方式是由imageview的mode属性设置的,mode属性位于Attributes inspector中的View栏。

        

        mode中值为scale to fill就是充满整个image view的意思。对于图片大小和显示方式的处理,iphone建议的是提供适当大小的图片(即图片的大小和最终要显示在iphone上的大小是一致的,不需要iphone的cpu进行更多的处理,这样有助于程序的快速运行和节约cpu的消耗),如果同一张图片有2种大小需要显示,那么你就传2张图片到程序了就可以了。


       选中图片,然后选中菜单栏中的Editor>Size to Fit Content,这样ImageView会自动调整到和图片原始尺寸一致.

       

       

       调整imageview 的位置,让它显示在最中央。


       3)添加2个Label和2个textfield

        

        1.添加过程很简单,和上文添加imageview类似,添加后的效果如下:

        

        Label和testfield的排列主要还是依靠蓝色的辅助线,挪动label和textfield的时候会有蓝色的辅助线辅助你实现对齐的功能。非常的简单。重命名label,并且调整textfield的大小。

        

        

        2个label的文字分别换成name和number,并向右对其(同时选中2个Label,选择菜单栏Editor>Align>Right Edges),2个textfield拉长到了合适的宽度。

 

        2.为textfield添加Placeholder文字

        Placeholder text是一种提示性的文字,默认显示在空的textfield中,当textfield获得焦点并输入内容后,Placeholder text会自动消失,当删除所有的内容,Placeholder text会再次出现。


        选中textfiled,在Attribute inspector中找到Placeholder,并输入“Type a Name”

        

        为两个textfile 添加之后,效果图如下:

        

        


       1.3添加代码 实现功能.


        如果这个时候我们直接运行程序,会发现当textfield获得焦点之后,会有一个虚拟键盘出现,我们可以选择要输入的字母。

        

        但是第二个textfield期望的是只能输入数字,所以我们需要更改下键盘的类型。选中第二个textfield在Attribute inspector中找到Keyboard,将其类型改成“Number Pad”        

 

        

       再次运行程序,点击第二个textfield就可以发现出现的数字键盘。

        


       如果运行起来可以发现我们输入结束后,如何隐藏键盘,当点击虚拟键盘的“return”按键时,它会调用一个Event,叫“Did End On Exit event”,我们可以关联一个Action到这个event,当触发这个event时,调用Action使键盘隐藏。


        1.4 先了解下Outlet  与action  :   outlet(插座,出口),action(行为)


        刚开始接触iOS开发,这两个关键字让我有点犯迷糊了。在网上查了下资料,大致是这么个意思:

        

        我们在main.storyboard中以图形化的方式建立用户界面。然后通过创建Outlet和Action,将main.storyboard中放置的控件与代码之间建立连接。使用Outlet,以定义变量的方式将控件链接到代码,该变量代表控件。使用Action,以定义方法的方式将控件链接到代码,该方法在用户与控件进行交互时运行。

    

        outlet和action是连接使用者界面和程序代码的关键。outlet就像c语言中的指针,指向一个对象。或者说是一个对象的引用,例如一个Label,一个textfield,在C# Winform中,我们会为每一个控件设定一个name,那么在编程时,直接使用这个name就可以对该控件进行操作,但是在ios里面,情况变得有些复杂,控件没有name,就是说你拖一个控件过来,这个控件是没有自己的name的,那么要在code中操作这个控件该怎么办呢?定义一个Outlet,然后把这个Outlet指向该控件,在code中就用这个Outlet来操作这个控件。


         Action:Action就是定义一个事件,然后将控件和action事件联系起来。C#可以单独定义事件,然后将控件和事件使用“+=”操作符联系起来就可以,虽然ios里面没有这个语法,但是也是需要联系的,联系建立起来以后,控件就可以触发这个事件了。如何建立action。例子如下:


         1.添加事件首先需要创建一个action,然后建立联系,xcode会帮我们来完成这两步。


         1)选中project navigator的main.storyboard显示iPhone的界面。

         2)选中Xcode右上角的7个按钮从左到右的第二个Show Assistant editor(快捷键:option+command+enter,菜单栏View>Assistant Editor>Show Assistant editor)

         

         3)选中后的界面如下,会在ipone界面的右面出现 UIExample1ViewController.h,我们等会就需要将textfield拖动到这个文件里面,然后进行一些相应的设置,xcode会自动的帮我们建立控件和action的联系。

 

        

        接下来就是创建action了,鼠标按住第一个textfield不放开,然后按住键盘上的control键,然后拖动到右边的UIExample1ViewController.h在@interface和@end中间放开鼠标

         (像素略喳。。。)


        松开鼠标之后,会弹出下列对话框:

        

        connection选择action,然后name定义为nameFieldAction,类型为UITextField,说明是UITextField事件,然后点击connect,创建完成后的代码如下图所示:

        


        在UIExample1ViewController.m中会自动添加如下代码:

        


        到这里,一个action就建立并且关联起来了,你可以在代码中实现一些功能。


        这里是由xcode 自动帮我们建立action,我们也可以手动建立action。删除掉UIExample1ViewController.m和UIExample1ViewController.h的代码,我们下面来手动添加下action。


        在UIExample1ViewController.h中添加

- (IBAction)nameFieldDoneEditing:(id)sender;

              在UIExample1ViewController.m中添加

- (IBAction)nameFieldDoneEditing:(id)sender
{
    [sender resignFirstResponder];
}
           FirstResponder的意思是正在和用户交互的那个控件,textfield正在和用户交互,这时的它就是FirstResponder。 resignFirstResponder的意思是放弃第一响应者,即textfield不再和用户进行交互,那么此时的textfield也不会获得焦点,这样键盘就自然而然的消失了。   

     
        我们这里只是创建了一个action,如何与控件建立关联。

        选中第一个text field,打开connections inspector,下图中的第6个图标(最右边的一个图标),找到connections inspector中的“Did End On Exit”方法,鼠标移到它右边的小圆圈,此时小圆圈中出现一个加号。

        


        按住鼠标左键不放,拖动到File's Owner上放开鼠标,此时一个小窗口会弹出,会显示File's Owner所拥有的Action


        


        这里会显示出来File's Owner所拥有的Action,选中nameFieldDoneEditing,这样“Did End On Exit”就和nameFieldDoneEditing方法关联起来了。  这是建立action的第二种方法。


        2.添加outlet。与上面第一种方法类似。拖动过去,选择outlet

        


        outlet创建完毕后的UIExample1ViewController.h如下所示:

        


        写到这里我们可以执行一下,来看看效果了。command+R运行,操作的时候可以看到点击键盘上的return,则虚拟键盘则会隐藏起来。所以我们达成了我们的第一个任务。


        那么第2个数字虚拟键盘如何让它隐藏起来了。这个虚拟键盘没有return键。

        



        我们采用的一种方法是:当我们点击屏幕上任何空白的地方时(包括ImageView和Label这些非活动控件,即静态控件),使键盘消失,这个操作相对简单,且可行性较高。    


        实现原理:

        先看下图的objects

        

        这里可以看到整个控件布局的一个树形图,我们添加的所有控件都会放到一个根view上面的。这个View是不可见的,但是它充满了整个iphone屏幕,我们要做的就是写一个Action,希望能够使这个View所携带的一个event调用这个Action从而达到隐藏键盘的目的。但是这个根View的类型是UIView


        


        uiview中是没有event的,这样无法和action相关联起来。因此我们需要把根View的类型UIView改成UIControl,UIControl是UIView的子类,它包含所有UIView的特性,且里面有我们所需要的event,所以这样的改变是非常合理且可行的。


        

        objects中的类型也随之发生了变化,变成了control。


        


        2)创建一个Action:backgroundTap

        UIExample1ViewController.h:

- (IBAction)backgroundTap:(id)sender;

        UIExample1ViewController.m:

- (IBAction)backgroundTap:(id)sender{
    [NameField resignFirstResponder];//和上文中提到的作用类似
    [AgeField resignFirstResponder];
}

        3)关联action

        选中根Control,切换到connections inspector,因为我们希望的是点击任何地方,键盘都会隐藏,所以我们选中Touch Down event。按住鼠标左键拖到File's Owner,选择backgroundTap action,关联完毕。


        


        再次编译和运行,看数字键盘能否消失。ok,经测试,没有任何问题。


        今天就到此为止,一个最简单的app就创建出来了。明天继续研究iOS学习。




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值