前言
写APP是有很多细节需要处理的,这些细节可以提高你的APP的使用概率。这已经是第二十一篇文章了,我的目标是每一篇都有内容可以讲,不会让你觉得我是虚假内容,我真的看不惯很多的标题党,点进去一看只有一个单词,Mark,最坑爹的是居然有5000多访问量,就是靠标题吸引别人过去,看过的估计都要骂一两句,我都是直接举报的,虚假内容,浪费别人时间,好了,开始吧。
效果图
正文
首先是滑动改变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,然后实现它的构造方法。最后在初始化时指定就可以了, 注解。
实现构造方法
指定
然后在滑动监听里面写入
代码语言:javascript复制 /**
* 滑动监听
* @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中增加一个
代码语言:javascript复制 @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;//空气质量站点 查询空气质量站点才需要,
然后就是点击事件
代码语言:javascript复制 //添加点击事件
@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
代码语言:javascript复制<?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="@dimen/dp_16"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:popupTheme="@style/AppTheme.PopupOverlay">
<TextView
android:id="@ id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textSize="@dimen/sp_16"
android:textColor="@color/white"
android:text="更多天气预报" />
</androidx.appcompat.widget.Toolbar>
<androidx.recyclerview.widget.RecyclerView
android:overScrollMode="never"
android:id="@ id/rv"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
效果如下图所示
背景图片在上面的网盘地址提取就可以了。或者去Github上下载我的源码也可以。 现在列表已经有了,然后就是item了, 在这之前先在mvplibrary下的colors.xml中新增几个颜色
代码语言:javascript复制 <color name="world_city_color">#243440</color>
<color name="blue_more">#C8DCFF</color><!--浅蓝色-->
<color name="gray_white">#F8F8F8</color><!--灰白-->
<color name="transparent_bg_2">#44000000</color><!--黑色半透明 二-->
<color name="transparent_bg_3">#66000000</color><!--黑色半透明 三-->
<color name="temp_max_tx">#FF7E45</color><!--高温文字颜色-->
<color name="temp_min_tx">#B3BCCA</color><!--低温文字颜色-->
然后在app的drawable下新建一个样式背景shape_transparent_12.xml
代码语言:javascript复制<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/transparent_bg_3"/>
<corners android:radius="@dimen/dp_12"/>
</shape>
在app的layout下新建一个item_more_daily_list.xml,代码如下:
代码语言:javascript复制<?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="300dp"
android:layout_height="match_parent"
android:layout_marginBottom="30dp"
android:clickable="true"
android:padding="@dimen/dp_12">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/shape_transparent_12"
android:overScrollMode="never">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
android:padding="@dimen/dp_4">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:paddingTop="@dimen/dp_12"
android:paddingBottom="@dimen/dp_12">
<TextView
android:id="@ id/tv_date_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/white"
android:textSize="@dimen/sp_18" />
<TextView
android:id="@ id/tv_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/white"
android:textSize="@dimen/sp_14" />
</LinearLayout>
<!--最高温和最低温-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="horizontal">
<TextView
android:id="@ id/tv_temp_max"
android:typeface="sans"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="最高温"
android:textColor="@color/white"
android:textSize="@dimen/sp_36" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" / "
android:textColor="@color/white"
android:textSize="@dimen/sp_18" />
<TextView
android:id="@ id/tv_temp_min"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="最高温"
android:textColor="@color/white"
android:textSize="@dimen/sp_18" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="0.3dp"
android:layout_margin="@dimen/dp_12"
android:background="@color/white" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="@dimen/dp_8"
android:text="白天天气状况"
android:textColor="@color/white"
android:textSize="@dimen/sp_16" />
<!--白天-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<!--气候图标描述-->
<ImageView
android:id="@ id/iv_weather_state_d"
android:layout_width="@dimen/dp_80"
android:layout_height="@dimen/dp_80"
android:scaleType="fitXY" />
<!--气候文字描述-->
<TextView
android:id="@ id/tv_weather_state_d"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="@dimen/dp_8"
android:gravity="center"
android:textColor="@color/white"
android:textSize="@dimen/sp_16" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--风向360角度-->
<LinearLayout
android:layout_width="@dimen/dp_0"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical"
android:paddingLeft="@dimen/dp_12"
android:paddingRight="@dimen/dp_12">
<ImageView
android:layout_width="@dimen/dp_24"
android:layout_height="@dimen/dp_24"
android:src="@mipmap/icon_wind_360" />
<TextView
android:id="@ id/tv_wind_360_d"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/dp_20"
android:textColor="@color/white"
android:textSize="@dimen/sp_12" />
</LinearLayout>
<!--风向-->
<LinearLayout
android:layout_width="@dimen/dp_0"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical"
android:paddingLeft="@dimen/dp_12"
android:paddingRight="@dimen/dp_12">
<ImageView
android:layout_width="@dimen/dp_24"
android:layout_height="@dimen/dp_24"
android:src="@mipmap/icon_wind_dir" />
<TextView
android:id="@ id/tv_wind_dir_d"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/dp_20"
android:textColor="@color/white"
android:textSize="@dimen/sp_12" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/dp_12">
<!--风力-->
<LinearLayout
android:layout_width="@dimen/dp_0"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical"
android:paddingLeft="@dimen/dp_12"
android:paddingRight="@dimen/dp_12">
<ImageView
android:layout_width="@dimen/dp_24"
android:layout_height="@dimen/dp_24"
android:padding="@dimen/dp_2"
android:src="@mipmap/icon_wind_scale" />
<TextView
android:id="@ id/tv_wind_scale_d"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/dp_20"
android:textColor="@color/white"
android:textSize="@dimen/sp_12" />
</LinearLayout>
<!--风速-->
<LinearLayout
android:layout_width="@dimen/dp_0"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical"
android:paddingLeft="@dimen/dp_12"
android:paddingRight="@dimen/dp_12">
<ImageView
android:layout_width="@dimen/dp_24"
android:layout_height="@dimen/dp_24"
android:src="@mipmap/icon_wind_speed" />
<TextView
android:id="@ id/tv_wind_speed_d"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/dp_20"
android:textColor="@color/white"
android:textSize="@dimen/sp_12" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="0.3dp"
android:layout_margin="@dimen/dp_12"
android:background="@color/white" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="@dimen/dp_8"
android:text="夜间天气状况"
android:textColor="@color/white"
android:textSize="@dimen/sp_16" />
<!--夜间-->
<!--白天-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<!--气候图标描述-->
<ImageView
android:id="@ id/iv_weather_state_n"
android:layout_width="@dimen/dp_80"
android:layout_height="@dimen/dp_80"
android:scaleType="fitXY" />
<!--气候文字描述-->
<TextView
android:id="@ id/tv_weather_state_n"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="@dimen/dp_8"
android:gravity="center"
android:textColor="@color/white"
android:textSize="@dimen/sp_16" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--风向360角度-->
<LinearLayout
android:layout_width="@dimen/dp_0"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical"
android:paddingLeft="@dimen/dp_12"
android:paddingRight="@dimen/dp_12">
<ImageView
android:layout_width="@dimen/dp_24"
android:layout_height="@dimen/dp_24"
android:src="@mipmap/icon_wind_360" />
<TextView
android:id="@ id/tv_wind_360_n"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/dp_20"
android:textColor="@color/white"
android:textSize="@dimen/sp_12" />
</LinearLayout>
<!--风向-->
<LinearLayout
android:layout_width="@dimen/dp_0"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical"
android:paddingLeft="@dimen/dp_12"
android:paddingRight="@dimen/dp_12">
<ImageView
android:layout_width="@dimen/dp_24"
android:layout_height="@dimen/dp_24"
android:src="@mipmap/icon_wind_dir" />
<TextView
android:id="@ id/tv_wind_dir_n"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/dp_20"
android:textColor="@color/white"
android:textSize="@dimen/sp_12" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/dp_12">
<!--风力-->
<LinearLayout
android:layout_width="@dimen/dp_0"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical"
android:paddingLeft="@dimen/dp_12"
android:paddingRight="@dimen/dp_12">
<ImageView
android:layout_width="@dimen/dp_24"
android:layout_height="@dimen/dp_24"
android:padding="@dimen/dp_2"
android:src="@mipmap/icon_wind_scale" />
<TextView
android:id="@ id/tv_wind_scale_n"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/dp_20"
android:textColor="@color/white"
android:textSize="@dimen/sp_12" />
</LinearLayout>
<!--风速-->
<LinearLayout
android:layout_width="@dimen/dp_0"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical"
android:paddingLeft="@dimen/dp_12"
android:paddingRight="@dimen/dp_12">
<ImageView
android:layout_width="@dimen/dp_24"
android:layout_height="@dimen/dp_24"
android:src="@mipmap/icon_wind_speed" />
<TextView
android:id="@ id/tv_wind_speed_n"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/dp_20"
android:textColor="@color/white"
android:textSize="@dimen/sp_12" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="0.3dp"
android:layout_margin="@dimen/dp_12"
android:background="@color/white" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="@dimen/dp_12">
<!--云量-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<TextView
android:layout_width="@dimen/dp_80"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="云量"
android:textColor="@color/white" />
<ImageView
android:layout_width="@dimen/dp_20"
android:layout_height="@dimen/dp_20"
android:src="@mipmap/icon_cloud" />
<TextView
android:id="@ id/tv_cloud"
android:layout_width="@dimen/dp_0"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:textColor="@color/white" />
</LinearLayout>
<!--紫外线强度-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/dp_4"
android:gravity="center_vertical">
<TextView
android:layout_width="@dimen/dp_80"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="紫外线"
android:textColor="@color/white" />
<ImageView
android:layout_width="@dimen/dp_20"
android:layout_height="@dimen/dp_20"
android:src="@mipmap/icon_uv_index" />
<TextView
android:id="@ id/tv_uvIndex"
android:layout_width="@dimen/dp_0"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:textColor="@color/white" />
</LinearLayout>
<!--能见度-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/dp_4"
android:gravity="center_vertical">
<TextView
android:layout_width="@dimen/dp_80"
android:layout_height="20dp"
android:gravity="center_vertical"
android:text="能见度"
android:textColor="@color/white" />
<ImageView
android:layout_width="@dimen/dp_20"
android:layout_height="@dimen/dp_20"
android:src="@mipmap/icon_vis" />
<TextView
android:id="@ id/tv_vis"
android:layout_width="@dimen/dp_0"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:textColor="@color/white" />
</LinearLayout>
<!--降水量-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/dp_4"
android:gravity="center_vertical">
<TextView
android:layout_width="@dimen/dp_80"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="降水量"
android:textColor="@color/white" />
<ImageView
android:layout_width="@dimen/dp_20"
android:layout_height="@dimen/dp_20"
android:src="@mipmap/icon_precip" />
<TextView
android:id="@ id/tv_precip"
android:layout_width="@dimen/dp_0"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:textColor="@color/white" />
</LinearLayout>
<!--相对湿度-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/dp_4"
android:gravity="center_vertical">
<TextView
android:layout_width="@dimen/dp_80"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="相对湿度"
android:textColor="@color/white" />
<ImageView
android:layout_width="@dimen/dp_20"
android:layout_height="@dimen/dp_20"
android:src="@mipmap/icon_humidity" />
<TextView
android:id="@ id/tv_humidity"
android:layout_width="@dimen/dp_0"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:textColor="@color/white" />
</LinearLayout>
<!--大气压强-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/dp_4"
android:gravity="center_vertical">
<TextView
android:layout_width="@dimen/dp_80"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="大气压强"
android:textColor="@color/white" />
<ImageView
android:layout_width="@dimen/dp_20"
android:layout_height="@dimen/dp_20"
android:src="@mipmap/icon_pressure" />
<TextView
android:id="@ id/tv_pressure"
android:layout_width="@dimen/dp_0"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:textColor="@color/white" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</LinearLayout>
最终效果图如下
下面在app的adapter包下新建一个MoreDailyAdapter, 代码如下:
代码语言:javascript复制package com.llw.goodweather.adapter;
import androidx.annotation.Nullable;
import com.chad.library.adapter.base.BaseQuickAdapter;
import com.chad.library.adapter.base.BaseViewHolder;
import com.llw.goodweather.R;
import com.llw.goodweather.bean.DailyResponse;
import com.llw.goodweather.utils.DateUtils;
import com.llw.goodweather.utils.WeatherUtil;
import java.util.List;
/**
* 更多天气预报信息数据适配器
*/
public class MoreDailyAdapter extends BaseQuickAdapter<DailyResponse.DailyBean, BaseViewHolder> {
public MoreDailyAdapter(int layoutResId, @Nullable List<DailyResponse.DailyBean> data) {
super(layoutResId, data);
}
@Override
protected void convert(BaseViewHolder helper, DailyResponse.DailyBean item) {
helper.setText(R.id.tv_temp_max,item.getTempMax() "°")
.setText(R.id.tv_temp_min,item.getTempMin() "°");
helper.setText(R.id.tv_date_info, DateUtils.Week(item.getFxDate()))//日期描述
.setText(R.id.tv_date, DateUtils.dateSplit(item.getFxDate()))//日期
.setText(R.id.tv_weather_state_d, item.getTextDay())//白天天气状况文字描述
.setText(R.id.tv_weather_state_n, item.getTextNight());//晚间天气状况文字描述
helper.setText(R.id.tv_wind_360_d, item.getWind360Day() "°")
.setText(R.id.tv_wind_dir_d, item.getWindDirDay())
.setText(R.id.tv_wind_scale_d, item.getWindScaleDay() "级")
.setText(R.id.tv_wind_speed_d, item.getWindSpeedDay() "km/h");
helper.setText(R.id.tv_wind_360_n, item.getWind360Night() "°")
.setText(R.id.tv_wind_dir_n, item.getWindDirNight())
.setText(R.id.tv_wind_scale_n, item.getWindScaleNight() "级")
.setText(R.id.tv_wind_speed_n, item.getWindSpeedNight() "km/h");
helper.setText(R.id.tv_cloud, item.getCloud() "%")//云量
.setText(R.id.tv_uvIndex, uvIndexToString(item.getUvIndex()))//紫外线
.setText(R.id.tv_vis, item.getVis() "km")//能见度
.setText(R.id.tv_precip, item.getPrecip() "mm")//降水量
.setText(R.id.tv_humidity, item.getHumidity() "%")//相对湿度
.setText(R.id.tv_pressure, item.getPressure() "hPa")//大气压强
;
//白天天气状态图片描述
WeatherUtil.changeIcon(helper.getView(R.id.iv_weather_state_d), Integer.parseInt(item.getIconDay()));
//晚上天气状态图片描述
WeatherUtil.changeIcon(helper.getView(R.id.iv_weather_state_n), Integer.parseInt(item.getIconNight()));
}
private String uvIndexToString(String code) {//最弱(1)、弱(2)、中等(3)、强(4)、很强(5)
String result = null;
switch (code) {
case "1":
result = "最弱";
break;
case "2":
result = "弱";
break;
case "3":
result = "中等";
break;
case "4":
result = "强";
break;
case "5":
result = "很强";
break;
default:
result = "无紫外线";
break;
}
return result;
}
}
这是你会发现少了一个dateSplit方法,去DateUtils里面补上
代码语言:javascript复制 //时间截取
public static String dateSplit(String date) {//2020-08-04
String result = null;
String[] array = date.split("-");
result = array[1] "/" array[2];
return result; //08/04
}
//时间截取plus
public static String dateSplitPlus(String date) {//2020-08-07
String result = null;
String[] array = date.split("-");
result = Integer.parseInt(array[1]) "月" Integer.parseInt(array[2]) "号";
return result; // 8月7号
}
区别不大,不过都会用到的。Ok,现在Adapter没有问题了,就可以去写订阅器了。 在app的contract包新建一个MoreDailyContract,代码如下:
代码语言:javascript复制package com.llw.goodweather.contract;
import com.llw.goodweather.api.ApiService;
import com.llw.goodweather.bean.DailyResponse;
import com.llw.goodweather.bean.WorldCityResponse;
import com.llw.mvplibrary.base.BasePresenter;
import com.llw.mvplibrary.base.BaseView;
import com.llw.mvplibrary.net.NetCallBack;
import com.llw.mvplibrary.net.ServiceGenerator;
import retrofit2.Call;
import retrofit2.Response;
/**
* 更多天气预报订阅器
*/
public class MoreDailyContract {
public static class MoreDailyPresenter extends BasePresenter<IMoreDailyView> {
/**
* 更多天气预报 V7
* @param location 城市id
*/
public void worldCity(String location) {
ApiService service = ServiceGenerator.createService(ApiService.class,3);
service.dailyWeather("15d",location).enqueue(new NetCallBack<DailyResponse>() {
@Override
public void onSuccess(Call<DailyResponse> call, Response<DailyResponse> response) {
if(getView() != null){
getView().getMoreDailyResult(response);
}
}
@Override
public void onFailed() {
if(getView() != null){
getView().getDataFailed();
}
}
});
}
}
public interface IMoreDailyView extends BaseView {
//更多天气预报返回数据 V7
void getMoreDailyResult(Response<DailyResponse> response);
//错误返回
void getDataFailed();
}
}
到最后一步了,在Activity中去实现数据请求和渲染 在MoreDailyActivity代码如下:
代码语言:javascript复制package com.llw.goodweather.ui;
import android.os.Bundle;
import android.widget.TextView;
import androidx.appcompat.widget.Toolbar;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.PagerSnapHelper;
import androidx.recyclerview.widget.RecyclerView;
import com.llw.goodweather.R;
import com.llw.goodweather.adapter.MoreDailyAdapter;
import com.llw.goodweather.bean.DailyResponse;
import com.llw.goodweather.contract.MoreDailyContract;
import com.llw.goodweather.utils.CodeToStringUtils;
import com.llw.goodweather.utils.Constant;
import com.llw.goodweather.utils.DateUtils;
import com.llw.goodweather.utils.RecyclerViewScrollHelper;
import com.llw.goodweather.utils.StatusBarUtil;
import com.llw.goodweather.utils.ToastUtils;
import com.llw.mvplibrary.mvp.MvpActivity;
import java.util.ArrayList;
import java.util.List;
import butterknife.BindView;
import butterknife.ButterKnife;
import retrofit2.Response;
/**
* 更多天气预报
*/
public class MoreDailyActivity extends MvpActivity<MoreDailyContract.MoreDailyPresenter> implements MoreDailyContract.IMoreDailyView {
@BindView(R.id.toolbar)
Toolbar toolbar;
@BindView(R.id.tv_title)
TextView tvTitle;
@BindView(R.id.rv)
RecyclerView rv;
List<DailyResponse.DailyBean> mList = new ArrayList<>();//数据实体
MoreDailyAdapter mAdapter;//适配器
@Override
public void initData(Bundle savedInstanceState) {
StatusBarUtil.transparencyBar(context);//透明状态栏
showLoadingDialog();
initList();
Back(toolbar);
}
/**
* 初始化列表
*/
private void initList() {
mAdapter = new MoreDailyAdapter(R.layout.item_more_daily_list, mList);
LinearLayoutManager linearLayoutManager = new LinearLayoutManager(context);
linearLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
rv.setLayoutManager(linearLayoutManager);
PagerSnapHelper snapHelper = new PagerSnapHelper();
snapHelper.attachToRecyclerView(rv);//滚动对齐,使RecyclerView像ViewPage一样,一次滑动一项,居中
rv.setAdapter(mAdapter);
tvTitle.setText(getIntent().getStringExtra("cityName"));
mPresent.worldCity(getIntent().getStringExtra("locationId"));
}
@Override
public int getLayoutId() {
return R.layout.activity_more_daily;
}
@Override
protected MoreDailyContract.MoreDailyPresenter createPresent() {
return new MoreDailyContract.MoreDailyPresenter();
}
/**
* 更多预报天气返回值
*
* @param response
*/
@Override
public void getMoreDailyResult(Response<DailyResponse> response) {
dismissLoadingDialog();
if (response.body().getCode().equals(Constant.SUCCESS_CODE)) {
List<DailyResponse.DailyBean> data = response.body().getDaily();
if (data != null && data.size() > 0) {//判空处理
mList.clear();//添加数据之前先清除
mList.addAll(data);//添加数据
mAdapter.notifyDataSetChanged();//刷新列表
for (int i = 0; i < data.size(); i ) {
if(data.get(i).getFxDate().equals(DateUtils.getNowDate())){
RecyclerViewScrollHelper.scrollToPosition(rv,i);//渲染完成后,定位到今天,因为和风天气预报有时候包括了昨天,有时候又不包括,搞得我很被动
}
}
} else {
ToastUtils.showShortToast(context, "天气预报数据为空");
}
} else {//异常状态码返回
ToastUtils.showShortToast(context, CodeToStringUtils.WeatherCode(response.body().getCode()));
}
}
/**
* 其他异常返回
*/
@Override
public void getDataFailed() {
dismissLoadingDialog();
ToastUtils.showShortToast(context, "更多天气数据获取异常");
}
}
这里的代码我相信经常看我天气系列文章的朋友已经很熟悉了,唯一陌生的应该就是这个PagerSnapHelper,这个东西有什么作用呢?简单来说就是可以让你的RecyclerView像ViewPage那样一次滑动一项,因为我这里用的是多天数据,所以这种方式还是比较不错的,体验也会比较好。这个里面还用到一个工具类 RecyclerViewScrollHelper,代码如下,
代码语言:javascript复制package com.llw.goodweather.utils;
import android.content.Context;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.LinearSmoothScroller;
import androidx.recyclerview.widget.RecyclerView;
/**
* 滑动帮助
*/
public class RecyclerViewScrollHelper {
public static void scrollToPosition(RecyclerView recyclerView, int position){
RecyclerView.LayoutManager manager1 = recyclerView.getLayoutManager();
if (manager1 instanceof LinearLayoutManager) {
LinearLayoutManager manager = (LinearLayoutManager) manager1;
final TopSmoothScroller mScroller = new TopSmoothScroller(recyclerView.getContext());
mScroller.setTargetPosition(position);
manager.startSmoothScroll(mScroller);
}
}
public static class TopSmoothScroller extends LinearSmoothScroller {
TopSmoothScroller(Context context) {
super(context);
}
@Override
protected int getHorizontalSnapPreference() {
return SNAP_TO_START;
}
@Override
protected int getVerticalSnapPreference() {
return SNAP_TO_START;
}
}
}
还差最后一步,那就是入口,回到MainActivity中,新增如下方法
代码语言:javascript复制/**
* 进入更多数据页面
* @param clazz 要进入的页面
*/
private void goToMore(Class<?> clazz) {
if (locationId == null) {
ToastUtils.showShortToast(context, "很抱歉,未获取到相关更多信息");
} else {
Intent intent = new Intent(context, clazz);
intent.putExtra("locationId", locationId);
intent.putExtra("cityName", tvCity.getText().toString());
startActivity(intent);
}
}
然后
在点击的时候调用这个方法,传入要进入的Activity即可。
好了,下面运行一下吧。