移动应用开发实践-Task14-配置一个简易的天气预报界面

目的

设计一个建议的天气预报UI，如下图：

1.创建主要的Layui

这里主要是把按钮和两个include把两个细节页面引用（weather_title、weather_now），模块化界面，方便后续操作。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorPrimary"
    android:orientation="vertical">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="天气预报" />

            <Button
                android:id="@+id/bt_update"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="update" />
            <include layout="@layout/weather_title"></include>
            <include layout="@layout/weather_now"></include>

        </LinearLayout>
    </ScrollView>
</LinearLayout>

两个主要的模块的界面文件

• weather_now.xml
  

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="15dp"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/now_cond_iv"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center_vertical"
        app:srcCompat="@mipmap/ic_launcher" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:id="@+id/now_temp_tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end"
            android:text="25℃"
            android:textColor="@color/colorLight"
            android:textSize="60sp" />

        <TextView
            android:id="@+id/now_cond_tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end"
            android:text="Sunny"
            android:textColor="@color/colorLight"
            android:textSize="20sp" />
    </LinearLayout>
</LinearLayout>

• weather_title
  

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="15dp"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/now_cond_iv"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center_vertical"
        app:srcCompat="@mipmap/ic_launcher" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:id="@+id/now_temp_tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end"
            android:text="25℃"
            android:textColor="@color/colorLight"
            android:textSize="60sp" />

        <TextView
            android:id="@+id/now_cond_tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end"
            android:text="Sunny"
            android:textColor="@color/colorLight"
            android:textSize="20sp" />
    </LinearLayout>
</LinearLayout>

2.WeatherActivity

图片是从对应网站直接获取的，另外Glide是外包文件，用于获取网页缓存图片，Glide链接：https://muyangmin.github.io/glide-docs-cn/

package com.example.fyn_weather_task14_0;

import ...

public class WeatherActivity extends AppCompatActivity {

    TextView tv_city, tv_update_time, tv_temp, tv_weather_info;
    ImageView iv_cond;
    String weather_id = "CN101210701";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.weather_activity_main);

        tv_city = findViewById(R.id.title_city_tv);
        tv_update_time = findViewById(R.id.title_pub_time_tv);
        tv_temp = findViewById(R.id.now_temp_tv);
        tv_weather_info = findViewById(R.id.now_cond_tv);
        iv_cond = findViewById(R.id.now_cond_iv);
        Button bt = findViewById(R.id.bt_update);
        bt.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                updateWeatherNow();
            }
        });
    }

    private void updateWeatherNow() {
        WeatherApiUtil.getWeatherNow(this, weather_id, new WeatherApiUtil.OnWeatherNowFinished() {
            @Override
            public void onFinished(WeatherNow data) {
                if (data != null) {
                    tv_city.setText(data.basic.location);
                    tv_update_time.setText(data.update.loc);
                    tv_temp.setText(data.now.tmp);
                    tv_weather_info.setText(data.now.cond_txt);
                    updateWeatherIcon(data.now.cond_code, iv_cond);
                }
            }
        });
    }

    private void updateWeatherIcon(String cond_code, ImageView iv_cond) {
        String url = String.format("https://cdn.heweather.com/cond_icon/%s.png", cond_code);
        Glide.with(this).load(Uri.parse(url)).into(iv_cond);
    }
}