Swift4.0学习笔记(三)——文本输入框(UITextField)

2018-02-27 11:15:13来源:https://www.jianshu.com/p/3cb4fe6c2888作者:古川不爱笑人点击

分享


1.声明控件UITextField


override func viewDidLoad() {
super.viewDidLoad()
//定义控件x:30 y:100 width:300 height:40
let textField = UITextField(frame: CGRect(x: 30, y: 100, width: 300, height: 40))
//由于背景是白色的,所以设置背景色才能看得见textField
textField.backgroundColor = UIColor.gray
//将控件添加到子视图中
self.view.addSubview(textField)
}


运行结果如下图所示:


简单声明

2.TextField边框样式,默认无边框



UITextBorderStyle.none:无边框
UITextBorderStyle.line:直线边框
UITextBorderStyle.roundedRect:圆角矩形边框
UITextBorderStyle.bezel:边线+阴影
例如:
override func viewDidLoad() {
super.viewDidLoad()
//定义控件x:30 y:100 width:300 height:40
let textField = UITextField(frame: CGRect(x: 30, y: 100, width: 300, height: 40))
//设置边框样式 边线+阴影
textField.borderStyle = .bezel
//将控件添加到子视图中
self.view.addSubview(textField)
}


效果如下:


边线+阴影

3.设置边框颜色、线宽、圆角半径


//需现将masksToBounds设置为true
textField.layer.masksToBounds = true
textField.layer.borderColor = UIColor.blue.cgColor
textField.layer.borderWidth = 2.0
textField.layer.cornerRadius = 5.0


效果如下:


修改边框样式

4.文本框提示文字以及属性设置


textField.placeholder = "这是提示文本"//提示文本
//当文字超出文本框宽度时,自动调整文字大小,默认是以省略号代替
textField.adjustsFontSizeToFitWidth = true
textField.minimumFontSize=10 //最小可缩小的字号


效果如下:


自适应.gif

5.设置水平/垂直对齐方式


/** 水平对齐 **/
textField.textAlignment = .right //水平右对齐
textField.textAlignment = .center //水平居中对齐
textField.textAlignment = .left //水平左对齐

/** 垂直对齐 **/
textField.contentVerticalAlignment = .top //垂直向上对齐
textField.contentVerticalAlignment = .center //垂直居中对齐
textField.contentVerticalAlignment = .bottom //垂直向下对齐

6.设置背景图片


textField.borderStyle = .none //先要去除边框样式
textField.background = UIImage(named:"bgImg");

7.设置清除按钮


textField.clearButtonMode = .whileEditing  //编辑时出现清除按钮
textField.clearButtonMode = .unlessEditing //编辑时不出现,编辑后才出现清除按钮
textField.clearButtonMode = .always //一直显示清除按钮

8.设置键盘输入类型


Default:系统默认的虚拟键盘
ASCII Capable:显示英文字母的虚拟键盘
Numbers and Punctuation:显示数字和标点的虚拟键盘
URL:显示便于输入url网址的虚拟键盘
Number Pad:显示便于输入数字的虚拟键盘
Phone Pad:显示便于拨号呼叫的虚拟键盘
Name Phone Pad:显示便于聊天拨号的虚拟键盘
Email Address:显示便于输入Email的虚拟键盘
Decimal Pad:显示用于输入数字和小数点的虚拟键盘
Twitter:显示方便些Twitter的虚拟键盘
Web Search:显示便于在网页上书写的虚拟键盘
textField.becomeFirstResponder()//获取输入焦点,并弹出键盘
//textField.resignFirstResponder()//失去焦点,并收起键盘
textField.keyboardType = .numberPad//设置键盘输入模式


如果你在使用模拟器的时候发现键盘没有弹出来,可以通过下面的操作弹出键盘,Hardwar-->Keyboard-->取消Connect Hardware Keyboard的选中状态,或者你直接使用快捷键shift+command+k即可弹出键盘,


弹出键盘

9.设置键盘上return键的样式


done //表示完成输入
go //表示完成输入,同时会跳到另一页
search //表示搜索
join //表示注册用户或添加数据
next //表示继续下一步
send //表示发送
textField.returnKeyType = UIReturnKeyType.done //表示完成输入
textField.returnKeyType = UIReturnKeyType.go //表示完成输入,同时会跳到另一页
textField.returnKeyType = UIReturnKeyType.search //表示搜索
textField.returnKeyType = UIReturnKeyType.join //表示注册用户或添加数据
textField.returnKeyType = UIReturnKeyType.next //表示继续下一步
textField.returnKeyType = UIReturnKeyType.send //表示发送

10.为return添加响应时间,首先需要实现协议UITextFieldDelegate,然后为textField绑定return点击事件


class ViewController: UIViewController, UITextFieldDelegate {
override func viewDidLoad() {
super.viewDidLoad()
//定义控件x:30 y:100 width:300 height:40
let textField = UITextField(frame: CGRect(x: 30, y: 100, width: 300, height: 40))
//设置边框样式 圆角
textField.borderStyle = .roundedRect
//将控件添加到子视图中
self.view.addSubview(textField)

//需现将masksToBounds设置为true
textField.layer.masksToBounds = true
textField.layer.borderColor = UIColor.blue.cgColor
textField.layer.borderWidth = 2.0
textField.layer.cornerRadius = 5.0

textField.placeholder = "这是提示文本"//提示文本
//当文字超出文本框宽度时,自动调整文字大小,默认是以省略号代替
textField.adjustsFontSizeToFitWidth = true
textField.minimumFontSize=10 //最小可缩小的字号

textField.becomeFirstResponder()//获取输入焦点,并弹出键盘
textField.keyboardType = .webSearch//设置键盘输入模式
textField.returnKeyType = .done //设置return键样式
textField.delegate = self //为textField绑定事件
}
//实现return点击事件
func textFieldShouldReturn(_ textField: UITextField) -> Bool {
print(textField.text ?? "")
return true
}

override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}


运行结果如下图所示:


return点击事件.png

大家再学习的过程中,一定要多动手尝试,尽量把每个属性都尝试一下看看运行的效果,如果遇到本文没有讲到的内容,请根据具体情况进行搜索。









最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台