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，如下：

响应的屏幕显示如下：

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

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

准备知识：

1.两种布局

LinearLayout和RelativeLayout可以相互嵌套，

它们都必须设定layout_height和layout_width属性

LinearLayout还需要设定orientation属性，如果设定为vertical，那么放在LinearLayout里面的组件就会纵向排列，同理，设为horizontal，组件会横向排列。

2.TextView组件

用于在屏幕上显示文字

3.ImageView组件

用于在屏幕上显示图片

接下来的工作：

1.设置背景图片

2.我们要显示城市名称、日期、温度、风向、PM2.5

设计：

main.xml Text:

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