Android 天气APP（二十一）滑动改变UI、增加更多天气数据展示，最多未来15天天气预报(1)

正文

---

首先是滑动改变UI,比如我们的一个界面中有一个滑动VIew，可以使ScrollView或者NestedScrollView，实现一个监听方法，然后在方法中根据滑动距离判断是上滑还是下滑，又在上滑或者下滑中进行UI的改变就可以了，听起来是不是很简单呢？我们动手来实现一下吧，如果你是第一次看这篇文章，那么你可以去看一下我GitHub上的源码，GoodWeather,当然我更希望你能一篇一篇看完自己去实现，这样更有利于你的成长。

一、滑动改变UI

修改布局activity_main.xml

这个就是上下滑动时要改变的TextView，给它加一个id

这是要监听的NestedScrollView，同样加一个id

这里新建了一个LinearLayout，加上id,用于包裹需要计算高度的区域，当滑动的距离，超过这个布局的绘制高度时，则改变UI,也就是上面提到的TextView。

下面进入到MainActivity

对刚才写上id的控件进行初始化，同时实现一个滑动监听

实现一个滑动改变监听。使用快捷键Alt + Enter,弹出一个窗口

首先增加一个注解，将API指定为23,然后实现它的构造方法。最后在初始化时指定就可以了，

注解。

实现构造方法

指定

然后在滑动监听里面写入

/**

• 滑动监听

• @param v 滑动视图本身

• @param scrollX 滑动后的X轴位置

• @param scrollY 滑动后的Y轴位置

• @param oldScrollX 之前的X轴位置

• @param oldScrollY 之前的Y轴位置

*/

@Override

public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {

if (scrollY > oldScrollY) {

Log.e(“onScroll”, “上滑”);

//laySlideArea.getMeasuredHeight() 表示控件的绘制高度

if(scrollY > laySlideArea.getMeasuredHeight()){

String tx = tvCity.getText().toString();

if(tx.contains(“定位中”)){//因为存在网络异常问题，总不能你没有城市，还给你改变UI吧

tvTitle.setText(“城市天气”);

}else {

tvTitle.setText(tx);//改变TextView的显示文本

}

}

}

if (scrollY < oldScrollY) {

Log.e(“onScroll”, “下滑”);

if(scrollY < laySlideArea.getMeasuredHeight()){

tvTitle.setText(“城市天气”);//改回原来的

}

}

}

运行效果如下：

二、更多天气预报数据展示

写这个功能的时候会有一些图片资源，我这里放一个下载链接

链接: 百度网盘 提取码: b2ke

打开activity_main.xml，在显示天气预报数据的下面增加一个TextView,用于点击跳转查看更多天气预报信息。

更多空气质量

更多生活质量数据

在MainActivity中增加一个

@BindView(R.id.tv_more_daily)

TextView tvMoreDaily;//更多天气预报

@BindView(R.id.tv_more_air)

TextView tvMoreAir;//更多空气信息

@BindView(R.id.tv_more_lifestyle)

TextView tvMoreLifestyle;//更多生活建议

private String stationName = null;//空气质量站点 查询空气质量站点才需要，

然后就是点击事件

//添加点击事件

@OnClick({R.id.tv_more_daily, R.id.tv_more_air, R.id.tv_more_lifestyle})

public void onViewClicked(View view) {

switch (view.getId()) {

case R.id.tv_more_daily://更多天气预报

break;

case R.id.tv_more_air://更多空气质量信息

break;

case R.id.tv_more_lifestyle://更多生活建议

break;

}

}

在这篇文章中，我就先写出这个更多天气预报的，至于其他两个我会更多数据的展示我会在下一篇文章中给出，这两篇文章我会一起发布的。连起来看就没有问题。

有了点击事件，现在可以在app模块中的ui包下创建个MoreDailyActivity了，用于显示更多的天气详情数据。

首先修改布局文件activity_more_daily.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”

xmlns:tools=“http://schemas.android.com/tools”

android:layout_width=“match_parent”

android:layout_height=“match_parent”

android:fitsSystemWindows=“true”

android:background=“@drawable/more_daily_bg”

android:orientation=“vertical”

tools:context=“.ui.MoreDailyActivity”>

<androidx.appcompat.widget.Toolbar

android:id=“@+id/toolbar”

android:layout_width=“match_parent”

android:layout_height=“?attr/actionBarSize”

app:layout_constraintEnd_toEndOf=“parent”

app:navigationIcon=“@mipmap/icon_return_white”

app:contentInsetLeft=“@dime