頁面的五種佈局以及巢狀
阿新 • • 發佈:2019-02-01
因為學習比較晚,我用的相關版本為SDK4.1、eclipse4.2,而自己看的教材都是低版本的,這造成了細節上的不同,有時候給學習造成了不小的困擾,不過這樣也好,通過解決問題獲得的知識理解更加深刻一點,這篇文章就是因為版本不同這個原因由來的。
使用上面說的版本新建一個Android專案,然後開啟main.xml檔案,注意看程式碼:
- <RelativeLayoutxmlns: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">
- <TextView
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_centerHorizontal="true"
- android:layout_centerVertical="true"
-
android:text
- tools:context=".Main"/>
- </RelativeLayout>
RelativeLayout,這個就是五種佈局的其中之一,而大多數教材上面講的都是LinearLayout佈局,佈局的不同造成模擬機介面顯示的不同,為了避免再次困然,先把五種佈局都瞭解一下吧。
五個佈局物件:RelativeLayout、LinearLayout、TableLayout、FrameLayout、AbsoulteLayout。
佈局一:
相對佈局RelativeLayout,定義各控制元件之間的相對位置關係,通過位置屬性和各自的ID配合指定位置關係,在指定位置關係時引用的ID必須在引用之前先被定義,否則將出現異常。
layout/main.xml的程式碼
- <RelativeLayoutxmlns: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">
- <TextView
- android:id="@+id/firstText"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:background="#FFFFFF"
- android:text="@string/first"/>
- <TextView
- android:id="@+id/secondText"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:background="#FFFF00"
- android:text="@string/second"/>
- <TextView
- android:id="@+id/thirdText"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:background="#FF00FF"
- android:text="@string/third"/>
- <TextView
- android:id="@+id/fourthText"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:background="#00FFFF"
- android:text="@string/fourth"/>
- </RelativeLayout>
- <stringname="first">First</string>
- <stringname="second">Second</string>
- <stringname="third">Third</string>
- <stringname="fourth">Fourth</string>
為了清晰展示,從一到四標籤的背景顏色為白黃紅綠,注意看上面沒有定義任何相對位置屬性,結果:
都重合到一起了,這說明在沒有定義相對位置屬性的情況下,所有標籤都是相對於螢幕左上角佈局的,現在更改一下main.xml的程式碼:
- <RelativeLayoutxmlns: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">
- <TextView
- android:id="@+id/firstText"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:background="#FFFFFF"
- android:text="@string/first"/>
- <TextView
- android:id="@+id/secondText"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:background="#FFFF00"
- android:layout_below="@id/firstText"
- android:text="@string/second"/>
- <TextView
- android:id="@+id/thirdText"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:background="#FF00FF"
- android:layout_below="@id/secondText"
- android:text="@string/third"/>
- <TextView
- android:id="@+id/fourthText"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:background="#00FFFF"
- android:layout_below="@id/thirdText"
- android:text=