天天看點

IOS開發之絕對布局和相對布局(螢幕适配)

        之前如果做過web前端頁面的小夥伴們,看到絕對定位和相對定位并不陌生,并且使用起來也挺友善。在ios的ui設計中也有絕對定位和相對定位,和我們的web前端的絕對定位和相對定位有所不同但又有相似之處。下面會結合兩個小demo來學習一下我們ios開發中ui的絕對定位和相對定位。在前面的部落格中所用到的ui事例用的全是絕對定位,用我們storyboard拖拽出來的控件全是絕對定位的,就是我們可以同改變元件的frame來改變元件的位置和大小。而相對定位則不同,相對定位是參考元件周圍的元素來确定元件的大小或位置,相對定位即限制和周圍元件的距離來布局的,即layoutconstraint. 在布局中layoutconstraint和fram布局方式是不能并存的。

        上面說了這麼多了,可能說的不太明白,還是那句話,怎麼能少的了代碼和執行個體的支援呢,下面會通過螢幕适配的事例來用絕對布局和相對布局同時實作下面的描述效果。

        我們要實作的效果:當上面的view的大小及位置改變時,為了不覆寫掉下面的view,我們同時要改變下view的位置。 或者說在我們4.0寸正常顯示的内容,在3.5寸屏上也能正常顯示,即通常我們所說的螢幕的适配。為了便于觀察效果,我們可以用slider控件來動态的改變上面view的大小,觀察下面view的位置變化,下面是我們要實作的效果圖:

IOS開發之絕對布局和相對布局(螢幕适配)

        1.用絕對布局來實作上述效果,為了節省我們代碼編寫的時間,上面的控件是通過storyborad來實作的,然後在對應的viewcontroller裡添加元件和控件回調的方法,主要是在slider滑動的時候來擷取slider的值,然後動态的設定上面view的frame坐标(當然,如果讓view往四周擴充得計算一下新的fram的值,然後動态的修改),上面的view位置和大小改變了,那麼下面的view不能被上面的覆寫掉,是以也得修改blackview的fram的值。這種通過修改frame的值的方式來确定元件位置即為絕對布局

        下面是由storyboard拖拽過來的屬性:

        下面是當slider的值改變時要回調的方法:

        2.上面是我們的絕對布局的方式,接下來要學習一下相對布局的方式。相對布局使用起來會比絕對布局要複雜一些,下面先做螢幕适配的例子,圖一是在iphone的4.0寸的效果圖, 當我們不做任何處理的時候在3.5寸屏上是顯示不出來的如第二張圖:

IOS開發之絕對布局和相對布局(螢幕适配)

            (1)我們如何讓在3.5寸屏上也顯示正常呢,接下啦就是相對布局出出場的時候了,我們用相對布局的方式把最下面的view的位置改為相對于主視圖的底部和左邊的像素值固定,同時設定slider的位置相對于下面的view的位置相對固定。也就是下面的veiw的位置改變,則上面的slider的位置也會改變,用storyboard修改如下:(第一張圖是修改最下面view的相對位置,第二張圖是設定我們slider為相對布局) ,不需要在viewcontroller中添加任何動态嗎我們就可以實作螢幕的适配。

IOS開發之絕對布局和相對布局(螢幕适配)

        (2)那麼我如何用相對布局實作上面那種view放大的效果呢,接下來我們需要建立一個工程,因為相對布局和絕對布局在同一個元件中無法并存。在建立工程中用storyboard把我們用到的控件進行拖拽 ,界面和上面的是一樣的。

                    (1)首先給我們最上面的view設定相對布局的屬性,如下面的圖一

                    (2)  再給黑色的view設定相對布局的屬性,入下面的圖二所示:

                    (3) 設定上面兩個view相對中心對齊,選中上面的view,按着ctrl往下面的view中拖拽,在彈出的框中選中center x入圖三

IOS開發之絕對布局和相對布局(螢幕适配)

                (4).給我們相應的元件在storyboard中添加上限制以後,怎樣來動态的改變最上面view的寬和高的限制範圍呢?(即改變水準限制和垂直限制的值)第一部就得把最上面的view的水準限制和垂直限制從我們的storyboard中把最上面view中我們要用的限制拖入到我們的viewcontroller, 第一張圖是storyboard中限制所在的位置,第二張圖把限制添加到viewcontroller中。

          

IOS開發之絕對布局和相對布局(螢幕适配)

    ​    ​    ​  (5)至此我們用storyboard的工作已經做完,程式員是少不了敲代碼的,也隻有正兒八經的敲代碼,程式員才會成長。是以喽下面就是我們在viewcontroller中添加的代碼部分。絕對布局直接改frame的坐标值就可以啦,那麼在程式中我們如何去動态的改變我們限制的值呢?下面的代碼将會用到。 我們要做的事情就是在viewcontroller中通過改變slider的值來改變最上面view的水準限制和垂直限制,水準限制和垂直限制的相關變量我們已經拖拽過來了,下面就需要在slider回調的方法中來改變水準和垂直限制的值。先段代碼,之後在說兩句。    ​    ​

    ​    ​    ​代碼說明:

    ​    ​    ​    ​    ​1.一個元件中隻能有一中限制,如在myview中我們已經有一個垂直限制,我們如果再給他添加一個垂直限制的話,那麼程式在運作時就會報錯,錯誤内容:“unable to simultaneously satisfy constraints.……”;

    ​    ​    ​    ​    ​2.是以在添加新的限制之前,我們得把之前加在我們元件中相應的限制給去掉;限制是加在我們對應元件的父視圖上,移除也得從元件的父視圖上移除;

    ​    ​    ​    ​    ​3.在設定限制的值的時候我們是以字元串的形式把參數傳遞給限制的,如:h:[_myview(200)] h代表水準限制,v代表垂直限制。中括号裡是我們要為那個元件添加限制以及限制的值是多少;

    ​    ​    ​    ​    ​4.給我們的限制更新我們建立的限制;

    ​    ​    ​    ​    ​5.在把更新的限制添加到我們的父視圖上,到此我們就可以實作上面我們上面用絕對布局實作的功能

    ​    ​    補充說明:

    ​    ​    ​    ​    ​在絕對布局時我們還可以擷取螢幕的尺寸,通過螢幕的尺寸來計算我們元件所在的位置,主要代碼如下:

繼續閱讀