IOS简单登陆页面demo
=*次在CSDN发布文章，想到一年前自己学习ios开发时踩的各种坑，国内博客各种不完整，国外博客视频无奈英语水平低，遇到的问题不是很能理解，所以就想着趁着公司开发APP的机会，就写一个页面拿来写博客，也可以当作自己的一个学习记录吧。
开发环境介绍
开发环境的话是iMac（Retina 4K，2017）+ MacOS Big Sur + Xcode12.3 + Swift5
项目准备
运行MacOS系统电脑（Mac和黑苹果Hackintosh都可以）
登陆头像图片
开始实施
创建项目
Create a now Xcode project(创建一个现在的Xcode项目)
这里选择iOS大类下面的APP
这里的话就是给项目做命名的一些相关设置，名字可以随意，这次我们做登陆界面demo的话就让他叫：“LoginPage”
第2栏的话是组织标示符，现在做demo的话可以随便填，但是一定要填，不填Xcode不让继续创建项目。因为这里是用的是Swift语言开发，下面就UI选择Swift UI，开发的是Swift App，使用的语言是Swift，下面三个勾选的话现在做demo可以不用勾选，核心数据和包括测试。然后Next（下一步）。
到这一步的话就是选择一个存放位置，一般的话我习惯放在桌面（desktop），不过你们可以自己决定，存放位置不影响demo开发。
项目结构
1.箭头1所指的是文件目录
2.箭头2所指的是代码编辑区
3.箭头3所指的是实时界面展示
1.LoginpageApp.swift存放的是App启动页面代码，不编辑的话显示默认白色过度页面
2.ContentView.swift是项目的视图页面，这次demo主要的就是在里面进行编辑。
3.Assets.xcassets的话是Xcode项目的图片资源管理工具，一般图片资源，App图标都放在里面。
4.Info.plist的话是APP的一下设置页面，有关IOS系统的权限设置，例如蓝牙，定位权限设置，主要是一些运行期间的配置。
*次工具提示
创建完成项目的话，由于前面没有设置开发团队，会遇到这次demo的*次报错，也不算报错吧，应该是Xcode的一个提示，点击取消就行，不用进行设置，对这个demo没有什么影响。
登陆界面的头像导入
打开文件目录的Assets.xcassets图片资源管理器，打开访达找到你要设置头像的文件，拖拽放到Assets.xcassets左边的一栏中，然后为了后面方便引用。为其改名为image：
设置一个颜色的全局常量输入框（TextField）背景颜色
然后打开ContentView.swift开始登陆页demo的开发，这里的话因为我希望他的登陆页，用户名输入框（UsnemerField）和密码输入框（passwordField）的背景颜色是一个浅灰色，所以我需要生命一个常量储存我需要的颜色，在SwiftUI里面声明一个页面全局常量“LightGreyColorOne”
let LightGreyColorOne = Color(red:239.0 / 255.0,green:243.0 / 255.0,blue:244.0 / 255.0)
//定义一个所需要使用的新颜色
1
2
这时候ContentView.swift的代码是这样的：
import SwiftUI
let LightGreyColorOne = Color(red:239.0 / 255.0,green:243.0 / 255.0,blue:244.0 / 255.0)
//定义一个所需要使用的新颜色
struct SwiftUIView: View {
var body: some View {
Text(/@START_MENU_TOKEN@/“Hello, World!”/@END_MENU_TOKEN@/)
}
}
struct SwiftUIView_Previews: PreviewProvider {
static var previews: some View {
SwiftUIView()
}
}
我们先来对欢迎语“Steve Jobs”进行设置，body里面他默认给我们创建了一个名为“Hello World！的Text文本标签，我们只需要对其内容进行修改”
Text(“Steve Jobs”)//修改内容
.font(.largeTitle)//对文字基本属性进行设置.大标题
.fontWeight(.semibold)
.padding(.bottom,20)//设置文本填充
1
2
3
4
这些属性修饰符不懂的话可以学一下SwiftUI
视频介绍：https://developer.apple.com/videos/play/wwdc2019/204/
Swift官方参考文档（英文）：https://developer.apple.com/documentation/swiftui/
1
2
3
然后我们Resume看一下效果：
然后我们添加图片进去：
Image(“image”)
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 130 , height: 130)
.clipped()
.cornerRadius(150)
.padding(.bottom,85)
这时候右边实时预览发现又生成了一个新页面，而我们不要，我们要他在一个页面，我们就可以在body内添加VStack（将视图与vstack中另一个视图的前边和后边对齐）
再一次Resume：
达到我们所想要的效果，然后我们对文本、图片创建外包，按住command左键点击“Text”
命名为“HelloTextOne”，然后将图片以相同的方式进行外包这时候ContentView.swift代码结构如下：
import SwiftUI
let LightGreyColorOne = Color(red:239.0 / 255.0,green:243.0 / 255.0,blue:244.0 / 255.0)
//定义一个所需要使用的新颜色
struct SwiftUIView: View {
var body: some View {
VStack{
HelloTextOne()
ImageOne()
}
}
}
struct SwiftUIView_Previews: PreviewProvider {
static var previews: some View {
SwiftUIView()
}
}
struct HelloTextOne: View {
var body: some View {
Text(“Steve Jobs”)
.font(.largeTitle)
.fontWeight(.semibold)
.padding(.bottom,20)
}
}
struct ImageOne: View {
var body: some View {
Image(“image”)
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 130 , height: 130)
.clipped()
.cornerRadius(150)
.padding(.bottom,85)
}
}
接下来写用户名密码输入框，先定义用户名密码变量：
写在SwiftUIView结构体内，body之外
@State var usernameone : String = “”
@State var passwordone : String = “”
然后以相同方式写完用户名密码输入框
TextField(“Username”, text: $username)
.padding()
.background(LightGreyColor)
.cornerRadius(5.0)
.padding(.bottom,20)
密码框的话使用安全输入框：
SecureField(“Password”, text: $password)
.padding()
.background(LightGreyColor)
.cornerRadius(5.0)
.padding(.bottom,20)
然后写一个Text：
Text(“Login”)
.font(.headline)
.foregroundColor(.white)
.padding()
.frame(width: 220, height: 60)
.background(Color.black)
.cornerRadius(35)
创建Button(按钮)同时将其外包
LoginButtonContent()
struct LoginButtonContent: View {
var body: some View {
Text(“Login”)
.font(.headline)
.foregroundColor(.white)
.padding()
.frame(width: 220, height: 60)
.background(Color.black)
.cornerRadius(35)
}
}
然后Resume，结果如下：
到这一步即完成了界面，然后写两个默认用户名密码，简单写下判断逻辑，时间关系留到下次写。
*终效果如下：
密码正确
密码错误
完整demo没时间上传Github，直接放下面了
//
// ContentView.swift
// Loginpage
//
// Created by Soneaya on 2021/1/7.
//
import SwiftUI
let LightGreyColor = Color(red:239.0 / 255.0,green:243.0 / 255.0,blue:244.0 / 255.0)
//定义一个所需要使用的新颜色
let storeUsername = “Admin”
let storepassword = “admin123456”
struct ContentView: View {
//加了@State注解的变量，视图通过监视和读取该变量来重新渲染UI。
//其状态是由SwiftUI来存储管理的，作为视图渲染的单一可信来源。
@State var username : String = “”
@State var password : String = “”
@State var authenticationDidFail :Bool = false
@State var authenticationSucceed : Bool = false
var body: some View {
ZStack {
VStack{
HelloText()
UserImage()
UsernameTextField(username: $username)
PsswordSecureField(password: $password)
if authenticationDidFail{
Text(“Information not correct.Try again.”)
.offset(y:-10)
.foregroundColor(.red)
}
Button(action: {
if self.username == storeUsername && self.password == storepassword{
self.authenticationSucceed = true
self.authenticationDidFail = false
}else{
self.authenticationDidFail = true
self.authenticationSucceed = false
}
}){
LoginButtonContent()
}
}
.padding()
if authenticationSucceed{
Text(“Login Succeed!”)
.font(.headline)
.frame(width: 250, height: 80)
.background(Color.yellow)
.cornerRadius(20.0)
.animation(Animation.default)
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
struct HelloText: View {
var body: some View {
Text(“Steve Jobs”)
.font(.largeTitle)
.fontWeight(.semibold)
.padding(.bottom,20)
}
}
struct UserImage: View {
var body: some View {
Image(“image”)
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 130 , height: 130)
.clipped()
.cornerRadius(150)
.padding(.bottom,85)
}
}
struct LoginButtonContent: View {
var body: some View {
Text(“Login”)
.font(.headline)
.foregroundColor(.white)
.padding()
.frame(width: 220, height: 60)
.background(Color.black)
.cornerRadius(35)
}
}
struct UsernameTextField: View {
@Binding var username :String
var body: some View {
TextField(“Username”, text: $username)
.padding()
.background(LightGreyColor)
.cornerRadius(5.0)
.padding(.bottom,20)
}
}
struct PsswordSecureField: View {
@Binding var password :String
var body: some View {
SecureField(“Password”, text: $password)
.padding()
.background(LightGreyColor)
.cornerRadius(5.0)
.padding(.bottom,20)
}
}
