美文网首页
Day18 - 界面动态布局

Day18 - 界面动态布局

作者: Codepgq | 来源:发表于2016-09-24 17:39 被阅读75次

    在项目中可能存在很多的地方需要用户输入信息,这个时候一个屏幕显示不完,或者当键盘弹起的时候就会造成不好的用户体验,比如我自己都不知道我输入了什么……
    本实例最终效果:

    键盘弹起效果

    1、UI布局

    其他的布局都比较简单,这里我们只需要说一下底部的ToolBar布局

    • 1.1 拖入一个toolBarView


      第一步

      <br />

    • 1.2设置约束


      设置约束

      <br />

    • 1.3 添加bar button


      添加bar button
    重复上面 1.3步骤,知道添加五个button

    <br />

    • 1.4 设置第四个和第五个的距离


      设置距离

    <br />

    • 1.5 点击第一个Item

    设置图片

    重复上面的步骤设置好每个item

    <br />

    2、代码实现

    实现原理:监听一下键盘弹出和消失,得到键盘的高度,同时改变约束NSLayoutConstraint或者transform,我们这里改变的是约束,
    这里我们还需要注意的就是如果使用约束动画,那么一定要写对象点layoutIfNeeded(),强制刷新界面

    2.1 监听通知:键盘通知包括

    /*
            UIKeyboardWillHideNotification          将要隐藏
            UIKeyboardWillShowNotification          将要显示
            UIKeyboardDidChangeFrameNotification    已经修改frame
            UIKeyboardWillChangeFrameNotification   将要修改frame
            UIKeyboardDidHideNotification           已经隐藏
            UIKeyboardDidShowNotification           已经显示
             */
            
            /*
             UIKeyboardFrameBeginUserInfoKey        Rect
             UIKeyboardFrameEndUserInfoKey          Rect
             UIKeyboardAnimationDurationUserInfoKey 动画时长
             UIKeyboardAnimationCurveUserInfoKey    动画Options
             UIKeyboardIsLocalUserInfoKey           NSNumber of BOOL
             */
    

    其余代码:

    //
    //  ViewController.swift
    //  ListenKeyboard
    //
    //  Created by ios on 16/9/24.
    //  Copyright © 2016年 ios. All rights reserved.
    //
    
    import UIKit
    
    class ViewController: UIViewController,UITextViewDelegate {
    
        @IBOutlet weak var toolBarConstraints: NSLayoutConstraint!
        
        @IBOutlet weak var toobar: UIToolbar!
        @IBOutlet weak var textView: UITextView!
        @IBOutlet weak var textCount: UIBarButtonItem!
        override func viewDidLoad() {
            super.viewDidLoad()
            /*
            UIKeyboardWillHideNotification          将要隐藏
            UIKeyboardWillShowNotification          将要显示
            UIKeyboardDidChangeFrameNotification    已经修改frame
            UIKeyboardWillChangeFrameNotification   将要修改frame
            UIKeyboardDidHideNotification           已经隐藏
            UIKeyboardDidShowNotification           已经显示
             */
            
            /*
             UIKeyboardFrameBeginUserInfoKey        Rect
             UIKeyboardFrameEndUserInfoKey          Rect
             UIKeyboardAnimationDurationUserInfoKey 动画时长
             UIKeyboardAnimationCurveUserInfoKey    动画Options
             UIKeyboardIsLocalUserInfoKey           NSNumber of BOOL
             */
            
            /**
             监听键盘将要出现通知
             */
            NSNotificationCenter.defaultCenter().addObserver(self, selector: #selector(ViewController.keyboardWillShow(_:)), name:UIKeyboardWillShowNotification , object: nil)
            /**
             监听键盘将要隐藏通知
             */
            NSNotificationCenter.defaultCenter().addObserver(self, selector: #selector(ViewController.keyboardWillHide(_:)), name:UIKeyboardWillHideNotification , object: nil)
            
            /**
             设置textView的背景颜色
             
             - parameter white: 白色 0表示黑色 1表示白色
             - parameter alpha: 透明度
             */
            textView.backgroundColor = UIColor(white: 0, alpha: 0.3)
            /**
             代理
             */
            textView.delegate = self
        }
        
        /**
         点击取消
         
         - parameter sender: 取消
         */
        @IBAction func cancel(sender: AnyObject) {
            dismissViewControllerAnimated(true, completion: nil)
        }
        /**
         点击其他的地方取消键盘编辑
         
         - parameter touches:
         - parameter event:
         */
        override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
            view.endEditing(true)
        }
    
        /**
         键盘将要显示
         
         - parameter note: 通知
         */
        @objc private func keyboardWillShow(note:NSNotification){
            //获取信息
            let userInfo = note.userInfo
            //得到rect
            let endRect = (userInfo![UIKeyboardFrameEndUserInfoKey] as! NSValue).CGRectValue()
            //得到动画时长
            let duration = (userInfo![UIKeyboardAnimationDurationUserInfoKey] as! NSNumber).doubleValue
            //开始动画
            UIView.animateWithDuration(duration, delay: 0, options: UIViewAnimationOptions(rawValue: UInt((userInfo![UIKeyboardAnimationCurveUserInfoKey] as! NSNumber).integerValue << 16)), animations: { 
                self.toolBarConstraints.constant = endRect.height
                self.toobar.layoutIfNeeded()
                }, completion: nil)
        }
        /**
         键盘将要隐藏
         
         - parameter note: 通知
         */
        @objc private func keyboardWillHide(note:NSNotification){
            let userInfo = note.userInfo
            let duration = (userInfo![UIKeyboardAnimationDurationUserInfoKey] as! NSNumber).doubleValue
            UIView.animateWithDuration(duration, delay: 0, options: [], animations: {
                self.toolBarConstraints.constant = 0
                self.toobar.layoutIfNeeded()
                }, completion: nil)
        }
    }
    
    //***********************     textView代理      *****************
    extension ViewController{
        func textView(textView: UITextView, shouldChangeTextInRange range: NSRange, replacementText text: String) -> Bool{
            let text = textView.text as NSString
            if text.length >= 140 {
                textView.text = text.substringToIndex(140)
            }
            textCount.title = "\(140 - text.length)"
            //如果这里返回false,textView就不能编辑啦!
            return true
        }
    }
    
    
    

    <br />
    <br />
    <br />
    demo地址,包括了1-18

    Demo - ListenKeyboard

    相关文章

      网友评论

          本文标题:Day18 - 界面动态布局

          本文链接:https://www.haomeiwen.com/subject/yrvxyttx.html