android应用开发-从设计到实现 4-8 天气预报的布局

天气预报的布局

现在我们开始进行天气预报区域的布局。

可以看出，这个区域，由5个完全一样的组件组合而成。只要我们完成一个组件-天气预报项的布局，再把这个布局复制粘贴，很容易就完成了。

天气预报项

在layout目录上点击右键，选择New -> Layout resource file。

输入布局文件的名字forcast_item，

一个新的布局文件forcast_item.xml就被创建到了res\layout目录下了。

天气预报项的整体布局分成上中下3段，依次纵向排列，分别显示文字、图片、文字。

区域名称	区域高度	选用控件或布局
日期	占用剩余空间的上半部分	TextView
天气	根据资源图片的高度确定	ImageView
温度范围	占用剩余空间的下半部分	TextView

修改forcast_item.xml布局文件：

1. 给LinearLayout设置android:orientation="vertical"属性；
2. 让LinearLayout内部的组件，水平居中android:gravity="center_horizontal"；
3. 从上到下，依次放入TextView ImageView TextView；它们的布局属性如此设置：

日期	天气	温度范围
layout_height	0dp	wrap_content
layout_width	wrap_content	wrap_content
layout_weight	1	无
id名称	forcast_date	forcast_icon

<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"的属性，

   
   <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的位置。

Android版权声明和店铺广告

---

/*******************************************************************/
* 版权声明
* 本教程只在CSDN和安豆网发布，其他网站出现本教程均属侵权。

*另外，我们还推出了Arduino智能硬件相关的教程，您可以在我们的网店跟我学Arduino编程中购买相关硬件。同时也感谢大家对我们这些码农的支持。

*最后再次感谢各位读者对安豆的支持，谢谢:)
/*******************************************************************/

Arduino版权声明和店铺广告

---

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

本系列课程使用到的Arduino开发板、扩展板以及其他相关的传感器，各位可以根据我们文章中介绍的硬件在淘宝网选购。
您也可以在我们的网店跟我学Arduino编程中购买，这些相关硬件都由我们为您把关购买，为大家节省选择的精力与时间。同时也感谢大家对我们这些码农的支持。

最后再次感谢各位读者对安豆的支持，谢谢:)

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

---

QQ交流群

571747694