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

最新推荐文章于 2024-08-19 15:54:05 发布

2401_84009317

最新推荐文章于 2024-08-19 15:54:05 发布

阅读量742

点赞数 13

分类专栏：程序员文章标签： android

本文链接：https://blog.csdn.net/2401_84009317/article/details/137168262

版权

程序员专栏收录该内容

269 篇文章 0 订阅

订阅专栏

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” />

</androidx.core.widget.NestedScrollView>

icon_more_gray.png

在这里插入图片描述

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

在这里插入图片描述

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

<?xml version="1.0" encoding="utf-8"?>

#C6D7F4

#FBFEF7

#ffffff

#000000

#1E1E1A

#77d034

#9FC8E9

#00000000

#22000000

#22FFFFFF

#F38A50

#FFEFD5

#454545

#BABABA

#FFBCB3

#FDEBE8

#E7F3FC

#F2F2F2

#707070

#6D6D6D

#FF0A00

#E3E5E8

#E7C373

#243440

#C8DCFF

#F8F8F8

#44000000

#66000000

#FF7E45

#B3BCCA

#22FFFFFF

#44FFFFFF

#66FFFFFF

#88FFFFFF

#56004f

#F6F6F6

#626262

#141414

#DEDEE1

#D9D9D9

#818181

#f7f8fa

#E9EAEF

#B9C0CA

#3f8DA0BA

#919191

#666666

#708090

下面是样式文件

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

<?xml version="1.0" encoding="utf-8"?>

<gradient

android:startColor=“@color/white_2”

android:centerColor=“@color/white_6”

android:endColor=“@color/white”

android:angle=“270” />

然后是shape_dash_line.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android=“http://schemas.android.com/apk/res/android”

android:shape=“line”>

<stroke

android:dashGap=“4dp”

android:dashWidth=“4dp”

android:width=“1dp”

android:color=“@color/point_color” />

然后是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

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

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” />

首先是shape_blue_8.xml

<?xml version="1.0" encoding="utf-8"?>

<gradient

android:startColor=“@color/blue_one”

android:centerColor=“@color/blue_one”

android:endColor=“#6C84DC”

android:angle=“225” />

然后是shape_purple.xml

<?xml version="1.0" encoding="utf-8"?>

<stroke android:width=“1dip”

android:color=“@color/purple” />

其他的就没有了，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”/>

<View

android:background=“@color/gray_white_2”

android:layout_width=“match_parent”

android:layout_height=“@dimen/dp_1”/>

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” />

</androidx.cardview.widget.CardView>

然后写适配器

三、适配器

在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 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 {

/**

搜索城市 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() {

@Override

public void onSuccess(Call call, Response 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() {

@Override

public void onSuccess(Call call, Response 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() {

@Override

public void onSuccess(Call call, Response 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() {

@Override

public void onSuccess(Call call, Response 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 response);

//实况天气

void getNowResult(Response response);

//天气预报 7天

void getDailyResult(Response response);

//空气质量

void getAirNowResult(Response response);

//错误返回

void getDataFailed();

}

五、数据渲染

打开MapWeatherActivity，

在这里插入图片描述

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

@Override

protected MapWeatherContract.MapWeatherPresenter createPresent() {

return new MapWeatherContract.MapWeatherPresenter();

}

/**

搜索城市返回
@param response

@Override

public void getNewSearchCityResult(Response response) {

}

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则近万的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：Android）

最后

代码真的是重质不重量，质量高的代码，是当前代码界提倡的，当然写出高质量的代码肯定需要一个相当高的专业素养，这需要在日常的代码书写中逐渐去吸收掌握，谁不是每天都在学习呀，目的还不是为了一个，为实现某个功能写出高质量的代码。

所以，长征路还长，大家还是好好地做个务实的程序员吧。

最后，小编这里有一系列Android提升学习资料，有兴趣的小伙伴们可以来看下哦~

《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门即可获取！

图片描述](https://i-blog.csdnimg.cn/blog_migrate/bdbb67691f033c2f375b443bdd8b992a.png#pic_center)

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

@Override

protected MapWeatherContract.MapWeatherPresenter createPresent() {

return new MapWeatherContract.MapWeatherPresenter();

}

/**

搜索城市返回
@param response

@Override

public void getNewSearchCityResult(Response response) {

}

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

[外链图片转存中…(img-bz2CeSev-1711767560146)]

[外链图片转存中…(img-8qGbG4Mo-1711767560147)]

[外链图片转存中…(img-I7iKrCax-1711767560147)]

[外链图片转存中…(img-ygqib0sA-1711767560147)]

[外链图片转存中…(img-pTdnhiCt-1711767560147)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：Android）

最后

所以，长征路还长，大家还是好好地做个务实的程序员吧。

最后，小编这里有一系列Android提升学习资料，有兴趣的小伙伴们可以来看下哦~

《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门即可获取！

2401_84009317

关注

13
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
Android 天气APP（二十五）地图天气（下）嵌套滑动布局渲染天气数据

代码真的是重质不重量，质量高的代码，是当前代码界提倡的，当然写出高质量的代码肯定需要一个相当高的专业素养，这需要在日常的代码书写中逐渐去吸收掌握，谁不是每天都在学习呀，目的还不是为了一个，为实现某个功能写出高质量的代码。所以，长征路还长，大家还是好好地做个务实的程序员吧。最后，小编这里有一系列Android提升学习资料，有兴趣的小伙伴们可以来看下哦~《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门即可获取！
复制链接

扫一扫