轉自：菜心設計鋪
作者：菜心
有些朋友會有疑問，做UI到底需不需要掌握一些開發(fā)知識呀声滥？
我覺得了解是有必要的眉撵，但不需要研究的太深入。
那怎么了解呢落塑？我來教你個方法（需要有安卓手機才行纽疟，但蘋果手機也沒關系，看了此文也會有所收獲：读蕖）
今天的大綱如下：
1.先找到打開頁面布局的開關
2.認識布局中的三個內容
3.舉個例子
4.注意事項
1.先找到打開頁面布局的開關
我們需要先打開顯示頁面布局的開關污朽，這是我們今天學習的基礎。
先打開安卓系統(tǒng)手機的設置頁面：
找到“開發(fā)者選項”龙考，點擊進入：
再找到“顯示布局邊界”蟆肆，打開開關后矾睦，你會的得到下面這個各種框框的頁面：
這就是我們今天要研究的效果，可能現(xiàn)在看著有點蒙颓芭，但等我下面給你介紹完顷锰，你就知道開發(fā)實現(xiàn)頁面的基本原理了！
屌不屌亡问？
2.認識布局中的三個內容
想弄明白原理官紫，就必須知道，這上面各種形式的框框州藕、顏色都是啥意思束世！
其實，只要我們用心觀察床玻，就會發(fā)現(xiàn)毁涉，里面只有三種形式的內容。
第一種：
這種矩形就是控件區(qū)锈死，里面可能是文字呀贫堰、按鈕呀、圖片呀等等待牵！
第二種：
這種紫色矩形是指控件與控件之間的間距其屏。
第三種：
剩下就只剩白色區(qū)域了，其實嚴格來說是透明區(qū)域缨该，這部分內容是控件內部的間距：
認識了這三個內容偎行，你再來看這個頁面是不是就知道，開發(fā)哥哥是怎么實現(xiàn)頁面的了贰拿？
如果還不懂蛤袒，我們下面來舉個例子。
3.舉個例子
我們就來看下面這個區(qū)域怎么實現(xiàn)的：
這樣膨更，一條內容的布局就完成妙真，之后就往相應的地方里面放東西就行了！
4.注意事項
說個注意事項吧询一，我們工作中經(jīng)常遇到的一個問題隐孽，看下圖：
兩排文字之間是有間距的（紅色部分12像素），但是當我們看開發(fā)布局的時候：
兩個文字控件之間是沒有間距的健蕊。
也就是說，其實字體控件本身上下是帶有一定間距的踢俄，如果這時候我們還標注間距為12像素缩功，那實現(xiàn)出來的行間距就會比設計稿要大，所以在做效果圖標注的時候一定考慮好都办，后期實現(xiàn)出來難免會有微調的情況嫡锌。
總結
沒事的時候可以多看看開發(fā)的布局情況虑稼，讓自己對頁面的實現(xiàn)有更深的了解。
