Android 天气APP（二十五）地图天气（下）嵌套滑动布局渲染天气数据-阿里云开发者社区

上篇文章中，完成了对地图的控制，那么这篇文章中完成对天气数据的渲染。

完成这篇文章实现的效果如下，如果你觉得不行那就可以不用看下面了。

一、嵌套布局

在上一篇文章中，实现地图的功能，只用了一个地图控件和一个浮动按钮。而在这一篇文章中，为了提高页面的可用性和用户交互的效果，我用了CoordinatorLayout，这是一个嵌套滑动布局。

接下来来看看详细的布局内容：

然后来看这个里面放了什么

这里我放了一个相对布局，这是用于控制滑动的布局在页面的底部留有一部分布局，可以通过向上拖动到屏幕的底部，不过为了更好地效果，我在CoordinatorLayout中设置50的上边距。

然后再看这个相对布局里面是什么内容

展开之后里面是NestedScrollView和LinearLayout，

BottomSheetBehavior上滑展开后主要滑动布局上滑时会展示里面所有内容，下滑时当没有多余内容时会响应上层BottomSheetBehavior, 从而达到，整体收缩的效果。

下面我贴上NestedScrollView的布局代码：

<androidx.core.widget.NestedScrollView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="@dimen/dp_80">
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical">
                    <!--渐变背景 -->
                    <View
                        android:layout_width="match_parent"
                        android:layout_height="@dimen/dp_80"
                        android:background="@drawable/shape_gradient_white" />
                    <!--主要内容-->
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="@color/white"
                        android:gravity="center_horizontal"
                        android:orientation="vertical">
                        <!--今日天气简单的文字描述-->
                        <TextView
                            android:id="@+id/tv_today_info"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:padding="@dimen/dp_12"
                            android:textColor="@color/black_4"
                            android:textSize="@dimen/sp_14" />
                        <!--分割线-->
                        <View
                            android:layout_width="match_parent"
                            android:layout_height="@dimen/dp_3"
                            android:background="@color/line" />
                        <!--今日详情-->
                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_margin="@dimen/dp_12"
                            android:text="今日详情"
                            android:textColor="@color/black_4"
                            android:textSize="@dimen/sp_18" />
                        <!--点分割线-->
                        <View
                            android:layout_width="match_parent"
                            android:layout_height="2dp"
                            android:layout_marginLeft="10dp"
                            android:layout_marginRight="10dp"
                            android:background="@drawable/shape_dash_line" />
                        <!--今日天气详情数据列表-->
                        <androidx.recyclerview.widget.RecyclerView
                            android:id="@+id/rv_today_detail"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="@dimen/dp_12"
                            android:layout_marginBottom="@dimen/dp_12"
                            android:paddingLeft="@dimen/dp_12"
                            android:paddingRight="@dimen/dp_12" />
                        <!--点分割线-->
                        <View
                            android:layout_width="match_parent"
                            android:layout_height="2dp"
                            android:layout_marginLeft="10dp"
                            android:layout_marginRight="10dp"
                            android:background="@drawable/shape_dash_line" />
                        <!--未来预报-->
                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_margin="@dimen/dp_12"
                            android:text="未来预报"
                            android:textColor="@color/black_4"
                            android:textSize="@dimen/sp_18" />
                        <!--未来七天天气预报-->
                        <androidx.recyclerview.widget.RecyclerView
                            android:id="@+id/rv_seven_day_daily"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:paddingLeft="@dimen/dp_12"
                            android:paddingRight="@dimen/dp_12" />
                        <!--查看更多天气预报-->
                        <TextView
                            android:id="@+id/tv_more_daily"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:drawableRight="@mipmap/icon_more_gray"
                            android:gravity="center"
                            android:padding="@dimen/dp_12"
                            android:text="15日预报详情"
                            android:textColor="@color/gray_2" />
                        <!--分割线-->
                        <View
                            android:layout_width="match_parent"
                            android:layout_height="@dimen/dp_3"
                            android:background="@color/line" />
                        <!--未完待续。。。-->
                    </LinearLayout>
                </LinearLayout>
            </androidx.core.widget.NestedScrollView>

icon_more_gray.png

然后对里面的一些资源数据做讲解，里面用到了一些样式资源文件，在写之前，先把所有颜色值贴出来。注意是在mvplibrary下的colors.xml中

颜色代码如下：你可以复制粘贴进去

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="arc_bg_color">#C6D7F4</color>
    <color name="arc_progress_color">#FBFEF7</color>
    <color name="white">#ffffff</color><!--白色-->
    <color name="black">#000000</color><!--黑色-->
    <color name="black_2">#1E1E1A</color><!--黑色2-->
    <color name="green">#77d034</color><!--绿色-->
    <color name="blue_one">#9FC8E9</color><!--浅蓝色-->
    <color name="transparent">#00000000</color><!--透明-->
    <color name="transparent_bg">#22000000</color><!--黑色半透明-->
    <color name="transparent_bg_white">#22FFFFFF</color><!--白色半透明-->
    <color name="orange">#F38A50</color><!--橘色-->
    <color name="shallow_orange">#FFEFD5</color><!--浅橘色-->
    <color name="black_3">#454545</color><!--黑色3-->
    <color name="gray">#BABABA</color><!--灰色-->
    <color name="pink">#FFBCB3</color><!--粉色-->
    <color name="pink_one">#FDEBE8</color><!--浅粉色-->
    <color name="shallow_blue">#E7F3FC</color><!--浅蓝色 偏白-->
    <color name="shallow_gray">#F2F2F2</color><!--浅灰色-->
    <color name="dark_gray">#707070</color><!--深灰色-->
    <color name="shallow_black">#6D6D6D</color><!--褐黑色-->
    <color name="red">#FF0A00</color><!--红色-->
    <color name="line_gray">#E3E5E8</color><!--灰色分割线-->
    <color name="shallow_yellow">#E7C373</color><!--浅黄色-->
    <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><!--低温文字颜色-->
    <color name="white_2">#22FFFFFF</color><!--白色透明度22%-->
    <color name="white_4">#44FFFFFF</color><!--白色透明度44%-->
    <color name="white_6">#66FFFFFF</color><!--白色透明度66%-->
    <color name="white_8">#88FFFFFF</color><!--白色透明度88%-->
    <color name="purple">#56004f</color><!--紫色-->
    <color name="gray_white_2">#F6F6F6</color><!--灰白2-->
    <color name="gray_2">#626262</color><!--灰色2-->
    <color name="black_4">#141414</color><!--黑色4-->
    <color name="line">#DEDEE1</color><!--分割线-->
    <color name="point_color">#D9D9D9</color><!--点分割颜色-->
    <color name="gray_3">#818181</color><!--灰色3-->
    <color name="back_white">#f7f8fa</color>
    <color name="attention_text_light">#E9EAEF</color>
    <color name="dark_text_color">#B9C0CA</color>
    <color name="line_back_dark">#3f8DA0BA</color>
    <color name="line_color">#919191</color>
    <color name="search_light_un_color">#666666</color>
    <color name="slategray">#708090</color><!--灰石色 -->
</resources>

下面是样式文件

首先是shape_gradient_white.xml，这是一个白色渐变的背景。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="@color/white_2"
        android:centerColor="@color/white_6"
        android:endColor="@color/white"
        android:angle="270" />
</shape>

然后是shape_dash_line.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">
    <size android:height="1dp" />
    <stroke
        android:dashGap="4dp"
        android:dashWidth="4dp"
        android:width="1dp"
        android:color="@color/point_color" />
</shape>

然后是LinearLayout的布局代码：

<LinearLayout
                android:layout_width="match_parent"
                android:layout_height="@dimen/dp_160"
                android:layout_marginLeft="@dimen/dp_12"
                android:layout_marginRight="@dimen/dp_12"
                android:background="@drawable/shape_blue_8"
                android:orientation="vertical"
                android:padding="@dimen/dp_12">
                <!--城市-->
                <TextView
                    android:id="@+id/tv_city"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="城市"
                    android:textColor="@color/white"
                    android:textSize="@dimen/sp_16" />
                <!--主要天气数据-->
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">
                    <!--温度-->
                    <TextView
                        android:id="@+id/tv_temperature"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="0°"
                        android:textColor="@color/white"
                        android:textSize="60sp" />
                    <!--天气状态的图文显示、空气质量、风力-->
                    <LinearLayout
                        android:layout_width="@dimen/dp_0"
                        android:layout_height="match_parent"
                        android:layout_marginLeft="@dimen/dp_8"
                        android:layout_weight="1"
                        android:gravity="center_vertical"
                        android:orientation="vertical">
                        <!--天气状态的图文显示-->
                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:gravity="center_vertical">
                            <!--天气状态的文字描述-->
                            <TextView
                                android:id="@+id/tv_weather_state_tv"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:text="天气状态"
                                android:textColor="@color/white"
                                android:textSize="@dimen/sp_14" />
                            <!--天气状况图片描述-->
                            <ImageView
                                android:id="@+id/iv_weather"
                                android:layout_width="@dimen/dp_36"
                                android:layout_height="@dimen/dp_36"
                                android:layout_marginLeft="@dimen/dp_12" />
                        </LinearLayout>
                        <!--空气质量、风力-->
                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:gravity="center_vertical"
                            android:orientation="horizontal">
                            <!--空气质量-->
                            <TextView
                                android:id="@+id/tv_air"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:background="@drawable/shape_purple"
                                android:padding="@dimen/dp_2"
                                android:text="AQI 状态"
                                android:textColor="@color/purple"
                                android:textSize="@dimen/sp_14" />
                            <!--风信息描述-->
                            <TextView
                                android:id="@+id/tv_wind_info"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_marginLeft="@dimen/dp_12"
                                android:text="风向风力"
                                android:textColor="@color/white"
                                android:textSize="@dimen/sp_14" />
                        </LinearLayout>
                    </LinearLayout>
                </LinearLayout>
                <!--其他相关数据显示-->
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="@dimen/dp_8"
                    android:orientation="horizontal">
                    <!--紫外线-->
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="紫外线"
                        android:textColor="@color/white_8" />
                    <TextView
                        android:id="@+id/tv_uvIndex"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="@dimen/dp_12"
                        android:text=" "
                        android:textColor="@color/white" />
                    <!--湿度-->
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="@dimen/dp_16"
                        android:text="湿度"
                        android:textColor="@color/white_8" />
                    <TextView
                        android:id="@+id/tv_humidity"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="@dimen/dp_12"
                        android:text=" "
                        android:textColor="@color/white" />
                    <!--大气压-->
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="@dimen/dp_16"
                        android:text="大气压"
                        android:textColor="@color/white_8" />
                    <TextView
                        android:id="@+id/tv_pressure"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="@dimen/dp_12"
                        android:text=" "
                        android:textColor="@color/white" />
                </LinearLayout>
            </LinearLayout>

首先是shape_blue_8.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="12dp" />
    <gradient
        android:startColor="@color/blue_one"
        android:centerColor="@color/blue_one"
        android:endColor="#6C84DC"
        android:angle="225" />
</shape>

然后是shape_purple.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:width="1dip"
        android:color="@color/purple" />
    <corners android:radius="5dp" />
</shape>

其他的就没有了，OK，现在布局就已经是写好了。如果你需要完整的布局代码可以评论或者去我的GitHub上面看。

二、item布局

基本的布局写好了，但是里面还有两个列表，两个列表也是对应了两个布局xml的，也来看看吧，在app下的layout文件中新建两个xml文件分别是item_seven_day_daily_list.xml七天天气和item_today_detail.xml当前天气详情数据

item_seven_day_daily_list.xm代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <LinearLayout
        android:gravity="center_vertical"
        android:paddingTop="@dimen/dp_12"
        android:paddingBottom="@dimen/dp_12"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <!--日期-->
        <TextView
            android:id="@+id/tv_date"
            android:text="1234"
            android:textSize="@dimen/sp_14"
            android:textColor="@color/black"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"/>
        <!--天气描述  图标-->
        <ImageView
            android:id="@+id/iv_weather_state"
            android:background="@mipmap/icon_100"
            android:layout_width="30dp"
            android:layout_height="30dp"/>
        <!--最低温、最高温-->
        <LinearLayout
            android:gravity="right"
            android:layout_width="@dimen/dp_0"
            android:layout_height="wrap_content"
            android:layout_weight="1">
            <TextView
                android:id="@+id/tv_temp_height"
                android:textSize="@dimen/sp_14"
                android:textColor="@color/black"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>
            <TextView
                android:id="@+id/tv_temp_low"
                android:textSize="@dimen/sp_14"
                android:textColor="@color/black"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>
        </LinearLayout>
    </LinearLayout>
    <View
        android:background="@color/gray_white_2"
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_1"/>
</LinearLayout>

item_today_detail.xml代码如下：

<?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="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">
    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/dp_5"
        app:cardCornerRadius="@dimen/dp_6"
        android:elevation="@dimen/dp_4">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:orientation="vertical"
            android:paddingTop="@dimen/dp_16"
            android:paddingBottom="@dimen/dp_16">
            <ImageView
                android:id="@+id/iv_icon"
                android:scaleType="fitXY"
                android:layout_width="@dimen/dp_30"
                android:layout_height="@dimen/dp_30" />
            <TextView
                android:id="@+id/tv_value"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/dp_8"
                android:textColor="@color/black_4"
                android:textSize="@dimen/sp_16" />
            <TextView
                android:id="@+id/tv_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/dp_8"
                android:textColor="@color/gray_3"
                android:textSize="@dimen/sp_14" />
        </LinearLayout>
    </androidx.cardview.widget.CardView>
</LinearLayout>

然后写适配器

三、适配器

在app下的adapter包中新建一个SevenDailyAdapter

代码如下：

package com.llw.goodweather.adapter;
import android.widget.ImageView;
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 SevenDailyAdapter extends BaseQuickAdapter<DailyResponse.DailyBean, BaseViewHolder> {
    public SevenDailyAdapter(int layoutResId, @Nullable List<DailyResponse.DailyBean> data) {
        super(layoutResId, data);
    }
    @Override
    protected void convert(BaseViewHolder helper, DailyResponse.DailyBean item) {
        helper.setText(R.id.tv_date, DateUtils.dateSplitPlus(item.getFxDate()) +
                DateUtils.Week(item.getFxDate()))//日期
                .setText(R.id.tv_temp_height, item.getTempMax() + "℃")//最高温
                .setText(R.id.tv_temp_low, " / " + item.getTempMin() + "℃");//最低温
        //天气状态图片
        ImageView weatherStateIcon = helper.getView(R.id.iv_weather_state);
        int code = Integer.parseInt(item.getIconDay());//获取天气状态码，根据状态码来显示图标
        WeatherUtil.changeIcon(weatherStateIcon, code);//调用工具类中写好的方法
    }
}

再创建一个TodayDetailAdapter，代码如下：

package com.llw.goodweather.adapter;
import android.widget.ImageView;
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.TodayDetailBean;
import java.util.List;
/**
 * 地图天气中 今日天气详情数据
 */
public class TodayDetailAdapter extends BaseQuickAdapter<TodayDetailBean, BaseViewHolder> {
    public TodayDetailAdapter(int layoutResId, @Nullable List<TodayDetailBean> data) {
        super(layoutResId, data);
    }
    @Override
    protected void convert(BaseViewHolder helper, TodayDetailBean item) {
        ImageView imageView = helper.getView(R.id.iv_icon);
        imageView.setImageResource(item.getIcon());//图标
        helper.setText(R.id.tv_value,item.getValue())//值
                .setText(R.id.tv_name,item.getName());//名称
    }
}

适配器写好了，下面写订阅器

四、订阅器

在app下的contract包下新建一个MapWeatherContract，这个里面放置的就是需要使用的网络请求方法的配置，在Activity里面当前需要什么就放置什么，包含请求和返回方法，代码如下：

package com.llw.goodweather.contract;
import com.llw.goodweather.api.ApiService;
import com.llw.goodweather.bean.AirNowResponse;
import com.llw.goodweather.bean.DailyResponse;
import com.llw.goodweather.bean.NewSearchCityResponse;
import com.llw.goodweather.bean.NowResponse;
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 MapWeatherContract {
    public static class MapWeatherPresenter extends BasePresenter<IMapWeatherView> {
        /**
         * 搜索城市  V7版本中  需要把定位城市的id查询出来，然后通过这个id来查询详细的数据
         * @param location 城市名
         */
        public void searchCity(String location) {//注意这里的4表示新的搜索城市地址接口
            ApiService service = ServiceGenerator.createService(ApiService.class, 4);//指明访问的地址
            service.newSearchCity(location,"exact").enqueue(new NetCallBack<NewSearchCityResponse>() {
                @Override
                public void onSuccess(Call<NewSearchCityResponse> call, Response<NewSearchCityResponse> response) {
                    if(getView() != null){
                        getView().getNewSearchCityResult(response);
                    }
                }
                @Override
                public void onFailed() {
                    if(getView() != null){
                        getView().getDataFailed();
                    }
                }
            });
        }
        /**
         * 实况天气  V7版本
         * @param location  城市名
         */
        public void nowWeather(String location){//这个3 表示使用新的V7API访问地址
            ApiService service = ServiceGenerator.createService(ApiService.class,3);
            service.nowWeather(location).enqueue(new NetCallBack<NowResponse>() {
                @Override
                public void onSuccess(Call<NowResponse> call, Response<NowResponse> response) {
                    if(getView() != null){
                        getView().getNowResult(response);
                    }
                }
                @Override
                public void onFailed() {
                    if(getView() != null){
                        getView().getDataFailed();
                    }
                }
            });
        }
        /**
         * 天气预报  V7版本   7d 表示天气的数据 为了和之前看上去差别小一些，这里先用七天的
         * @param location   城市名
         */
        public void dailyWeather(String location){//这个3 表示使用新的V7API访问地址
            ApiService service = ServiceGenerator.createService(ApiService.class,3);
            service.dailyWeather("7d",location).enqueue(new NetCallBack<DailyResponse>() {
                @Override
                public void onSuccess(Call<DailyResponse> call, Response<DailyResponse> response) {
                    if(getView() != null){
                        getView().getDailyResult(response);
                    }
                }
                @Override
                public void onFailed() {
                    if(getView() != null){
                        getView().getDataFailed();
                    }
                }
            });
        }
        /**
         * 当天空气质量
         * @param location   城市名
         */
        public void airNowWeather(String location){
            ApiService service = ServiceGenerator.createService(ApiService.class,3);
            service.airNowWeather(location).enqueue(new NetCallBack<AirNowResponse>() {
                @Override
                public void onSuccess(Call<AirNowResponse> call, Response<AirNowResponse> response) {
                    if(getView() != null){
                        getView().getAirNowResult(response);
                    }
                }
                @Override
                public void onFailed() {
                    if(getView() != null){
                        getView().getDataFailed();
                    }
                }
            });
        }
    }
    public interface IMapWeatherView extends BaseView {
        //搜索城市返回城市id  通过id才能查下面的数据,否则会提示400  V7
        void getNewSearchCityResult(Response<NewSearchCityResponse> response);
        //实况天气
        void getNowResult(Response<NowResponse> response);
        //天气预报  7天
        void getDailyResult(Response<DailyResponse> response);
        //空气质量
        void getAirNowResult(Response<AirNowResponse> response);
        //错误返回
        void getDataFailed();
    }
}

五、数据渲染

打开MapWeatherActivity，

完成上面一步，然后实现里面的方法。分别是

  @Override
    protected MapWeatherContract.MapWeatherPresenter createPresent() {
        return new MapWeatherContract.MapWeatherPresenter();
    }

  /**
     * 搜索城市返回
     *
     * @param response
     */
    @Override
    public void getNewSearchCityResult(Response<NewSearchCityResponse> response) {
    }
    /**
     * 实况天气返回
     *
     * @param response
     */
    @Override
    public void getNowResult(Response<NowResponse> response) {
    }
    /**
     * 未来七天天气预报数据返回
     *
     * @param response
     */
    @Override
    public void getDailyResult(Response<DailyResponse> response) {
    }
    /**
     * 空气质量数据返回
     *
     * @param response
     */
    @Override
    public void getAirNowResult(Response<AirNowResponse> response) {
    }
    /**
     * 错误返回
     */
    @Override
    public void getDataFailed() {
    }

方法有了，现在通过注解绑定控件id

  @BindView(R.id.tv_city)
    TextView tvCity;//城市
    @BindView(R.id.iv_weather)
    ImageView ivWeather;//天气状态图片描述
    @BindView(R.id.tv_temperature)
    TextView tvTemperature;//温度
    @BindView(R.id.tv_weather_state_tv)
    TextView tvWeatherStateTv;//天气状态文字描述
    @BindView(R.id.tv_wind_info)
    TextView tvWindInfo;//风力风向
    @BindView(R.id.rv_today_detail)
    RecyclerView rvTodayDetail;//今日详情数据列表
    @BindView(R.id.rv_seven_day_daily)
    RecyclerView rvSevenDayDaily;//七天天气预报列表
    @BindView(R.id.tv_more_daily)
    TextView tvMoreDaily;//15日天气预报数据
    @BindView(R.id.tv_uvIndex)
    TextView tvUvIndex;//紫外线强度
    @BindView(R.id.tv_humidity)
    TextView tvHumidity;//湿度
    @BindView(R.id.tv_pressure)
    TextView tvPressure;//大气压
    @BindView(R.id.tv_today_info)
    TextView tvTodayInfo;//今日天气简要描述
    @BindView(R.id.tv_air)
    TextView tvAir;//空气质量
    @BindView(R.id.bottom_sheet_ray)
    RelativeLayout bottomSheetRay;//底部拖动布局

声明需要的数据

  private String locationId;//城市id
    private List<DailyResponse.DailyBean> dailyList = new ArrayList<>();//七天天气预报
    List<TodayDetailBean> todayDetailList = new ArrayList<>();//当前天气详情
    private SevenDailyAdapter mSevenDailyAdapter;//七天天气预报适配器
    private String dayInfo;//今天白天天气描述
    private String nightInfo;//今天晚上天气描述
    private BottomSheetBehavior bottomSheetBehavior;//底部控件

还有一个就是点击事件的改变，之前是只有一个浮动按钮的点击事件，现在多了一个，所以用switch来解决，15日天气预报详情就点击到之前我写好的一个Activity里面，传入数据。当然你现在点击传过去是会出问题的，因为还没有赋值的。

  /**
     * 点击事件
     */
    @OnClick({R.id.btn_auto_location,R.id.tv_more_daily})
    public void onViewClicked(View view) {
        switch (view.getId()){
            case R.id.btn_auto_location://重新定位
                markerLatitude = 0;
                markerLongitude = 0;
                marker.remove();//清除标点
                initLocation();
                break;
            case R.id.tv_more_daily://15日天气预报详情
                Intent intent = new Intent(context, MoreDailyActivity.class);
                intent.putExtra("locationId", locationId);
                intent.putExtra("cityName", tvCity.getText().toString());
                startActivity(intent);
                break;
        }
    }

在上一篇文章中，通过自动定位和手动定位(点击地图定位)，在定位返回监听中，通过经纬度的反编译解码得到了实际的所在位置，也就是省、市、区/县、街道等一些数据，但是我只需要一个区/县即可。

在解码后请求这个信息来搜索城市相关信息,然后在搜索城市的返回方法中做处理，来看这个返回方法。

  /**
     * 搜索城市返回
     *
     * @param response
     */
    @Override
    public void getNewSearchCityResult(Response<NewSearchCityResponse> response) {
        if (response.body().getStatus().equals(Constant.SUCCESS_CODE)) {
            if (response.body().getLocation() != null && response.body().getLocation().size() > 0) {
                tvCity.setText(response.body().getLocation().get(0).getName());//城市
                locationId = response.body().getLocation().get(0).getId();//城市Id
                showLoadingDialog();
                mPresent.nowWeather(locationId);//查询实况天气
                mPresent.dailyWeather(locationId);//查询天气预报
                mPresent.airNowWeather(locationId);//空气质量
            } else {
                ToastUtils.showShortToast(context, "数据为空");
            }
        } else {
            tvCity.setText("查询城市失败");
            ToastUtils.showShortToast(context, CodeToStringUtils.WeatherCode(response.body().getStatus()));
        }
    }

在返回中设置城市的名称，给全局变量赋值，这样我点击15日天气预报传过去才有数据。你要知道页面渲染的步骤，当我能够点击按钮时，这个时候数据就都有了。然后请求另外三个接口方法，在返回中做处理，当然后期还会做优化，会涉及到网络状态、数据存储等地方，一步一步来，一口是吃不成胖子的。

  /**
     * 实况天气返回
     *
     * @param response
     */
    @Override
    public void getNowResult(Response<NowResponse> response) {
        if (response.body().getCode().equals(Constant.SUCCESS_CODE)) {//200则成功返回数据
            NowResponse data = response.body();
            if (data != null) {
                Typeface typeface = Typeface.createFromAsset(getAssets(), "fonts/Roboto-Light.ttf");
                tvTemperature.setText(response.body().getNow().getTemp() + "°");//温度
                tvTemperature.setTypeface(typeface);//使用字体
                tvWeatherStateTv.setText(data.getNow().getText());//天气状态文字描述
                WeatherUtil.changeIcon(ivWeather, Integer.parseInt(data.getNow().getIcon()));
                tvWindInfo.setText(data.getNow().getWindDir() + data.getNow().getWindScale() + "级");
                tvHumidity.setText(data.getNow().getHumidity() + "%");//湿度
                tvPressure.setText(data.getNow().getPressure() + "hPa");//大气压
                //今日详情
                todayDetailList.clear();
                todayDetailList.add(new TodayDetailBean(R.mipmap.icon_today_temp, data.getNow().getFeelsLike() + "°", "体感温度"));
                todayDetailList.add(new TodayDetailBean(R.mipmap.icon_today_precip, data.getNow().getPrecip() + "mm", "降水量"));
                todayDetailList.add(new TodayDetailBean(R.mipmap.icon_today_humidity, data.getNow().getHumidity() + "%", "湿度"));
                todayDetailList.add(new TodayDetailBean(R.mipmap.icon_today_pressure, data.getNow().getPressure() + "hPa", "大气压强"));
                todayDetailList.add(new TodayDetailBean(R.mipmap.icon_today_vis, data.getNow().getVis() + "KM", "能见度"));
                todayDetailList.add(new TodayDetailBean(R.mipmap.icon_today_cloud, data.getNow().getCloud() + "%", "云量"));
                TodayDetailAdapter adapter = new TodayDetailAdapter(R.layout.item_today_detail, todayDetailList);
                rvTodayDetail.setLayoutManager(new GridLayoutManager(context, 3));
                rvTodayDetail.setAdapter(adapter);
                adapter.notifyDataSetChanged();
            } else {
                ToastUtils.showShortToast(context, "暂无实况天气数据");
            }
        } else {//其他状态返回提示文字
            ToastUtils.showShortToast(context, CodeToStringUtils.WeatherCode(response.body().getCode()));
        }
    }

一些基础数据的赋值，然后组装数据到适配器中渲染。里面用到了6个小图标

icon_today_temp.png

icon_today_pressure.png

icon_today_cloud.png

icon_today_vis.png

icon_today_precip.png

icon_today_humidity.png

然后看下一个返回方法

所有在initView中初始化，当然你也可以把三行代码直接放到返回中也可以

    mSevenDailyAdapter = new SevenDailyAdapter(R.layout.item_seven_day_daily_list, dailyList);
        rvSevenDayDaily.setLayoutManager(new LinearLayoutManager(context));
        rvSevenDayDaily.setAdapter(mSevenDailyAdapter);

在返回中，

  /**
     * 未来七天天气预报数据返回
     *
     * @param response
     */
    @Override
    public void getDailyResult(Response<DailyResponse> response) {
        if (response.body().getCode().equals(Constant.SUCCESS_CODE)) {
            List<DailyResponse.DailyBean> data = response.body().getDaily();
            if (data != null && data.size() > 0) {//判空处理
                for (int i = 0; i < data.size(); i++) {
                    if (data.get(i).getFxDate().equals(DateUtils.getNowDate())) {//今天
                        dayInfo = data.get(i).getTextDay();
                        nightInfo = data.get(i).getTextNight();
                        tvUvIndex.setText(WeatherUtil.uvIndexInfo(data.get(i).getUvIndex()));//紫外线强度
                    }
                }
                dailyList.clear();//添加数据之前先清除
                dailyList.addAll(data);//添加数据
                mSevenDailyAdapter.notifyDataSetChanged();//刷新列表
            } else {
                ToastUtils.showShortToast(context, "天气预报数据为空");
            }
        } else {//异常状态码返回
            ToastUtils.showShortToast(context, CodeToStringUtils.WeatherCode(response.body().getCode()));
        }
    }

这个也是常规的操作了，相信不用说明了。下一个

  /**
     * 空气质量数据返回
     *
     * @param response
     */
    @Override
    public void getAirNowResult(Response<AirNowResponse> response) {
        dismissLoadingDialog();
        if (response.body().getCode().equals(Constant.SUCCESS_CODE)) {
            AirNowResponse.NowBean data = response.body().getNow();
            if (response.body().getNow() != null) {
                tvAir.setText("AQI " + data.getCategory());
                tvTodayInfo.setText("今天白天" + dayInfo + ",晚上" + nightInfo + "，现在" + tvTemperature.getText().toString() + "," + WeatherUtil.apiToTip(data.getCategory()));
            } else {
                ToastUtils.showShortToast(context, "空气质量数据为空");
            }
        }
    }

这个里面有一个apiToTip方法是我新增的，打开WeatherUtil，新增方法代码如下：

  /**
     * 根据api的提示转为更为人性化的提醒
     * @param apiInfo
     * @return
     */
    public static String apiToTip(String apiInfo){
        String result = null;
        String str = null;
        if(apiInfo.contains("AQI ")){
            str = apiInfo.replace("AQI ", " ");
        }else {
            str = apiInfo;
        }
        switch (str){//优，良，轻度污染，中度污染，重度污染，严重污染
            case "优":
                result = "♪(^∇^*) 空气很好。";
                break;
            case "良":
                result = "ヽ(✿ﾟ▽ﾟ)ノ 空气不错。";
                break;
            case "轻度污染":
                result = "(⊙﹏⊙) 空气有些糟糕。";
                break;
            case "中度污染":
                result = " ε=(´ο｀*)))唉 空气污染较为严重，注意防护。";
                break;
            case "重度污染":
                result = "o(≧口≦)o 空气污染很严重，记得戴口罩哦！";
                break;
            case "严重污染":
                result = "ヽ(*。>Д<)o゜ 完犊子了!空气污染非常严重，要减少出门，定期检查身体，能搬家就搬家吧！";
                break;
        }
        return result;
    }

最后在错误返回时，一般是网络很差或者没有网络是会提示你。

  /**
     * 错误返回
     */
    @Override
    public void getDataFailed() {
        ToastUtils.showShortToast(context, "连接超时，稍后尝试。");
    }

数据是有了，但是页面的一些布局效果要再修改一下。

六、页面效果优化

  <!--浮动按钮-->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/btn_auto_location"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/dp_12"
        android:layout_marginTop="@dimen/dp_20"
        android:clickable="true"
        android:src="@mipmap/icon_auto_location"
        app:backgroundTint="@color/transparent_bg_3"
        app:backgroundTintMode="screen"
        app:borderWidth="@dimen/dp_0"
        app:fabSize="mini"
        app:hoveredFocusedTranslationZ="@dimen/dp_18"
        app:pressedTranslationZ="@dimen/dp_18"
        app:rippleColor="@color/blue_one" />

修改一个activity_map_weather.xml中的浮动按钮，我改动了一下这个按钮的显示位置，现在会出现在屏幕的左上角，当然这个按钮还需要和我们的协调布局做一些效果，就是当我向上拖动底部布局时，此时如果是手动定位则浮动按钮隐藏，向下收缩则浮动按钮显示。

所在要在initView加入，上下拖动的监听。

    /*获取behavior 控制bottomsheet的 显示 与隐藏*/
        bottomSheetBehavior = BottomSheetBehavior.from(bottomSheetRay);
        /*bottomSheet 的 状态改变 根据不同的状态 做不同的事情*/
        bottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
            @Override
            public void onStateChanged(@NonNull View bottomSheet, int newState) {
                switch (newState) {
                    case BottomSheetBehavior.STATE_COLLAPSED://收缩
                        //手动定位时,收缩就要显示浮动按钮,因为这时候你可以操作地图了
                        if (markerLatitude != 0) {//自动定位
                            btnAutoLocation.show();//显示自动定位按钮
                        }
                        break;
                    case BottomSheetBehavior.STATE_EXPANDED://展开
                        //手动定位时,展开就要隐藏浮动按钮,因为这时候你是没有办法操作地图的
                        if (markerLatitude != 0) {//自动定位
                            btnAutoLocation.hide();//隐藏自动定位按钮
                        }
                        break;
                }
            }
            @Override
            public void onSlide(@NonNull View bottomSheet, float slideOffset) {
                /*slideOffset bottomSheet 的 移动距离*/
            }
        });

至此数据就写完了，来看一下运行的效果吧

这个APP还没有结束，未完待续

Android 天气APP（二十五）地图天气（下）嵌套滑动布局渲染天气数据

一、嵌套布局

二、item布局

三、适配器

四、订阅器

五、数据渲染

六、页面效果优化

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Android 天气APP（二十五）地图天气（下）嵌套滑动布局渲染天气数据

一、嵌套布局

二、item布局

三、适配器

四、订阅器

五、数据渲染

六、页面效果优化

热门文章

最新文章

相关课程

相关电子书

相关实验场景