IOS???????????????

Posted 2021-01-21

?????????blog   repr   ??????   question   ??????   ??????   hat   overflow   iphone   

??????????????????????????????????????????UI????????????????????????????????????????????????????????????????????????UI?????????68px???72px????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????2????????????3??????????????????frame???????????????????????????????????????????????????px?????????????????????ios??????????????????????????????pt???????????????????????????????????????????????????

• px????????????pixel?????????????????????????????????????????????????????????px?????????????????????????????????????????????????????????????????????“???”??????????????????????????????????????????????????????????????????????????????????????????????????????????????????“????????????”??????????????????“????????????”????????????“???”???????????????“???”???????????????“????????????”???
• pt??????point???????????????????????????????????????1/72?????????pt?????????point??????????????????“???”??????????????????????????????????????????????????????????????????????????????“???”????????????1/72?????????????????????????????????????????????????????????????????????“????????????”???

??????

????????????????????????????????????“???”“???”?????????????????????“??????”??????“??????”??????“??????”???????????????????????????????????????????????????????????????????????????????????????????????????????????????100px???????????????????????????800×600????????????????????????????????????1/8?????????1024×768??????????????????1/10????????????????????????????????????????????????px?????????????????????????????????????????????????????????800???1024???????????????????????????????????????“???”???????????????????????????????????????????????????????????????

?????????????????????pt??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????px??????pt?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????“????????????”?????????????????????????????????????????????????????????????????????????????????????????????14??????40????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????MISSION IMPOSSIBLE???

????????????iOS??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????iOS???????????????????????????????????????????????????

1.iPhone????????????

 ??????1 inch = 2.54cm = 25.4mm

??????	??????	???????????????(pt)	???????????????(px)	Scale factor	PPI
3GS	3.5-inch	320 x 480	320 x 480	@1x	163
iPhone 4	3.5-inch	320 x 480	640 x 960	@2x	326
iPhone 5/5S/5C/SE	4.0-inch	320 x 568	640 x 1136	@2x	326
iPhone 6/7/8 Plus	5.5-inch	414 x 736	1080 x 1920	@3x	401
iPhone 6/6S/7/8	4.7-inch	375 x 667	750 x 1334	@2x	326
iPhone X/XS	5.8-inch	375 x 812	1125 x 2436	@3x	458
iPhone XR	6.1-inch	414 x 896	828 x 1792	@2x	326
iPhone XR Max	6.5-inch	414 x 896	1242 x 2688	@3x	458

2.iPhone????????????

    ?????????????????????width/height??????????????????????????????????????????????????????????????????iPhone4s?????????????????????

3.????????????

    ?????????????????????iPhone5???????????????4?????????iPhone6???????????????4.7????????????????????????????????????????????????diagonal???????????????iPhone5~6+?????????????????????????????????

4.????????????PPI

    PPI???Pixel Per Inch by diagonal????????????????????????????????????????????????????????????Pixel????????????PPI???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

    ?????????????????????????????????iPhone4(s)???PPI???????????????:

    ??????????????????????????????????????????????????????????????????????????????

5.???????????????scale factor between logic point and device pixel???

???1???Scale??????

    ?????????iPhone3GS?????????????????????320*480???PPI=163??????iOS???????????????CGPoint/CGSize/CGRect?????????point????????????measured in points??????

    1 point = 1 pixel???Point Per Inch=Pixel Per Inch=PPI???

    ?????????iPhone4?????????????????????3.5 inch?????????????????????Retina????????????????????????????????????????????????????????????2??????????????????????????????(320x2)x(480x2)= 960x640???PPI=326?????? ????????????????????????iPhone3GS???4??????1???Point????????????1???2x2?????????????????????

    ??????????????????????????????iOS???????????????API????????????point(pt??????????????????????????????“???”)?????????????????????????????????????????????320x480??????

    1 point = scale*pixel??????iPhone4~6??????????????????scale=2??????iPhone6+??????????????????scale=3??????

    ??????????????????

    scale=??????????????????point/pixel???=??????????????????????????????pixel/point???

???2???UIScreen.scale

    UIScreen.h????????????????????????

// The natural scale factor associated with the screen.(read-only)
@property(nonatomic,readonly) CGFloat scale  NS_AVAILABLE_IOS(4_0);

    --------------------------------------------------------------------------------

    This value reflects the scale factor needed to convert from the default logical coordinate space into the device coordinate space of this screen.

    The default logical coordinate space is measured using points. For standard-resolution displays, the scale factor is 1.0 and one point equals one pixel. For Retina displays, the scale factor is 2.0 and one point is represented by four pixels.

    --------------------------------------------------------------------------------

    ??????????????????????????????????????????????????????????????????????????????UIScreen.scale???????????????????????????????????????

???3???UIScreen.nativeScale

    iOS8?????????nativeScale?????????

// Native scale factor of the physical screen
@property(nonatomic,readonly) CGFloat nativeScale NS_AVAILABLE_IOS(8_0);

    ?????????iPhone6+???????????????????????????nativeScale???scale?????????????????????

(lldb)p (CGFloat)[[UIScreen mainScreen] scale]
(CGFloat) $1 = 3
(lldb) p(CGFloat)[[UIScreen mainScreen] nativeScale]
(CGFloat) $2 = 3

???4???????????????

    ?????????????????????????????????????????????scale???????????????iPhone3GS??????iPhone4(s)???????????????nativeScale???????????????????????????????????????iPhone6+?????????

// not UIUserInterfaceIdiomPad
#define IS_IPHONE (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone)
// detect iPhone6 Plus based on its native scale
#define IS_IPHONE_6PLUS (IS_IPHONE && [[UIScreenmainScreen] nativeScale] == 3.0f)

    ??????????????????????????????scale?????????????????????iPhone4???4s???iPhone5???5s????????????[[UIDevice currentDevice] model]????????????iPhone???iPad???iPod??????????????????iPhone????????????????????????????????????sysctlbyname("hw.machine")????????????????????????????????????????????????

6.Resolutions & Rendering

7.@2x/@3x?????????????????????

???1???@2x

@2x means the same “double”retina resolution that we’veseen on all iOS devices with retina displays to date, where each virtual pointin the user interface is represented by two physical pixels on thedisplay in each dimension, horizontal and vertical.

    iPhone3GS?????????????????????????????????????????????????????????????????????????????????icon.png??????????????????iPhone4~6 Retina?????????????????????????????????@2x?????????????????????

    ?????????iPhone3GS??????scale=1??????????????????50x50pixel???logicalimage.size=50x50point?????????iPhone4~6??????scale=2????????????100×100pixel???logical image.size=50x50point?????????image.scale=dimensions in pixels?????????????????????[email protected]???

    ??????APP???????????????iPhone3GS~iPhone6??????????????????icon.png/[email protected]???????????????????????????

???2???@3x    

@3x means a new “triple” retina resolution, where eachuser interface point is represented by three display pixels. A single @2x pointis a 2 × 2 square of 4 pixels; an @3x point is a 3 × 3 square of 9 pixels.”

    iPhone6+?????????????????????downsampling/1.15???1242x2208->1080x1920??????????????????????????????@2.46x????????????????????????????????????@3x??????????????????????????????@2.46x??????

    ?????????????????????iPhone 6 Plus??????3x?????????2208x1242??????????????????1080p???????????????????????? iPhone 6 Plus ????????????????????????iPhone 6 Plus??????????????????

    ??????APP???????????????iPhone3GS~iPhone6+??????????????????icon.png/[email protected]/[email protected]???????????????????????????

    ?????????????????????iOS APP??????????????????????????????????????????????????????

???3????????????????????????

    ??????iPhone3???4/5/6???6+???????????????????????????????????????????????????????????????????????????????????????????????????????????????stretchable/resizable?????????????????????????????????????????????
    ????????????UIImage??????????????????API???????????????????????????

• +imageNamed???????????????????????????????????????????????????????????????????????????????????????API??????UIScreen???scale????????????????????????????????????????????????@2x??????????????????????????????????????????image.scale=2.0???????????????size?????????point?????????pixel????????????????????????????????????????????????image.scale=1.0???????????????size?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????Retina??????scale=2?????????????????????"*@2x.png"????????????????????????????????????Retina???????????????????????????????????????
• +imageWithContentsOfFile/+imageWithData:(scale:)/-initWithContentsOfFile:/-initWithData:(scale:)?????????????????????UIImage??????????????????????????????????????????????????????????????????????????????????????????????????????????????????@2x????????????image.scale=2.0???????????????image.scale=1.0???????????????Retina??????????????????
• ???????????????iPhone6+??????????????????????????????????????????LogoIcon???LaunchImage???????????????????????????????????????????????????????????????????????????????????????

8.Screen Bounds & Application Frame

???1???UIScreen.bounds

// Bounds of entire screen in points??????????????????????????????[0,0]???
@property(nonatomic,readonly) CGRect bounds; 

--------------------------------------------------------------------------------
//???????????????????????????????????????????????????UIDeviceOrientation????????????
#define SCREEN_WIDTH ([UIScreenmainScreen].bounds.size.width)
#define SCREEN_HEIGHT ([UIScreenmainScreen].bounds.size.height)
#define STATUSBAR_HEIGHT ([UIApplicationsharedApplication].statusBarFrame.size.height)

//??????????????????????????????????????????UIDeviceOrientationPortrait????????????
#define SCREEN_WIDTH MIN([UIScreenmainScreen].bounds.size.width, [UIScreenmainScreen].bounds.size.height)
#define SCREEN_HEIGHT MAX([UIScreenmainScreen].bounds.size.height, [UIScreenmainScreen].bounds.size.width)
#define STATUSBAR_HEIGHT MIN([UIApplicationsharedApplication].statusBarFrame.size.width, [UIApplicationsharedApplication].statusBarFrame.size.height)
--------------------------------------------------------------------------------

???2???UIScreen.nativeBounds

    iOS8?????????nativeBounds??????????????????????????????????????????

// The bounding rectangle of the physical screen,measured in pixels. (read-only)
// This rectangle is based on the device in a portrait-up orientation. This value does not change as the device rotates.
@property(nonatomic,readonly) CGRect nativeBounds NS_AVAILABLE_IOS(8_0);

//?????????iPhone6+???????????????
--------------------------------------------------------------------------------
(lldb) poNSStringFromCGRect([(UIScreen*)[UIScreen mainScreen] bounds])
{{0, 0}, {414, 736}}
(lldb) poNSStringFromCGRect([(UIScreen*)[UIScreen mainScreen] nativeBounds])
{{0, 0}, {1242, 2208}}
--------------------------------------------------------------------------------

???3???UIScreen.applicationFrame    

// Frame of application screen area in points (i.e.entire screen minus status bar if visible)
// bounds?????????????????????
@property(nonatomic,readonly) CGRect applicationFrame; 

--------------------------------------------------------------------------------
// APPFRAME_WIDTH=SCREEN_WIDTH
#define APPFRAME_WIDTH ([UIScreen mainScreen].applicationFrame.size.width)

// APPFRAME_HEIGHT=SCREEN_HEIGHT-STATUSBAR_HEIGHT
//??????????????????UIDeviceOrientationLandscape?????????iOS8??????????????????????????????APPFRAME_HEIGHT=SCREEN_HEIGHT
#define APPFRAME_HEIGHT ([UIScreen mainScreen].applicationFrame.size.height)
-------------------------------------------------------------------------------- 

???4???bounds???frame?????????

    ???????????????bounds???frame????????????

 

9.?????????????????????Screen Scale Adaption???

    ???iPhone3GS/iPhone4(s)?????????iPhone5(s)??????????????????????????????????????????????????????????????????????????????AutoresizingFlexible??????????????????????????????????????????????????????????????????????????????????????????????????????LaunchImage??????????????????????????????????????????????????????LaunchImage????????????????????????????????????????????????@2x????????????????????????????????????????????????????????????????????????

    ???iPhone5(s)?????????iPhone6(+)?????????????????????????????????iOS????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????iPhone6??????????????????@2x???????????????iPhone6+???????????????????????????@3x???????????????????????????????????????????????????UI?????????????????????????????????????????????????????????

???1??????????????????

    ?????????????????????iPhone4~6(+)?????????????????????

• iPhone4(s)????????????960*640????????????1.5
• iPhone5(s)????????????1136*640????????????1.775
• iPhone6????????????1334*750????????????1.779
• iPhone6+????????????1920*1080????????????1.778

    ???????????????iPhone5(s)???6(+)???????????????????????????16:9???????????????????????????????????????????????????????????????
        fitScreenWidth= width*(SCREEN_WIDTH/320)
    ???????????????iPhone3/4/5???6???6+??????????????????iPhone6???6+??????????????????????????????

???2??????????????????

    ????????????????????????iPhone4(s)????????????iPhone5(s)????????????????????????????????????iPhone5(s)??????????????????????????????
        fitScreenHeight= height*(SCREEN_HEIGHT/568)
    ??????iPhone3/4???5???6???6+??????????????????iPhone3/4?????????????????????????????????iPhone6???6+??????????????????????????????

    ??????????????????iPhone/iOS???????????????????????????????????????????????????iPhone??????????????????????????????????????????????????????????????????????????????????????????"Personal Hotspot: * Connection"??????????????????20pt???[UIApplication sharedApplication].statusBarFrame????????????40pt??????????????????????????????????????????????????????????????????????????????20pt?????????????????????iPhone/iOS?????????????????????????????????????????????

???3??????????????????

    ?????????iPhone???????????????????????????????????????????????????????????????????????????????????????APP???????????????????????????
    ????????????????????????UITableView:UIScrollView???????????????????????????????????????????????????????????????????????????????????????SCREEN_WIDTH??????????????????????????????????????????????????????????????????????????????LineBreakMode?????????????????????????????????????????????????????????????????????????????????????????????????????????

    ?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

10.UI????????????

    ?????????iPhone????????????????????????????????????iPhone4(s)???5(s)???6???6+????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????subView???superView?????????????????????EdgeInsets/Frame/Center?????????siblingView??????????????????Offset????????????????????????Autolayout??????????????????????????????????????????????????????????????????????????????iPhone5(s)????????????????????????iPhone4(s)????????????????????????????????????iPhone6(+)??????????????????????????????????????????

    ?????????????????????????????????????????????Margin/EdgeInsets???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

    ???????????? iPhone5s QQ ??????????????????????????????cell????????? Sketch Measure ???????????????????????????

????????????[??????.png]???????????????????????? Sketch ??????????????????????????? measure ?????????????????????????????????????????????????????????????????????????????????????????????????????????UI?????????????????????????????? Insert Artboard ???????????? frame???thumbnail???title???detail???source???button???

??????????????????cell???frame???bounds???????????? Measure size???width=640px???SCREEN_WIDTH??????height=168px???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????WIDTH??????????????????text???label???????????????????????????????????????????????????????????????????????????????????????

???1???????????????

• ???????????????layer list?????????frame??????command?????????????????????????????????thumbnail????????? Measure spacing??????????????????????????????frame????????????24px???
• ?????????????????????????????????thumbnail????????? measure size???????????????????????????112px*112px????????????????????????????????????thumbnail???frame???????????????????????????????????????????????????????????????????????????????????????

???2???????????????

• ??? button ??? frame ?????? Measure spacing???????????????????????????frame????????????24px???
• ????????????button?????? measure size???????????????144px*60px??????????????????????????????????????????????????????????????????????????????
• button???frame???????????????????????????????????????????????????????????????????????????????????????

???3???????????????

• ???thumbnail???detail???title???source??????????????????????????? Measure spacing???????????????????????????detail????????????20px??????button???detail?????? Measure spacing???????????????????????????detail?????????20px????????????????????????thumbnail???????????????button??????????????????????????????????????????????????????????????????????????????????????????????????????????????? sizeWithFont/boundingRectWithSize ????????????????????? label ????????????????????????title?????????????????????????????????????????? lineBreakMode??????Wrapping?????????Truncating???????????????
• ?????????????????????1?????????title??????2?????????detail????????? Measure spacing???????????????????????????10px??????2?????????detail??????3????????????????????????????????????10px????????? UILabel ?????????????????????????????????????????????????????????????????? sizeWithFont/boundingRectWithSize ????????????????????? label ??????????????????title???????????????source??????????????????????????????????????????????????????????????????

    ??????????????????????????????????????????scale?????????????????????????????????????????????iPhone6(+)??????????????????????????????????????????????????????????????????????????????????????????????????????WWDC2012 iOS6???????????????Auto Layout??????????????????????????????????????????????????????????????????????????????????????????????????????????????????