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

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

效果图


image.gif



前言


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


一、灾害预警


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


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


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


20200814161829356.png


1.数据实体


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


20200814162422745.png



代码如下:

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


20200814162747686.png


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


2020081416295054.png

20200814163018837.png


然后进入到MainActivity中增加


20200814163144606.png


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


3.数据渲染


20200814163403991.png


然后在返回的地方做数据的展示处理就可以了。先进入到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;
    }
}


然后在布局中使用。


20200814163852821.png


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


<!--灾害预警-->
<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中声明


20200814164438613.png


在返回值中做显示处理


20210228121630838.png


这个灾害预警是存在没有数据的情况,所以没有数据的时候就隐藏掉这个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来演示这些数据。否则不够直观。


20200814165346704.png


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


20200814165603597.gif


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;//灾害预警数据字符串

20210228121716104.png


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


20200814171149737.png


再点击时传递到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);
    }


大功告成,运行一下。


image.gif


完成后别忘了,将之前那个locationId = "101200106"改成

locationId = response.body().getLocation().get(0).getId();//城市Id

二、UI优化


1.主页面布局优化


打开activity_main.xml


20200814173003934.png



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


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


20200814173149268.png


回到MainActivity中,修改


20200814173257164.png


改成ImageView。


20200814173343104.png


获取缓存时


20200814173412763.png


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


20200814173645753.png


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


总结


总的来说还是不错的,我本意还是不希望一篇文章过长,否则会显得很乱,没有条理性,所以这篇文章也就要结束了。如果你有兴趣的话可以继续往下看


相关文章
|
2天前
|
Android开发 移动开发 小程序
binder机制原理面试,安卓app开发教程
binder机制原理面试,安卓app开发教程
binder机制原理面试,安卓app开发教程
|
1天前
|
缓存 程序员 定位技术
Android Studio 插件,那些被大厂优化的程序员们
Android Studio 插件,那些被大厂优化的程序员们
|
1天前
|
设计模式 算法 前端开发
Android面经分享,失业两个月,五一节前拿到Offer,设计思想与代码质量优化+程序性能优化+开发效率优化
Android面经分享,失业两个月,五一节前拿到Offer,设计思想与代码质量优化+程序性能优化+开发效率优化
|
2天前
|
移动开发 监控 Android开发
构建高效安卓应用:Kotlin 协程的实践与优化
【5月更文挑战第16天】 在移动开发领域,性能优化一直是开发者们追求的重要目标。特别是对于安卓平台来说,由于设备多样性和系统资源的限制,如何提升应用的响应性和流畅度成为了一个关键议题。近年来,Kotlin 语言因其简洁、安全和高效的特点,在安卓开发中得到了广泛的应用。其中,Kotlin 协程作为一种轻量级的并发解决方案,为异步编程提供了强大支持,成为提升安卓应用性能的有效手段。本文将深入探讨 Kotlin 协程在安卓开发中的应用实践,以及通过合理设计和使用协程来优化应用性能的策略。
17 8
|
3天前
|
Java 开发工具 Android开发
Android mk 集成app
Android mk 集成app
14 5
|
3天前
|
缓存 移动开发 Android开发
Android 应用性能优化实践
【5月更文挑战第15天】 在移动开发领域,应用的性能直接关系到用户体验和产品的市场表现。特别是对于安卓平台,设备的多样性和应用生态环境的复杂性使得性能优化成为开发者的一项重要技能。本文将深入探讨针对安卓应用的性能瓶颈识别、分析方法以及具体的优化策略,旨在为开发者提供一套实用的性能提升解决方案。
|
3天前
|
移动开发 测试技术 Android开发
构建高效Android应用:从优化用户体验到提升性能表现
【5月更文挑战第15天】 在移动开发领域,一个成功的Android应用不仅需要具备吸引用户的功能,更应提供流畅和高效的用户体验。随着技术的不断进步,开发者面临着将先进技术集成到现有架构中以提高应用性能的挑战。本文将深入探讨如何通过最新的Android框架和工具来优化应用性能,包括对UI的响应性、内存管理以及多线程处理等关键方面的改进,旨在帮助开发者构建出更加强大、快速且稳定的Android应用。
|
3天前
|
缓存 Android开发 UED
构建高效Android应用:从优化用户体验到提升性能
【5月更文挑战第15天】 在移动开发领域,构建一个高效的Android应用不仅仅意味着实现功能,还要确保流畅的用户体验和出色的性能。本文将深入探讨如何通过界面优化、代码整洁、资源管理和多线程处理等技术手段来提升Android应用的整体效率。我们将透过实际案例,揭示常见性能瓶颈的成因,并提供相应的解决方案。此外,文章还会涵盖最新的Android Studio工具和Lint检查的使用,帮助开发者早期发现潜在问题。
|
3天前
|
缓存 Java Android开发
Android应用性能优化实战
【5月更文挑战第14天】 在竞争激烈的应用市场中,一个流畅、高效的应用能显著提升用户体验并增强用户黏性。本文深入探讨了针对安卓平台进行应用性能优化的策略与实践,从内存管理到多线程处理,再到布局渲染和网络请求的优化,旨在为开发者提供一套全面的优化工具箱。通过分析常见的性能瓶颈并结合最新的Android技术动态,我们不仅讨论理论,还将分享具体的代码示例和改进方法,帮助开发者在实际应用中实现性能提升。
|
3天前
|
前端开发 JavaScript 程序员
一个成都七中的初中生,出于兴趣爱好实现的 Win12 UI 页面效果,佩服佩服
一个成都七中的初中生,出于兴趣爱好实现的 Win12 UI 页面效果,佩服佩服
14 0