AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2022-10-12 274
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Android 天气APP（二十一）滑动改变UI、增加更多天气数据展示，最多未来15天天气预报

前言


 写APP是有很多细节需要处理的，这些细节可以提高你的APP的使用概率。这已经是第二十一篇文章了，我的目标是每一篇都有内容可以讲，不会让你觉得我是虚假内容，我真的看不惯很多的标题党，点进去一看只有一个单词，Mark,最坑爹的是居然有5000多访问量，就是靠标题吸引别人过去，看过的估计都要骂一两句，我都是直接举报的，虚假内容，浪费别人时间，好了，开始吧。


效果图


20200731101303265.gif

image.gif


正文


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


一、滑动改变UI


修改布局activity_main.xml


20200731092702591.png


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


20200731092831891.png


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


20200731092954605.png


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

下面进入到MainActivity


20200731093511798.png


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


20200731094057639.png


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


2020073109422939.png


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

注解。


20200731094956495.png


实现构造方法


20200731095108327.png


指定


20200731095352908.png


然后在滑动监听里面写入


  /**
     * 滑动监听
     * @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("城市天气");//改回原来的
            }
        }
    }


运行效果如下：


20200731101303265.gif

image.gif


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


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

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


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


20200805155957457.png


更多空气质量


20200807171610458.png


更多生活质量数据


20200807171727737.png


在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="@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>


效果如下图所示


20200807172614518.png


背景图片在上面的网盘地址提取就可以了。或者去Github上下载我的源码也可以。


现在列表已经有了，然后就是item了，


在这之前先在mvplibrary下的colors.xml中新增几个颜色


  <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

<?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，代码如下：

<?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>


20200807173557149.png


下面在app的adapter包下新建一个MoreDailyAdapter,


代码如下：

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里面补上

  //时间截取
    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，代码如下：


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代码如下：


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，代码如下，


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中，新增如下方法



/**
     * 进入更多数据页面
     * @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);
        }
    }


然后


20200807175918801.png


在点击的时候调用这个方法，传入要进入的Activity即可。


好了，下面运行一下吧。


20200807175553985.gif


文章标签：
Android开发
API
关键词：
APP android
UI天气预报
Android UI
UI滑动
Android数据
初学者-Study
目录
相关文章
SoraLuna
|
16天前
「Mac畅玩鸿蒙与硬件46」UI互动应用篇23 - 自定义天气预报组件
本篇将带你实现一个自定义天气预报组件。用户可以通过选择不同城市来获取相应的天气信息，页面会显示当前城市的天气图标、温度及天气描述。这一功能适合用于动态展示天气信息的小型应用。
SoraLuna
116 38
优雅草央千澈
|
6天前
|
存储 监控 API
app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
优雅草央千澈
27 11
SoraLuna
|
2月前
|
UED
「Mac畅玩鸿蒙与硬件28」UI互动应用篇5 - 滑动选择器实现
本篇将带你实现一个滑动选择器应用，用户可以通过滑动条选择不同的数值，并实时查看选定的值和提示。这是一个学习如何使用 Slider 组件、状态管理和动态文本更新的良好实践。
SoraLuna
47 1
东方睿赢
|
6月前
|
XML 自然语言处理 Android开发
🌐Android国际化与本地化全攻略！让你的App走遍全球无障碍！🌍
【7月更文挑战第28天】在全球化背景下，实现Android应用的国际化与本地化至关重要 for 用户基础扩展。本文通过旅游指南App案例，介绍全攻略。步骤包括资源文件拆分与命名、适配布局与方向、处理日期时间及货币格式、考虑文化习俗及进行详尽测试。采用Android Studio支持，创建如`res/values-en/strings.xml`等多语言资源文件夹，使用灵活布局解决文本长度差异问题，并通过用户反馈迭代优化。最终，打造一款能无缝融入全球各地文化的App。
东方睿赢
227 3
虫无涯
|
2月前
|
Java 测试技术 持续交付
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
本文重点讲解如何搭建App自动化测试框架的思路，而非完整源码。主要内容包括实现目的、框架设计、环境依赖和框架的主要组成部分。适用于初学者，旨在帮助其快速掌握App自动化测试的基本技能。文中详细介绍了从需求分析到技术栈选择，再到具体模块的封装与实现，包括登录、截图、日志、测试报告和邮件服务等。同时提供了运行效果的展示，便于理解和实践。
虫无涯
123 4
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
朝阳39
|
6月前
|
前端开发
Element UI 【实战】纯前端对表格数据进行增删改查（内含弹窗表单、数据校验、时间日期格式）
Element UI 【实战】纯前端对表格数据进行增删改查（内含弹窗表单、数据校验、时间日期格式）
朝阳39
243 6
游客veosfcjqgbbjq
|
4月前
|
开发工具
uniapp, 短剧视频类App实现参考，支持滑动播放，仿抖音 仿陌陌 短视频 无限滑动播放 视频流
阿里云点播服务web播放器sdk，短剧视频类App实现参考。仿抖音 仿陌陌 短视频 无限滑动播放 视频流。无uniapp video 原生组件的层级、遮挡、覆盖问题，适合与不同功能视图组合使用，实现丰富的应用功能。
游客veosfcjqgbbjq
163 2
uniapp, 短剧视频类App实现参考，支持滑动播放，仿抖音 仿陌陌 短视频 无限滑动播放 视频流
明弟有理想
|
3月前
|
存储 前端开发 UED
uni-app:icon&修改tabber&unu-ui (四)
本文介绍了如何从阿里巴巴下载矢量图标并使用 `iconfont`，包括创建项目、下载文件、引入 `font.css` 到项目中以及在 `app.vue` 中引用的方法。同时，还详细说明了如何修改 `tabbar` 的样式和配置，以及如何在项目中导入和使用 `uni-ui` 组件库，包括简单的弹出框 `popup` 和带有头部或尾部图标的输入框 `input`。
明弟有理想
108 0
土木林森
|
4月前
|
移动开发 定位技术 Android开发
「揭秘高效App的秘密武器」：Kotlin Flow携手ViewModel，打造极致响应式UI体验，你不可不知的技术革新！
【9月更文挑战第12天】随着移动开发领域对响应式编程的需求增加，管理应用程序状态变得至关重要。Jetpack Compose 和 Kotlin Flow 的组合提供了一种优雅的方式处理 UI 状态变化，简化了状态管理。本文探讨如何利用 Kotlin Flow 增强 ViewModel 功能，构建简洁强大的响应式 UI。
土木林森
66 3
aliyun8599273441-30642
|
4月前
|
存储 缓存 搜索推荐
打造个性化天气应用：Android 平台上的天气预报小助手
【9月更文挑战第2天】在这篇文章中，我们将一起探索如何从零开始构建一个简单却功能强大的天气应用。通过这个指南，你将学会如何在 Android 平台上使用 Java 编程语言和相关 API 来创建你自己的天气预报小助手。文章不仅提供了代码示例，还深入讨论了设计思路、用户界面优化以及数据管理等关键方面，旨在帮助初学者理解并实现一个完整的应用项目。
aliyun8599273441-30642
141 1

热门文章

最新文章

  • 1
    从0开始打造一款APP：前端+搭建本机服务，定制暖冬卫衣先到先得
  • 2
    上千人挑战，用通义灵码从 0 开始打造一款 App 爆火 | 第二课：搭建本机服务
  • 3
    【Azure Function App】Azure Function 从.Net6 升级到 .Net8 后 Function出现运行时版本错误
  • 4
    完成 100个降噪蓝牙耳机免费领，用通义灵码从 0 开始打造一个完整APP
  • 5
    利用python淘宝/天猫获得淘宝app商品详情原数据 API
  • 6
    uni-vue3-wetrip自创跨三端(H5+小程序+App)酒店预订app系统模板
  • 7
    为什么不加盟线下陪玩APP小程序平台，而是自建平台？
  • 8
    HarmonyOS NEXT 5.0鸿蒙开发一套影院APP（附带源码）
  • 9
    uni-app开发AI康复锻炼小程序，帮助肢体受伤患者康复！
  • 1
    构建高效Android应用：探究Kotlin协程的优化实践
    63
  • 2
    鸿蒙HarmonyOS 与 Android 的NDK有什么区别？
    438
  • 3
    Android应用开发：实现自定义View的高效绘制
    82
  • 4
    构建高效Android应用：Kotlin协程的实践与优化
    74
  • 5
    构建高效Android应用：Kotlin协程的实践指南
    83
  • 6
    jenkins编译H5做的android端编译卫士app记录
    61
  • 7
    利用Bundle实现Android Activity间消息的传递
    64
  • 8
    Intent在Android中的几种用法
    99
  • 9
    Android如何在Activity和Service之间传递数据
    321
  • 10
    android TextView HTML 的效果
    50

    • 相关课程

    更多
  • 开源Android容器化框架Atlas开发者指南
  • 互联网安全-移动APP漏洞风险与解决方案

    • 相关电子书

    更多
  • 使用TensorFlow搭建智能开发系统自劢生成App UI代码
  • Fusion Design - 企业级UI解决方案揭秘
  • 使用TensorFlow搭建智能开发系统自动生成App UI

    • 相关实验场景

    更多
  • 星轨-钉钉APP分发实训
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月