iOS開發(fā)筆記:自動(dòng)布局(AutoLayout)學(xué)習(xí)

說到iOS的適配具帮,確實(shí)是個(gè)頭疼的問題,像我這樣對(duì)代碼布局不太熟悉的新手汪厨,更是無語逻族。所以無論如何,今天也要把AutoLayout熟悉一下骄崩。

關(guān)于StackView:

雖然蘋果在iOS9之后推出了StackView這個(gè)強(qiáng)大的組件聘鳞,但是,由于手機(jī)系統(tǒng)必須是iOS9以上才能使用要拂,所以對(duì)于很多支持iOS8的APP項(xiàng)目而言抠璃,還是望而卻步(所以我也只能繼續(xù)研究AutoLayout了)。

關(guān)于Autoresizing和AutoLayout:

Autoresizing基本上已經(jīng)是過時(shí)的布局方式了脱惰,而AutoLayout現(xiàn)在比較主流搏嗡,這里有Autoresizing和AutoLayout的詳細(xì)介紹。我也是通過這篇文章對(duì)AutoLayout有了初步的了解拉一,好文共享采盒!

至于如何進(jìn)行學(xué)習(xí)AutoLayout,我現(xiàn)在的了解程度蔚润,只有短短不到兩個(gè)小時(shí)磅氨。實(shí)在是沒法給出有用的教程建議,我會(huì)在一周后來寫一篇教程嫡纠,以我的了解來詳細(xì)介紹AutoLayout的入門介紹烦租。

Step1:雖然只了解一點(diǎn)點(diǎn)延赌,但還是老方法,先找一個(gè)的樣板叉橱,然后模仿:
要模仿的APP

找了半天的APP素材挫以,就發(fā)現(xiàn)這個(gè)比較好模仿,這個(gè)界面看起來很不錯(cuò)窃祝,我也能用AutoLayout做出來掐松。

不是太了解代碼或者Autoresizing的布局方式,但是要做出這個(gè)效果粪小,應(yīng)該會(huì)花上不少時(shí)間吧甩栈,特別是當(dāng)應(yīng)用在不同型號(hào)的iPhone上時(shí),應(yīng)該會(huì)花不少功夫吧糕再。

Step2:分析解決:有15個(gè)圖標(biāo)(反正只看到15個(gè)),每個(gè)的大小相同:

新建工程:


添加15個(gè)button

這里我為了省時(shí)間玉转,也為了便于觀察突想,就拖了一個(gè)Button到View中:然后設(shè)置一個(gè)背景顏色和白色字體,復(fù)制粘貼15個(gè)出來究抓,然后大致對(duì)齊一下

Step3:用AutoLayout布局:

界面看起來位置很亂猾担,這就對(duì)了,不要管刺下,布局交給AutoLayout來:

6步設(shè)置好AutoLayout

操作過程如上圖:1绑嘹、全選15個(gè)Button,2橘茉、不留白邊工腋,3、設(shè)置約束(點(diǎn)擊短線變成實(shí)線)畅卓,4擅腰、設(shè)置button的寬高一致,5翁潘、讓修改的設(shè)置布局立即執(zhí)行趁冈,6、點(diǎn)擊Add Constraints拜马。搞定:

AutoLayout出來的界面

模擬器運(yùn)行(為了直觀看見大小渗勘,我設(shè)置了一個(gè)Button的背景顏色藍(lán)色):


6s-P運(yùn)行效果
Step4:完善細(xì)節(jié)(偷點(diǎn)懶,節(jié)省下時(shí)間俩莽,早點(diǎn)睡覺………就不對(duì)我們要模仿的那張圖一一取色了旺坠,時(shí)間多有興趣的小伙伴可以繼續(xù)完善):

修改Button名字、字體大小和背景顏色扮超,然后運(yùn)行:

運(yùn)行效果6s-P
運(yùn)行效果5s

AutoLayout价淌,很方便的布局方式申眼,節(jié)省了不少的布局上的的時(shí)間,極大的優(yōu)化了不同尺寸iPhone的適配蝉衣。

ps:AutoLayout了解還是太少括尸,加之寫的太倉促,總之有待繼續(xù)學(xué)習(xí)病毡。
睡覺濒翻!睡覺!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末啦膜,一起剝皮案震驚了整個(gè)濱河市有送,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌僧家,老刑警劉巖雀摘,帶你破解...
    沈念sama閱讀 216,919評(píng)論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異八拱,居然都是意外死亡阵赠,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,567評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門肌稻,熙熙樓的掌柜王于貴愁眉苦臉地迎上來清蚀,“玉大人,你說我怎么就攤上這事爹谭〖闲埃” “怎么了?”我有些...
    開封第一講書人閱讀 163,316評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵诺凡,是天一觀的道長(zhǎng)东揣。 經(jīng)常有香客問我,道長(zhǎng)腹泌,這世上最難降的妖魔是什么救斑? 我笑而不...
    開封第一講書人閱讀 58,294評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮真屯,結(jié)果婚禮上脸候,老公的妹妹穿的比我還像新娘。我一直安慰自己绑蔫,他們只是感情好运沦,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,318評(píng)論 6 390
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著配深,像睡著了一般携添。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上篓叶,一...
    開封第一講書人閱讀 51,245評(píng)論 1 299
  • 那天烈掠,我揣著相機(jī)與錄音羞秤,去河邊找鬼。 笑死左敌,一個(gè)胖子當(dāng)著我的面吹牛瘾蛋,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播矫限,決...
    沈念sama閱讀 40,120評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼哺哼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了叼风?” 一聲冷哼從身側(cè)響起取董,我...
    開封第一講書人閱讀 38,964評(píng)論 0 275
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎无宿,沒想到半個(gè)月后茵汰,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,376評(píng)論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡孽鸡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,592評(píng)論 2 333
  • 正文 我和宋清朗相戀三年蹂午,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片梭灿。...
    茶點(diǎn)故事閱讀 39,764評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖冰悠,靈堂內(nèi)的尸體忽然破棺而出堡妒,到底是詐尸還是另有隱情,我是刑警寧澤溉卓,帶...
    沈念sama閱讀 35,460評(píng)論 5 344
  • 正文 年R本政府宣布皮迟,位于F島的核電站,受9級(jí)特大地震影響桑寨,放射性物質(zhì)發(fā)生泄漏伏尼。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,070評(píng)論 3 327
  • 文/蒙蒙 一尉尾、第九天 我趴在偏房一處隱蔽的房頂上張望爆阶。 院中可真熱鬧,春花似錦沙咏、人聲如沸辨图。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,697評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽故河。三九已至,卻和暖如春吆豹,著一層夾襖步出監(jiān)牢的瞬間鱼的,已是汗流浹背理盆。 一陣腳步聲響...
    開封第一講書人閱讀 32,846評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留凑阶,地道東北人猿规。 一個(gè)月前我還...
    沈念sama閱讀 47,819評(píng)論 2 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像晌砾,于是被迫代替她去往敵國(guó)和親坎拐。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,665評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫养匈、插件哼勇、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,096評(píng)論 4 62
  • 在愛上攝影之前,我喜歡文字呕乎,喜歡寫寫東西积担,可是某天當(dāng)我寫不出那些靈性的句子,生活變得一團(tuán)糟的時(shí)候猬仁,朋友說帝璧,如果你喜...
    下載世界閱讀 245評(píng)論 1 0
  • 文|阮二二 我的夢(mèng)想是過許多許多不一樣的人生,這輩子胖過湿刽,但是沒有過一雙又細(xì)又直的腿是我最不甘心的事情啦每次看著許...
    阮二二閱讀 619評(píng)論 2 7
  • 從小受父母潛移默化的影響及孜孜不倦的諄諄教導(dǎo)诈闺,對(duì)于一個(gè)極怕生的人在很長(zhǎng)一段時(shí)間是完全沒有自己的主觀意識(shí)渴庆。特別從衣著...
    幻絲潔閱讀 630評(píng)論 0 0
  • 我是帶著自己的問題和疑惑來讀這本書的襟雷,讀之前看了一下書評(píng),感覺這本書的評(píng)價(jià)一般仁烹。本來就是工具書耸弄,而且是大家熟知的成...
    Kelvin_閱讀 217評(píng)論 0 0