基于iOS的APP“好妈妈”开发日志四——Tab Bar Controller与主要界面相结合，登录界面动画

基于iOS的APP“好妈妈”开发日志四

---

Tab Bar Controller与主要界面相结合

目前还未解决四个tabbar的图标问题，即大小，点击的变化。
简单实现了添加姨妈日期的界面⤵️

实现代码如下：

import UIKit
import SnapKit

class SetMenstruationViewController: UIViewController, UIActionSheetDelegate {

    var Date = UIDatePicker()
    var SetTime = UITextField()
    @IBAction func ConfirmValueAndPass(_ sender: Any) {
        //ViewController.text = MentruationTime
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 选择框样式
        SetTime.frame = CGRect(x: self.view.frame.origin.x + 65, y: self.view.frame.origin.y + 100, width: self.view.frame.width * 2 / 3, height: 40)
        SetTime.layer.cornerRadius = 5.0
        SetTime.layer.borderWidth = 0.7
        SetTime.layer.borderColor = UIColor.darkGray.cgColor
        SetTime.textAlignment = .center
        SetTime.placeholder = "还记得上一次来姨妈吗？"
        SetTime.endEditing(false)
        
        // 日期选择器属性及样式
        Date.locale = NSLocale(localeIdentifier: "zh_cn") as Locale
        Date.timeZone = NSTimeZone.system
        Date.datePickerMode = UIDatePickerMode.date
        Date.addTarget(self, action: #selector(getDate), for: UIControlEvents.valueChanged)
        Date.layer.backgroundColor = UIColor.white.cgColor
        Date.layer.masksToBounds = true
        
        // 重点的一句
        SetTime.inputView = Date
        
        self.view.addSubview(SetTime)

        
        // Do any additional setup after loading the view.
        /*let datePicker = UIDatePicker()
        datePicker.center = CGPoint(x: 200, y: 250)
        datePicker.tag = 1
        self.view.addSubview(datePicker)
        let rect = CGRect(x: 70, y: 360, width: 280, height: 44)
        let button = UIButton(type: UIButtonType.roundedRect)
        button.frame = rect
        button.backgroundColor = UIColor.lightGray
        button.setTitle("最近一次姨妈日期", for: UIControlState())
        button.addTarget(self, action: #selector(SetMenstruationViewController.getDate), for: UIControlEvents.touchUpInside)
        self.view.addSubview(button)
        */
        
    }
    
    @objc func getDate(Date: UIDatePicker) {
        let formatter = DateFormatter()
        let date = Date.date
        formatter.dateFormat = "YYYY年 MM月 dd日"
        let dateStr = formatter.string(from: date)
        self.SetTime.text = dateStr
        
        let MentruationTime = date+1*60*60*24
        
        /*let MentruationTime = Calendar(identifier: .chinese)
        let year = MentruationTime.component(.year, from: date)
        let month = MentruationTime.component(.month, from: date)
        let day = MentruationTime.component(.day, from: date)
        print("year:\(year) month:\(month) day:\(day)")*///输出年月日不正确
        
        //print(date+1*60*60*24) //对日期进行加减
    }
    
    /*@objc func getDate(){
        let datePicker = self.view.viewWithTag(1) as! UIDatePicker
        let date = datePicker.date
        let dateFormater = DateFormatter()
        dateFormater.dateFormat = "yyyy-MM-dd"
        let dateAndTime = dateFormater.string(from: date)
        
        let alert = UIAlertController(title: "Information", message: dateAndTime, preferredStyle: UIAlertControllerStyle.alert)
        let alertAction = UIAlertAction(title: "OK", style: UIAlertActionStyle.default, handler: nil)
        alert.addAction(alertAction)
        self.present(alert, animated: true, completion: nil)
    }*/

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

SignView登录界面优化

点击密码输入框时会闭上眼睛?

触摸空白处会使键盘收起
代码如下：

import UIKit
import LeanCloud
import AVOSCloud
import SnapKit
import Alamofire

class SignViewController: UIViewController, UITextFieldDelegate, SearchTableViewDelegate {
    //收起键盘
    func hideKeyBoard() {
        self.txtUser.resignFirstResponder()
        self.txtPwd.resignFirstResponder()
    }
    
    
    var txtUser: UITextField! //用户名输入框
    var txtPwd: UITextField! //密码输入款
    var formView: UIView! //登陆框视图
    var horizontalLine: UIView! //分隔线
    var confirmButton:UIButton! //登录按钮
    var titleLabel: UILabel! //标题标签
    var imgLogin:UIImageView!
    
    var topConstraint: Constraint? //登录框距顶部距离约束

    override func viewDidLoad() {
        super.viewDidLoad()
        
        var tap: UITapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(closeKeyboard))
        tap.numberOfTapsRequired = 1
        tap.numberOfTouchesRequired = 1
        self.view.addGestureRecognizer(tap)
        //视图背景色
        self.view.backgroundColor = UIColor(red: 255/255, green: 192/255, blue: 203/255,
                                            alpha: 1)
                                            //获取屏幕尺寸
        let mainSize = UIScreen.main.bounds.size
        
        //猫头鹰头部
        self.imgLogin = UIImageView(frame: CGRect(x: mainSize.width/2-211/2, y: 100, width: 211, height: 109))
            //UIImageView(frame:CGRectMake(, 100, 211, 109))
        imgLogin.image = UIImage(named:"owl-login")
        imgLogin.layer.masksToBounds = true
        self.view.addSubview(imgLogin)
        
        
        //猫头鹰左手(遮眼睛的)
        let rectLeftHand = CGRect(x:61 - offsetLeftHand, y:90, width:40, height:65)
        imgLeftHand = UIImageView(frame:rectLeftHand)
        imgLeftHand.image = UIImage(named:"owl-login-arm-left")
        imgLogin.addSubview(imgLeftHand)
        
        //猫头鹰右手(遮眼睛的)
        let rectRightHand = CGRect(x:imgLogin.frame.size.width / 2 + 60, y:90, width:40, height:65)
        imgRightHand = UIImageView(frame:rectRightHand)
        imgRightHand.image = UIImage(named:"owl-login-arm-right")
        imgLogin.addSubview(imgRightHand)
        
        //登录框背景
        let vLogin =  UIView(frame:CGRect(x:15, y:200, width:mainSize.width - 30, height:160))
        vLogin.layer.borderWidth = 0.5
        vLogin.layer.cornerRadius = 10 //四周角的尖锐度
        vLogin.layer.borderColor = UIColor.lightGray.cgColor
        vLogin.backgroundColor = UIColor.white
        self.view.addSubview(vLogin)
        
        //登录按钮
        self.confirmButton = UIButton()
        self.confirmButton.setTitle("登录", for: UIControlState())
        self.confirmButton.setTitleColor(UIColor.black,
                                         for: UIControlState())
        self.confirmButton.layer.cornerRadius = 5
        self.confirmButton.backgroundColor = UIColor(red: 1, green: 1, blue: 1,alpha: 0.5)
        self.confirmButton.addTarget(self, action: #selector(loginConfrim),for: .touchUpInside)
        self.view.addSubview(self.confirmButton)
        self.confirmButton.snp.makeConstraints { (make) -> Void in
            make.left.equalTo(15)
            make.top.equalTo(vLogin.snp.bottom).offset(20)
            make.right.equalTo(-15)
            make.height.equalTo(44)
        }
        
        //用户名框
        txtUser = UITextField(frame:CGRect(x:30, y:30, width:vLogin.frame.size.width - 60, height:44))
        txtUser.delegate = self
        txtUser.placeholder = "用户名"
        txtUser.layer.cornerRadius = 5
        txtUser.layer.borderColor = UIColor.lightGray.cgColor
        txtUser.layer.borderWidth = 0.5
        txtUser.leftView = UIView(frame:CGRect(x:0, y:0, width:44, height:44))
        txtUser.leftViewMode = UITextFieldViewMode.always
        
        let imgUser =  UIImageView(frame:CGRect(x:11, y:11, width:22, height:22))
        imgUser.image = UIImage(named:"icon_zhanghao")
        txtUser.leftView!.addSubview(imgUser)
        vLogin.addSubview(txtUser)
        
        //密码输入框
        txtPwd = UITextField(frame:CGRect(x:30, y:90, width:vLogin.frame.size.width - 60, height:44))
        txtPwd.delegate = self
        txtPwd.placeholder = "密码"
        txtPwd.layer.cornerRadius = 5
        txtPwd.layer.borderColor = UIColor.lightGray.cgColor
        txtPwd.layer.borderWidth = 0.5
        //txtPwd.secureTextEntry = true
        txtPwd.leftView = UIView(frame:CGRect(x:0, y:0, width:44, height:44))
        txtPwd.leftViewMode = UITextFieldViewMode.always
        
        //密码输入框左侧图标
        let imgPwd =  UIImageView(frame:CGRect(x:11, y:11, width:22, height:22))
        imgPwd.image = UIImage(named:"mima")
        txtPwd.leftView!.addSubview(imgPwd)
        vLogin.addSubview(txtPwd)
        
        
        //猫头鹰左手(圆形的)
        let rectLeftHandGone = CGRect(x:mainSize.width / 2 - 100,
                                      y:vLogin.frame.origin.y - 22, width:40, height:40)
        imgLeftHandGone = UIImageView(frame:rectLeftHandGone)
        imgLeftHandGone.image = UIImage(named:"icon_hand")
        self.view.addSubview(imgLeftHandGone)
        
        //猫头鹰右手(圆形的)
        let rectRightHandGone = CGRect(x:mainSize.width / 2 + 62,
                                       y:vLogin.frame.origin.y - 22, width:40, height:40)
        imgRightHandGone = UIImageView(frame:rectRightHandGone)
        imgRightHandGone.image = UIImage(named:"icon_hand")
        self.view.addSubview(imgRightHandGone)
        
        
    }
    
    //输入框获取焦点开始编辑
    func textFieldDidBeginEditing(_ textField:UITextField)
    {
        UIView.animate(withDuration: 0.5, animations: { () -> Void in
            self.topConstraint?.update(offset: -125)
            self.view.layoutIfNeeded()
        })
        
        //如果当前是用户名输入
        if textField.isEqual(txtUser){
            if (showType != LoginShowType.PASS)
            {
                showType = LoginShowType.USER
                return
            }
            showType = LoginShowType.USER
            
            //播放不遮眼动画
            UIView.animate(withDuration: 0.5, animations: { () -> Void in
                self.imgLeftHand.frame = CGRect(
                    x:self.imgLeftHand.frame.origin.x - self.offsetLeftHand,
                    y:self.imgLeftHand.frame.origin.y + 30,
                    width:self.imgLeftHand.frame.size.width, height:self.imgLeftHand.frame.size.height)
                self.imgRightHand.frame = CGRect(
                    x:self.imgRightHand.frame.origin.x + 48,
                    y:self.imgRightHand.frame.origin.y + 30,
                    width:self.imgRightHand.frame.size.width, height:self.imgRightHand.frame.size.height)
                self.imgLeftHandGone.frame = CGRect(
                    x:self.imgLeftHandGone.frame.origin.x - 70,
                    y:self.imgLeftHandGone.frame.origin.y, width:40, height:40)
                self.imgRightHandGone.frame = CGRect(
                    x:self.imgRightHandGone.frame.origin.x + 30,
                    y:self.imgRightHandGone.frame.origin.y, width:40, height:40)
            })
        }
            //如果当前是密码名输入
        else if textField.isEqual(txtPwd){
            if (showType == LoginShowType.PASS)
            {
                showType = LoginShowType.PASS
                return
            }
            showType = LoginShowType.PASS
            
            //播放遮眼动画
            UIView.animate(withDuration: 0.5, animations: { () -> Void in
                self.imgLeftHand.frame = CGRect(
                    x:self.imgLeftHand.frame.origin.x + self.offsetLeftHand,
                    y:self.imgLeftHand.frame.origin.y - 30,
                    width:self.imgLeftHand.frame.size.width, height:self.imgLeftHand.frame.size.height)
                self.imgRightHand.frame = CGRect(
                    x:self.imgRightHand.frame.origin.x - 48,
                    y:self.imgRightHand.frame.origin.y - 30,
                    width:self.imgRightHand.frame.size.width, height:self.imgRightHand.frame.size.height)
                self.imgLeftHandGone.frame = CGRect(
                    x:self.imgLeftHandGone.frame.origin.x + 70,
                    y:self.imgLeftHandGone.frame.origin.y, width:0, height:0)
                self.imgRightHandGone.frame = CGRect(
                    x:self.imgRightHandGone.frame.origin.x - 30,
                    y:self.imgRightHandGone.frame.origin.y, width:0, height:0)
            })
        }
        
    }
    
    //输入框返回时操作
    func textFieldShouldReturn(_ textField:UITextField) -> Bool
    {
        let tag = textField.tag
        switch tag {
        case 100:
            self.txtPwd.becomeFirstResponder()
        case 101:
            loginConfrim()
        default:
            print(textField.text!)
        }
        return true
    }
    
    
    @objc func closeKeyboard(){
        self.view.endEditing(true)
    }
    
    //登录按钮点击
    @objc func loginConfrim(){
        //收起键盘
        self.view.endEditing(true)
        //视图约束恢复初始设置
        UIView.animate(withDuration: 0.5, animations: { () -> Void in
            self.topConstraint?.update(offset: 0)
            self.view.layoutIfNeeded()
        })
        //self.present(TabBarController!, animated: true, completion: nil)
    }
    
    //左手离脑袋的距离
    var offsetLeftHand:CGFloat = 60
    
    //左手图片,右手图片(遮眼睛的)
    var imgLeftHand:UIImageView!
    var imgRightHand:UIImageView!
    
    //左手图片,右手图片(圆形的)
    var imgLeftHandGone:UIImageView!
    var imgRightHandGone:UIImageView!
    
    //登录框状态
    var showType:LoginShowType = LoginShowType.NONE
    
    enum LoginShowType {
        case NONE
        case USER
        case PASS
    }
}

代码参考航哥博客crs811.com

NodeJS的安装以及Express的安装

其中安装Express遇到问题

npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules
npm ERR! path /usr/local/lib/node_modules
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall access
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
npm ERR!  { [Error: EACCES: permission denied, access '/usr/local/lib/node_modules']
npm ERR!   stack:
npm ERR!    'Error: EACCES: permission denied, access \'/usr/local/lib/node_modules\'',
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/usr/local/lib/node_modules' }
npm ERR! 
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR! 
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator (though this is not recommended).

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/a10.12/.npm/_logs/2019-03-13T12_12_29_995Z-debug.log

MacOS，安装npm全局包提示没有写入权限：
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules

解决方法：
修改npm包所安装目录的权限：sudo chown -R $USER /usr/local 然后输入密码就可以了!

按教程https://www.jianshu.com/p/2275e831e4cb中写的cd 项目名称
npm install之后并没有在我的项目文件夹里发现增加一些行的文件夹

明天任务：网络服务器端实现

努力！奋斗！⛽️luhh！嘻嘻！在图书馆也想hh~