2021年2月3日 星期三

Android Studio - Relative Layout 相對版面佈局(十二):

Android Studio - Relative Layout 相對版面佈局(十二):

Relative Layout(相對版面佈局)是使用 <relativelayout></relativelayout> 標籤。相對佈局通常有兩種形式,一種是相對於容器而言的,一種是相對於控制項而言的。RelativeLayout 是一個以相對位置顯示子視圖的視圖組。每個視圖的位置可以指定為相對於同級元素的位置(例如,在另一個視圖的左側或下方)或相對于父級 RelativeLayout 區域的位置(例如在底部、左側或中心對齊)。

相對佈局(RelativeLayout)程式
  • 操作系統:Windows 7 64-bit 版本 開發環境:Android Studio 4.0.1 版本
  • Gradle 版本:6.1.1
  • 手機測試版本:API 19
  • 原程式:C:\Development\Development_Android\Android_Project\ Layout - RelativeLayout
  • 程式:C:\Development\Development_Android\Android_Project\ Layout - RelativeLayout

相對佈局(RelativeLayout)
相對佈局(RelativeLayout)的基本設計
1. 在相對佈局的情況下,如果都無設定該物件的位置的話,一般預設會將其放在「左上角」。因此,如果有二個物件皆無設定的話,就會有重疊的情況產生。
2. 當在設計相對佈局時,第一件事就是需先確定第一個物件的位置及設置其 ID,之後的物件可以依此物件進行相對位置的編排。
3. 當第一個物件的位置改變了,而依附在第一個物件位置附近的第二個物件,不會因此而需做額外的調整。

Relative Layout - layout/activity_main.xml:

<?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:id="@+id/relative1"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context=".MainActivity">

 

    <EditText

        android:id="@+id/edt1"

        android:layout_width="match_parent"

        android:layout_height="wrap_content" />

 

 

    <Button

        android:id="@+id/button1"

        style="?android:attr/buttonStyleSmall"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignEnd="@+id/button4"

        android:layout_alignRight="@+id/button4"

        android:layout_below="@+id/edt1"

        android:layout_marginTop="94dp"

        android:text="1" />

 

    <Button

        android:id="@+id/button2"

        style="?android:attr/buttonStyleSmall"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignTop="@+id/button1"

        android:layout_toLeftOf="@+id/button3"

        android:layout_toStartOf="@+id/button3"

        android:text="2" />

 

    <Button

        android:id="@+id/button3"

        style="?android:attr/buttonStyleSmall"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignTop="@+id/button2"

        android:layout_centerHorizontal="true"

        android:text="3" />

 

    <Button

        android:id="@+id/button4"

        style="?android:attr/buttonStyleSmall"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_below="@+id/button1"

        android:layout_toLeftOf="@+id/button2"

        android:text="4" />

 

    <Button

        android:id="@+id/button5"

        style="?android:attr/buttonStyleSmall"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignBottom="@+id/button4"

        android:layout_alignLeft="@+id/button2"

        android:layout_alignStart="@+id/button2"

        android:text="5" />

 

    <Button

        android:id="@+id/button6"

        style="?android:attr/buttonStyleSmall"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignLeft="@+id/button3"

        android:layout_alignStart="@+id/button3"

        android:layout_below="@+id/button3"

        android:text="6" />

 

    <Button

        android:id="@+id/button7"

        style="?android:attr/buttonStyleSmall"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_below="@+id/button4"

        android:layout_toLeftOf="@+id/button2"

        android:text="7" />

 

    <Button

        android:id="@+id/button8"

        style="?android:attr/buttonStyleSmall"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignLeft="@+id/button5"

        android:layout_alignStart="@+id/button5"

        android:layout_below="@+id/button5"

        android:text="8" />

 

    <Button

        android:id="@+id/button9"

        style="?android:attr/buttonStyleSmall"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignLeft="@+id/button6"

        android:layout_alignStart="@+id/button6"

        android:layout_below="@+id/button6"

        android:text="9" />

 

    <Button

        android:id="@+id/buttonadd"

        style="?android:attr/buttonStyleSmall"

        android:layout_width="99dp"

        android:layout_height="wrap_content"

        android:layout_alignTop="@+id/button3"

        android:layout_alignEnd="@+id/edt1"

        android:layout_alignRight="@+id/edt1"

        android:layout_marginStart="26dp"

        android:layout_marginLeft="26dp"

        android:layout_marginEnd="56dp"

        android:layout_marginRight="56dp"

        android:layout_toRightOf="@+id/button3"

        android:text="+" />

 

    <Button

        android:id="@+id/buttonsub"

        style="?android:attr/buttonStyleSmall"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignEnd="@+id/buttonadd"

        android:layout_alignLeft="@+id/buttonadd"

        android:layout_alignRight="@+id/buttonadd"

        android:layout_alignStart="@+id/buttonadd"

        android:layout_below="@+id/buttonadd"

        android:text="-" />

 

    <Button

        android:id="@+id/buttonmul"

        style="?android:attr/buttonStyleSmall"

        android:layout_width="154dp"

        android:layout_height="wrap_content"

        android:layout_below="@+id/buttonsub"

        android:layout_alignStart="@+id/buttonsub"

        android:layout_alignLeft="@+id/buttonsub"

        android:layout_alignParentEnd="true"

        android:layout_alignParentRight="true"

        android:layout_marginEnd="1dp"

        android:layout_marginRight="1dp"

        android:text="*" />

 

    <Button

        android:id="@+id/button10"

        style="?android:attr/buttonStyleSmall"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_below="@+id/button7"

        android:layout_toLeftOf="@+id/button2"

        android:text="." />

 

    <Button

        android:id="@+id/button0"

        style="?android:attr/buttonStyleSmall"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignLeft="@+id/button8"

        android:layout_alignStart="@+id/button8"

        android:layout_below="@+id/button8"

        android:text="0" />

 

    <Button

        android:id="@+id/buttonC"

        style="?android:attr/buttonStyleSmall"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignLeft="@+id/button9"

        android:layout_alignStart="@+id/button9"

        android:layout_below="@+id/button9"

        android:text="C" />

 

    <Button

        android:id="@+id/buttondiv"

        style="?android:attr/buttonStyleSmall"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignEnd="@+id/buttonmul"

        android:layout_alignLeft="@+id/buttonmul"

        android:layout_alignRight="@+id/buttonmul"

        android:layout_alignStart="@+id/buttonmul"

        android:layout_below="@+id/buttonmul"

        android:text="/" />

 

    <Button

        android:id="@+id/buttoneql"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignEnd="@+id/buttondiv"

        android:layout_alignLeft="@+id/button10"

        android:layout_alignRight="@+id/buttondiv"

        android:layout_alignStart="@+id/button10"

        android:layout_below="@+id/button0"

        android:layout_marginTop="37dp"

        android:text="=" />

 

</RelativeLayout>


Relative Layout 相對版面佈局主要屬性:

XML attributes

Description

android:layout_centerHorizontal

控制該元件是否和佈局容器的水準居中

android:layout_centerVertical

控制該元件是否和佈局容器的垂直居中

android:layout_centerInparent

控制該元件是否和佈局容器的中央位置

android:layout_alignParentTop

控制該元件是否和佈局容器的頂部對齊

android:layout_alignParentBottom

控制該元件是否和佈局容器的底端對齊

android:layout_alignParentLeft

控制該元件是否和佈局容器的左邊對齊

android:layout_alignParentRight

控制該元件是否和佈局容器的右邊對齊

android:layout_alignParentStart

控制該元件是否和佈局容器的開始對齊

android:layout_alignParentEnd

控制該元件是否和佈局容器的末端對齊

android:layout_alignWithParentIfMissing

如果對應的兄弟元件找不到的話就以父容器做參照物

android:layout_toLeftOf

本元件在某元件的左邊

android:layout_toRightOf

本元件在某元件的右邊

android:layout_toStartOf

本元件在某元件開始端

android:layout_toEndOf

本元件在某元件末端

android:layout_above

本元件在某元件的上方

android:layout_below

本元件在某元件的下方

android:layout_alignBaseline

本元件和某元件的基線對齊

android:layout_alignTop

本元件的頂部和某組件的的頂部對齊

android:layout_alignBottom

本元件的下邊緣和某組件的的下邊緣對齊

android:layout_alignRight

本元件的右邊緣和某組件的的右邊緣對齊

android:layout_alignLeft

本元件左邊緣和某元件左邊緣對齊

android:layout_alignStart

本元件的開始端和某組件開始端對齊

android:layout_alignEnd

本元件的末端和某元件末端對齊


2021年 2月 3日(Wed)天氣報告
氣溫:30.0°F / -1.0°C @ 08:00
風速:每小時 18 公里
相對濕度:百分之 74%
天氣:多雲

沒有留言:

張貼留言