Android Studio 笔记─Layout元件介绍

Layout 决定app的外观，来介绍几个常见的Layout元件。
Layout元件主要有分五种：Linear Layout(线性布局)、Relative Layout(相对布局)、TableLayout(表格布局)、AbsoluteLayout(绝对布局)、FrameLayout(框架布局)。

●Linear Layout(线性版面布局)：水平线或垂直线的排版设定。
android:orientation="垂直：vertical／水平：horizontal"
Orientation : 决定版面呈现水平或垂直。
垂直範例程式：

<?xml version="1.0" encoding="utf-8"?><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">    <TextView        android:text="Hello World"        android:layout_width="165dp"        android:layout_height="wrap_content"        android:id="@+id/textView3"        tools:ignore="HardcodedText" />    <Button        android:text="Yes"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:id="@+id/button"        tools:ignore="HardcodedText" />    <TextView        android:text="Taiwan NO.1"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:id="@+id/textView4"        tools:ignore="HardcodedText" /></LinearLayout>

水平範例程式：

<?xml version="1.0" encoding="utf-8"?><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="horizontal">    <TextView        android:text="Hello World"        android:layout_width="165dp"        android:layout_height="wrap_content"        android:id="@+id/textView3"        tools:ignore="HardcodedText" />    <Button        android:text="Yes"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:id="@+id/button"        tools:ignore="HardcodedText" />    <TextView        android:text="Taiwan NO.1"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:id="@+id/textView4"        tools:ignore="HardcodedText" /></LinearLayout>

●Relative Layout(相对位置版面布局)：使用元件的id来到指定的位子。

※android:layout_above="@+id/物件id名称"：代表在id物件名称的上方
※android:layout_below="@+id/物件id名称"：代表在id物件名称的下方
※android:layout_toRightOf="@+id/物件id名称"：代表在id物件名称的左方
※android:layout_toLeftOf="@+id/物件id名称"：代表在id物件名称的右方
还有很多可以到这边来看～

<?xml version="1.0" encoding="utf-8"?><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"    android:shrinkColumns="0" >    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="How are you!"        android:textColor="@color/red"        android:textSize = "20sp"        android:id="@+id/tw11"        tools:ignore="HardcodedText" />    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:id="@+id/tno"        android:text="Taiwan NO.1"        android:textColor="@color/colorPrimary"        android:textSize = "10sp"        android:layout_below="@+id/butt1"        tools:ignore="HardcodedText,SmallSp" />    <Button            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="@string/yes"            android:padding="10px"            android:id="@+id/butt1"            android:layout_below="@+id/tw11"            tools:ignore="PxUsage" />    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:textColor="@color/purple"        android:textSize = "15sp"        android:text="Hello World!"        android:layout_below="@+id/butt1"        android:layout_toEndOf="@+id/butt1" /></RelativeLayout>

●TableLayout(表格栏位版面布局)：让物件像表格一样排列。

运用标籤 来分格表格

<?xml version="1.0" encoding="utf-8"?><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="match_parent"    android:collapseColumns="*" >    <TableRow        android:layout_width="match_parent"        android:layout_height="match_parent"        tools:ignore="UselessParent">    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="How are you!"        android:textColor="@color/red"        android:layout_span="1"        android:textSize = "20sp"        tools:ignore="HardcodedText" />        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:textColor="@color/purple"            android:textSize = "25sp"            android:layout_span="1"            android:text="Hello World!"            />    </TableRow>    <TableRow>        <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Taiwan NO.1"        android:textColor="@color/colorPrimary"        android:layout_span="3"        android:textSize = "30sp"            tools:ignore="HardcodedText" />        <Button            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="@string/yes"            android:padding="10px"            android:id="@+id/butt1"            tools:ignore="PxUsage" />    </TableRow></TableLayout>

●AbsoluteLayout(绝对版面布局)：用X轴与Y轴来配置版面。
android:layout_x="X轴尺寸px"
android:layout_y="Y轴尺寸px"
範例语法如下：

<?xml version="1.0" encoding="utf-8"?><AbsoluteLayout xmlns:android=以下省略................">    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Hello World!"        android:layout_x="200px"        android:layout_y="10px"/></AbsoluteLayout>

设定前：

设定后：

●FrameLayout(框架版面布局)：重叠显示，语法最先下的会出现在最后面。

如图中红色的「How are you!」几乎快看不见了，紫色的「Hello World!」还有一点明显，
蓝色的「Taiwan NO.1」就比较清楚。

範例语法如下：

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android=以下省略................">    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="How are you!"        android:textColor="@color/red"        android:textSize = "20sp"        tools:ignore="HardcodedText" />    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:textColor="@color/purple"        android:textSize = "25sp"        android:text="Hello World!"        />    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Taiwan NO.1"        android:textColor="@color/colorPrimary"        android:textSize = "30sp"        tools:ignore="HardcodedText" /></FrameLayout>