从零开始学ios开发(四):IOS控件(1),Image View、Text Field、Keyboard
长话短说,谢谢大家的关注,这篇写了好长时间,下面继续学习ios。我将用2到3篇的篇幅来学习iphone上的一些常用控件,包括Image View、Text Field、Keyboard、Slider等等,这篇的内容包括ImageView和Keyboard的使用。完成后的效果图如下:
1)创建一个新的project,选择“Single View Application”,命名为“Control Fun”,然后保存。
一些和前几章相似的步骤在从这篇起就开始一笔待过了,也不再做截图了,例如这里的创建一个新的project。
2)添加ImageView
选中project navigator中的BIDViewController.xib,在object library中找到Image View并拖入iphone视图中。
当把Image View拖入iphone视图后,Image View会拉伸充满整个iphone的界面(除了最上面的状态栏)。
(据我猜测,很多app在启动时都会有一张图片展示,停个几秒钟,就应该是上面的这种效果,当然,那时的状态栏也是被遮住的。)
在ImageView的四条边上总共有8个点可以调整ImageView的大小,鼠标放在某一个点上去调整ImageView的大小,调整后的ImageView如下
至于具体的长宽是多少这个无所谓,因为最终的大小会以上传图片的实际大小为准。
3)上传图片到project中,整个过程很简单,选中某一张图片,拖到project navigator中的Supporting Files文件夹中
放开鼠标后,一个对话框会弹出,问你如何处理这张图片,我们选中Destination的checkbox,把图片复制到项目中,其他保留默认值即可。
4)为ImageView添加图片
选中刚才添加的ImageView,在Attributes inspector中找到“Image View”中的Image
单击下拉按钮,刚才上传的图片已经显示在下拉列表中,选中即可,这样,图片就显示在ImageView里面了。
5)调整图片大小
默认情况下,图片会被拉伸到和ImageView一致的大小,图片的显示方式是由ImageView的Model属性来控制的,Model属性位于Attributes inspector中的View栏
上图中,Model的值为“Scale To Fill”,就是充满整个ImageView。
对于图片大小和显示方式的处理,iphone建议的是提供适当大小的图片(即图片的大小和最终要显示在iphone上的大小是一致的,不需要iphone的cpu进行更多的处理,这样有助于程序的快速运行和节约cpu的消耗),如果同一张图片有2种大小需要显示,那么你就传2张图片到程序了就可以了。
6)调整ImageView到图片的原始尺寸
首先选中图片,第一次选中图片的状态和4)里面的一致,然后我们再次单击图片,这时图片周围会有一圈灰色的边框
然后选中菜单栏中的Editor>Size to Fit Content,这样ImageView会自动调整到和图片原始尺寸一致
最后在调整一下ImageView的显示位置即可。
7)添加2个Label和2个textfield
Label在上一篇中已经提到过,textfield在object library中的样子:
添加过程比较简单,具体操作可以参考前2篇的,下面是添加完Label和textfield后的效果,Label和testfield的排列主要还是依靠蓝色的辅助线
8)重命名Label,调整textfield大小
上图中,2个Label的文字分别换成了Name和Number,并向右对其(同时选中2个Label,选择菜单栏Editor>Align>Right Edges),2个textfield拉长到了合适的宽度。
9)为textfield添加Placeholder文字
Placeholder text是一种提示性的文字,默认显示在空的textfield中,当textfield获得焦点并输入内容后,Placeholder text会自动消失,当删除所有的内容,Placeholder text会再次出现。
选中第一个textfield,在Attribute inspector中找到Placeholder,并输入“Type a Name”
同样为第二个textfield的Placeholder输入“Type a Number”,完成后的效果
可以运行一下程序(command + R),看看实际的Placeholder text的效果是怎么样的。
至此,所有的界面布局都已经完成,下面进入code阶段,将学习如何调用iphone的虚拟键盘。
10)虚拟数字键盘
如果在第9步运行了程序,会发现当textfield获得焦点后,会有一个虚拟键盘弹出
但是第二个textfield期望的是只能够输入数字,不能够输入其他字符,因此需要改变虚拟键盘的类型,选中第二个textfield,在Attribute inspector中找到Keyboard,将其类型改成“Number Pad”
再次运行程序,让第二个text field获取焦点,一个虚拟数字键盘就出现了。
此时,一个新的问题又出现了,当我们输入结束后,如何隐藏键盘?当点击虚拟键盘的“return”按键时,它会调用一个Event,叫“Did End On Exit event”,我们可以关联一个Action到这个event,当触发这个event时,调用Action使键盘隐藏,下面说说具体的隐藏键盘的方法。
11)创建Outlet
在这个例子中,ImageView和Label在程序运行时都不会改变,因此不必为他们创建Outlet,我们只需为2个textfield创建Outlet即可。
在这里就不详细的重复创建Outlet的步骤了,有需要的朋友可以看我上一篇的文章,里面有描述如何创建Outlet。
Outlet创建完毕后的BIDViewController.h如下

#import <UIKit/UIKit.h> @interface BIDViewController : UIViewController
@property (weak, nonatomic) IBOutlet UITextField *nameField;
@property (weak, nonatomic) IBOutlet UITextField *numberField; @end

BIDViewController.m

#import "BIDViewController.h" @implementation BIDViewController
@synthesize nameField;
@synthesize numberField; ......

我们添加了2个指向textfield的Outlet,分别命名为nameField和numberField。
12)手动添加一个Action
在上一章里,我们是通过和添加Outlet同样的方式在添加Action,在这章里,手动的添加Action。
a)在BIDViewController.h中声明一个Action:textFieldDoneEditing

#import <UIKit/UIKit.h> @interface BIDViewController : UIViewController
@property (weak, nonatomic) IBOutlet UITextField *nameField;
@property (weak, nonatomic) IBOutlet UITextField *numberField; - (IBAction)textFieldDoneEditing:(id)sender; @end

b)在BIDViewController.m的最后实现textFieldDoneEditing方法
- (IBAction)textFieldDoneEditing:(id)sender
{
[sender resignFirstResponder];
}
(下面是我个人对resignFirstResponder的理解,如果有错,希望大家能够指正,谢谢!)
这里注意“resignFirstResponder”,FirstResponder的意思是正在和用户交互的那个控件,textfield正在和用户交互,这时的它就是FirstResponder。 resignFirstResponder的意思是放弃第一响应者,即textfield不再和用户进行交互,那么此时的textfield也不会获得焦点,这样键盘就自然而然的消失了。
13)关联Action
选中第一个text field,打开connections inspector,下图中的第6个图标(最右边的一个图标)
找到connections inspector中的“Did End On Exit”方法,鼠标移到它右边的小圆圈,此时小圆圈中出现一个加号
按住鼠标左键不放,拖动到File's Owner上放开鼠标,此时一个小窗口会弹出,会显示File's Owner所拥有的Action
选中textFieldDoneEditing,这样“Did End On Exit”就和textFieldDoneEditing方法关联起来了
在此运行程序看看效果,当在第一个text field中输入完文字后,点虚拟键盘上的“return”按钮,键盘消失了。
但是第二个textfield调用的是数字键盘,没有“return”键,那要如何隐藏键盘呢?一种方式是再次使第一个textfield获得焦点,然后调出一般的虚拟键盘,点击“return”,隐藏键盘,但是这种方法过于繁琐且不切实际,如果我们没有第一个textfield呢?那岂不是很悲催了?好在事情没有那么糟糕,我们使用另一种方法使键盘消失,当我们点击屏幕上任何空白的地方时(包括ImageView和Label这些非活动控件,即静态控件),使键盘消失,这个操作相对简单,且可行性较高。
14)实现原理
先看下图Objects
这是一个控件布局的树形图,我们添加的所有控件都是放在一个根View上面的,这个View是不可见的,但是它充满了整个iphone屏幕,我们要做的就是写一个Action,希望能够使这个View所携带的一个event调用这个Action从而达到隐藏键盘的目的。但是这个根View的类型是UIView(identity inspector)
UIView是没有event的,这样就更无法和Action关联,因此我们需要把根View的类型UIView改成UIControl,UIControl是UIView的子类,它包含所有UIView的特性,且里面有我们所需要的event,所以这样的改变是非常合理且可行的。
选中Objects中的根View,在identity inspector中,将UIView改成UIControl。
Objects中的类型也随之改变
15)创建另一个Action:backgroundTap
BIDViewController.h
- (IBAction)backgroundTap:(id)sender;
BIDViewController.m
- (IBAction)backgroundTap:(id)sender
{
[nameField resignFirstResponder];
[numberField resignFirstResponder];
}
16)关联Action
选中根Control,切换到connections inspector,因为我们希望的是点击任何地方,键盘都会隐藏,所以我们选中Touch Down event
按住鼠标左键拖到File's Owner,选择backgroundTap action,关联完毕。
再次编译运行程序,在第二个textfield中输入数字,点击屏幕上的任何地方,虚拟数字键盘消失
至此,所有的功能开发完毕。
从零开始学ios开发(四):IOS控件(1),Image View、Text Field、Keyboard的更多相关文章
- IOS开发中设置控件内容对齐方式时容易混淆的几个属性
IOS开发中四个容易混淆的属性: 1. textAligment : 文字的水平方向的对齐方式 1> 取值 NSTextAlignmentLeft = 0, // 左对齐 NST ...
- iOS 开发 ZFUI framework控件,使布局更简单
来自:http://www.jianshu.com/p/bcf86b170d9c 前言 为什么会写这个?因为在iOS开发中,界面的布局一直没有Android布局有那么多的方法和优势,我个人开发都是纯代 ...
- iOS开发基础-UITableView控件简单介绍
UITableView 继承自 UIScrollView ,用于实现表格数据展示,支持垂直滚动. UITableView 需要一个数据源来显示数据,并向数据源查询一共有多少行数据以及每一行显示什么 ...
- IOS开发自定义CheckBox控件
IOS本身没有系统的CheckBox组件,但是实际开发中会经常用到,所以专门写了一个CheckBox控件,直接上代码 效果图: UICheckBoxButton.h文件如下: #import #imp ...
- iOS开发中UIDatePicker控件的使用方法简介
iOS上的选择时间日期的控件是这样的,左边是时间和日期混合,右边是单纯的日期模式. 您可以选择自己需要的模式,Time, Date,Date and Time , Count Down Timer四 ...
- iOS开发无第三方控件的援助达到的效果侧边栏
最近的研究iOS程序侧边栏.渐渐的发现iOS该方案还开始采取风侧边栏格该,QQ,今日头条,Path(Path运营商最早的侧边栏app该,效果说成是Path效果),所以就研究了下. 然后发现Git Hu ...
- ios开发中button控件的属性及常见问题
最为最基本的控件,我们必须对button的每个常用属性都熟练应用: 1,使用之前,必须对按钮进行定义,为乐规范,在@interface ViewController (){}中进行定义,先定义后使用. ...
- IOS开发--自定义segment控件,方便自定义样式
系统的segment控件太封闭,想换个颜色加个背景太难了,忍不住自己写一个,以备不时之需 这个控件给出了很多自定义属性的设置,用起来还是比较方便的,需要注意的 itemWidth如果不设置,则会按照控 ...
- IOS开发之按钮控件Button详解
reference:http://mxcvns.lofter.com/post/1d23b1a3_685d59d 首先是继承问题,UIButton继承于UIControl,而UIControl继承于U ...
- ios开发之--系统控件显示中文
虽然一直知道X-code肯定提供有语言本地化的设置地方,但是一直也做个记录,有些时候的汉化,还是需要使用代码去控制,键盘的右下角.navagiton的return使用代码修改,调用系统相机时,也是出现 ...
随机推荐
- Java之注解
package com.demo.test; import java.lang.annotation.Documented; import java.lang.annotation.ElementTy ...
- Javascript中的Bind 、Call和Apply
看以下代码: var bind = Function.prototype.call.bind(Function.prototype.bind); 第一眼看上去,我能猜出它究竟是用来做什么的.它把x.y ...
- ERS-2卫星
ERS-2卫星是欧洲空间局的第二颗资源遥感卫星,携带有雷达测高仪.综合孔径雷达等多种科学仪器,是一颗多任务.多学科的科学考察卫星.[1] ERS-1 ERS-2 欧空局分别于1991年和1995年发射 ...
- Bypass pattern lock on Sony Xperia Z2 and backup all data
Yesterday she came to me with a Sony Xperia Z2 D6503. Guess what? She forgot the pattern so she coul ...
- Android IOS WebRTC 音视频开发总结(四九)-- ffmpeg介绍
本文主要介绍ffmpeg,文章来自博客园RTC.Blacker,支持原创,转载必须说明出处,个人微信公众号blacker,更多详见www.rtc.help 说明: ps1:如果直接从webrtc开始学 ...
- 为js和css文件自动添加版本号
web应用必然要面对缓存问题,无论前台后台都会涉足缓存.特别是对于前端而言,缓存利用的是否得当直接关系到应用的性能. 通常情况下,我们会倾向于使用缓存,因为缓存一方面可以减少网络开销,一方面可以减轻服 ...
- 十七、OGNL表达式
十七.OGNL OGNL简介: OGNL是对象导航图语言.它是一个独立的项目.早期的webwork框架用到了OGNL作为自己的表达式语言, 所以struts2也是用OGNL作为表达式语言,当然也可以使 ...
- “Sysprep 错误 + CAPI2 引起的蓝屏”的参考解决方法
这些天我在给学校机房部署 Windows 7 系统时,遇到一些问题,在网上找了很长时间才找到,其中有一个还是英文的资料.特此分享出来,希望能给遇到同样问题的人一个参考.由于学校的机子型号不都一样,所以 ...
- JS数组(Array)处理函数总结
1.concat() 连接两个或更多的数组该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本.例如: <script type="text/javascript"&g ...
- 插入排序与shell排序(希尔排序)
1 .插入排序的过程如同我们平时打扑克牌取牌插入的过程,不断将取出的扑克牌插入已经排好的地方. 插入排序过程初始有序区间大小为1,取出无序区间的首元素,查找有序区间的合适位置,进行插入.不断重复上述过 ...