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编程中购买相关硬件。同时也感谢大家对我们这些码农的支持。

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