iOS开发 苹果登录按钮切图

Swift学习记录（Xcode12+SwiftUI）

IOS简单登陆页面demo

=第一次在CSDN发布文章，想到一年前自己学习ios开发时踩的各种坑，国内博客各种不完整，国外博客视频无奈英语水平低，遇到的问题不是很能理解，所以就想着趁着公司开发APP的机会，就写一个页面拿来写博客，也可以当作自己的一个学习记录吧。

开发环境介绍

开发环境的话是iMac（Retina 4K，2017）+ MacOS Big Sur + Xcode12.3 + Swift5

项目准备

• 运行MacOS系统电脑（Mac和黑苹果Hackintosh都可以）
• 登陆头像图片

开始实施

1. 创建项目
   
   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
视频介绍：https://developer.apple.com/videos/play/wwdc2019/204/
Swift官方参考文档（英文）：https://developer.apple.com/documentation/swiftui/

然后我们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)
    }
}