Kotlin Android 高效入門
線上課程
  • Kotlin Android 高效入門
  • Android 開發準備
    • 0 Git 版本控制系統
      • 0.1 Gitlab 網站
      • 0.2 Gitlab 範例專案
      • 0.3 Gitlab 取得本書範例
      • 0.4 版本切換
    • 1 Android 系統與應用程式
      • 1.1 Android 版本演進
      • 1.2 Android 系統架構
      • 1.3 應用程式基礎
      • 1.4 應用程式元件
      • 1.5 應用程式宣告檔
      • 1.6 Android Studio 開發環境
    • 2 開發環境安裝
      • 2.1 基礎環境-JDK
      • 2.2 整合開發工具-Android Studio
      • 2.3 必要的設定
  • Android 專案開發
    • 3 Android 專案架構與 Activity
      • 3.1 建立Bmi專案
      • 3.2 AndroidManifest.xml載運清單
      • 3.3 畫面配置-Layout
      • 3.4 Java/Kotlin 類別
      • 3.5 資源 Resources
      • 3.6 Android Support Library-支援函式庫
    • 4 版面配置環境
      • 4.1 版面配置設計畫面
      • 4.2 ConstraintLayout 版面配置
      • 4.3 LinearLayout 流水式版面
      • 4.4 元件的高度與寬度
      • 4.5 元件位置與距離
    • 5 Kotlin 語言基礎
      • 5.1 Kotlin 基礎知識
      • 5.2 類別與物件
    • 6 Activity 設計
      • 6.1 Bmi 專案功能設計
      • 6.2 MainActivity 中取得畫面元件
      • 6.3 按鈕的事件處理
      • 6.4 使用浮動顯示-Toast類別
      • 6.5 使用對話框-AlertDialog 類別
      • 6.6 多國語言
      • 6.7 按鈕事件處理-匿名類別與 lambda
  • 線上課程
    • 20 線上課程 courses
Powered by GitBook
On this page
  • 元件的間距 margin
  • 元件的對齊
  • LinearLayout 中的權重 weight

Was this helpful?

  1. Android 專案開發
  2. 4 版面配置環境

4.5 元件位置與距離

Previous4.4 元件的高度與寬度Next5 Kotlin 語言基礎

Last updated 5 years ago

Was this helpful?

元件的間距 margin

每一個元件都可指定其上下左右與其他元件的距離,稱之為「Margin」 外間距,「android:layout_margin」為其屬性名稱,可以統一設定四個方向的間距,亦可個別設定。

假設希望本例的第二顆按鈕與下方第三顆按鈕有 30 點的間距,請先選擇第二顆按鈕,在其屬性表中找到「layout:margin」屬性後展開,可設定 bottom 值為「30dp」,如下圖:

輸入完後按下 Enter 鍵,即完成設定,預覽圖如下:

元件的對齊

為元件設定「layout:gravity」屬性,可決定元件在容器中向那個方位靠攏,請選擇第一顆按鈕,找到屬性表中的 layout:gravity 屬性後展開,再勾取「center_horizontal」,代表本按鈕對齊為水平置中,如下圖:

預覽圖如下,第一顆按鈕的 layout:gravity 屬性在設定為水平置中:

另一個與 layout:gravity 屬性很像的屬性為「gravity」,假如在一個版面中有很多個元件,想要每個元件都以同一種方式對齊,要一個個去設定實 在太繁複了,「gravity」屬性提供給版面配置或容器統一設定裏面元件的對齊方式,只要設定版面即可。

請選擇範例的 LinearLayout,找到屬性表中的 gravity 屬性後展開,勾 選「center_horizontal」如下圖:

預覽效果如下,所有在 LinearLayout 中的元件都水平置中了:

LinearLayout 中的權重 weight

當我們在 LinearLayout 中放入多個元件時,可利用屬性「weight」權重, 為元件分配不同的權重值,其預設值為 0。透過分別設定在 LinearLayout 內的元件的權值值,可依權重分配元件可以占用的空間,例如一個水平的 LinearLayout 人的三個 Button,權值為分別為 1, 2, 3 時,其配置結果如下圖:

原始碼如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="horizontal"
              android:layout_width="match_parent"
              android:layout_height="match_parent" 
              android:gravity="center_horizontal">

    <Button
            android:text="Button"
            android:layout_width="0dp"
            android:layout_height="wrap_content" 
            android:id="@+id/button" 
            android:layout_gravity="center_horizontal"
            android:layout_weight="1"/>
    <Button
            android:text="Button"
            android:layout_width="0dp"
            android:layout_height="wrap_content" 
            android:id="@+id/button2" 
            android:layout_marginBottom="30dp"
            android:layout_weight="2"/>
    <Button
            android:text="Button"
            android:layout_width="0dp"
            android:layout_height="wrap_content" 
            android:id="@+id/button3" 
            android:layout_weight="3"/>
</LinearLayout>

那如果需要每個元件平均分配,占據整個 Layout 的區域呢 ? 可將每個元件的權重值設定為非零的同一個值,如 1.0 或 3.0 都可以,平均分配的結果預覽如下圖,三個 Button 元件的權重值都是 1.0: