seline; color: rgb(51, 51, 51); letter-spacing: normal; text-align: center; text-indent: 0px; background-color: rgb(255, 255, 255);">
有些朋友會(huì)有疑問(wèn)，做UI設(shè)計(jì)到底需不需要掌握一些開(kāi)發(fā)知識(shí)呀?
我覺(jué)得了解是有必要的，但不需要研究的太深入。
那怎么了解呢?我來(lái)教你個(gè)方法(需要有安卓手機(jī)才行，但蘋(píng)果手機(jī)也沒(méi)關(guān)系，看了此文也會(huì)有所收獲!)
今天的大綱如下：
1.先找到打開(kāi)頁(yè)面布局的開(kāi)關(guān)
2.認(rèn)識(shí)布局中的三個(gè)內(nèi)容
3.舉個(gè)例子
4.注意事項(xiàng)
1.先找到打開(kāi)頁(yè)面布局的開(kāi)關(guān)
我們需要先打開(kāi)顯示頁(yè)面布局的開(kāi)關(guān)，這是我們今天學(xué)習(xí)的基礎(chǔ)。
先打開(kāi)安卓系統(tǒng)手機(jī)的設(shè)置頁(yè)面：
找到“開(kāi)發(fā)者選項(xiàng)”，點(diǎn)擊進(jìn)入：
再找到“顯示布局邊界”，打開(kāi)開(kāi)關(guān)后，你會(huì)的得到下面這個(gè)各種框框的頁(yè)面：
這就是我們今天要研究的效果，可能現(xiàn)在看著有點(diǎn)蒙，但等我下面給你介紹完，你就知道開(kāi)發(fā)實(shí)現(xiàn)頁(yè)面的基本原理了!
屌不屌?
2.認(rèn)識(shí)布局中的三個(gè)內(nèi)容
想弄明白原理，就必須知道，這上面各種形式的框框、顏色都是啥意思!
其實(shí)，只要我們用心觀察，就會(huì)發(fā)現(xiàn)，里面只有三種形式的內(nèi)容。
第一種：
這種矩形就是控件區(qū)，里面可能是文字呀、按鈕呀、圖片呀等等!
第二種：
這種紫色矩形是指控件與控件之間的間距。
第三種：
剩下就只剩白色區(qū)域了，其實(shí)嚴(yán)格來(lái)說(shuō)是透明區(qū)域，這部分內(nèi)容是控件內(nèi)部的間距：
認(rèn)識(shí)了這三個(gè)內(nèi)容，你再來(lái)看這個(gè)頁(yè)面是不是就知道，開(kāi)發(fā)哥哥是怎么實(shí)現(xiàn)頁(yè)面的了?
如果還不懂，我們下面來(lái)舉個(gè)例子。
3.舉個(gè)例子
我們就來(lái)看下面這個(gè)區(qū)域怎么實(shí)現(xiàn)的：
這樣，一條內(nèi)容的布局就完成，之后就往相應(yīng)的地方里面放東西就行了!
4.注意事項(xiàng)
說(shuō)個(gè)注意事項(xiàng)吧，我們工作中經(jīng)常遇到的一個(gè)問(wèn)題，看下圖：
兩排文字之間是有間距的(紅色部分12像素)，但是當(dāng)我們看開(kāi)發(fā)布局的時(shí)候：
兩個(gè)文字控件之間是沒(méi)有間距的。
也就是說(shuō)，其實(shí)字體控件本身上下是帶有一定間距的，如果這時(shí)候我們還標(biāo)注間距為12像素，那實(shí)現(xiàn)出來(lái)的行間距就會(huì)比設(shè)計(jì)稿要大，所以在做效果圖標(biāo)注的時(shí)候一定考慮好，后期實(shí)現(xiàn)出來(lái)難免會(huì)有微調(diào)的情況。
總結(jié)
沒(méi)事的時(shí)候可以多看看開(kāi)發(fā)的布局情況，讓自己對(duì)頁(yè)面的實(shí)現(xiàn)有更深的了解。
seline; color: rgb(51, 51, 51); letter-spacing: normal; text-align: left; text-indent: 0px; background-color: rgb(255, 255, 255);">
