zoukankan      html  css  js  c++  java
  • iPhoneX适配

    就在9月13日凌晨,苹果发布了带刘海的 iPhone X,这个屏幕需要 iOS 开发者做新的适配,会后苹果发布了 iPhone X 的适配指南。

    iPhone X

    iPhone X 拥有一个宽大的、高分辨率、圆角的、扩展到边缘的屏幕,提供了以前从未有过的沉浸式、内容丰富的体验。

    屏幕尺寸

     在纵向方向上,iPhone X 显示屏的宽度与 iPhone6,iPhone 7 和 iPhone8 的 4.7 英寸的显示屏宽度相同。然而,iPhone X 上的屏幕比 4.7 英寸显示屏高 145pt,导致多出了大约 20%的垂直高度。

    • 竖屏尺寸:1125px × 2436px(375pt × 812pt @3x)

    • 横屏尺寸:2436px × 1125px(812pt × 375pt @3x)

    pt和px

    字体大小的设置单位,常用的有2种:px、pt。

     
    px就是表示pixel,像素,是屏幕上显示数据的最基本的点;
    pt就是point,是印刷行业常用单位,等于1/72英寸。

    这样很明白,px是一个点,它不是自然界的长度单位,可以画的很小,也可以很大。如果点很小,那画面就清晰,我们称它为“分辨率高”,反之,就是“分辨率低”。所以,“点”的大小是会“变”的,也称为“相对长度”。
    pt全称为point,但中文不叫“点”,确切的说法是一个专用的印刷单位“磅”,大小为1/72英寸。所以它是一个自然界标准的长度单位,也称为“绝对长度”。



    因此就有这样的说法,pixel是相对大小,而point是绝对大小。

    适配背景介绍 

    iPhoneX与其他iOS设备(iPhone 6、7、8)对比

    现在让我们来看一下iPhoneX比iPhone8多出的145points都多在了哪里。

    首先,对于iPhone8来说,虽然屏幕高度有667points,但是顶部的20points是系统的状态栏,不是提供给应用程序的,只有下方的647points可以供应用程序使用;

    而iPhoneX,顶部的44points都是状态栏区域(虽然刘海的高度为30points,但是导航栏不可能紧贴刘海边缘,开发同学还留出了14points的状态栏边距),是不可用的,下方34points的HomeIndicator也是不可用的,只有中间safe area的734points可供应用程序使用,相当于比iPhone8实际可用区域高出了87points。

    那么也就是说,Status Bar由原先20增长为44,底部新增34pt HomeIndicator。但是顶部包括刘海在内的44pt和底部HomeIndicator的34pt是不建议使用的,这是危险区域,页面元素可能会被圆角和HomeIndicator遮挡;应该将页面布局在这之外的安全区域中。

    iPhoneX适配最佳实践

    拓展两个限制区域Frame

    针对iPhoneX适配,开发同学拓展了两个限制区域Frame:nvStatusBarFrame,nvHomeIndicator,如下图所示:

    锚点名称
    含义
    锚点名称
    含义

    homeIndicatorHeight

    iPhoneX底部指示符区域高度

    homeIndicatorLeft

    iPhoneX底部指示符区域左边距

    homeIndicatorRight

    iPhoneX底部指示符区域右边距

    homeIndicatorWidth

    iPhoneX底部指示符区域宽度
    safeBottom UIView安全区域Bottom锚点

    sensorHeight

    iPhoneX“刘海”高度

    statusBarHeight

    状态栏高度,iPhoneX为44pt,其他机型为20pt
    statusBarMargin 状态栏边距,iPhoneX为14pt,其他机型为20pt

    TabBar适配案例

      1. 系统TabBar,则不需要适配
      2. 自定义TabBar,需要按照下图方式适配


  • 相关阅读:
    GridView合并表头多重表头
    C# 导出Excel或Word
    GridView的分页功能?
    如何在GridView中判断Radio被选中?
    GridView無數據時,顯示表頭
    Oracle replace函数使用
    获取数据后导出Excel
    Oracel用rownum实现真分页
    转载C#泛型集合—Dictionary<K,V>使用技巧
    临时向表插入有自增的字段的记录
  • 原文地址:https://www.cnblogs.com/dapped/p/7832528.html
Copyright © 2011-2022 走看看