Swift纯代码登录框猫头鹰遮眼效果

最新推荐文章于 2023-07-10 12:10:52 发布

彳饕餮亍

最新推荐文章于 2023-07-10 12:10:52 发布

阅读量234

点赞数

文章标签： swift ios 动画

本文链接：https://blog.csdn.net/qq_53163443/article/details/130642572

版权

该文章展示了如何在iOS应用中删除SceneDelegate文件，并从info.plist中移除相关配置。接着，它详细介绍了如何构建一个带有动画效果的登录界面，包括用户名和密码输入框，以及使用UITextFieldDelegate进行交互。当用户在输入框中开始编辑时，会有相应的遮眼动画来模拟猫头鹰遮挡眼睛的效果。

摘要由CSDN通过智能技术生成

1.删除SceneDelegate

在这里插入图片描述

2.删除info.plist中的配置项

删除info.plist中的Application Scene Manifest
在这里插入图片描述

3.ViewController

import UIKit
 
class ViewController: UIViewController,UITextFieldDelegate{
    
    //登录form框的状态枚举
    enum LoginStatusType{
        case NONE
        case USERNAME
        case PASSWORD
    }
    
    //用户名密码输入框
    var userName:UITextField!
    var password:UITextField!
    //登录按钮
    var loginButton:UIButton!
    
    //左手离脑袋的距离
    var distanceLeftHand:CGFloat = 60
    
    // 左右手图片，遮盖眼睛部分
    var imageLeftHand:UIImageView!
    var imageRightHand:UIImageView!
    
    //左右手图片，圆形
    var imageLeftHandCircle:UIImageView!
    var imageRightHandCircle:UIImageView!
    
    
    //初始化登录状态为NOENE
    var loginStatesType:LoginStatusType = LoginStatusType.NONE

    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        //获取屏幕宽高
        let screenSize = UIScreen.main.bounds
        //宽度
        let screenWidth = screenSize.width
        
        
        
        //猫头鹰的头部
        let imageHead = UIImageView(frame: CGRectMake(screenWidth/2-211/2, 100, 211, 109))
        imageHead.image = UIImage(named: "owl-login")
        //避免图像超出父布局的范围而显示在外面
        imageHead.layer.masksToBounds = true
        self.view.addSubview(imageHead)
        
        //猫头鹰的左手，遮盖眼睛
        let rectLeftHand = CGRectMake(61-distanceLeftHand, 90, 40, 65)
        imageLeftHand = UIImageView(frame: rectLeftHand)
        imageLeftHand.image = UIImage(named: "owl-login-arm-left")
        imageHead.addSubview(imageLeftHand)
        
        //猫头鹰的右手，遮盖眼睛
        let rectRightHand = CGRectMake(imageHead.frame.size.width / 2 + 60, 90, 40, 65)
        imageRightHand = UIImageView(frame: rectRightHand)
        imageRightHand.image = UIImage(named: "owl-login-arm-right")
        imageHead.addSubview(imageRightHand)
        
        
        //登录框
        let Login =  UIView(frame:CGRectMake(15, 200, screenWidth - 30, 210))
        Login.layer.borderWidth = 0.5
        Login.layer.borderColor = UIColor.lightGray.cgColor
        Login.backgroundColor = UIColor.white
        self.view.addSubview(Login)
        
        //猫头鹰左手(圆形的)
        let rectLeftHandCircle = CGRectMake(screenWidth / 2 - 100,Login.frame.origin.y - 22, 40, 40)
        imageLeftHandCircle = UIImageView(frame:rectLeftHandCircle)
        imageLeftHandCircle.image = UIImage(named:"icon_hand")
        self.view.addSubview(imageLeftHandCircle)
        //猫头鹰右手(圆形的)
        let rectRightHandCircle = CGRectMake(screenWidth / 2 + 62,Login.frame.origin.y - 22, 40, 40)
        imageRightHandCircle = UIImageView(frame:rectRightHandCircle)
        imageRightHandCircle.image = UIImage(named:"icon_hand")
        self.view.addSubview(imageRightHandCircle)
        
        //用户名输入框
        userName = UITextField(frame:CGRectMake(30, 30, Login.frame.size.width - 60, 44))
        userName.delegate = self
        userName.layer.cornerRadius = 5
        userName.layer.borderColor = UIColor.lightGray.cgColor
        userName.layer.borderWidth = 0.5
        userName.leftView = UIView(frame:CGRectMake(0, 0, 44, 44))
        userName.leftViewMode = UITextField.ViewMode.always
                 
        //用户名输入框左侧图标
        let imgUser =  UIImageView(frame:CGRectMake(11, 11, 22, 22))
        imgUser.image = UIImage(named:"iconfont-user")
        userName.leftView!.addSubview(imgUser)
        Login.addSubview(userName)
                 
        //密码输入框
        password = UITextField(frame:CGRectMake(30, 90, Login.frame.size.width - 60, 44))
        password.delegate = self
        password.layer.cornerRadius = 5
        password.layer.borderColor = UIColor.lightGray.cgColor
        password.layer.borderWidth = 0.5
        password.isSecureTextEntry = true
        password.leftView = UIView(frame:CGRectMake(0, 0, 44, 44))
        password.leftViewMode = UITextField.ViewMode.always
                 
        //密码输入框左侧图标
        let imgPwd =  UIImageView(frame:CGRectMake(11, 11, 22, 22))
        imgPwd.image = UIImage(named:"iconfont-password")
        password.leftView!.addSubview(imgPwd)
        Login.addSubview(password)
        
        //登录按钮
        loginButton = UIButton(type: .system)
        loginButton.frame = CGRectMake(30, 150, Login.frame.size.width - 60, 44)
        loginButton.setTitle("登录", for: .normal)
        loginButton.addTarget(self, action: #selector(buttonClicked), for: .touchUpInside)
        Login.addSubview(loginButton)
        
        
    }
    
    
    @objc func buttonClicked(){
        print("button clicked")
        
    }
    
    
    //输入框获取焦点
    func textFieldDidBeginEditing(_ textField: UITextField) {
        //如果输入框焦点为username
        if textField.isEqual(userName){
            if(loginStatesType != LoginStatusType.PASSWORD){
                loginStatesType = LoginStatusType.USERNAME
                return
            }
            loginStatesType = LoginStatusType.USERNAME
            
            //播放不遮眼睛动画
            UIView.animate(withDuration: 0.5) {
                self.imageLeftHand.frame = CGRectMake(
                    self.imageLeftHand.frame.origin.x - self.distanceLeftHand,
                    self.imageLeftHand.frame.origin.y + 30,
                    self.imageLeftHand.frame.size.width, self.imageLeftHand.frame.size.height)
                self.imageRightHand.frame = CGRectMake(
                    self.imageRightHand.frame.origin.x + 48,
                    self.imageRightHand.frame.origin.y + 30,
                    self.imageRightHand.frame.size.width, self.imageRightHand.frame.size.height)
                self.imageLeftHandCircle.frame = CGRectMake(
                    self.imageLeftHandCircle.frame.origin.x - 70,
                    self.imageLeftHandCircle.frame.origin.y, 40, 40)
                self.imageRightHandCircle.frame = CGRectMake(
                    self.imageRightHandCircle.frame.origin.x + 30,
                    self.imageRightHandCircle.frame.origin.y, 40, 40)
            }
        }
        //如果是密码输入
        else if textField.isEqual(password){
            if(loginStatesType == LoginStatusType.PASSWORD){
                loginStatesType = LoginStatusType.PASSWORD
                return
            }
            loginStatesType = LoginStatusType.PASSWORD
            
            
            //播放遮眼动画s
            UIView.animate(withDuration: 0.5) {
                self.imageLeftHand.frame = CGRectMake(
                    self.imageLeftHand.frame.origin.x + self.distanceLeftHand,
                    self.imageLeftHand.frame.origin.y - 30,
                    self.imageLeftHand.frame.size.width, self.imageLeftHand.frame.size.height)
                self.imageRightHand.frame = CGRectMake(
                    self.imageRightHand.frame.origin.x - 48,
                    self.imageRightHand.frame.origin.y - 30,
                    self.imageRightHand.frame.size.width, self.imageRightHand.frame.size.height)
                self.imageLeftHandCircle.frame = CGRectMake(
                    self.imageLeftHandCircle.frame.origin.x + 70,
                    self.imageLeftHandCircle.frame.origin.y, 0, 0)
                self.imageRightHandCircle.frame = CGRectMake(
                    self.imageRightHandCircle.frame.origin.x - 30,
                    self.imageRightHandCircle.frame.origin.y, 0, 0)
            }
        }
    }
    
    override func didReceiveMemoryWarning() {
           super.didReceiveMemoryWarning()
       }

}