天氣預報的佈局

現在我們開始進行天氣預報區域的佈局。

可以看出，這個區域，由5個完全一樣的元件組合而成。只要我們完成一個元件-天氣預報項的佈局，再把這個佈局複製貼上，很容易就完成了。

天氣預報項

在layout目錄上點選右鍵，選擇New -> Layout resource file。

輸入佈局檔案的名字forcast_item，

一個新的佈局檔案forcast_item.xml就被建立到了res\layout目錄下了。

天氣預報項的整體佈局分成上中下3段，依次縱向排列，分別顯示文字、圖片、文字。

修改forcast_item.xml佈局檔案：

1. 給LinearLayout設定android:orientation="vertical"屬性；
2. 讓LinearLayout內部的元件，水平居中android:gravity="center_horizontal"；
3. 從上到下，依次放入TextView ImageView TextView；它們的佈局屬性如此設定：

<?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"
    android:gravity="center_horizontal">

    <TextView
        android:id="@+id/forcast_date"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <ImageView
        android:id="@+id/forcast_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView
        android:id="@+id/forcast_temperature"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"/>

</LinearLayout>

這裡使用到了LinearLayout給內部元件使用到屬性layout_weight。

layout_weight表示一個元件的重要性，擁有這個屬性的元件將根據它的數值，按照比例分得剩餘空間。

就這裡來講，日期與溫度範圍都具有1的權重，因此它們將按照1:1的比例，瓜分除去天氣佔據的高度後，剩下的空間高度。

為日期預設上顯示的內容：

1. 設定TextView顯示的文字內容，android:text="明天"；
2. 設定TextView文字的大小，android:textSize="14sp"；
3. 設定TextView文字的顏色，android:textColor="#de000000"；
4. 讓文字顯示居中，android:gravity="center";

<TextView
   android:id="@+id/forcast_date"
   android:layout_width="wrap_content"
   android:layout_height="0dp"
   android:layout_weight="1"
   android:text="明天"
   android:textColor="#DE000000"
   android:textSize="14sp"
   android:gravity="center"/>

為天氣預設上顯示的圖片：

1. 設定android:src="@mipmap/ic_sunny_cloudy_s"，加上圖示；
2. 設定android:scaleType="center"，將圖示正好佔滿控制元件的區域；

<ImageView
   android:id="@+id/forcast_icon"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:src="@mipmap/ic_sunny_cloudy_s"
   android:scaleType="center"/>

為溫度範圍預設上顯示的內容：

1. 設定TextView顯示的文字內容，android:text="17℃～25℃"；
2. 設定TextView文字的大小，android:textSize="12sp"；
3. 設定TextView文字的顏色，android:textColor="#8a000000"；
4. 讓文字顯示居中，android:gravity="center";

<TextView
   android:id="@+id/forcast_temperature"
   android:layout_width="wrap_content"
   android:layout_height="0dp"
   android:layout_weight="1"
   android:text="17℃～25℃"
   android:textColor="#8a000000"
   android:textSize="12sp"
   android:gravity="center"/>

使用include標籤

接下來就可以給天氣預報區域所在的LinearLayout，

1. 設定上水平顯示的屬性android:orientation="horizontal"；

2. 再把天氣預報項的佈局方式重複5次，放入其中。這就完成了這個區域的佈局了；

<LinearLayout
   android:layout_width="match_parent"
   android:layout_height="96dp"
   android:orientation="horizontal">

    <LinearLayout 
        ......>
    </LinearLayout>

    <LinearLayout 
        ......>
    </LinearLayout>

    <LinearLayout 
        ......>
    </LinearLayout>

    <LinearLayout 
        ......>
    </LinearLayout>

    <LinearLayout 
        ......>
    </LinearLayout>

</LinearLayout>

哈哈，這樣的做法真是簡單又暴力。

不過，對於這種需要重複使用到的佈局，Android SDK提供了一個非常方便的標籤include。使用它就可以把一個佈局重複的佈局檔案引入到另一個佈局檔案當中。

1. 在LinearLayout當中使用多個include標籤；

2. 給它們的layout屬性設定上要重複使用的佈局檔案forcast_item；並給每個標籤設定一個id。

   <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="100dp"
      android:orientation="horizontal">
   
       <include layout="@layout/forcast_item" android:id="@+id/forcast_item1" />
       <include layout="@layout/forcast_item" android:id="@+id/forcast_item2" />
       <include layout="@layout/forcast_item" android:id="@+id/forcast_item3" />
       <include layout="@layout/forcast_item" android:id="@+id/forcast_item4" />
       <include layout="@layout/forcast_item" android:id="@+id/forcast_item5" />
   
   </LinearLayout>

3. 這時還看不到期待的效果，原因是forcast_item當中的LinearLayout設定的寬度是match_parent-佔據整個螢幕。我們需要讓這些天氣預報項平均佔據螢幕的寬度，所以需要給forcast_item.xml中的LinearLayout設定上android:layout_weight="1"的屬性，

   <?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"
       android:gravity="center_horizontal"
       android:layout_weight="1">
   
       ......
   
   </LinearLayout>

4. 給天氣預報區域的左右兩邊，加上16dp的邊距；

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="96dp"
       android:orientation="horizontal"
       android:layout_marginLeft="16dp"
       android:layout_marginRight="16dp">
   
       ......
   
   </LinearLayout>

從這個例子可以看出，include的作用就是把它自己layout屬性指定的佈局替換到include的位置。

/*******************************************************************/
* 版權宣告
* 本教程只在CSDN和安豆網釋出，其他網站出現本教程均屬侵權。

*另外，我們還推出了Arduino智慧硬體相關的教程，您可以在我們的網店跟我學Arduino程式設計中購買相關硬體。同時也感謝大家對我們這些碼農的支援。

*最後再次感謝各位讀者對安豆的支援，謝謝:)
/*******************************************************************/

/*******************************************************************/

本系列課程使用到的Arduino開發板、擴充套件板以及其他相關的感測器，各位可以根據我們文章中介紹的硬體在淘寶網選購。
您也可以在我們的網店跟我學Arduino程式設計中購買，這些相關硬體都由我們為您把關購買，為大家節省選擇的精力與時間。同時也感謝大家對我們這些碼農的支援。

最後再次感謝各位讀者對安豆的支援，謝謝:)

/*******************************************************************/

QQ交流群

571747694