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

学习参考资源：https://www.gitbook.com/book/zhangqx/mini-weather/details

环境：Android Studio

配置布局文件，可以使屏幕上的视图按照我们的设想摆放。

1）我们新建一个空的项目( File-New-New Project-Add no Activity)，我给这个项目起名叫做MWeather

我们的代码文件夹src/main/java/com/example/xchen/mweather初始时为空，资源文件夹src/main/res下面也没有布局文件。



接下来我们要做的是，添加一个布局文件，并新建一个java类加载这个布局，不断修改这个布局文件，直至屏幕显示满足我们的设想。

2)添加一个布局文件(Layout XML File)

在res文件夹下，新建一个layout文件夹用于存放布局文件，我在layout文件夹下面新建了一个main.xml的布局文件(New-XML-Layout XML File)。



layout xml文件在Android Studio中有两种查看模式Design和Text。Design模式是xml文件所设定的视图关系在屏幕上的实时显示，Text是xml的具体代码。我们可以边修改代码，边查看实时效果。

3）添加顶部工具栏布局

顶部工具栏可以用来进行操作，我们的设想是点击相应的图标可以进行相应的操作，因此需要一小条屏幕，摆放各种图标。
新建的layout xml文件main.xml，默认是一个LinearLayout(线性布局)，如下：



接下来我们就在这个LinearLayout的布局中，新增一个LinearLayout布局，将高度设为45.0dp。



蓝框圈中的区域，就是我们新增的LinearLayout区域。



接下来，要在这个线性布局中增加几个ImageView和TextView组件。为了让这几个组件挨着放，我们将LinearLayout改为RelativeLayout。
ImageView加载的图片文件存放在res/drawable文件夹下。
添加组建后的main.xml，如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="45.0dp"
android:background="#000000">
<ImageView
android:id="@+id/title_city_manager"
android:layout_height="45.0dp"
android:layout_width="45.0dp"
android:src="@drawable/title_city_manager">
</ImageView>
<TextView
android:layout_height="45.0dp"
android:layout_width="match_parent"

android:layout_toRightOf="@id/title_city_manager"
android:gravity="center_vertical"

android:text="天气预报"
android:textSize="25.0sp"
android:textColor="#FFFFFF">
</TextView>
<ImageView
android:id="@+id/title_city_locate"
android:layout_height="45.0dp"
android:layout_width="45.0dp"

android:layout_toLeftOf="@id/title_city_update"

android:src="@drawable/title_city_locate">
</ImageView>
<ImageView
android:id="@+id/title_city_update"
android:layout_height="45.0dp"
android:layout_width="45.0dp"

android:layout_toLeftOf="@id/title_city_share"

android:src="@drawable/title_city_update">
</ImageView>
<ImageView
android:id="@+id/title_city_share"
android:layout_height="45.0dp"
android:layout_width="45.0dp"

android:layout_alignParentRight="true"

android:src="@drawable/title_city_share">
</ImageView>
</RelativeLayout>
</RelativeLayout>

响应的屏幕显示如下：



这样，我们的顶部工具栏就制作成功了！

4）配置今日天气界面布局

准备知识：
1.两种布局
LinearLayout和RelativeLayout可以相互嵌套，
它们都必须设定layout_height和layout_width属性
LinearLayout还需要设定orientation属性，如果设定为vertical，那么放在LinearLayout里面的组件就会纵向排列，同理，设为horizontal，组件会横向排列。
2.TextView组件
用于在屏幕上显示文字
3.ImageView组件
用于在屏幕上显示图片

接下来的工作：
1.设置背景图片
2.我们要显示城市名称、日期、温度、风向、PM2.5

设计：



main.xml Text:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="@+id/title_relative"
android:layout_width="match_parent"
android:layout_height="45.0dp"
android:background="#000000">
<ImageView
android:id="@+id/title_city_manager"
android:layout_height="45.0dp"
android:layout_width="45.0dp"
android:src="@drawable/title_city_manager">
</ImageView>
<TextView
android:layout_height="45.0dp"
android:layout_width="match_parent"

android:layout_toRightOf="@id/title_city_manager"
android:gravity="center_vertical"

android:text="天气预报"
android:textSize="25.0sp"
android:textColor="#FFFFFF">
</TextView>
<ImageView
android:id="@+id/title_city_locate"
android:layout_height="45.0dp"
android:layout_width="45.0dp"

android:layout_toLeftOf="@+id/title_city_update"

android:src="@drawable/title_city_locate">
</ImageView>
<ImageView
android:id="@+id/title_city_update"
android:layout_height="45.0dp"
android:layout_width="45.0dp"

android:layout_toLeftOf="@+id/title_city_share"

android:src="@drawable/title_city_update">
</ImageView>
<ImageView
android:id="@+id/title_city_share"
android:layout_height="45.0dp"
android:layout_width="45.0dp"

android:layout_alignParentRight="true"

android:src="@drawable/title_city_share">
</ImageView>
</RelativeLayout>

<RelativeLayout
android:id="@+id/today_relative"
android:layout_height="wrap_content"
android:layout_width="match_parent"

android:layout_below="@id/title_relative"

android:background="@drawable/main_background">
<RelativeLayout
android:id="@+id/todayinfo1_relative"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:id="@+id/todayinfo1_linear1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="@+id/todayinfo1_cityName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="北京"
android:textColor="#FFFFFF"
android:textSize="47.0sp"/>
<TextView
android:id="@+id/todayinfo1_updateTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="发布时间18:25"
android:textColor="#FFFFFF"
android:textSize="20.0sp"/>
<TextView
android:id="@+id/todayinfo1_humidity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="湿度:57％"
android:textColor="#FFFFFF"
android:textSize="20.0sp"/>

</LinearLayout>
<LinearLayout
android:id="@+id/todayinfo1_linear2"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:orientation="vertical"

android:layout_toLeftOf="@+id/todayinfo1_linear3">

<ImageView
android:id="@+id/todayinfo1_pm25img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"

android:src="@drawable/pm25_0_50">
</ImageView>
</LinearLayout>
<LinearLayout
android:id="@+id/todayinfo1_linear3"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:orientation="vertical"

android:layout_alignParentRight="true">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="PM2.5"
android:textColor="#FFFFFF"
android:textSize="27.0sp"/>
<TextView
android:id="@+id/todayinfo1_pm25"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="220"
android:textColor="#FFFFFF"
android:textSize="20.0sp"/>
<TextView
android:id="@+id/todayinfo1_pm25status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="重度污染"
android:textColor="#FFFFFF"
android:textSize="20.0sp"/>
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:id="@+id/todayinfo2_relative"
android:layout_height="wrap_content"
android:layout_width="match_parent"

android:layout_below="@id/todayinfo1_relative">
<LinearLayout
android:id="@+id/todayinfo2_linear1"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:orientation="vertical">

<ImageView
android:id="@+id/todayinfo2_weatherStatusImg"
android:layout_width="155dp"
android:layout_height="128dp"

android:src="@drawable/weather_qing"/>
</LinearLayout>
<LinearLayout
android:id="@+id/todayinfo2_linear2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"

android:layout_toRightOf="@id/todayinfo2_linear1">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"

android:text="今天 星期三"
android:textColor="#FFFFFF"
android:textSize="27.0sp">
</TextView>
<TextView
android:id="@+id/todayinfo2_temperature"
android:layout_height="wrap_content"
android:layout_width="wrap_content"

android:text="2摄氏度～7摄氏度"
android:textColor="#FFFFFF"
android:textSize="20.0sp">
</TextView>
<TextView
android:id="@+id/todayinfo2_weatherState"
android:layout_height="wrap_content"
android:layout_width="wrap_content"

android:text="晴"
android:textColor="#FFFFFF"
android:textSize="20.0sp">
</TextView>
<TextView
android:id="@+id/todayinfo2_wind"
android:layout_height="wrap_content"
android:layout_width="wrap_content"

android:text="微风"
android:textColor="#FFFFFF"
android:textSize="20.0sp">
</TextView>
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>

5)添加一个java文件加载布局

我们在包内新建一个名为MainActivity.java的文件，继承自Activity
代码如下：

package com.example.xchen.mweather;

import android.app.Activity;
import android.os.Bundle;

/**
* Created by xchen on 16/12/17.
*/

public class MainActivity extends Activity{
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}

修改Manifest.xml，说明MainActivity这个Activity是我们的“Main”Activity，就是app的程序入口。



运行一下！



OK，这样我们的最基本的布局就完成！

参照： https://zhangqx.gitbooks.io/mini-weather/content/doc02_md.html