[教學] Android studio - layout－一個小小工程師的心情抒發天地

重頭開始練功 – Android

因業務上的需求，所以在Unity & Android 上面抉擇要使用哪個，後來會選擇用Android開發的原因是因為Open Source比較多，Unity相同的Source大多為要付費的，如果每一個都要付費 =___= 我想公司應該也會終止這項計畫才是 (笑)畢竟…。

好了，不多說，既然決定要使用Android，所以我決定開始重頭練功，以前專案很趕，都是這個不會學這個，那個不會找那個，很少會有練功的機會，但現在就是這個時機!!! 手上專案清空掉了，基本上會有一段時間可以讓我練，所以呢，Let’s do it !

說到Android的基礎工，我覺得最重要的應該是Layout(布局)，如何看到設計稿，就馬上有feel，這我覺得挺重要的，所以在最開始，就先來個布局教學吧。

首先，先介紹兩種布局

線性布局 ( Linear layout )
相對布局 ( Relative layout )

這兩種布局應該可以讓你布超過8成了，所以就挑這個開始學習吧。

先介紹布局裡面，比較常見的屬性

Android:id

//control id

Android:layout_width

//control width

Android:layout_height

//control height

Android:background

//control background

Android:layout_margin

//外邊距離 ( 稍後教學解釋 )

Android:layout:padding

//內邊距離 ( 稍後教學解釋 )

Android:orientation

//control 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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="vision.google.com.camera.MainActivity">

    <LinearLayout
        android:id="@+id/ll_1"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:orientation="vertical"
        android:background="#000000"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        android:paddingTop="50dp"
        android:paddingBottom="10dp"
        android:layout_marginBottom="20dp">

        <View
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#FF0033"/>

        </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:orientation="horizontal"
        android:background="#0066FF"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
       >
        <View

            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:background="#000000"
            android:layout_weight="1"/>
        <View

            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:background="#FF0033"
            android:layout_weight="2"/>

        <View

            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:background="#55AA99"
            android:layout_weight="1"/>

    </LinearLayout>


</LinearLayout>

比較值得介紹的，我想應該是 padding系列 ( padding_Left , padding_Right , padding_Top , padding_Bottom )，剛剛說過，padding的意思是內邊距，大家可以看Sample的上面那個，我在code裡面有加上:

android:paddingLeft="20dp"

android:paddingRight="20dp"

android:paddingTop="50dp"

android:paddingBottom="10dp"

android:layout_marginBottom="20dp">

這個就是內縮內縮距離，結果就是:

但是，如果你將內縮距離寫成

android:padding="20dp">

他就會將四邊 ( 上下左右 ) 都縮 20dp (dp的意思，我會放在最後在解釋 )

接下來我們來看看下面的

<LinearLayout

    android:layout_width="match_parent"

    android:layout_height="200dp"

    android:orientation="horizontal"

    android:background="#0066FF"

    android:layout_marginLeft="15dp"

    android:layout_marginRight="15dp"

   >

    <View



        android:layout_width="0dp"

        android:layout_height="match_parent"

        android:background="#000000"

        android:layout_weight="1"/>

    <View



        android:layout_width="0dp"

        android:layout_height="match_parent"

        android:background="#FF0033"

        android:layout_weight="2"/>



    <View



        android:layout_width="0dp"

        android:layout_height="match_parent"

        android:background="#55AA99"

        android:layout_weight="1"/>





</LinearLayout>

其實這也不難理解，就是一個線性布局+三個View而已，

先從Linear layout開始講，裡面的屬性有:

android:layout_width="match_parent"

android:layout_height="200dp"

android:orientation="horizontal"

android:background="#0066FF"

android:layout_marginLeft="15dp"

android:layout_marginRight="15dp"

layout 方式 : 水平 ( horizontal )

android:layout_marginLeft = “15dp” 左邊縮15dp

android:layout_marginRight = “15dp” 右邊縮15dp

然後，我們在裡面放三個view，屬性為:

<View



    android:layout_width="0dp"

    android:layout_height="match_parent"

    android:background="#000000"

    android:layout_weight="1"/>

<View



    android:layout_width="0dp"

    android:layout_height="match_parent"

    android:background="#FF0033"

    android:layout_weight="2"/>



<View



    android:layout_width="0dp"

    android:layout_height="match_parent"

    android:background="#55AA99"

    android:layout_weight="1"/>

其實三個都差不多，唯一不同的是Weight (比重)

你可以看到我們在寬那邊設為0dp，三個都一樣，只有比重不一樣而已，這意思是什麼 ?

好，假設這個Object 的寬 = 150

則裡面的比重就是1:2:1

也就是什麼 ?

也就是說中間會比較大一點，

如果我們要讓三個都是一樣的size，則比重我們就三個都設為1就可以了。

那如果是這樣呢 :

<View



    android:layout_width="50dp"

    android:layout_height="match_parent"

    android:background="#000000"

    android:layout_weight="1"/>

<View



    android:layout_width="0dp"

    android:layout_height="match_parent"

    android:background="#FF0033"

    android:layout_weight="1"/>

那就代表，第一個和第二個一起share這個object ，並且，第一個要比第二個多50dp的意思，所以結果我們可以看到:

Final :

我們來解釋 “DP”的意思，其實這個就是單位了，在windows設計裡面，其實我們常用的是pixel ，說實在的dp這單位也是我開始寫android之後才知道的，這玩意不錯，因為我們每支手機的size不同，螢幕大小也不同，所以我們在設計上，如果用pixel不是不行，而是會沒那麼好用，因為會太死了，但是如果是用dp的話，就會自動調整，變成相對應的大小，所以，這單位不得不說實在是太好用了Q___Q ( 如果這玩意在windows裡面也有的話，我想我應該可以寫得更舒服一點…………………… )。