54 - Swift 之登錄模塊

聲明：本次更新是對以往學(xué)習(xí)的知識進(jìn)行復(fù)習(xí)。

一、 登錄模塊

? ? ? ? ? ? ? ? 登錄模塊是每一個App的開發(fā)部分，在App中有著很重要的地位，同過登錄，我們能獲取用戶的信息或者一些App使用特權(quán)等。

二 、本Demo 的展示

Simulator Screen Shot 2017年7月31日 下午3.57.36.png

三 、 本Demo 使用到的知識點總結(jié)

  • 圖像的只適應(yīng)存儲它的容器

  • 圖像多余，如何裁剪多余的區(qū)域

  • 定時器的使用

  • 旋轉(zhuǎn)活動指示器的使用

  • 在異步線程中怎么回到主線程

  • 請求獲取數(shù)據(jù)的解析

四、相關(guān)代碼

1> 登錄頁面的布局

// TODO : 登錄頁面的布局
func makeLoginUI() -> Void {
    /**
     設(shè)置背景
     */
    let bGImageView = UIImageView.init(frame: self.view.frame)
    bGImageView.contentMode = UIViewContentMode.scaleAspectFill
    bGImageView.image = UIImage.init(named: "BgImageView")
    bGImageView.isUserInteractionEnabled = true
    self.view.addSubview(bGImageView)
    
    /**
     Heard ImageView
     */
    let heardImageV = UIImageView.init(frame: CGRect.init(x: 0, y: 0, width: 80, height: 80))
    heardImageV.center = CGPoint.init(x: self.view.center.x, y: 160)
    heardImageV.layer.masksToBounds = true
    heardImageV.image = UIImage.init(named: "HeaderImageV")
    heardImageV.layer.borderWidth = 6
    heardImageV.layer.backgroundColor = UIColor.cyan.cgColor
    heardImageV.layer.cornerRadius = heardImageV.bounds.width * 0.5
    heardImageV.contentMode = .scaleAspectFill
    bGImageView.addSubview(heardImageV)
    
    /**
     賬號
     */
    let AccountLable = UILabel.init(frame: CGRect.init(x: 40, y:heardImageV.frame.maxY+30
, width: 40, height: 30))
    AccountLable.text = "賬戶:"
    bGImageView.addSubview(AccountLable)
    
    AccountTextField = UITextField.init(frame: CGRect.init(x: AccountLable.frame.maxX+10, y: heardImageV.frame.maxY + 32, width: bGImageView.frame.width - 90 - AccountLable.frame.width, height: 30))
    AccountTextField?.placeholder = "請輸入您的賬戶"
    bGImageView.addSubview(AccountTextField!)
    
    let line = UIView.init(frame: CGRect.init(x: 40, y: AccountLable.frame.maxY, width: bGImageView.frame.width - 80, height: 1))
    line.backgroundColor = UIColor.gray
    bGImageView.addSubview(line)
    
    /**
     密碼
     */
    let passWLable = UILabel.init(frame: CGRect.init(x: 40, y: line.frame.maxY+40, width: 40, height: 30))
    passWLable.text = "密碼:"
    bGImageView.addSubview(passWLable)
    
    passWTextField = UITextField.init(frame: CGRect.init(x: passWLable.frame.maxX+10, y: line.frame.maxY + 42, width: bGImageView.frame.width - passWLable.frame.width - 90, height: 30))
    passWTextField?.placeholder = "請輸入密碼"
    bGImageView.addSubview(passWTextField!)
    
    let lineV = UIView .init(frame: CGRect.init(x: 40, y: passWLable.frame.maxY, width: bGImageView.frame.width - 80, height: 1))
    lineV.backgroundColor = UIColor.gray
    bGImageView.addSubview(lineV)

    /**
     點擊按鈕
     */
    let loginBtn = UIButton.init(frame: CGRect.init(x: 40, y: lineV.frame.maxY + 50, width: bGImageView.frame.width - 80, height: 40))
    loginBtn.setTitle("登錄", for: .normal)
    loginBtn.setTitleColor(UIColor.black, for: .normal)
    loginBtn.layer.cornerRadius = 6
    loginBtn.addTarget(self, action:#selector(click(_:)), for:.touchUpInside)
    loginBtn.layer.borderColor = UIColor.gray.cgColor
    loginBtn.layer.borderWidth = 1
    bGImageView.addSubview(loginBtn)
}

2> 自動消失的提示

// TODO : 簡短提示
func autoAlertView(message:String) -> Void {
    let autoAlert = UIAlertController.init(title: "", message: message, preferredStyle: .alert)
    self.present(autoAlert, animated: true) { 
        self.timer = Timer.init(timeInterval: 10, repeats: false, block: { (time) in
            autoAlert.dismiss(animated: true, completion:{
               self.timer?.invalidate()
            })
        })
        self.timer?.fire()
    }
}

3> 活動指示器的提示

// TODO : 活動指示器的提示
func activityIndicator(isFinsh:Bool) -> Void {
    if isFinsh {
        underView?.removeFromSuperview()
        return;
    }
    underView = UIView.init(frame: self.view.frame)
    underView?.backgroundColor = UIColor.clear
    self.view.addSubview(underView!)
    
    let activitV = UIActivityIndicatorView.init(frame: CGRect.init(x: 0, y: 0, width: 80, height: 80))
    activitV.center = CGPoint.init(x: underView!.center.x, y: underView!.center.y)
    activitV.backgroundColor = UIColor.gray
    activitV.activityIndicatorViewStyle = .whiteLarge
    activitV.layer.cornerRadius = 6
    underView?.addSubview(activitV)
    activitV.startAnimating()
}

4> 數(shù)據(jù)的下載

func loadData() -> Void {
    self.activityIndicator(isFinsh: false)
    let url = URL.init(string: "http://api.3g.ifeng.com/clientShortNews?type=beauty")
    let request = URLRequest.init(url: url!)
    let DataTask = URLSession.shared.dataTask(with: request) { (data, resp, error) in
        self.activityIndicator(isFinsh: true)
        if data != nil && error == nil {
            let dict = try! JSONSerialization.jsonObject(with: data!, options: .mutableContainers)
            DispatchQueue.main.async(execute: {
                 let  Vc = HomeViewController.init()
                 Vc.dataDictionary = (dict as! NSDictionary)
                 let NavVc = UINavigationController.init(rootViewController: Vc)
                 self.present(NavVc, animated: true, completion: nil)
            })
        }
    }
    DataTask.resume()
}

5> 本Demo的效果展示

Untitled.gif

6> 完整代碼


import UIKit

class LoginViewController: UIViewController {

var AccountTextField:UITextField?
var passWTextField:UITextField?
var timer:Timer?
var underView:UIView?


override func viewDidLoad() {
    super.viewDidLoad()
    self.setNavition()
    self.makeLoginUI()
    // Do any additional setup after loading the view.
}

// TODO : 設(shè)置導(dǎo)航
func setNavition() -> Void {
    self.navigationItem.title = "登錄"
}

// TODO : 登錄頁面的布局
func makeLoginUI() -> Void {
    /**
     設(shè)置背景
     */
    let bGImageView = UIImageView.init(frame: self.view.frame)
    bGImageView.contentMode = UIViewContentMode.scaleAspectFill
    bGImageView.image = UIImage.init(named: "BgImageView")
    bGImageView.isUserInteractionEnabled = true
    self.view.addSubview(bGImageView)
    
    /**
     Heard ImageView
     */
    let heardImageV = UIImageView.init(frame: CGRect.init(x: 0, y: 0, width: 80, height: 80))
    heardImageV.center = CGPoint.init(x: self.view.center.x, y: 160)
    heardImageV.layer.masksToBounds = true
    heardImageV.image = UIImage.init(named: "HeaderImageV")
    heardImageV.layer.borderWidth = 6
    heardImageV.layer.backgroundColor = UIColor.cyan.cgColor
    heardImageV.layer.cornerRadius = heardImageV.bounds.width * 0.5
    heardImageV.contentMode = .scaleAspectFill
    bGImageView.addSubview(heardImageV)
    
    /**
     賬號
     */
    let AccountLable = UILabel.init(frame: CGRect.init(x: 40, y:heardImageV.frame.maxY+30
, width: 40, height: 30))
    AccountLable.text = "賬戶:"
    bGImageView.addSubview(AccountLable)
    
    AccountTextField = UITextField.init(frame: CGRect.init(x: AccountLable.frame.maxX+10, y: heardImageV.frame.maxY + 32, width: bGImageView.frame.width - 90 - AccountLable.frame.width, height: 30))
    AccountTextField?.placeholder = "請輸入您的賬戶"
    bGImageView.addSubview(AccountTextField!)
    
    let line = UIView.init(frame: CGRect.init(x: 40, y: AccountLable.frame.maxY, width: bGImageView.frame.width - 80, height: 1))
    line.backgroundColor = UIColor.gray
    bGImageView.addSubview(line)
    
    /**
     密碼
     */
    let passWLable = UILabel.init(frame: CGRect.init(x: 40, y: line.frame.maxY+40, width: 40, height: 30))
    passWLable.text = "密碼:"
    bGImageView.addSubview(passWLable)
    
    passWTextField = UITextField.init(frame: CGRect.init(x: passWLable.frame.maxX+10, y: line.frame.maxY + 42, width: bGImageView.frame.width - passWLable.frame.width - 90, height: 30))
    passWTextField?.placeholder = "請輸入密碼"
    bGImageView.addSubview(passWTextField!)
    
    let lineV = UIView .init(frame: CGRect.init(x: 40, y: passWLable.frame.maxY, width: bGImageView.frame.width - 80, height: 1))
    lineV.backgroundColor = UIColor.gray
    bGImageView.addSubview(lineV)

    /**
     點擊按鈕
     */
    let loginBtn = UIButton.init(frame: CGRect.init(x: 40, y: lineV.frame.maxY + 50, width: bGImageView.frame.width - 80, height: 40))
    loginBtn.setTitle("登錄", for: .normal)
    loginBtn.setTitleColor(UIColor.black, for: .normal)
    loginBtn.layer.cornerRadius = 6
    loginBtn.addTarget(self, action:#selector(click(_:)), for:.touchUpInside)
    loginBtn.layer.borderColor = UIColor.gray.cgColor
    loginBtn.layer.borderWidth = 1
    bGImageView.addSubview(loginBtn)
}


// TODO : 登錄事件的觸發(fā)
func click(_ btn:UIButton) -> Void {
    if (AccountTextField != nil) && (AccountTextField?.text?.characters.count != 0) {
        if self.passWTextField != nil && passWTextField?.text?.characters.count != 0 {
            self.loadData()
        }else{
            self.autoAlertView(message: "請?zhí)顚懨艽a")
        }
    }else{
        self.autoAlertView(message: "請?zhí)顚戀~戶")
    }
}

// TODO : 簡短提示
func autoAlertView(message:String) -> Void {
    let autoAlert = UIAlertController.init(title: "", message: message, preferredStyle: .alert)
    self.present(autoAlert, animated: true) { 
        self.timer = Timer.init(timeInterval: 10, repeats: false, block: { (time) in
            autoAlert.dismiss(animated: true, completion:{
               self.timer?.invalidate()
            })
        })
        self.timer?.fire()
    }
}

// TODO : 活動指示器的提示
func activityIndicator(isFinsh:Bool) -> Void {
    if isFinsh {
        underView?.removeFromSuperview()
        return;
    }
    underView = UIView.init(frame: self.view.frame)
    underView?.backgroundColor = UIColor.clear
    self.view.addSubview(underView!)
    
    let activitV = UIActivityIndicatorView.init(frame: CGRect.init(x: 0, y: 0, width: 80, height: 80))
    activitV.center = CGPoint.init(x: underView!.center.x, y: underView!.center.y)
    activitV.backgroundColor = UIColor.gray
    activitV.activityIndicatorViewStyle = .whiteLarge
    activitV.layer.cornerRadius = 6
    underView?.addSubview(activitV)
    activitV.startAnimating()
}


func loadData() -> Void {
    self.activityIndicator(isFinsh: false)
    let url = URL.init(string: "http://api.3g.ifeng.com/clientShortNews?type=beauty")
    let request = URLRequest.init(url: url!)
    let DataTask = URLSession.shared.dataTask(with: request) { (data, resp, error) in
        self.activityIndicator(isFinsh: true)
        if data != nil && error == nil {
            let dict = try! JSONSerialization.jsonObject(with: data!, options: .mutableContainers)
            DispatchQueue.main.async(execute: {
                 let  Vc = HomeViewController.init()
                 Vc.dataDictionary = (dict as! NSDictionary)
                 let NavVc = UINavigationController.init(rootViewController: Vc)
                 self.present(NavVc, animated: true, completion: nil)
            })
        }
    }
    DataTask.resume()
}

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

7> 登錄成功后的頁面


import UIKit



class HomeViewController: UIViewController,UITableViewDelegate,UITableViewDataSource {
var dataDictionary:NSDictionary?
override func viewDidLoad() {
    super.viewDidLoad()
    self.navigationItem.title = "首頁"
    let RootTableView = UITableView.init(frame: self.view.frame, style: .plain)
    RootTableView.delegate = self
    RootTableView.dataSource = self
    self.view.addSubview(RootTableView)
    // Do any additional setup after loading the view.
}

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
     return 60
}

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
     return (self.dataDictionary?["list"] as! NSArray).count
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    var cell = tableView.dequeueReusableCell(withIdentifier: "cell_login")
    if cell == nil {
         cell = UITableViewCell.init(style: .value1, reuseIdentifier: "cell_login")
    }
    let  arrayList = self.dataDictionary?["list"] as! NSArray
    let dict = arrayList[indexPath.row] as! NSDictionary
    cell?.textLabel?.text = (dict["name"] as! String)
    cell?.detailTextLabel?.text = (dict["type"] as! String)
    return cell!
}
override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,291評論 25贊 708
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 136,680評論 19贊 139
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,551評論 4贊 61
  • 江海無窮去，紅云繞岱生。 柴門收落日，臨岸誦黃庭。
    云蒼狗閱讀 380評論 2贊 4
  • 今天早上依然5點半就醒了，突然想起前段時間徐老師發(fā)群里的高考倒計時天數(shù)。頓覺緊張襲人。我在想我要做點什么...
    幸運二月閱讀 489評論 0贊 0

友情鏈接更多精彩內(nèi)容