iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 3
0
自我挑戰組

震驚!Android竟能做到這些.....系列 第 3

第三篇:搞懂不同Layout之間的差異(上)

  • 分享至 

  • xImage
  •  

前言

現在Android Studio在設計版面時是用 Layout 來決定app的外觀,主要有分為Linear Layout(線性佈局)、constraintlayout(約束布局)、Relative Layout(相對佈局)、TableLayout(表格佈局)、AbsoluteLayout(絕對佈局)、FrameLayout(框架佈局),每個Layout都有他們的優點,也有他們個別擅長的設計方式。

原件基礎樣是設定

Android Studio 已經有內建程式碼以供我們在設計版面時可以更方便且快速。

常用程式碼

  • layout_height:依需要使用的範圍給大小(wrap_content)、與版面高度一樣大小(match_parent)
  • layout_width:依需要使用的範圍給大小(wrap_content)、與版面寬度一樣大小(match_parent)
  • text:原件內部顯示的文字
  • textSize:控制文字大小
  • textStyle:控制文字樣式
<TextView
            android:id="@+id/center"              //給這個原件一個名子
            android:layout_width="0dp"
            android:layout_height="match_parent" //依照原件需要使用多少的高度自動給予
            android:layout_weight="2"
            android:gravity="center"             //使文字置中
            android:text="置中"
            android:textSize="20dp"              //文字20dp
            android:textStyle="bold"/>           //文字粗體

Linear Layout–線性佈局

其線性可分為水平(horizontal)及垂直(vertical),預設是水平佈局,且不管是一行都只能存在一個元件。

常用程式碼

  • orientation:設定LinearLayout是垂直(vertical)或者水平(horizontal)
  • gravity:此View對於子元件的對齊位置,靠左(left)、靠右(right)、置中(center)、置頂(top)、置底(bottom)
  • layout_gravity:此View對於父元件的對齊位置,靠左(left)、靠右(right)、置中(center)、置頂(top)、置底(bottom)
  • layout_height:依需要使用的範圍給大小(wrap_content)、與版面高度一樣大小(match_parent)
  • layout_width:依需要使用的範圍給大小(wrap_content)、與版面寬度一樣大小(match_parent)
  • weight: 權重
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <TextView
        android:id="@+id/center"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="置中"
        android:textSize="20sp"
        android:textStyle="bold" />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="right"
        android:textSize="30dp"
        android:text="靠右"/>

</LinearLayout>

範例試圖↓
https://ithelp.ithome.com.tw/upload/images/20200827/20129418wY3gG4THq3.png

Relative Layout-相對佈局

是透過相對位置來設定布局內各個元件的位置,元件設定的位置可以是相對於整個RelativeLayout布局或者是相對於其他元件的位置,但是有一點要特別注意的是,每個元件至少要給予 3 個方位的相對位置,否則會報錯。

常用程式碼

  • layout_alignParentBottom:將此元件對齊於佈局畫面底線,屬性值為true、false
    ######可將Bottom更改為 Right、Top、Left、元件id
  • layout_marginBottom:將該元件離布局畫面底邊多少距離,屬性質為具體的像數值
    ######可將Bottom更改為 Right、Top、Left、元件id
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="165dp"
        android:layout_height="99dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="123dp"
        android:layout_marginLeft="123dp"
        android:layout_marginTop="295dp"
        android:layout_marginEnd="123dp"
        android:layout_marginRight="123dp"
        android:layout_marginBottom="337dp" />

</RelativeLayout>

範例試圖↓
https://ithelp.ithome.com.tw/upload/images/20200827/20129418ZCcYIrFjWW.png

constraintlayout–約束佈局

constraintlayout是基於上述 Relative Layout 更加方便使用的一種Layout,這兩種Latout十分的相像,他解決了 Relative Layout 在版面上遇到的一些問題,使排版更加的方便

所有的佈局可以在界面上通過拖動和調整來完成,這點相對 於 RelativeLayout 要方便很多。
不需要嵌套 linearLayout,直接添加控件,將控件之間的約束調整好使用。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
   >


    <TextView
        android:id="@+id/textView"
        android:layout_width="166dp"
        android:layout_height="43dp"
        android:layout_marginTop="268dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="示範"
        android:textSize="30dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.497"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

https://ithelp.ithome.com.tw/upload/images/20200827/20129418MGfOARtkt0.png

TableLayout–表格佈局

整個Layout是一格最大表格,使用著可依需求將元件放在表格中的各位置,並設定在該格內的一些屬性,而TableLayout裡面是以TableRow來區別每一列,但是有一點要特別注意的是,在同一個TableLayout會以最多欄位的那個列來統一所有列都有相同的欄數,如果不想被限制住,可以透過『android:layout_span』方法來跨越欄數,藉此修改使每一列不會被固定格數。
  • android:collapseColumns:将TableLayout里面指定的列隱藏,隱藏多行需用","隔开,起始值為0
  • android:stretchColumns:設置指定的列為可延伸,填满剩下的多餘空白空間,填滿多行需用","隔开,起始值為0
  • android:shrinkColumns:設置指定的列為可收缩的列,多行時需用","隔開,起始值為0
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:stretchColumns="1"
    android:collapseColumns="0">
    <TableRow>
    <TextView
        android:id="@+id/center"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="被隱藏了"
        android:textSize="20sp"
        android:textStyle="bold" />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textSize="30dp"
        android:text="把剩下的空位補滿"
        android:background="@color/colorAccent"/>

        </TableRow>
    
</TableLayout>

https://ithelp.ithome.com.tw/upload/images/20200827/20129418GNpPX5jEAS.png


上一篇
第二篇:淺顯易懂的Android開發環境安裝
下一篇
第四篇:搞懂不同Layout之間的差異(下)
系列文
震驚!Android竟能做到這些.....9
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言