亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

盒式模型的作用

UI的骨骼系列的第二篇文章，要探討組成界面的基本單位--盒子。請(qǐng)先觀看文中的視頻教程，了解盒式模型可以解決哪些問(wèn)題。

內(nèi)容簡(jiǎn)介

在android平臺(tái)中，盒子被稱為View，盡管名字不同，但本質(zhì)沒(méi)有變。本文會(huì)講到以下內(nèi)容：

盒子的種類和功能

既然是盒子，功能肯定是“裝東西”，裝什么東西呢？盒子的類型不同，裝的東西也不一樣。

第一類：
顯示文字、圖片和視頻等信息，一般帶有“操作”，這類盒子被稱為控件，代表是按鈕和文字編輯框。

第二類：
顯示其他盒子，這類盒子一般用來(lái)搭建界面的結(jié)構(gòu)，這類盒子被稱為布局容器。需要強(qiáng)調(diào)一下的是，布局容器一般“不可見(jiàn)”。

控件和布局容器統(tǒng)稱為組件，一個(gè)組件通常只屬于其中一類（HTML語(yǔ)言特例），多數(shù)設(shè)計(jì)師都接觸過(guò)第一類組件，對(duì)第二類可能比較陌生，第二類組件正是今天的重點(diǎn)內(nèi)容。

一起來(lái)看看下面的界面中有哪些盒子（組件）。

界面中有一個(gè)文本框、一個(gè)按鈕和三個(gè)容器布局。我把他們填充上彩色，會(huì)看的更清楚一些。

所以，UI設(shè)計(jì)師應(yīng)該建立一個(gè)認(rèn)識(shí)，構(gòu)成界面的元素不僅僅有控件，還有布局容器。

通用的布局屬性

盒子通過(guò)布局屬性來(lái)控制內(nèi)容的顯示效果，每種布局容器都有自己的布局屬性，其中有一部分是相同的，先來(lái)講講這些通用的布局屬性。

上圖是android平臺(tái)的盒式模型圖（與標(biāo)準(zhǔn) w3c 盒式模型有差異），一共有10個(gè)通用的布局屬性。

height（盒子高度）：
盒子的高度=內(nèi)容區(qū)高度+頂部?jī)?nèi)間距+底部?jī)?nèi)間距?？梢栽O(shè)置為具體數(shù)值、與內(nèi)容高度一致（動(dòng)態(tài)）或與父容器高度一致（動(dòng)態(tài)）。

width（盒子寬度）：
盒子的寬度=內(nèi)容區(qū)寬度+左側(cè)內(nèi)間距+右側(cè)內(nèi)間距?？梢栽O(shè)置為具體數(shù)值、與內(nèi)容寬度一致（動(dòng)態(tài)）或與父容器寬度一致（動(dòng)態(tài)）。

padding-top（頂部?jī)?nèi)間距）：
盒子內(nèi)的頂部隔離區(qū)，內(nèi)容無(wú)法顯示在此區(qū)內(nèi)。屬于盒子高度的一部分，只能設(shè)置為“具體數(shù)值”。

padding-bottom（底部?jī)?nèi)間距）：
盒子內(nèi)的底部隔離區(qū)，內(nèi)容無(wú)法顯示在此區(qū)內(nèi)。屬于盒子高度的一部分，只能設(shè)置為“具體數(shù)值”。

padding-left（左側(cè)內(nèi)間距）：
盒子內(nèi)的左側(cè)隔離區(qū)，內(nèi)容無(wú)法顯示在此區(qū)內(nèi)。屬于盒子寬度的一部分，只能設(shè)置為“具體數(shù)值”。

padding-right（右側(cè)內(nèi)間距）：
盒子內(nèi)的右側(cè)隔離區(qū)，內(nèi)容無(wú)法顯示在此區(qū)內(nèi)。屬于盒子寬度的一部分，只能設(shè)置為“具體數(shù)值”。

margin-top（頂部外間距）：
盒子外的頂部隔離區(qū)，使盒子的上邊界與相鄰盒子保持固定的距離。屬于盒子實(shí)占區(qū)的一部分，只能設(shè)置為“具體數(shù)值”。

margin-bottom（底部外間距）：
盒子外的底部隔離區(qū)，使盒子的下邊界與相鄰盒子保持固定的距離。屬于盒子實(shí)占區(qū)的一部分，只能設(shè)置為“具體數(shù)值”。

margin-left（左側(cè)外間距）：
盒子外的左側(cè)隔離區(qū)，使盒子的左邊界與相鄰盒子保持固定的距離。屬于盒子實(shí)占區(qū)的一部分，只能設(shè)置為“具體數(shù)值”。

margin-right（右側(cè)外間距）：
盒子外的右側(cè)隔離區(qū)，使盒子的左邊界與相鄰盒子保持固定的距離。屬于盒子實(shí)占區(qū)的一部分，只能設(shè)置為“具體數(shù)值”。

在10個(gè)屬性的定義中，還提到了兩個(gè)名詞：內(nèi)容區(qū)與實(shí)占區(qū)。

內(nèi)容區(qū)：
盒子內(nèi)實(shí)際可顯示內(nèi)容的區(qū)域，高度=盒子高度-頂部?jī)?nèi)間距-底部?jī)?nèi)間距，寬度=盒子寬度-左側(cè)內(nèi)間距-右側(cè)內(nèi)間距。

實(shí)占區(qū)：
盒子實(shí)際占用父容器的區(qū)域，高度=盒子高度+頂部外間距+底部外間距，寬度=盒子寬度+左側(cè)外間距+右側(cè)外間距。

看到這么多類似的定義，估計(jì)已經(jīng)有人暈了。我用快遞盒做了個(gè)模型，可以更直觀地表現(xiàn)每個(gè)布局屬性的含義。

靈活地組合這些布局屬性，可以做出多種多樣的布局結(jié)構(gòu)，另外高度和寬度可以設(shè)置動(dòng)態(tài)參數(shù)，布局就擁有了一定的“自適應(yīng)”能力，但只使用這些通用布局屬性還遠(yuǎn)不能滿足設(shè)計(jì)排版的需求，還需要更多的布局屬性來(lái)支持。

兩種經(jīng)典的布局容器

到目前為止，在android平臺(tái)中一共有6類布局容器：
LinearLayout

RelativeLayout

FrameLayout

GridLayout（TableLayout）

AbsoluteLayout

ConstraintLayout

LinearLayout（線性布局）與RelativeLayout（相對(duì)布局）目前應(yīng)用最多，先來(lái)看看LinearLayout。

LinearLayout：
放置于LinearLayout中的組件會(huì)橫向或者縱向依次排列。

看下圖，界面上部分展示了LinearLayout縱向排列的布局效果，下部分展示了LinearLayout橫向排列的布局效果。

LinearLayout還有一個(gè)獨(dú)特的布局屬性--尺寸權(quán)重。

尺寸權(quán)重：
可將組件的尺寸按照父容器尺寸的一定比例進(jìn)行設(shè)置，所以尺寸權(quán)重也屬于動(dòng)態(tài)屬性。

下面的例子中，將三個(gè)按鈕的高度分別設(shè)置為屏幕高度的10%、30%和60%，在橫屏模式下，按鈕會(huì)進(jìn)行自適應(yīng)。

在縱向排列的LinearLayout中，組件會(huì)從LinearLayout的上邊界開(kāi)始顯示，且只能設(shè)置為橫向居中顯示。

在橫向排列的LinearLayout中，組件會(huì)從LinearLayout的左邊界開(kāi)始顯示，且只能設(shè)置為縱向居中顯示。

如果希望一個(gè)圖標(biāo)顯示在父容器的中心，LinearLayout會(huì)有點(diǎn)力不從心，必須使用兩個(gè)嵌套在一起的LinearLayout，如下圖所示。

為了解決這個(gè)問(wèn)題便有了今天的第二個(gè)主角RelativeLayout（相對(duì)布局）。

RelativeLayout：
放置于RelativeLayout中的組件都會(huì)尋找一個(gè)參考點(diǎn)來(lái)設(shè)置自己的尺寸和位置。

看下圖，灰色區(qū)域就是RelativeLayout，首先設(shè)置圖標(biāo)顯示在灰色區(qū)域的中心（不需要雙層嵌套），然后設(shè)置文本框位于圖標(biāo)下方并且與圖標(biāo)左對(duì)齊。在橫屏模式下，界面會(huì)進(jìn)行自適應(yīng)。

RelativeLayout的布局原理與設(shè)計(jì)原理類似，支持以下屬性：

layout_above：在某個(gè)組件的上方

layout_below：在某個(gè)組件的下方

layout_toLeftOf：在某個(gè)組件的左邊

layout_toRightOf：在某個(gè)組件的右邊

layout_centerVertical：在父容器中水平居中

layout_centerHorizontal：在父容器中垂直居中

layout_alignParentTop：與父容器上邊界對(duì)齊

layout_alignParentBottom：與父容器下邊界對(duì)齊

layout_alignParentLeft：與父容器左邊界對(duì)齊

layout_alignParentRight：與父容器右邊界對(duì)齊

layout_alignTop：與某個(gè)組件上邊界對(duì)齊

layout_alignBottom：與某個(gè)組件下邊界對(duì)齊

layout_alignLeft：與某個(gè)組件左邊界對(duì)齊

layout_alignRight：與某個(gè)組件右邊界對(duì)齊

RelativeLayout看起來(lái)非常的強(qiáng)大，但是缺少兩類屬性：
1.使兩個(gè)組件橫向或縱向居中對(duì)齊
2.將組件的尺寸按照父容器尺寸的一定比例進(jìn)行設(shè)置

這正好是LinearLayout的強(qiáng)項(xiàng)，所以合理地嵌套這兩種布局，就可以實(shí)現(xiàn)大部分常規(guī)APP的界面。

控件知多少

平時(shí)在設(shè)計(jì)界面的時(shí)候，少不了跟各種各樣的控件打交道，那到底在有多少種控件呢？

上圖列舉了一些最常用的控件，需要強(qiáng)調(diào)一下，所有的組件（控件和布局容器）都可以添加“按下”、“滑動(dòng)”、“長(zhǎng)按”和“抬起”操作，所以“操作”并非按鈕的特權(quán)。

TextView控件：
可以設(shè)置多行或者單行顯示、文字的樣式以及省略號(hào)出現(xiàn)的位置等屬性。

Button和ImageButton控件：
都是按鈕，但是Button是TextView的近親，而ImageButton卻是ImageView的近親。Button是在TextView的基礎(chǔ)上增加的點(diǎn)擊操作，而ImageButton在ImageView的基礎(chǔ)上增加了點(diǎn)擊操作。所以，控件可以被“拓展”。

CheckBox和RadioButton：
很容易搞混的兩種控件。

上圖取自《GUI設(shè)計(jì)禁忌2.0》一書(shū)，強(qiáng)烈建議互聯(lián)網(wǎng)從業(yè)者閱讀此書(shū)，書(shū)中列舉了很多優(yōu)秀的和劣質(zhì)的設(shè)計(jì)案例，對(duì)多種控件做了詳細(xì)的介紹。對(duì)于CheckBox和RadioButton，只要從字面理解就足以分清楚。

上圖可以代替一切解釋，關(guān)于CheckBox和RadioButton的區(qū)別就不再贅述。

Switch控件：
用來(lái)開(kāi)啟或者關(guān)閉某個(gè)功能，一般單獨(dú)使用。在一些舊的android系統(tǒng)上，此情況可能會(huì)采用CheckBox控件，從6.0版本開(kāi)始，已經(jīng)都替換成了Switch開(kāi)關(guān)。

其他控件還有“進(jìn)度條”、“seekbar（滑塊條）”以及“輸入框”等等，如果以為這就是全部的控件，那就天真啦。

Actionbar、Menus、Navigation 以及Dialogs都屬于控件，這種組合了幾個(gè)小控件的大控件稱為控件組，所以控件可以組合起來(lái)形成一個(gè)新的控件。除此之外，為了滿足APP設(shè)計(jì)的各種需要，還會(huì)開(kāi)發(fā)“自定義控件”，下圖中心的圓環(huán)--時(shí)間設(shè)置控件，就是一個(gè)變種的Seekbar控件。

自定義控件的工作量比較大，尤其對(duì)新手程序員簡(jiǎn)直就是一個(gè)噩夢(mèng)，然后大家看著辦吧。

一點(diǎn)感悟，一點(diǎn)感激

今天我重新優(yōu)化了文章的措辭與排版，一方面希望提供更好的閱讀體驗(yàn)，另一方面作為設(shè)計(jì)者的自己理應(yīng)追求設(shè)計(jì)的最大價(jià)值。

UI設(shè)計(jì)是由藝術(shù)、計(jì)算機(jī)科學(xué)、心理學(xué)以及社會(huì)科學(xué)等多個(gè)學(xué)科相結(jié)合的產(chǎn)物，因此UI設(shè)計(jì)天生就擁有著“藝術(shù)”與“技術(shù)”的兩面性。

作為一名UI設(shè)計(jì)師經(jīng)常會(huì)在工作中遇到“技術(shù)性”問(wèn)題，我們無(wú)法回避它們，也不應(yīng)該回避它們。

現(xiàn)在，我想通過(guò)這些 “不一樣”的文章揭開(kāi)UI設(shè)計(jì)的“技術(shù)面”，讓我們勇敢地面對(duì)UI設(shè)計(jì)的“完全體”，同時(shí)，努力成為“完全體”的UI設(shè)計(jì)師吧。

最后，感謝每一位讀者，如果覺(jué)得文章不錯(cuò)，別忘了分享給他人，希望有越來(lái)越多的UI設(shè)計(jì)師跟我一起研究“UI設(shè)計(jì)中的科學(xué)性問(wèn)題”，發(fā)現(xiàn)UI設(shè)計(jì)的科學(xué)之美與邏輯之美。

相關(guān)閱讀
UI的骨骼•始章：一種源于邏輯的新設(shè)計(jì)思想。
android官方設(shè)計(jì)文檔：了解更多控件。

下期預(yù)告

下期我會(huì)繼續(xù)通過(guò)視頻教程來(lái)演示一個(gè)完整的界面從設(shè)計(jì)到實(shí)現(xiàn)的全過(guò)程，在實(shí)戰(zhàn)中講解何如應(yīng)用這些屬性。另外還會(huì)談到UI骨骼的設(shè)計(jì)思想如何在設(shè)計(jì)與開(kāi)發(fā)階段發(fā)揮作用，最終獲得完美的實(shí)現(xiàn)效果。