forecho

把生命浪费在美好的事物上

iOS开发实例(四)- 用户界面(上)

2012年11月18日

这次要完成的效果图如下: 一、创建一个名为Control Fun的项目,选择的依旧的Single View Application模板。 二、用Photoshop做一张宽度小于300px高度小于100px的图片,此处我们使用的是(172px*80px),下图文件: 然后把图片直接拖到我们的Xcode项目中。记得在提示框中选中Copy items into destination group's folder(if needed)复选框。PS:我习惯性的把图片文件拖到Supporting Files文件夹下面。   三、根据上一节学到的知识,我们在BIDViewController.xib中制作出下图的效果来: 1、在IB中找到image View库,然后拖到视图中,刚拖过来时会自动全屏显示,然后需要我们手动调试大小,大致调的差不多就好了,然后在右边属性框找到Image View中,下拉选择我们需要的图片文件。(此处系统会自动识别图片文件)。 2、调整图片大小:有个最简单的方法,依次选择Editor->Size to Fit Content,那么Xcode会自动调试成图片原尺寸大小。 3、调整图片的位置:最简单的方法依次选择Editor->Align->Horizontal Conter in Container,Xcode会自动帮我们把图片放在视图中间位置。 4、接下来就是该设置图片属性了,下面是我总结的一张表(其实是Text文本库的属性,但是后面的属性跟图片是一样的): 此处基本上所以属性我们都不用该,只需要取消Drawing 下面的Clip SubviewsAutoresize Subviews这两个选项即可,因为此处我们根本不需要这两项。 5、在IB里面直接拖过来各俩个Text和Lable库,然后按照上上图布局即可。(小窍门:同时选中Lable的两个标签然后依次选择Editor->Align->Right Edges可以使两个标签文字右对齐)。 6、选中Text标签,然后根据自己的需要来选择或修改属性。(可以查看上图注释)此处我们在Placeholder添加了Type in a name;Capitalization 选择Words;Drawing选中Opaque取消Clears Graphics Context和Clip Subviews;Number的Text基本上和Name的Text一样,除了Placeholder添加了Type in a number;Capitalization保持默认,Keyboard选择Number Pad。   四、创建链接和输出口: 根据上一节学习的,按住control按键拖动Text到.h文件中,Name的Text在Name字段中填写nameField,Number的Text在Name字段中填写numberField,如下图: 此时我们可以Run一下我们的程序,得到如下结果即为成功:   五、关闭键盘 1、完成输入之后关闭键盘:只需在.h文件@end前加入如下代码即可:

- (IBAction)textFieldDoneEditing:(id)sender;

在.m文件中@end前加入如下代码:

- (IBAction)textFieldDoneEditing:(id)sender {
    [sender resignFirstResponder];
}

选中Name的Text,找到右边属性的最后一个图标,找到Did End ON Exit 将旁边那个圈拖到File's Owner,如下图,然后选择textFieldDoneEditing操作。 2、通过触摸背景关闭键盘:在.h文件@end前添加如下代码:

- (IBAction)backgroundTop:(id)sender;

在.m文件中@endq前加入如下代码:

-(IBAction)backgroundTop:(id)sender{
    [nameField resignFirstResponder];
    [numberField resignFirstResponder];
}

现在我们需要把View在右边属性中找到class从UIView改成UIControl,只有这样背景才能有触发操作。然后找到右边属性的最后一个图标,找到Tounch Down 将旁边那个圈拖到File's Owner,选择backgroundTop操作。   接下来我们Run一下,如果程序没有出问题的话,就能实现点击背景关闭键盘功能。   -———-上部分完,下部分请点击这里。