android应用开发-从设计到实现 4-8 天气预报的布局
来源:互联网 发布:手机淘宝差评如何删除 编辑:程序博客网 时间:2024/06/05 23:47
天气预报的布局
现在我们开始进行天气预报
区域的布局。
可以看出,这个区域,由5个完全一样的组件
组合而成。只要我们完成一个组件-天气预报项
的布局,再把这个布局复制粘贴
,很容易就完成了。
天气预报项
在layout
目录上点击右键,选择New -> Layout resource file
。
输入布局文件的名字forcast_item
,
一个新的布局文件forcast_item.xml
就被创建到了res\layout
目录下了。
天气预报项
的整体布局分成上中下3段,依次纵向排列,分别显示文字、图片、文字。
修改forcast_item.xml
布局文件:
- 给
LinearLayout
设置android:orientation="vertical"
属性; - 让
LinearLayout
内部的组件,水平居中android:gravity="center_horizontal"
; - 从上到下,依次放入
TextView
ImageView
TextView
;它们的布局属性如此设置:
<?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应用开发-从设计到实现 4-6界面的整体布局
- android应用开发-从设计到实现 4-7天气详情的布局
- android应用开发-从设计到实现 4-9 天气指数列表的布局
- android应用开发-从设计到实现 2-2 界面布局
- android应用开发-从设计到实现 4-3应用的创建与部署
- android应用开发-从设计到实现 3-8 静态原型的Appbar折叠
- android应用开发-从设计到实现 2-4 文字的使用
- android应用开发-从设计到实现 3-4 静态原型的状态栏
- android应用开发-从设计到实现 4-5资源的导入
- android应用开发-从设计到实现 1-1 创意
- android应用开发-从设计到实现 4-1 开发产品
- android应用开发-从设计到实现 4-2 开发环境搭建
- android应用开发-从设计到实现 2-3 颜色的运用
- android应用开发-从设计到实现 2-3 颜色的运用(一)
- android应用开发-从设计到实现 2-5 图标的使用
- android应用开发-从设计到实现 2-7 声音与触觉的利用
- cenots6.5免密钥访问
- HDU 4034 Graph【最短路之floyd变形】
- Java多线程--概述-转自Kyrie lrving
- 模拟版本更新
- 如何用Java自己写一个.exe程序
- android应用开发-从设计到实现 4-8 天气预报的布局
- MongoDB实战-如何选择分片键
- [php]开发属于自己的PHP API框架(1)
- hadoop
- 结实新朋友的方法与技巧
- 资料
- Java多线程--概述-转自博客园-移动开发snow_flower
- java模式之装饰模式
- eclipse unhandled event loop exception 解决