iOS8 屏幕適配問題。

最近在做關於iPhone6,6+,以及你給iOS8 的適配。

在此做一小結。

iOS多屏幕中適配的實現設計到以下幾個方面。


1、宏定義:

      原理:通過定義宏定義獲取屏幕的寬高,從而可以動態定位視圖中元素的大小和位置。

      適用於: 屏幕尺寸較少,內容顯示單一,滿足於元素放大、縮小等較單一的呈現。

      缺點:隨着iPhone設備種類的增多,屏幕尺寸趨於多樣化,此方式的實現變的複雜。 若需求爲,針對不同的平布尺寸,屏幕顯示的內容多少不同, 方式不同,

                 這樣的需求,宏定義實現起來也是相當的複雜。


2、autolayout

     基於約束:和以往定義frame的位置和尺寸不同,AutoLayout的位置確定是以所謂相對位置的約束來定義的,比如x座標爲superView的中心,y座標爲屏幕底部

                       上方10像素等。

     描述性 : 約束的定義和各個view的關係使用可視化語言的方法來進行描述。

     佈局系統 : 用來負責界面的各個元素的位置。

     優點:解決了不同分辨率和屏幕尺寸下view的適配問題,另外也簡化了旋轉時view的位置的定義。


3、sizeclass

     原理:Size Classes其實就是將iOS設備屏幕的Size進行分類,寬度和高度都各分爲3種情況:緊湊(Compact)、規則 (Regular)、任意(Any),其中“任意”(Any)包含                   緊湊(Compact)、規則(Regular)類型。3x3共9種Size,每種Size都可以設置特定的一套佈局,如果不特殊指定,默認是在(寬任意,高任意)模式下設置,                 且其他8種佈局繼承它。Size Classes是將屏幕尺寸的種類做了進一步的抽象。

     優點:Autolayout的出現使得佈局的複雜度減少到了View與View的關係上,再由根 View(也就是屏幕)指定frame,隨後所有子View相對佈局,把frame的概念                     歸一化到根View的frame上;但有了Size Class後,根視圖的frame概念也被移除了,這下整個app的UI和frame這個單詞已然脫離關係,這也正是apple想

                要達到的目。

     通過SizeClasses簡單的表達如下:

            iPhone4S,iPhone 5/5s,iPhone 6

            豎屏:(w:Compacth:Regular)

            橫屏:(w:Compacth:Compact)

            iPhone6Plus

            豎屏:(w:Compacth:Regular) 

            橫屏:(w:Regularh:Compact)

            iPad

            豎屏:(w:Regularh:Regular)

            橫屏:(w:Regularh:Regular)

            AppleWatch(猜測)

           豎屏:(w:Compacth:Compact)

           橫屏:(w:Compacth:Compact)

4、關於圖片:

            

                                         物理尺寸                   分辨率                   圖片                 尺寸


iPhone 3gs                       320*480                    320*480                 @1x                 3.5

 

iPhone 4,   4s                   320*480                    640*960                 @2x                 3.5


iPhone 5,   5s                   320*568                    640*1136               @2x                  4.0


iPhone 6,                          375*667                    750*1334               @2x                 4.7


iphone 6+                         414*736                    1242*2208             @3x                  5.5

     

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章