Android新手入門2016（7）--布局

標籤：view   ==   顯示   抽象   相對布局   fill   動手   人物   tail   

布局，這個在服務端變成是沒有的，也是服務端的人學習client的一道坎吧。

曾經用cocos2d-x寫小遊戲的時候就是這個非常難懂，或者能用，可是理解不多的話，非常難寫出好的布局，難以適合商業化的應用。

遊戲的布局有點像用photoshop畫畫的感覺。現有一個情境的概念，就像一個畫布，然後上面分一層一層。能夠單獨某一層進行操作。顯示的時候，能夠覺得畫面是從下往上一層一層堆上去。層裡面有非常多精靈，精靈就是我們看到的那些會動的人物，建築，怪什麼的。這大概是cocos2d的設計思想吧。

我一直認為，學編程，一定要想理解人家的設計思想，理解了，跟著思想走。一路順暢。

不能理解。就是一個大迷宮，這裡一扇門，那邊一扇門，好像哪裡都能去。都能通向成功，可是有些路徑看似能實現，實際上事半功倍。相同，我們做功能，做應用，也是一樣，先想好思路，然後才幹動手去做。也許這就是大學的時候學的概要設計吧，一直這麼做，可能當年學的理論還是有點用的。

臨時先這麼想。先在去看看別人的部落格吧。最後，可能在後面幾個文章裡面。再回過頭來總結對比一下。

布局是什嗎？

布局是Android程式中基礎的容器，能夠把各種控制項放進去，自己主動按特定的方式拍板。

布局方式有哪些？

LinearLayout, RleativeLayout, TableLayout, FrameLayout 等，可以通過XML方式類聲明。或者編碼的方式。通過XML聲明的方式可以更好地讓代碼和視圖分離，改動後不須要編譯，更easy支援不同螢幕大小。

講到這裡，大家應該明確，布局單獨存在的時候是看不到的，須要通過其它組件來表現。既然是入門，一上來就跟我說這些抽象的東西，是在難以費解。

RleativeLayout：

先來幾個能看到的，我想想。button、文字、輸入框。應該是比較簡單，能看得到的。我們先來看看能看見的東西吧。

先看看布局檔案，檔案放在哪裡了？來看看project結構說明

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" >

布局檔案在res/layout/檔案夾以下，activity_hello_world.xml.這裡順便說明一下。檔案名稱必須用小寫。不同單詞用‘_’分開。

開啟檔案，點擊圖中的Graphical Layout能夠看到一個可視化的布局介面，能夠選擇不同組件，然後拖拽擺放。

我們能夠看到已經有一個字串在上面了“Hello world!”。

如今加多一些文字，button，輸入框看看吧。

這樣應該能顯示出布局的作用。

拖拽的時候，會出現各種對齊其它組件的提示。我隨便擺。然後就非常亂了。

隨便拉了一些button和文字。拉過去就會顯示出來，本來想拉個輸入框的。可是好像報錯。可能有些操作不正確。只是今天的主題的布局，所以先不研究文本、button這些控制項的細節。執行程式後介面跟一樣，就不了。

的文本。button亂糟糟的，是我任意拉的，好像放在哪裡就哪裡了。

我們先看看布局檔案的xml代碼怎樣。為什麼會是這種。

<!--相對布局方式，能夠指定子項目相對於父元素或者其它子項目的位置。
這個是比較經常使用的布局之中的一個。
xmlns:android xml的命名空間。通過這裡告訴Eclipse相關的屬性android:layout_width 當前這個布局的寬度，android:layout_height 當前這個布局的高度，都是match_parent。即是填充父元素。這個布局已經是最外層了。所以填充了整個手機螢幕。tools:context 關聯指定的activity，普通情況下一個布局檔案能夠在多個地方被用到。這麼寫是聲明特定的上下文。假設指定了主題還能夠進行渲染。--><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="${relativePackage}.${activityClass}" ><!-- 文本， "wrap_content"自適應大小，強制顯示文本的所有內容。這裡寬高都是了。android:text常值內容，這裡填了@string，指示內容在res/values/strings.xml內，名稱為hello_wrold的屬性。
android:id定義這個TestView的id。
會在R.java內產生相應的id。寫java代碼的時候，能夠通過R.id.textView2來擷取這個文本-->    <TextView         android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="@string/hello_world" android:id="@+id/textView2"/><!-- 這是手動拉進來的TextView，跟上面的差點兒相同。還多了一些屬性。 layout_alignParentLeft相對於父控制項是否靠左對齊。layout_below設定了為某個控制項的以下。這裡填了在textView2以下。android:text這裡直接填了文本的內容，能夠通過id，配在strings.xml中-->    <TextView        android:id="@+id/textView1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentLeft="true"        android:layout_below="@+id/textView2"        android:text="TextView" />    <Button        android:id="@+id/button1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentLeft="true"        android:layout_below="@+id/textView1"        android:layout_marginTop="16dp"        android:text="Button" />    <Button        android:id="@+id/button2"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignBottom="@+id/button1"        android:layout_marginLeft="27dp"        android:layout_toRightOf="@+id/button1"        android:text="Button" />    <Button        android:id="@+id/button3"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignBaseline="@+id/button2"        android:layout_alignBottom="@+id/button2"        android:layout_toRightOf="@+id/button2"        android:text="Button" />    <TextView        android:id="@+id/textView3"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignRight="@+id/button2"        android:layout_below="@+id/button1"        android:layout_marginRight="32dp"        android:layout_marginTop="23dp"        android:text="Medium Text"        android:textAppearance="?
android:attr/textAppearanceMedium" />    <TextView        android:id="@+id/textView4"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignLeft="@+id/button3"        android:layout_below="@+id/textView3"        android:text="Large Text"        android:textAppearance="?android:attr/textAppearanceLarge" /></RelativeLayout>

通過這個xml檔案，我們能夠看到layout組件跟TextView、Button，有非常多相似的地方。

他們有非常多共同的屬性。這些屬性是有預設值的，非常多是能夠不配置的。並且非常多，建議用到了再去百度。

總結一下，如今接觸到的屬性主要有顯示的文字內容，擺放位置。以及id。

如今有了初步的印象，能夠看看其它的布局了方式了（差點忘了今天是說布局的。呃。。。

）

LinearLayout：

直接把RleativeLayout改了。layout_alignParentLeft這些明顯是相對位置的屬性，所有提警告說不合法了。把那些明顯是相對布局的東西刪除掉後。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"><!--android:orientation為方向屬性。vertical為垂直排列。所以layout組件會把全部的子項目，都豎直排列出來。
-->     <TextView         android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="@string/hello_world" android:id="@+id/textView2"/>     <TextView        android:id="@+id/textView1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="@string/text1" />    <Button        android:id="@+id/button1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"         android:text="@string/text2" />    <Button        android:id="@+id/button2"        android:layout_width="wrap_content"        android:layout_height="wrap_content"         android:text="@string/text3" />    <Button        android:id="@+id/button3"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="@string/text4" />    <TextView        android:id="@+id/textView3"        android:layout_width="wrap_content"        android:layout_height="wrap_content"          android:text="@string/text5" />    <TextView        android:id="@+id/textView4"        android:layout_width="wrap_content"        android:layout_height="wrap_content"         android:text="@string/text6"  /></LinearLayout>

能夠看到，非常整齊了，豎著拍成一排了。

TableLayout：

感覺上這個布局就跟HTML的table一樣，把全部的組件弄成一個一個的表格。

它的元素分成一行一行的，TableRow。再以下才是詳細的一個個元素。子項目的寬度是不可控的，高度能夠依據自身變化。

 <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:orientation="vertical">  <!--用TableRow來分成一行一行的。-->        <TableRow             android:id="@+id/tableRow1"            android:layout_width="wrap_content"            android:layout_height="wrap_content" >            <Button                android:id="@+id/button4"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="Button1" />            <Button                android:id="@+id/button5"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="Button2" />            <Button                android:id="@+id/button7"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="Button3" />         </TableRow>        <TableRow            android:id="@+id/tableRow2"            android:layout_width="wrap_content"            android:layout_height="wrap_content" >            <TextView                android:id="@+id/textView5"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="TextView" />            <TextView                android:id="@+id/textView6"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="TextView" />            <TextView                android:id="@+id/textView7"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="Large Text"                android:textAppearance="?android:attr/textAppearanceLarge" />                    </TableRow>        <TableRow            android:id="@+id/tableRow3"            android:layout_width="wrap_content"            android:layout_height="wrap_content" >            <TextView                android:id="@+id/textView9"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="TextView" />            <TextView                android:id="@+id/textView10"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="Large Text"                android:textAppearance="?android:attr/textAppearanceLarge" />            <Button                android:id="@+id/button8"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="Button" />         </TableRow>        <TableRow            android:id="@+id/tableRow4"            android:layout_width="wrap_content"            android:layout_height="wrap_content" >        </TableRow> </TableLayout>

FrameLayout：

所有的子項目將會固定在螢幕的左上方;不能為FrameLayout中的一個子項目指定一個位置。但能夠通過子控制項自身控制其位置。

後一個子項目將會直接在前一個子項目之上進行覆蓋填充。把它們部份或所有擋住(除非後一個子項目是透明的)。

此布局通經常使用於遊戲或者處理一些畫廊程式。

從能夠看出。三個button都被疊加在一起了。

 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:orientation="vertical">         <Button          android:id="@+id/button4"          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:text="Button1" />      <Button          android:id="@+id/button5"          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:text="Button2" />      <Button          android:id="@+id/button7"          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:text="Button3" /></FrameLayout>

布局臨時就講到這裡，由於是入門。準確來說是讓我自己入門。不是必需深究，最重要是瞭解layout是什麼，有個大致瞭解，會用，這才是學習的第一步。建議大家把代碼拷貝到自己的Eclipse上面看看。可以理解更深入。

Android新手入門2016（7）--布局