专栏首页Android、鸿蒙开发Android 天气APP(二十三)增加灾害预警、优化主页面UI

Android 天气APP(二十三)增加灾害预警、优化主页面UI

文章目录

  • 效果图
  • 前言
  • 一、灾害预警
    • 1.数据实体
    • 2.新增API和方法
    • 3.数据渲染
    • 4.灾害预报详情
  • 二、UI优化
    • 1.主页面布局优化
  • 总结

效果图


前言

天气预报光有普通天气总感觉好少了点什么,所以和风天气给不上了,那就是灾害天气的预警,灾害预警API可以获取指定城市的极端天气预警数据。


一、灾害预警

首先当然是从API下手了。测试API地址如下:

https://devapi.heweather.net/v7/warning/now?key=3086e91d66c04ce588a7f538f917c7f4&location=101200106

随便打开一个网页,复制进去回车你就能拿到返回数据,还是比较简单的。

1.数据实体

通过这些数据生成一个实体bean,在app的bean包下新建一个WarningResponse

代码如下:

package com.llw.goodweather.bean;

import java.util.List;

public class WarningResponse {

    /**
     * code : 200
     * updateTime : 2020-08-14T10:10+08:00
     * fxLink : http://hfx.link/2fh5
     * warning : [{"id":"23062241600000_20200813132751","sender":"肇源县气象局","pubTime":"2020-08-13T13:28+08:00","title":"肇源县气象局发布大风蓝色预警[IV级/一般]","startTime":"2020-08-13T13:30+08:00","endTime":"2020-08-14T13:30+08:00","status":"active","level":"蓝色","type":"11B06","typeName":"大风","text":"肇源县气象台2020年8月13日13时28分发布大风蓝色预警信号:预计未来24小时肇源县受大风影响,平均风力可达5-6级,阵风可达7-8级,请有关单位和个人注意做好预防工作。防御指南:1.政府及相关部门按照职责做好防大风工作;2.关好门窗,加固围板、棚架、广告牌等易被风吹动的搭建物,妥善安置易受大风影响的室外物品,遮盖建筑物资;3.行人注意尽量少骑自行车,刮风时不要在广告牌、临时搭建物等下面逗留;4.有关部门和单位请注意森林、草原防火等防火,个人请注意室外和野外用火安全。             ","related":""}]
     * refer : {"sources":["12379","Weather China"],"license":["no commercial use"]}
     */

    private String code;
    private String updateTime;
    private String fxLink;
    private ReferBean refer;
    private List<WarningBean> warning;

    public String getCode() {
        return code;
    }

    public void setCode(String code) {
        this.code = code;
    }

    public String getUpdateTime() {
        return updateTime;
    }

    public void setUpdateTime(String updateTime) {
        this.updateTime = updateTime;
    }

    public String getFxLink() {
        return fxLink;
    }

    public void setFxLink(String fxLink) {
        this.fxLink = fxLink;
    }

    public ReferBean getRefer() {
        return refer;
    }

    public void setRefer(ReferBean refer) {
        this.refer = refer;
    }

    public List<WarningBean> getWarning() {
        return warning;
    }

    public void setWarning(List<WarningBean> warning) {
        this.warning = warning;
    }

    public static class ReferBean {
        private List<String> sources;
        private List<String> license;

        public List<String> getSources() {
            return sources;
        }

        public void setSources(List<String> sources) {
            this.sources = sources;
        }

        public List<String> getLicense() {
            return license;
        }

        public void setLicense(List<String> license) {
            this.license = license;
        }
    }

    public static class WarningBean {
        /**
         * id : 23062241600000_20200813132751
         * sender : 肇源县气象局
         * pubTime : 2020-08-13T13:28+08:00
         * title : 肇源县气象局发布大风蓝色预警[IV级/一般]
         * startTime : 2020-08-13T13:30+08:00
         * endTime : 2020-08-14T13:30+08:00
         * status : active
         * level : 蓝色
         * type : 11B06
         * typeName : 大风
         * text : 肇源县气象台2020年8月13日13时28分发布大风蓝色预警信号:预计未来24小时肇源县受大风影响,平均风力可达5-6级,阵风可达7-8级,请有关单位和个人注意做好预防工作。防御指南:1.政府及相关部门按照职责做好防大风工作;2.关好门窗,加固围板、棚架、广告牌等易被风吹动的搭建物,妥善安置易受大风影响的室外物品,遮盖建筑物资;3.行人注意尽量少骑自行车,刮风时不要在广告牌、临时搭建物等下面逗留;4.有关部门和单位请注意森林、草原防火等防火,个人请注意室外和野外用火安全。             
         * related :
         */

        private String id;
        private String sender;
        private String pubTime;
        private String title;
        private String startTime;
        private String endTime;
        private String status;
        private String level;
        private String type;
        private String typeName;
        private String text;
        private String related;

        public String getId() {
            return id;
        }

        public void setId(String id) {
            this.id = id;
        }

        public String getSender() {
            return sender;
        }

        public void setSender(String sender) {
            this.sender = sender;
        }

        public String getPubTime() {
            return pubTime;
        }

        public void setPubTime(String pubTime) {
            this.pubTime = pubTime;
        }

        public String getTitle() {
            return title;
        }

        public void setTitle(String title) {
            this.title = title;
        }

        public String getStartTime() {
            return startTime;
        }

        public void setStartTime(String startTime) {
            this.startTime = startTime;
        }

        public String getEndTime() {
            return endTime;
        }

        public void setEndTime(String endTime) {
            this.endTime = endTime;
        }

        public String getStatus() {
            return status;
        }

        public void setStatus(String status) {
            this.status = status;
        }

        public String getLevel() {
            return level;
        }

        public void setLevel(String level) {
            this.level = level;
        }

        public String getType() {
            return type;
        }

        public void setType(String type) {
            this.type = type;
        }

        public String getTypeName() {
            return typeName;
        }

        public void setTypeName(String typeName) {
            this.typeName = typeName;
        }

        public String getText() {
            return text;
        }

        public void setText(String text) {
            this.text = text;
        }

        public String getRelated() {
            return related;
        }

        public void setRelated(String related) {
            this.related = related;
        }
    }
}

2.新增API和方法

打开ApiService

新增了一个api接口,然后进入WeatherContract中,新增请求方法和返回

然后进入到MainActivity中增加

完成到这里,然后做数据的请求,在搜索城市的返回值中获取id,然后写入请求。

3.数据渲染

然后在返回的地方做数据的展示处理就可以了。先进入到activity_main.xml中,增加一个TextView,这个TextView做了一个简单的自定义修改,在mvplibrary下的view包下新建一个MarqueeTextView,然后继承TextView,代码如下:

package com.llw.mvplibrary.view;

import android.annotation.SuppressLint;
import android.content.Context;
import android.util.AttributeSet;
import android.widget.TextView;

import androidx.annotation.Nullable;

@SuppressLint("AppCompatCustomView")
public class MarqueeTextView extends TextView {
    public MarqueeTextView(Context context) {
        super(context);
    }

    public MarqueeTextView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public MarqueeTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    public boolean isFocused() {
        return true;
    }
}

然后在布局中使用。

注意我放的位置,是在星期的上面,这个布局也要算在滑动的高度计算里面

<!--灾害预警-->
<com.llw.mvplibrary.view.MarqueeTextView
     android:id="@+id/tv_warn"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_marginStart="@dimen/dp_16"
     android:layout_marginEnd="@dimen/dp_16"
     android:ellipsize="marquee"
     android:marqueeRepeatLimit="marquee_forever"
     android:paddingTop="@dimen/dp_4"
     android:paddingBottom="@dimen/dp_4"
     android:singleLine="true"
     android:textColor="@color/white"
     android:textSize="@dimen/sp_12" />

android:marqueeRepeatLimit="marquee_forever"表示一直滚动 android:singleLine="true"表示单行 android:ellipsize="marquee"这里设置为超出文本后滚动显示

在MainActivity中声明

在返回值中做显示处理

这个灾害预警是存在没有数据的情况,所以没有数据的时候就隐藏掉这个TextView,这个我要说明一下不是所有城市都有灾害预警的,看你的运行了,如果没有数据你得到的返回就是这样的。

{
    "code": "200",
    "updateTime": "2020-08-14T10:59+08:00",
    "fxLink": "http://hfx.link/1u0z5",
    "warning": [],
    "refer": {
        "sources": [
            "12379",
            "Weather China"
        ],
        "license": [
            "no commercial use"
        ]
    }
}

这个我还特地问过和风那边是怎么回事,他们是这样回复我的。

如果你查询的城市预警信息返回为空,则代表这个城市当前没有预警信息。你也可以通过预警城市列表获得当前所有发生预警的城市id。即如果你想知道现在深圳市是否有预警,可以直接访问深圳市的预警信息,返回为空则当前无预警,或者访问预警城市列表,如果深圳城市id不在这个列表中,也代表当前深圳无预警。 他这里提到的预警城市列表,你可以用这个请求地址去获取,

https://devapi.heweather.net/v7/warning/list?range=cn&key=3086e91d66c04ce588a7f538f917c7f4

返回值就是当前有灾害预警的城市id列表,但是这个里面如果没有你当前定位到的城市的id,那你这个城市就没有灾害预警的信息,当然你想看数据的话,可以这样。下面我用这个101200106来演示这些数据。否则不够直观。

先这样赋值,然后你现在就可以运行了。

OK,效果就是上面那样,下面要做这个点击之后打开详情页面

4.灾害预报详情

在app下的ui包中新建一个WarnActivity,页面的布局如下:

<?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:background="@drawable/img_6"
    android:fitsSystemWindows="true"
    android:orientation="vertical"
    tools:context=".ui.WarnActivity">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:contentInsetLeft="@dimen/dp_16"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navigationIcon="@mipmap/icon_return_white"
        app:popupTheme="@style/AppTheme.PopupOverlay">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="灾害预警详情"
            android:textColor="@color/white"
            android:textSize="@dimen/sp_18" />
    </androidx.appcompat.widget.Toolbar>

    <androidx.recyclerview.widget.RecyclerView
        android:paddingTop="@dimen/dp_10"
        android:id="@+id/rv"
        android:overScrollMode="never"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

布局很简单就是一个标题和一个列表。 然后创建item的布局,在layout下新建一个item_warn_list.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"
    android:layout_marginBottom="@dimen/dp_10"
    android:layout_marginLeft="@dimen/dp_20"
    android:layout_marginRight="@dimen/dp_20"
    android:background="@drawable/shape_transparent_12"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    android:padding="@dimen/dp_20">

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

    <TextView
        android:id="@+id/tv_type_name_and_level"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/dp_8"
        android:text="预警类型"
        android:textColor="@color/white"
        android:textSize="@dimen/sp_14" />

    <TextView
        android:id="@+id/tv_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/dp_12"
        android:text="预警详细内容"
        android:textColor="@color/white"
        android:textSize="@dimen/sp_14" />

    <TextView
        android:id="@+id/tv_time"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/dp_8"
        android:gravity="right"
        android:text="预警发布时间"
        android:textColor="@color/white"
        android:textSize="@dimen/sp_12" />

</LinearLayout>

也是比较的简单。 然后就要建适配器了,但是这个用内部类来解决好了。 在WarnActivity中,写入

	/**
     * 内部适配器
     */
    public class WarnAdapter extends BaseQuickAdapter<WarningResponse.WarningBean, BaseViewHolder> {

        public WarnAdapter(int layoutResId, @Nullable List<WarningResponse.WarningBean> data) {
            super(layoutResId, data);
        }

        @RequiresApi(api = Build.VERSION_CODES.O)
        @Override
        protected void convert(BaseViewHolder helper, WarningResponse.WarningBean item) {

            TextView tvTime = helper.getView(R.id.tv_time);
            String time = DateUtils.updateTime(item.getPubTime());
            tvTime.setText("预警发布时间:" + WeatherUtil.showTimeInfo(time) + time);

            helper.setText(R.id.tv_city, item.getSender())//地区
                    .setText(R.id.tv_type_name_and_level,
                            item.getTypeName() + item.getLevel() + "预警")//预警类型名称和等级
                    .setText(R.id.tv_content, item.getText());//预警详情内容

        }
    }

这段代码和onCreate是平级的。现在就要考虑数据的来源了,因为我们是在MainActivity中做请求的,但是详情数据在WarnActivity中显示,所以要先把数据传过来。 回到MainActivity,定义一个全局变量

private String warnBodyString = null;//灾害预警数据字符串

然后在返回值中将实体转换为JSON字符串,

再点击时传递到WarnActivity。

进入到WarnActivity,先继承BaseActivity,然后实现两个构造方法。将布局复制到getLayoutId的返回中,删掉onCreate方法。 然后在initData方法中实例化适配器,并填入数据

	@RequiresApi(api = Build.VERSION_CODES.O)
    @Override
    public void initData(Bundle savedInstanceState) {
        StatusBarUtil.transparencyBar(context);//透明状态栏
        Back(toolbar);
        WarningResponse data = new Gson().fromJson(getIntent().getStringExtra("warnBodyString"), WarningResponse.class);
        WarnAdapter mAdapter = new WarnAdapter(R.layout.item_warn_list,data.getWarning());
        rv.setLayoutManager(new LinearLayoutManager(context));
        rv.setAdapter(mAdapter);
        mAdapter.notifyDataSetChanged();
        runLayoutAnimation(rv);
    }

大功告成,运行一下。

完成后别忘了,将之前那个locationId = "101200106"改成 locationId = response.body().getLocation().get(0).getId();//城市Id

二、UI优化

1.主页面布局优化

打开activity_main.xml

请根据这种图来修改。然后看一下ImageView的内容

	<ImageView
        android:id="@+id/bg"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/img_5"
        android:scaleType="centerCrop" />

回到MainActivity中,修改

改成ImageView。

获取缓存时

必应返回时。然后运行,看起来就会舒服一些。

因为我用的是每日一图,所以就不会是默认的背景。

总结

总的来说还是不错的,我本意还是不希望一篇文章过长,否则会显得很乱,没有条理性,所以这篇文章也就要结束了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Android 天气APP(十二)空气质量、UI优化调整

    这个空气质量包含的就是一些常规的空气指数,比如PM2.5、PM10等数据,相信任何天气APP都会有这些数据,所以我也加上去吧,并且修改一些UI。

    晨曦_LLW
  • Android 天气APP(五)天气预报、生活指数的数据请求与渲染

    天气预报是预测未来几天的天气,常用列表显示,实现这个功能的业务逻辑是:访问API、获取返回值、列表配置、数据渲染。首先是API接口。

    晨曦_LLW
  • Android 天气APP(十五)增加城市搜索、历史搜索记录

    看这篇文章之前,你是否是一路看过来的呢?如果你单独看着一篇的话,有些内容你可能看不懂,所以我建议你一篇一篇的看,这是第十五篇文章了,前面还有十四篇,建议先了解一...

    晨曦_LLW
  • 手把手教你从零开始做一个好看的 APP - Day four

    本文为 手把手教你从零开始做一个好看的 APP - Day four ,如果想看该系列的其他文章,请点击以下连接

    developerHaoz
  • Android WebView交互传递json字符串并解析的方法

    我们大家都知道WebView交互中可以传递基本数据类型的数据值,比如常用的int,String.

    砸漏
  • Android viewpager自动轮播和小圆点联动效果

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下

    砸漏
  • 一个实例学习Kotlin 开发 Android App 的全过程(内有代码)

    自 Google I/O 大会,Google 正式宣布 Kotlin 成为 Android 开发的官方语言的五个月以来,不少开发团队都开始使用 Kotlin 对...

    IT派
  • Android DataBinding & MVVM

    先说说两者的关系,DataBinding是一个实现数据和UI绑定的框架,而MVVM是一种架构模式,实现MVVM模式需要借助DataBinding来完成。

    用户2802329
  • 通过GET方式传递数据给服务器

    自动生成的ServerGET.java中有 @WebServlet(“/ServerGET”) 所以web.xml就不需要配置了

    提莫队长
  • Android中ContentProvider的用法

    在Android中,如果要将一个程序的数据共享给另一个程序,在之前的Android版本,我们可以设置Android文件和SharedPreferences操作的...

    指点

扫码关注云+社区

领取腾讯云代金券