android应用开发-从设计到实现 4-7天气详情的布局

天气详情的布局

整体布局完成之后，我们开始进行天气详情区域的布局。

这个区域由天气图标、当前温度、当日温度范围、地理位置等4个元素组成。我们可以选用Android SDK提供的现有控件，完成布局。

区域名称	区域尺寸	选用控件或布局
天气图标	96dp*144dp	ImageView
当前温度	文字的字体56sp决定	TextView
当日温度范围	文字的字体24sp决定	TextView
地理位置	文字的字体34sp决定	TextView

这些区域的对齐分配，我们可以借助嵌套更多的LinearLayout来完成，

ImageView：Android SDK提供的专门显示图片的控件；
TextView：Android SDK提供的专门显示文字的控件；

上下区域的划分

将天气图标、当前温度、当日温度范围归为上半区域，地理位置归为下半区域，

1. 使用LinearLayout进行分割;
2. 给天气详情区域设置Primary Color-#3F51B5作为背景颜色；
3. 上半区域设置高度android:layout_height为112dp，上边距android:layout_marginTop为24dp；
4. 下半区域使用所有剩下的空间；

<LinearLayout
   android:layout_width="match_parent"
   android:layout_height="240dp"
   android:background="#3F51B5"
   android:orientation="vertical">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="112dp"
       android:layout_marginTop="24dp"
       android:background="#FFFF0000">
   LinearLayout>

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:background="#FF00FF00">

   LinearLayout>

LinearLayout>

天气图标与当日温度

天气图标与当日温度左右并列，各自占据96dp\*144dp的区域。两个区域之间间隔24dp，

1. 为LinearLayout设置horizontal属性，使其内部的布局或控件水平排列，把它的高度修改成wrap_content；

2. 将ImageView放置在左边，宽度设置成144dp，高度设置成match_parent；

   同时给ImageView设定一个id-android:id="@+id/weather_icon"。

   设定了id，以后再代码中获取它对应的控件就很方便了，只需要像这样，

   ImageView im = (ImageView) findViewById(R.id.weather_icon);

   java源码就能通过R.id.weather_icon，将布局文件中的ImageView找了出来，转换成了可以通过java代码操作的对象。

3. 将另一个LinearLayout放置在右边，宽度设置成144dp，高度设置成match_parent；

<LinearLayout
  android:layout_width="match_parent"
  android:layout_height="112dp"
  android:layout_marginTop="24dp"
  android:background="#FFFF0000"
  android:orientation="horizontal">

  <ImageView
      android:id="@+id/weather_icon"
      android:layout_width="144dp"
      android:layout_height="match_parent"
      android:background="#FFFFFF00"/>

  <LinearLayout
      android:layout_width="144dp"
      android:layout_height="match_parent"
      android:background="#FF0000FF">

  LinearLayout>

LinearLayout>

此时布局很紧促，并且没有居中对齐，需要做进一步的设置，

1. 为LinearLayout设置android:gravity="center"属性；让它内部的组件都能够居中放置；
2. 为了将ImageView与LinearLayout分开，在它们水平位置之间设置一个24dp的边距：给温度区域设置上24dp的左边距android:layout_marginLeft；

<LinearLayout
  android:layout_width="match_parent"
  android:layout_height="112dp"
  android:layout_marginTop="24dp"
  android:background="#FFFF0000"
  android:orientation="horizontal"
  android:gravity="center">

  <ImageView
      android:id="@+id/weather_icon"
      android:layout_width="144dp"
      android:layout_height="match_parent"
      android:background="#FFFFFF00"/>

  <LinearLayout
      android:layout_width="144dp"
      android:layout_height="match_parent"
      android:background="#FF0000FF"
      android:layout_marginLeft="24dp">

  LinearLayout>

LinearLayout>

layout_gravity与gravity

前面提到了gravity。无论控件还是布局都可以设置它本身相对于父布局的偏好位置，例如是居中还是靠左。例如一个放到LinearLayout中的Button，它希望自己位于父布局内部靠上的位置，就可以添加android:layout_gravity属性，设置值为top，

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:layout_gravity="top"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello world!"/>

LinearLayout>

其它可以设置的值还有bottom left right center center_horizontal center_vertical。

控件或者布局，也可以设置自己的内容相对于内部的位置。例如上面的例子中，要将Button放到LinearLayout底部靠右的位置，可以为其android:gravity属性设置bottom|right。这里的|表示并且，

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="bottom|right">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello world!"/>

LinearLayout>

添加图片

将天气图标设置给ImageView，

1. 添加android:src属性，把图标id-ic_sunny_cloudy_l设置给它；
2. 添加android:scaleType属性，设置值为center；

<LinearLayout
  android:layout_width="match_parent"
  android:layout_height="112dp"
  android:layout_marginTop="24dp"
  android:orientation="horizontal"
  android:gravity="center">

  <ImageView
      android:id="@+id/weather_icon"
      android:layout_width="144dp"
      android:layout_height="match_parent"
      android:src="@mipmap/ic_sunny_cloudy_l"
      android:scaleType="center"/>

  ......

LinearLayout>

添加温度

使用LinearLayout将温度显示分为上下两个部分，显示温度的控件使用TextView

1. 给LinearLayout的orientation设置为vertical；
2. 为LinearLayout设置android:gravity="center_horizontal"属性；让它内部的组件都能够居中放置；
3. 修改LinearLayout的高度为match_parent;
4. 放入2个TextView，用来分别当日温度和温度范围，并分别给它们指定id-current_temperature和temperature_range；

<LinearLayout
  android:layout_width="match_parent"
  android:layout_height="112dp"
  android:layout_marginTop="24dp"
  android:orientation="horizontal"
  android:gravity="center">

  ......

  <LinearLayout
      android:layout_width="144dp"
      android:layout_height="match_parent"
      android:layout_marginLeft="24dp"
      android:orientation="vertical"
      android:gravity="center_horizontal">

      <TextView
          android:id="@+id/current_temperature"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"/>

      <TextView
          android:id="@+id/temperature_range"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"/>

  LinearLayout>

LinearLayout>

设置当前温度

给当前温度设置上一个预设的显示内容：

1. 设置TextView显示的文字内容，android:text="23°"；
2. 设置TextView文字的大小，android:textSize="56sp"；
3. 设置TextView文字的颜色，android:textColor="#b3ffffff"；

<TextView
     android:id="@+id/current_temperature"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="23°"
     android:textColor="#b3ffffff"
     android:textSize="56sp"/>

设置温度范围

给温度范围设置上一个预设的显示内容：

1. 设置TextView显示的文字内容，android:text="17℃～25℃"；
2. 设置TextView文字的大小，android:textSize="24sp"；
3. 设置TextView文字的颜色，android:textColor="#ffffffff"；

<TextView
     android:id="@+id/temperature_range"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="17℃～25℃"
     android:textColor="#ffffffff"
     android:textSize="24sp"/>

添加位置信息

将TextView添加到下部的LinearLayout当中：

1. 位置为垂直居中，给LinearLayout设置android:gravity="center_vertical"；
2. 设置TextView的左边距为24dp；
3. 设置TextView显示的文字内容，android:text="成都；
4. 设置TextView文字的大小，android:textSize="34sp"；
5. 设置TextView文字的颜色，android:textColor="#ffffffff"；
6. TextView的id设置成location

<LinearLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:gravity="center_vertical">

  <TextView
      android:id="@+id/weather_location"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginLeft="24dp"
      android:text="成都"
      android:textColor="#ffffffff"
      android:textSize="34sp"/>

LinearLayout>

这个区域的界面设计只是在第1阶段的实现中会使用到。当进入到第2阶段-使用Material设计规范来实现的时候，是不需要这个布局的，因为安卓系统能自动实现这个信息的显示。

---

现在，天气详情的布局就全部完成了。

---

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

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

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