美文网首页
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 横竖屏内容适配。

    工程配置 勾选这几个选项。 2.代码实现 在appdelegate 中新增一个属性 appdelegate中实现 ...

  • 关于iOS横竖屏适配

    关于iOS横竖屏适配 关于iOS横竖屏适配

  • iOS WKWebView 实现内置浏览器

    最近使用WKWebView实现了内置网页浏览器功能,带进度条。适配了iOS刘海屏和横竖屏 先看效果: 代码实现起来...

  • iOS开发横竖屏

    关于iOS横竖屏适配 - 简书 iOS横竖屏旋转及其基本适配方法 - 梧雨北辰的博客 - CSDN博客 适配主要需...

  • 技术文章汇总

    横竖屏适配 字体大小适配 Cell 高度自适应

  • 4.App方面(启动页,App图片,横竖屏适配)

    1.苹果横竖屏适配方面 1.苹果横竖屏适配吊(基本所有都包括) 2.适配苹果手机多种尺寸 3.直播里的问题(...

  • 横竖屏

    关于iOS横竖屏适配[https://www.jianshu.com/p/1993144ea35e]IOS横竖屏以...

  • 基本方法笔记 - 收藏集 - 掘金

    探讨判断横竖屏的最佳实现 - 前端 - 掘金在移动端,判断横竖屏的场景并不少见,比如根据横竖屏以不同的样式来适配,...

  • 使用XIB做横竖屏自适应

    XIB的横竖屏适配。有时候我们做一个页面,可能同时需要横竖屏两个方向的适配。我们可以为一个viewcontorl...

  • android 横竖屏切换经验总结

    横竖屏切换已经不是什么难的了,因为要适配手机横竖屏,所以特别研究了一下,再次系统的讲讲干货。主要是横竖屏切换,不重...

网友评论

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

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