admin 管理员组文章数量: 1087652
IOS简单登陆页面demo
Swift学习记录（Xcode12+SwiftUI）
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)
//定义一个所需要使用的新颜色
这时候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)//设置文本填充
这些属性修饰符不懂的话可以学一下SwiftUI
视频介绍：/
Swift官方参考文档（英文）：/
然后我们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 SwiftUIlet 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 = falsevar 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 = trueself.authenticationDidFail = false}else{self.authenticationDidFail = trueself.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 :Stringvar body: some View {TextField("Username", text: $username).padding().background(LightGreyColor).cornerRadius(5.0).padding(.bottom,20)}
}struct PsswordSecureField: View {@Binding var password :Stringvar body: some View {SecureField("Password", text: $password).padding().background(LightGreyColor).cornerRadius(5.0).padding(.bottom,20)}
}本文标签： IOS简单登陆页面demo
版权声明：本文标题：IOS简单登陆页面demo 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1700299927a386398.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论