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

天气详情的布局

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

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

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

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

weather_app_weather_detail_layout-wc400

ImageViewAndroid SDK提供的专门显示图片的控件;
TextViewAndroid SDK提供的专门显示文字的控件;

上下区域的划分

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

  1. 使用LinearLayout进行分割;
  2. 天气详情区域设置Primary Color-#3F51B5作为背景颜色;
  3. 上半区域设置高度android:layout_height112dp,上边距android:layout_marginTop24dp
  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>

weather_app_weather_detail_segments-wc300

天气图标与当日温度

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

weather_app_weather_detail_layout_size-wc300

  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>

weather_app_weather_detail_up_segment-wc500

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

  1. LinearLayout设置android:gravity="center"属性;让它内部的组件都能够居中放置;
  2. 为了将ImageViewLinearLayout分开,在它们水平位置之间设置一个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>

weather_app_weather_detail_up_segment_complete-wc500

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>

weather_app_weather_detail_weather_icon-wc500

添加温度

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

  1. LinearLayoutorientation设置为vertical
  2. LinearLayout设置android:gravity="center_horizontal"属性;让它内部的组件都能够居中放置;
  3. 修改LinearLayout的高度为match_parent;
  4. 放入2个TextView,用来分别当日温度和温度范围,并分别给它们指定id-current_temperaturetemperature_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>

weather_app_weather_detail_temp_layout-wc500

设置当前温度

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

  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"/>

weather_app_weather_detail_cur_temp_layout-wc300

设置温度范围

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

  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"/>

weather_app_weather_detail_range_temp_layout-wc300

添加位置信息

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. TextViewid设置成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>

weather_app_weather_detail_location_layout-wc500

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


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


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

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

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

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值