android应用开发-从设计到实现 4-8 天气预报的布局
天气预报的布局
现在我们开始进行天气预报
区域的布局。
可以看出,这个区域,由5个完全一样的组件
组合而成。只要我们完成一个组件-天气预报项
的布局,再把这个布局复制粘贴
,很容易就完成了。
天气预报项
在layout
目录上点击右键,选择New -> Layout resource file
。
输入布局文件的名字forcast_item
,
一个新的布局文件forcast_item.xml
就被创建到了res\layout
目录下了。
天气预报项
的整体布局分成上中下3段,依次纵向排列,分别显示文字、图片、文字。
区域名称 | 区域高度 | 选用控件或布局 |
---|---|---|
日期 | 占用剩余空间的上半部分 | TextView |
天气 | 根据资源图片的高度确定 | ImageView |
温度范围 | 占用剩余空间的下半部分 | TextView |
修改forcast_item.xml
布局文件:
- 给
LinearLayout
设置android:orientation="vertical"
属性; - 让
LinearLayout
内部的组件,水平居中android:gravity="center_horizontal"
; - 从上到下,依次放入
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
的比例,瓜分除去天气
占据的高度后,剩下的空间高度。
为日期
预设上显示的内容:
- 设置
TextView
显示的文字内容,android:text="明天"
; - 设置
TextView
文字的大小,android:textSize="14sp"
; - 设置
TextView
文字的颜色,android:textColor="#de000000"
; - 让文字显示居中,
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"/>
为天气
预设上显示的图片:
- 设置
android:src="@mipmap/ic_sunny_cloudy_s"
,加上图标; - 设置
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"/>
为温度范围
预设上显示的内容:
- 设置
TextView
显示的文字内容,android:text="17℃~25℃"
; - 设置
TextView
文字的大小,android:textSize="12sp"
; - 设置
TextView
文字的颜色,android:textColor="#8a000000"
; - 让文字显示居中,
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
,
设置上水平显示的属性
android:orientation="horizontal"
;再把
天气预报项
的布局方式重复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
。使用它就可以把一个布局重复的布局文件引入到另一个布局文件当中。
- 在
LinearLayout
当中使用多个include
标签; 给它们的
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>
这时还看不到期待的效果,原因是
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>
给
天气预报
区域的左右两边,加上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
android应用开发-从设计到实现 4-8 天气预报的布局相关推荐
- android应用开发-从设计到实现 4-10 解析天气预报数据
解析天气预报数据 界面布局完成以后,就需要设计代码来控制界面上各个元素的逻辑了. 从网络获取天气预报数据: 解析获取的数据: 根据解析的结果更新天气预报界面: 天气预报的数据依赖于网络端的服务器,不是 ...
- android应用开发-从设计到实现 2-4 文字的使用
文字的使用 文字是应用当中使用最多的要素.显示一段供用户阅读的文字,程序运行时的信息提示都离不开它. 文字是内容的实际体现者,因此设计师需要将用户的注意力尽可能的吸引到文字当中. 字体可以分成两种类型 ...
- android应用开发-从设计到实现 3-3 Sketch静态原型设计
Sketch静态原型设计 对于静态原型的设计,我们使用Sketch. 启动Sketch后,我们将看到类似如下的界面, 工具栏 它的顶部是工具栏, 可以通过菜单栏View -> Customize ...
- android应用开发-从设计到实现 2-1 设计原理
设计原理 设计是一门让人感觉很抽象的艺术.设计需要从两个方面来考虑问题: 实用:体现在功能上和交互性上: 美观:体现在界面的布局,色彩的搭配,字体的运用上: 对于我们的安卓应用来讲,设计的目的就是要体 ...
- android应用开发-从设计到实现 3-9 Origami动态原型设计
动态原型设计 动态的可交互原型产品,是产品经理和界面设计师向开发人员阐释自己设计的最高效工具. 开发者不需要猜测设计师要什么样的效果,照着原型产品做就好了. 很多创业团队也发现了产品人的这个刚需,做出 ...
- android应用开发-从设计到实现 3-5 静态原型的Appbar
静态原型的Appbar 我们设计的Appbar包括了两个部分,一个是toolbar,另一个就是flexible space-显示当日天气的详细信息, Toolbar参数确定 添加Toolbar很简单, ...
- android应用开发-从设计到实现 3-4 静态原型的状态栏
静态原型的状态栏 状态栏Symbol 状态栏似乎很复杂,有wifi信号.手机信号.时间.电量等信息,幸好Sketch原生就自带的现成组件,你可以直接拿过来就用了.当然,你也可以自己一个一个去画,不过既 ...
- android应用开发-从设计到实现 3-6 静态原型的天气预报
静态原型的天气预报 未来5天的天气预报,可以看成由5个类似的天气模块构成,只要完成一个,其他几个就可以通过复制+修改内容实现改变. 首先来明确一下各个组件的尺寸和参数, 整个区域的大小,我设定成360 ...
- android应用开发-从设计到实现 4-4版本管理
版本管理 前面已经提到了,非常有必要对开发的代码进行管理.那么进行版本管理到底什么时候使用呢? 我总结了使用版本管理的主要场景,有以下3种: 对于个人开发者,版本管理能记录开发的变迁.它记录了所有文档 ...
- android应用开发-从设计到实现 2-3 颜色的运用
颜色的运用 Material Design采用的是扁平化的设计,可以看到一大块一大块区域的颜色.这些颜色大多亮丽引人,整个界面上搭配的颜色也不会太多,基本保持在三种颜色以内. "没有错误的颜 ...
最新文章
- ajax formdata提交上传,Ajax提交用FormData()上传文件
- 出售带漏洞的设备违法吗?德国消协拟起诉一家地方零售商
- 使用 json_serializable (flutter packages pub run build_runner build) 问题
- ubuntu安装python百度经验_如何在Ubuntu 20.04上安装Python 3.9(含python编译安装和使用Apt命令安装)...
- Cmd替代者 Cmder
- 归并排序(包含逆序数对的个数51Nod1019)
- vue3 使用echarts
- 怎么把度分秒化成小数_角度的度分秒与小数点格式互相转换
- http://download.chinaitlab.com/special/javadownload.htm
- 局域网打印机共享怎么设置_XP系统设置局域网共享打印机的操作步骤
- 从广域网云化看SD-WAN
- 【Unity2D入门教程】简单制作战机弹幕射击游戏③C#编写 子弹Laser脚本
- Hive之——Hive2.0函数大全
- win8计算机意外,解决win8.1/win10开机提示“致命错误c0000034”的方案
- 企业什么喜欢做电视看板,电视看板浏览网页的必备工具 电视看板浏览器 电视看板自动打开网页
- 被诸葛亮的光环掩盖起来的三国英雄
- I/O error on POST request for “http://localhost:9411/api/v2/spans”
- 梅科尔工作室-孙溢博-鸿蒙笔记1
- npm 报错 : npm ERR! Maximum call stack size exceeded npm ERR! A complete log of this run can be found
- 懒汉式单例模式的多线程问题