美文网首页
iOS开发iPad横竖屏适配

iOS开发iPad横竖屏适配

作者: ollieli | 来源:发表于2021-09-15 13:12 被阅读0次

    基于之前的文章做了点更新 2022年02月21:
    开发语言:Swift。
    开发支持最低系统:iOS10.0。
    项目需求:iPad支持全方向展示,iPhone限制竖屏模式(当然也可以放开支持)。

    近阶段项目需要适配iPad,需要考虑横竖屏UI适配问题,总结一下我的做法:

    项目配置

    在General底下同时勾选iPhone,iPad,我们计划通过代码层面来控制页面的方向,所以Device Orientation选项勾选就不重要了:


    image.png
    具体实现
    1. 在AppDelete中实现旋转所支持的方向,为.all:
    func application(_ application: UIApplication, supportedInterfaceOrientationsFor window: UIWindow?) -> UIInterfaceOrientationMask {
      return .all
    }
    
    1. 定义全局属性:
    • screenWidth, screenHeight变量:在屏幕旋转方法中进行重新赋值操作,以确保其始终和UIScreen.main.bounds相等,也就是当前方向屏幕的宽高;
    • isIPad属性:userInterfaceIdiom有很多,我们认定除了pad,按照phone处理,所以我定义了isIPad而不是isIPhone;
    • screenWidthScale:UI适配的比例先算好,用于视图布局,字体大小的计算;因为UIScreen.main.bounds是固定的,所以这个比例是不会变的,我基于的iPad屏宽是768pt,其他的是375pt;
    • 给需要的基本类型做func fit()的扩展,在视图布局的时候调用.fit()方法;
    var screenWidth = UIScreen.main.bounds.width
    var screenHeight = UIScreen.main.bounds.height
    
    let isIPad = UIDevice.current.userInterfaceIdiom == .pad
    
    let screenWidthScale = min(UIScreen.main.bounds.width, UIScreen.main.bounds.height) / (isIPad ? 768 : 375)
    
    extension Int {
        func fit() -> CGFloat {
            screenWidthScale * CGFloat(self)
        }
    }
    

    举例调用.fit()的代码片段:

    override func layoutSubviews() {
      super.layoutSubviews()
      
      let maxY_nav = WindowManager.share.safeAreaInsets.top + navH
      let h_bg = maxY_nav + 160.fit()
      bgImgV.frame = .init(x: 0, y: 0, width: bounds.width, height: h_bg)
    }
    
    1. 在控制器中实现以下代码:
    • 这里建议只需在基类(BaseViewController)中实现一遍就好了;
    • 如果在非iPad情况下涉及到横屏展示的控制器,比如:手绘签名,图表展示,视频播放等,那么需要在该控制器中再次重写以下代码以支持各方向展示;
    • 如果自定义了NavBarController或TabBarController,那么也需要在类中重写以下属性,否则涉及到导航跳转或tabBar菜单切换都会有横竖UI层面问题;
    /// 是否支持旋转
    override var shouldAutorotate: Bool {
      isIPad
    }
    /// 支持页面旋转的类型:上下左右
    override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
      isIPad ? .all : .portrait
    }
    
    override var preferredInterfaceOrientationForPresentation: UIInterfaceOrientation {
      .portrait
    }
    
    1. 旋转后的布局处理:
    • 就是对screenWidth和screenHeight一个重新赋值;
    • 同样建议在基类中实现,只需要写一遍;
    • 自定义的NavBarController或TabBarController无需实现;
    override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
      super.viewWillTransition(to: size, with: coordinator)
      
      if isIPad {
        screenWidth = size.width
        screenHeight = size.height
      }
    }
    

    相关文章

      网友评论

          本文标题:iOS开发iPad横竖屏适配

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