美文网首页
WkwebView 横竖屏内容适配。

WkwebView 横竖屏内容适配。

作者: 133sheiya | 来源:发表于2019-05-14 11:25 被阅读0次

    工程配置

    1.项目需要支持横竖屏。需要在 企业微信截图_c110fd77-246e-4e78-a8ad-9f33b31868ff.png

    勾选这几个选项。

    2.代码实现

    • 在appdelegate 中新增一个属性
    
    
       var blockRotation: UIInterfaceOrientationMask = .portrait{
            didSet{
                if blockRotation.contains(.portrait){
                    consoleLine(message: 222)
                
                    //强制设置成竖屏
                    UIDevice.current.setValue(UIInterfaceOrientation.portrait.rawValue, forKey: "orientation")
                    is_portrait = true
                }else{
                    consoleLine(message: 111)
                    
    
                    //强制设置成横屏
                    UIDevice.current.setValue( UIInterfaceOrientation.landscapeLeft.rawValue, forKey: "orientation")
                    
                     is_portrait = false
                }
            }
        }
    
    
    
    • appdelegate中实现 app支持的方向的方法
       func application(_ application: UIApplication, supportedInterfaceOrientationsFor window: UIWindow?) -> UIInterfaceOrientationMask {
            ///上面声明的属性
            return blockRotation
        }
    
    
    • 在相关页面进行调用 (我这边与 js交互使用的是 WebViewJavascriptBridge) 具体的用法可以百度
      //MARK: - 屏幕旋转
        /// 屏幕旋转
        /// html那边调用屏幕旋转方法,Swift这边获取到传递的参数 做相应的处理
        /// - Parameter jsonValue: <#jsonValue description#>
        func screenChange(_ jsonValue:JSON){
            let orientation = jsonValue["orientation"].intValue
            
            if orientation == 1 { /// 竖屏
                
                kAppdelegate?.blockRotation = .portrait
                
            }else{ ///横屏
                //进入下一页面,转换为横屏
                let rotation : UIInterfaceOrientationMask = [.landscapeLeft, .landscapeRight]
                kAppdelegate?.blockRotation = rotation
                
            }
        }
    
    • 在控制器中实现。
     override func viewDidLoad() {
            super.viewDidLoad()
            myWebView.initData()
            view.addSubview(myWebView)
            ///初始的时候界面布局
            myWebView.snp.makeConstraints { (make) in
                make.top.equalToSuperview().offset(StatusBar_Height)
                make.right.bottom.left.equalToSuperview()
            }
            UIDevice.current.beginGeneratingDeviceOrientationNotifications() //开始注册屏幕方向转换通知
            
            NotificationCenter.default.addObserver(self, selector: #selector(deviceOrientationDidChange), name: UIDevice.orientationDidChangeNotification, object: nil)
            
            NotificationCenter.default.addObserver(self, selector: #selector(dingLogin_CallBack(_:)), name: NSNotification.Name(rawValue: ding_login_Success_noti), object: nil) ///钉钉登录监听
            
            
            // Do any additional setup after loading the view.
        }
        @objc func deviceOrientationDidChange() {
            ///调整界面布局
            if UIDevice.current.orientation == .portrait{ ///竖屏
                
                myWebView.snp.remakeConstraints { (make) in ///重做约束
                    make.top.equalToSuperview().offset(StatusBar_Height)
                    make.left.right.equalToSuperview()
                    make.bottom.equalTo(view.snp.bottom)
                }
            }else{ ///横屏状态
                print("UIDevice.current.isX() == \(UIDevice.current.isX())")
                
                myWebView.snp.remakeConstraints { (make) in
                    make.top.equalToSuperview().offset(StatusBar_Height)
                    make.bottom.equalTo(view.snp.bottom)
                    make.left.equalToSuperview()
                    make.right.equalToSuperview().offset(-safeAreaHeight)
                }
                
            }
            
        }
        deinit {
            NotificationCenter.default.removeObserver(self)
            UIDevice.current.endGeneratingDeviceOrientationNotifications() /// 结束通知
        }
        override func viewDidLayoutSubviews() {
            super.viewDidLayoutSubviews()
             setStatusBarHidden(false) //iphoneX 系列横屏后会将状态栏隐藏。所以这里主动调用下。
           
        }
        func setStatusBarHidden(_ hidden:Bool){
            
            let statusBar:UIView = (UIApplication.shared.value(forKey: "statusBarWindow") as! UIView).value(forKey: "statusBar") as! UIView
            statusBar.isHidden = hidden
        }
        override var prefersStatusBarHidden: Bool {
            return false
        }
        override func viewWillAppear(_ animated: Bool) {
            
            self.navigationController?.setNavigationBarHidden(true, animated: animated)
            
            view.frame = UIScreen.main.bounds
            
        }
        
        override func viewWillDisappear(_ animated: Bool) {
            super.viewWillDisappear(animated)
            self.navigationController?.setNavigationBarHidden(false, animated: animated)
        }
    
    • 常用常量定义
    // 状态栏高度
    let StatusBar_Height = UIApplication.shared.statusBarFrame.height
    
    ///适配iPhoneX
    let distanceTop:CGFloat = (UIDevice.current.isX() ? 88 : 64)
    
    let distanceBottom:CGFloat = (UIDevice.current.isX() ? 34 : 0)
    
    
    
    let navHeight:CGFloat = 44
    ///顶部高度
    let app_TopHeight = StatusBar_Height + navHeight
    ///iPhoneX安全区域高度
    let safeAreaHeight:CGFloat =  StatusBar_Height > 20 ? 34 : 0
    /// 底部高度
    let app_BottomHeight = 49 + safeAreaHeight
    //MARK: - 判断机型是否是 iPhoneX
    
    /**
     * -- 不能用屏幕高度去判断。因为app内部有涉及到横屏
     */
    extension UIDevice {
        func isX()->Bool {
            if #available(iOS 11, *) {
                if let w = UIApplication.shared.delegate?.window,
                    let window = w, window.safeAreaInsets.left > 0 || window.safeAreaInsets.bottom > 0 {
                    return true
                }
            }
            return false
        }
    }
    
    /**
     * -- 设备相关
     */
    
    let kAppdelegate = UIApplication.shared.delegate as? AppDelegate
    

    相关文章

      网友评论

          本文标题:WkwebView 横竖屏内容适配。

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