现在是5月14日的下午,我通过查阅相关的资料,学习了SWIFT的书籍以及人家的SWIFT代码,多多少少学到了一些浅薄的知识。由于进行SWIFT的项目开发时日尚浅,因此,代码以及界面的设计上仍然存在一些问题或是不足之处,希望能够多加指正!
今天的博客主要是关于一个简单的,通过邮箱登录的界面的设计以及实现,内容大体包含了一个头像框,一个邮箱的输入框,一个密码的输入框,一个登录的按钮,同时用以返回的导航栏按钮。在这里我的代码没有关联账户,目前只是一个偏向于展示页面布局的demo。如果你点击登录,后台的数据库在没有关联的情况下,不会产生任何反应。(数据库的关联是很后面的工作,因此前面的博客更加侧重页面布局的展示,只是一个demo!!!)
说了这么多,先放上我的一个效果图(如下)
然后就是代码的实现部分了,为了实现这个界面,有这么几个值得注意的地方。
1、首先这个圆形的图像框,因为在swift中,是没有圆形的图片显示方式,因此我在这里用了设置“.layer.cornerRadius”的方法,通过改变他的值,我们可以调整对象的显示边角的圆滑程度。如果将这个值设置为显示对象的宽度与宽度的一半(这里我使用的是一个正方形的显示对象,长度=宽度),那么最终显示的就会是一个圆形的图片了。
2、无论是邮箱还是密码的输入框,这里都要注意到,在你输入文字的时候,原本textField中的提示文字就要消失,这一点在代码中实现了。遗憾的是我还没有做到,在输入密码的时候应该让输入信息以“ **** ”这样的方式代替显示,这个地方在下次更新的时候应该会完善好!
3、其实所有的button按钮在swift中也是没有圆角的,但是为了显示的效果,同样采取了和头像框一样的方法,通过改变“.layer.cornerRadius”的大小,将矩形按钮变成了圆角按钮。
以下是完整的代码
//
// LogViewController.swift
// FinalTest
//
// Created by 沈力同 on 2017/5/10.
// Copyright © 2017年 沈力同. All rights reserved.
//
import UIKit
class LogViewController: UIViewController {
let screenSizeWidth = UIScreen.main.bounds.size.width
let screenSizeHeight = UIScreen.main.bounds.size.height
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = UIColor.black
let image_BG = UIImageView(image:UIImage(named:"IMG02.jpg"))
image_BG.frame = CGRect(x: 0, y: 0, width: screenSizeWidth, height: screenSizeHeight)
self.view.addSubview(image_BG)
//圆形图片头像显示
let image_U = UIImageView(image:UIImage(named:"IMG01.jpg"))
let round_radius:CGFloat = 40
image_U.frame = CGRect(x: screenSizeWidth/2-round_radius, y: 90, width: round_radius*2, height: round_radius*2)
image_U.layer.cornerRadius = round_radius
image_U.layer.masksToBounds = true
self.view.addSubview(image_U)
//邮箱输入框
let text01 = UITextField(frame:CGRect(x:5, y:190, width:screenSizeWidth-10, height:50))
text01.borderStyle = UITextBorderStyle.roundedRect
text01.alpha = 0.75
text01.placeholder = "邮箱"
text01.adjustsFontSizeToFitWidth=true //当文字超出文本框宽度时,自动调整文字大小
text01.minimumFontSize=14 //最小可缩小的字号
text01.clearButtonMode = .whileEditing //编辑时出现清除按钮
text01.textAlignment = .center //水平居中对齐
self.view.addSubview(text01)
//密码输入框
let text02 = UITextField(frame:CGRect(x:5, y:243, width:screenSizeWidth-10, height:50))
text02.borderStyle = UITextBorderStyle.roundedRect
text02.alpha = 0.75
text02.placeholder = "密码"
text02.adjustsFontSizeToFitWidth=true //当文字超出文本框宽度时,自动调整文字大小
text02.minimumFontSize=14 //最小可缩小的字号
text02.clearButtonMode = .whileEditing //编辑时出现清除按钮
text02.textAlignment = .center //水平居中对齐
self.view.addSubview(text02)
//登录按钮
let button01:UIButton = UIButton(type:.system)
button01.layer.borderColor = UIColor.orange.cgColor;
button01.layer.borderWidth = 2;
button01.layer.cornerRadius = 5;
button01.frame = CGRect(x:5, y:296, width:screenSizeWidth-10, height:50)
button01.setTitle("登录", for:.normal)
self.view.addSubview(button01)
button01.setTitleColor(UIColor.black, for: .normal) //普通状态下文字的颜色
button01.backgroundColor = UIColor.orange
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}
希望多加指正!!!