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

一、效果展示

如图所示

主界面显示气候、温度、日期、风力等内容，左上角下拉框显示不同都会。空着的部分本来计划显示往后几天的气候，但是调用RecyclerView出了错，尚未办理，故先记载前部分内容。
二、前期预备

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

1. <?xml version="1.0" encoding="utf-8"?>
2. <resources>
3.     <color name="colorPrimary">@color/green_500 </color>
4.     <color name="colorPrimaryDark">@color/green_700 </color>
5.     <color name="colorAccent">#F4511E</color>
6.     <color name="green_200">#C5E1A5</color>
7.     <color name="green_500">#8BC34A</color>
8.     <color name="green_700">#689F38</color>
9.     <color name="white">#FFFFFF</color>
10.     <color name="black">#000000</color>
11.     <color name="purple_200">#CE93D8</color>
12.     <color name="trans">#00000000</color>
14. </resources>

复制代码

strings.xml中存放都会名称，

1. <resources>
2.     <string name="app_name">天气预报</string>
3.     <string-array name="cities">
4.     <item>北京</item>
5.     <item>天津</item>
6.     <item>哈尔滨</item>
7.     <item>沈阳</item>
8.     <item>石家庄</item>
9.     <item>西安</item>
10.     <item>郑州</item>
11.     </string-array>
12. </resources>

复制代码

styles.xml设置全局样式：

1. <resources>
2.     <!-- Base application theme. -->
3.     <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
4.         <!-- Customize your theme here. -->
5.         <item name="colorPrimary">@color/colorPrimary</item> //使用name为colorPrimary的颜色-green_500,作为colorPrimary—导航栏颜色
6.         <item name="colorPrimaryDark">@color/colorPrimaryDark</item> //colorPrimaryDark—通知栏颜色
7.         <item name="colorAccent">@color/colorAccent</item> //
8. colorAccent—控件选中后颜色
9.         <item name="android:windowFullscreen">true</item>//实现全屏显示
10.     </style>
12. </resources>

复制代码

三、布局代码

在layout文件下的activity_main.xml为布局文件，在此文件中编写主界面布局代码。
1、主界面我们使用线性布局
   线性布局（LinearLayout）：主要以水平或垂直方式来排列界面中的控件。并将控件排列到一条直线上。在线性布局中，假如水平排列，垂直方向上只能有一个控件；假如垂直排列，水平方向上也只能放置一个控件。
  

使用线性布局，必要将布局节点改成LinearLayout，基本格式如下：
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
 ....
    
</LinearLayout>
  线性布局中androidrientation="horizontal"体现此时的排列方式为水平方向。
androidrientation="vertical"时，体现此时的排列方式为垂直方向。
此处我们选择垂直方向，位置居中。代码如下：

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2.     xmlns:app="http://schemas.android.com/apk/res-auto"
3.     xmlns:tools="http://schemas.android.com/tools"
4.     android:layout_width="match_parent" //match_parent表示让当前控件的大小和父布局的大小一样，也就是由父布局来决定当前控件的大小
5.     android:layout_height="match_parent"
6.     android:orientation="vertical" //垂直分布
7.     android:gravity="center_horizontal" //位置居中
8.     android:background="@drawable/bai3" //将drawable名为bai3的图片作为背景
9.     tools:context=".MainActivity">

复制代码

2、对于左上角下拉框，我们使用相对布局。
   相对布局（RelativeLayout）：是一种根据父容器和兄弟控件作为参照来确定控件位置的布局方式。
  使用相对布局，必要将布局节点改成RelativeLayout，基本格式如下：
   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
 ....
    
</RelativeLayout>

1.     <RelativeLayout
2.         android:layout_width="match_parent"
3.         android:layout_height="wrap_content"
4.         >
5.     <androidx.appcompat.widget.AppCompatSpinner  //使用spinner实现下拉菜单
6.         android:id="@+id/sp_city"  //设置一个名为sp_city的id
7.         android:layout_width="130dp" //下拉菜单宽为130dp
8.         android:layout_height="48dp" //高为48dp
9.         android:entries="@array/cities" //将之前string.xml中设置的城市信息提取出来
10.         android:spinnerMode="dropdown"  //选择列表框的模式，dropdown：下拉菜单风格的窗口
11.         android:popupBackground="@color/trans" //弹出框背景色选择透明
12.         android:overlapAnchor="false" //使下拉框不遮挡Spinner的显示
13.         android:dropDownVerticalOffset="48dp" //调整下拉列表与箭头的距离，向下移动48dp，防止滚动过程中遮挡第一行
14.         android:backgroundTint="@color/black"//使用黑色
15.         />
16.     </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**(斜体)
  代码如下：

1.     </RelativeLayout>
2.     <ImageView
3.         android:layout_width="65dp"
4.         android:layout_height="65dp"
5.         android:id="@+id/iv_weather"
6.         android:src="@drawable/daxue"
7.         />
8.     <TextView
9.         android:layout_width="wrap_content"
10.         android:layout_height="wrap_content"
11.         android:id="@+id/tv_tem"
12.         android:textSize="50sp"
13.         android:text="3°C"
14.         android:textColor="@color/black"
15.     />
16.     <TextView
17.         android:layout_width="wrap_content"
18.         android:layout_height="wrap_content"
19.         android:id="@+id/tv_weather"
20.         android:textSize="20sp"
21.         android:text="大雪（2023-01-02星期二）"
22.         android:textColor="@color/black"
23.         android:layout_marginTop="10dp" //增加行间距
24.         />
25.     <TextView
26.         android:layout_width="wrap_content"
27.         android:layout_height="wrap_content"
28.         android:id="@+id/tv_tem_low_high"
29.         android:textSize="20sp"
30.         android:text="-1°C~4°C"
31.         android:textColor="@color/black"
32.         android:layout_marginTop="10dp"
33.         />
34.     <TextView
35.         android:layout_width="wrap_content"
36.         android:layout_height="wrap_content"
37.         android:id="@+id/tv_win"
38.         android:textSize="20sp"
39.         android:text="南风3~4级"
40.         android:textColor="@color/black"
41.         android:layout_marginTop="10dp"
42.         />
43.     <TextView
44.         android:layout_width="wrap_content"
45.         android:layout_height="wrap_content"
46.         android:id="@+id/tv_air"
47.         android:textSize="20sp"
48.         android:text="空气：53·良\n天气寒冷，建议穿着羽绒服、棉衣。"
49.         android:textColor="@color/black"
50.         android:gravity="center"
51.         android:layout_marginTop="10dp"
52.         />
53. </LinearLayout>

复制代码

四、下拉菜单布局

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

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

1. <?xml version="1.0" encoding="utf-8"?>
2. <TextView  xmlns:android="http://schemas.android.com/apk/res/android"
3.     xmlns:tools="http://schemas.android.com/tools"
4.     android:layout_width="match_parent"
5.     android:layout_height="48dp"
6.     android:id="@android:id/text1"
7.     android:textColor="@color/black"
8.     android:text="郑州"
9.     android:textSize="20sp"
10.     android:gravity="center_vertical"
11.     android:paddingLeft="10dp" //元素在内边距区域（padding area）中左边的宽度。
12.    >
13. </TextView>

复制代码

五、主函数

1. package com.example.androidtwo;
3. import androidx.appcompat.app.AppCompatActivity;
4. import androidx.appcompat.widget.AppCompatSpinner;
6. import android.content.Context;
7. import android.os.Bundle;
8. import android.view.View;
9. import android.widget.AdapterView;
10. import android.widget.ArrayAdapter;
11. import android.widget.ImageView;
12. import android.widget.TextView;
14. public class MainActivity extends AppCompatActivity {
16.     private AppCompatSpinner mSpinner;
17.     private ArrayAdapter<String> mSpAdapter;
18.     private String[] mCities;
20.     private TextView  tvWeather,tvTem,tvTemLowHigh,tvWin,tvAir;
21.     private ImageView ivWeather;
24.     @Override
25.     protected void onCreate(Bundle savedInstanceState) {
26.         super.onCreate(savedInstanceState);
27.         setContentView(R.layout.activity_main);
29.         initView();
30.     }
32.     private void initView()
33.     {
34.         mSpinner = findViewById(R.id.sp_city ) ;
35.         mCities =getResources().getStringArray(R.array.cities) ;
36.         mSpAdapter =new ArrayAdapter<>(this,R.layout.sp_item_layout,mCities);
37.         mSpinner.setAdapter(mSpAdapter);
38.         mSpinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
39.             @Override
40.             public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
42.             }
44.             @Override
45.             public void onNothingSelected(AdapterView<?> parent) {
47.             }
48.         });
50.         tvWeather = findViewById(R.id.tv_weather);
51.         tvAir = findViewById(R.id.tv_air );
52.         tvTem = findViewById(R.id.tv_tem  );
53.         tvTemLowHigh = findViewById(R.id.tv_tem_low_high  );
54.         tvWin  = findViewById(R.id.tv_win );
55.         ivWeather   = findViewById(R.id.iv_weather );
57.     }
58. }

复制代码

三、关于软件背景

背景部分我导入了几张图片作为选择。
导入步骤：将本地照片拖拽到项目的res_drawable文件中。

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

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。