Android studio天气预报APP的主界面布局及初始化

一、效果展示

如图所示

主界面显示天气、温度、日期、风力等内容，左上角下拉框显示不同城市。空着的部分本来打算显示往后几天的天气，但是调用RecyclerView出了错，尚未解决，故先记录前部分内容。

二、前期准备

在app_src_main_res_values文件下的colors.xml主要负责颜色设置，strings.xml负责字符串设置，styles.xml负责全局样式或控件样式。

在colors.xml设置一些颜色以备使用：

    @color/green_500     @color/green_700     #F4511E    #C5E1A5    #8BC34A    #689F38    #FFFFFF    #000000    #CE93D8    #00000000

strings.xml中存放城市名称，

    天气预报        北京    天津    哈尔滨    沈阳    石家庄    西安    郑州    

styles.xml设置全局样式：

                        @color/colorPrimary //使用name为colorPrimary的颜色-green_500,作为colorPrimary—导航栏颜色        @color/colorPrimaryDark //colorPrimaryDark—通知栏颜色        @color/colorAccent //colorAccent—控件选中后颜色        true//实现全屏显示    

三、布局代码

在layout文件下的activity_main.xml为布局文件，在此文件中编写主界面布局代码。

1、主界面我们使用线性布局

线性布局（LinearLayout）：主要以水平或垂直方式来排列界面中的控件。并将控件排列到一条直线上。在线性布局中，如果水平排列，垂直方向上只能有一个控件；如果垂直排列，水平方向上也只能放置一个控件。

使用线性布局，需要将布局节点改成LinearLayout，基本格式如下：

 ....

    

线性布局中android:orientation="horizontal"表示此时的排列方式为水平方向。

android:orientation="vertical"时，表示此时的排列方式为垂直方向。

此处我们选择垂直方向，位置居中。代码如下：

2、对于左上角下拉框，我们使用相对布局。

相对布局（RelativeLayout）：是一种根据父容器和兄弟控件作为参照来确定控件位置的布局方式。

使用相对布局，需要将布局节点改成RelativeLayout，基本格式如下：

 ....

    

3、图标、温度、天气、日期等，需要用到以下两个控件：

ImageView ：用于展示图片。

一些相关属性：

android:src：设置 ImageView 的图片内容

android:background：设置背景样式（同其他控件类似）

android:scaleType：控制图片的缩放模式

android:maxHeight：设置 ImageView 的最大高度

android:maxWidth：设置ImageView的最大宽度

android:tint：图片的色彩

TextView：用来展示文本。

一些相关属性：

id：为TextView设置一个组件id，根据id，我们可以在Java代码中通过findViewById()的方法获取到该对象

text：设置显示的文本内容

textColor：设置字体颜色

textSize：字体大小，单位一般是用sp

textStyle：设置字体风格，三个可选值：**normal**(无效果)，**bold**(加粗)，**italic**(斜体)

代码如下：

四、下拉菜单布局

在layout文件右键，新建一个Layout XML File文件，命名为sp_item_layout.xml用来编写下拉菜单的布局。

布局节点使用TextView，id命名为text1,以使其能与主函数链接上。

五、主函数

package com.example.androidtwo;import androidx.appcompat.app.AppCompatActivity;import androidx.appcompat.widget.AppCompatSpinner;import android.content.Context;import android.os.Bundle;import android.view.View;import android.widget.AdapterView;import android.widget.ArrayAdapter;import android.widget.ImageView;import android.widget.TextView;public class MainActivity extends AppCompatActivity {    private AppCompatSpinner mSpinner;    private ArrayAdapter mSpAdapter;    private String[] mCities;    private TextView  tvWeather,tvTem,tvTemLowHigh,tvWin,tvAir;    private ImageView ivWeather;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initView();    }    private void initView()    {        mSpinner = findViewById(R.id.sp_city ) ;        mCities =getResources().getStringArray(R.array.cities) ;        mSpAdapter =new ArrayAdapter(this,R.layout.sp_item_layout,mCities);        mSpinner.setAdapter(mSpAdapter);        mSpinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {            @Override            public void onItemSelected(AdapterView parent, View view, int position, long id) {            }            @Override            public void onNothingSelected(AdapterView parent) {            }        });        tvWeather = findViewById(R.id.tv_weather);        tvAir = findViewById(R.id.tv_air );        tvTem = findViewById(R.id.tv_tem  );        tvTemLowHigh = findViewById(R.id.tv_tem_low_high  );        tvWin  = findViewById(R.id.tv_win );        ivWeather   = findViewById(R.id.iv_weather );    }}

三、关于软件背景

背景部分我导入了几张图片作为选择。

导入步骤：将本地照片拖拽到项目的res_drawable文件中。

然后用android:background="@drawable/照片名字"导入。