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

原创 2017年09月12日 13:45:23

天气预报的布局

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

weather_app_forcast_complete-wc300

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

weather_app_forcast_item-wc70

天气预报项

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

weather_app_create_forcast_item-wc600

输入布局文件的名字forcast_item

weather_app_create_forcast_item_name-wc200

一个新的布局文件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
<?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的比例,瓜分除去天气占据的高度后,剩下的空间高度。

weather_app_forcast_item_layout_weight-wc350

日期预设上显示的内容:

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

weather_app_forcast_item_layout-wc200

使用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>

weather_app_forcast_complete-wc500

从这个例子可以看出,include的作用就是把它自己layout属性指定的布局替换到include的位置。

weather_app_forcast_use_include-wc500

Android版权声明和店铺广告


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

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

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

Arduino版权声明和店铺广告


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

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

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

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


QQ交流群

571747694

版权声明:本文为博主原创文章,禁止转载,违者必究。

Android上实现一个简单的天气预报APP(二) 配置布局

环境:Android Studio 配置布局文件,可以屏幕上的视图按照我们的设想摆放。 我们新建一个空的项目 File-New-New Project-Add no Activity,我给这个...
  • v_xchen_v
  • v_xchen_v
  • 2017年02月25日 11:35
  • 7078

Android 简易版天气预报app的实现(改进版)

最近总是有人来和我说我以前写的一个小app无法正常获取数据~Android简易版天气预报app 今天就又运行了下来查找问题,发现或许是接口有限制吧,不能在多台手机使用同个apikey 然后,发现了...
  • new_one_object
  • new_one_object
  • 2016年07月22日 14:00
  • 20080

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

天气详情的布局整体布局完成之后,我们开始进行天气详情区域的布局。这个区域由天气图标、当前温度、当日温度范围、地理位置等4个元素组成。我们可以选用Android SDK提供的现有控件,完成布局。 区...
  • anddlecn
  • anddlecn
  • 2017年08月22日 12:25
  • 1895

android天气预报,界面好看,可根据所选城市,查询天气,值得一下

  • 2014年04月22日 17:10
  • 940KB
  • 下载

Android上实现一个简单的天气预报APP(七) 切换到新的界面(选择城市界面)

前面我们已经设置好了基本界面,并可以从网络上实时获取天气预报信息并解析,并更新到屏幕组件上,接下来我们要做一个选择城市的界面,并对一个按钮绑定切入该界面的动作 1)新建一个布局 我新建一个layout...
  • v_xchen_v
  • v_xchen_v
  • 2017年02月25日 11:39
  • 3893

Android之简易天气预报小应用(xml解析练手)

界面比较简陋。实现后的大致效果如下: 该应用的所有功能主要是通过解析http://www.webxml.com.cn/webservices/weatherwebservice.asmx网站提供的Xm...
  • ygd1994
  • ygd1994
  • 2016年05月10日 23:29
  • 2017

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

天气预报的布局现在我们开始进行天气预报区域的布局。可以看出,这个区域,由5个完全一样的组件组合而成。只要我们完成一个组件-天气预报项的布局,再把这个布局复制粘贴,很容易就完成了。天气预报项在layou...
  • anddlecn
  • anddlecn
  • 2017年09月12日 13:45
  • 2184

Android i天气-天气预报程序

I天气 爱天气界面借鉴于就看天气,在此感谢开源项目就看天气。该应用为开源应用,禁止用于任何商业用途。 感谢您的使用,这是一个简洁的天气工具,希望带给您便捷,生活本就复杂,为何不能保持一颗简洁的心...
  • qq_38520096
  • qq_38520096
  • 2017年12月02日 19:17
  • 213

android应用开发-从设计到实现 3-6 静态原型的天气预报

静态原型的天气预报未来5天的天气预报,可以看成由5个类似的天气模块构成,只要完成一个,其他几个就可以通过复制+修改内容实现改变。首先来明确一下各个组件的尺寸和参数, 整个区域的大小,我设定成360dp...
  • anddlecn
  • anddlecn
  • 2017年03月29日 16:09
  • 2481

android应用开发-从设计到实现 4-10 解析天气预报数据

解析天气预报数据界面布局完成以后,就需要设计代码来控制界面上各个元素的逻辑了。 从网络获取天气预报数据; 解析获取的数据; 根据解析的结果更新天气预报界面; 天气预报的数据依赖于网络端的服务器,不是手...
  • anddlecn
  • anddlecn
  • 2017年09月29日 14:31
  • 415
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:android应用开发-从设计到实现 4-8 天气预报的布局
举报原因:
原因补充:

(最多只允许输入30个字)