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

时间：2022-10-06 20:31:22

学习参考资源：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下面也没有布局文件。

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

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


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

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

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

layout xml文件在Android Studio中有两种查看模式Design和Text。Design模式是xml文件所设定的视图关系在屏幕上的实时显示，Text是xml的具体代码。我们可以边修改代码，边查看实时效果。
Android上实现一个简单的天气预报APP(二) 配置布局Android上实现一个简单的天气预报APP(二) 配置布局


3）添加顶部工具栏布局

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

接下来我们就在这个LinearLayout的布局中，新增一个LinearLayout布局，将高度设为45.0dp。
Android上实现一个简单的天气预报APP(二) 配置布局
蓝框圈中的区域，就是我们新增的LinearLayout区域。
Android上实现一个简单的天气预报APP(二) 配置布局
接下来，要在这个线性布局中增加几个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>
响应的屏幕显示如下：
Android上实现一个简单的天气预报APP(二) 配置布局
这样，我们的顶部工具栏就制作成功了！

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

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

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

设计：
Android上实现一个简单的天气预报APP(二) 配置布局
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的程序入口。
Android上实现一个简单的天气预报APP(二) 配置布局

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

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

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


标签：

相关文章