本市天气(百度定位与车联网之天气查询)(三)

简介: 本市天气(百度定位与车联网之天气查询)(三)

6.渐变动画和缩放动画


我们打开网易新闻APP,我们发现它是渐变出现的,并且,当整个布局出现后,布局中的六个按钮才开始缩放。


下面我们看看渐变动画的代码:


这个是渐变显示weather_layout_alpha_show_anim.xml的代码:

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:duration="500"
        android:fromAlpha="0.0"
        android:toAlpha="1.0"/>
</set>


这个是渐变隐藏weather_layout_alpha_hide_anim.xml的代码:

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:duration="500"
        android:fromAlpha="1.0"
        android:toAlpha="0.0"/>
</set>


一个是从开始没有到有,一个是从有到没有。


按钮的缩放动画weather_layout_scale_anim.xml如下:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:duration="500"
        android:startOffset="500"
        android:fillAfter="false"
        android:fromXScale="0.0"
        android:toXScale="1.1"
        android:fromYScale="0.0"
        android:toYScale="1.1"
        android:pivotX="50%"
        android:pivotY="50%"/>
</set>

解释:


①因为按钮缩放动画是布局渐变动画后才开始动画的所以添加了android:startOffset="500"在渐变动画半秒执行完成后,缩放动画立即执行。


②因为按钮缩放动画都缩放为原来大小的1.1倍,所以当动画执行完成后,要恢复按钮原来的大小也就是1.0,所以android:fillAfter="false"。


③pivotX="50%",pivotY="50%",从自己的中间部分开始缩放,默认是从控件左上角(0,0)开始缩放的。如果不设置这个属性,就和网易客户端的动画不同了。


下面是执行动画了,这里有上篇文章讲解的一个动画漏洞,还请认真阅读一下。


NewsFragment.class添加天气的成员变量:

//天气代码片段
private LinearLayout weatherLayout;//天气界面整体布局
//六个按钮
private LinearLayout weatherSearchLayout;
private LinearLayout weatherHeadlineLayout;
private LinearLayout weatherOfflineLayout;
private LinearLayout weatherThemeLayout;
private LinearLayout weatherScanLayout;
private LinearLayout weatherInvitationLayout;
//显示和隐藏天气界面的按钮,也就是标题栏上面的三个点
private ImageButton weatherBut;
//标记界面是显示还是隐藏,使按钮点击显示和关闭
private boolean weatherDialogFlag = false;


接着在onCreateView()方法中添加如下代码:


//天气代码片段
this.weatherLayout = (LinearLayout) view.findViewById(R.id.weather_layout_main);
this.weatherSearchLayout = (LinearLayout) view.findViewById(R.id.weather_layout_search);
this.weatherHeadlineLayout = (LinearLayout) view.findViewById(R.id.weather_layout_headline);
this.weatherOfflineLayout = (LinearLayout) view.findViewById(R.id.weather_layout_offline);
this.weatherThemeLayout = (LinearLayout) view.findViewById(R.id.weather_layout_theme);
this.weatherScanLayout = (LinearLayout) view.findViewById(R.id.weather_layout_scan);
this.weatherInvitationLayout = (LinearLayout) view.findViewById(R.id.weather_layout_invitation);
this.weatherBut = (ImageButton) view.findViewById(R.id.weather);
final Animation alphaShow = AnimationUtils.loadAnimation(getActivity(), R.anim.weather_layout_alpha_show_anim);
final Animation alphaHide = AnimationUtils.loadAnimation(getActivity(), R.anim.weather_layout_alpha_hide_anim);
final Animation scaleAnim = AnimationUtils.loadAnimation(getActivity(), R.anim.weather_layout_scale_anim);
this.weatherBut.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        if (weatherDialogFlag == false) {
            weatherLayout.setAnimation(alphaShow);
            alphaShow.start();//显示天气界面
            weatherLayout.setVisibility(View.VISIBLE);
            weatherDialogFlag = true;//标记界面已经显示
            //立即执行按钮缩放动画
            weatherSearchLayout.startAnimation(scaleAnim);
            weatherHeadlineLayout.setAnimation(scaleAnim);
            weatherOfflineLayout.startAnimation(scaleAnim);
            weatherThemeLayout.startAnimation(scaleAnim);
            weatherScanLayout.startAnimation(scaleAnim);
            weatherInvitationLayout.startAnimation(scaleAnim);
            showWeather(view);
        } else {
            weatherLayout.setAnimation(alphaHide);
            alphaHide.start();//执行渐变隐藏动画
            weatherLayout.setVisibility(View.GONE);
            weatherDialogFlag = false;//标记界面没有显示
        }
    }
});


这里界面动画使用的是setAnimation与Animation.start()而按钮使用的是startAnimation();你可以把按钮的换成前面那种方法,你会发现,打开关闭界面后,按钮渐变动画只执行一次后就不会在执行了。而上面那个渐变动画却可以执行,这是为什么呢?


下面我们按住Ctrl点击setAnimation进去该方法中,得到如下图所示的信息:


16.png


这个执行是有条件的,当屏幕打开时,会导致动画开始。也就是说start()出来的动画执行是有前提条件的。


所以当我们需要反复执行动画,或者说,你想立即动画就有效果的话,就优先使用startAnimation()方法吧。


7.设置天气界面


我们查看日志,看看我们获取的天气格式:


18.png

在看看网易的天气界面:


19.png

大21是当前温度,也就是日志里面的实时。怎么获取实时温度,字符串截取算法就可以完成,而且时间是截取该实时括号前面的部分。


在就是PM2.5后面的轻度污染。


这个判断一下大小也就可以了。


得到如下代码:

private void showWeather(View view) {
    TextView temperatureTxt = (TextView) view.findViewById(R.id.weather_layout_temperature);
    TextView weatherWindTxt = (TextView) view.findViewById(R.id.weather_layout_weatherwind);
    TextView dateTxt = (TextView) view.findViewById(R.id.weather_layout_date);
    TextView pmTxt = (TextView) view.findViewById(R.id.weather_layout_pm);
    TextView locationTxt = (TextView) view.findViewById(R.id.weather_layout_location);
    ImageView oneImages = (ImageView) view.findViewById(R.id.weather_layout_current_one_image);
    ImageView twoImages = (ImageView) view.findViewById(R.id.weather_layout_current_two_image);
    SharedPreferences prefs = PreferenceManager.getDefaultSharedPreferences(getActivity());
    temperatureTxt.setText(prefs.getString("temperature", ""));
    weatherWindTxt.setText(prefs.getString("weather", "") + " " + prefs.getString("wind", ""));
    String desc=null;
    if(prefs.getString("pm","")!=""){
        int number=Integer.valueOf(prefs.getString("pm",""));
        if(number<=35){
            desc="优质空气";
        }else if(number<=75){
            desc="无污染";
        }else if(number<=115){
            desc="轻度污染";
        }else if(number<=150){
            desc="中度污染";
        }else if(number<=250){
            desc="重度污染";
        }else if(number<=115){
            desc="严重污染";
        }
        pmTxt.setText(prefs.getString("pm", "")+"    "+desc);
    }
    locationTxt.setText(prefs.getString("current_city", ""));
    if (prefs.getString("current_date", "") != "") {
        String str = prefs.getString("current_date", "");
        int index = str.indexOf(")");
        String currentTemp = str.substring(index - 3, index - 1);//截取实时温度
        index = str.indexOf("(");
        String currentDate = str.substring(0, index - 1);//截取实时温度前面的时间
        dateTxt.setText(currentDate);
        char c1 = currentTemp.charAt(0);//截取两位数温度的第一位数
        char c2 = currentTemp.charAt(1);//截取两位数温度的第二位数
        for (int i = 0; i < 10; i++) {
            if (String.valueOf(i).equals(String.valueOf(c1))) {//比较温度等于哪个数字
                oneImages.setBackgroundResource(imageRes[i]);
            }
            if(String.valueOf(i).equals(String.valueOf(c2))){//与上解释同理
                twoImages.setBackgroundResource(imageRes[i]);
            }
        }
    }
}


其中imageRes是下面运行截图中0-9的数字图片。这个方法将在打开天气界面的时候调用。


这里为什么用局部变量,其原因很简单,java回收机制,局部变量是回收最快且最迅速的,当方法执行完成之后,局部变量就会被回收,避免资源浪费。


从SharedPreference文件中获取天气信息。根据实时温度设置大的图片温度。那么天气界面部分代码就在这里完成了。


因为要离开两个星期,所以天气图片并没有设置,有兴趣的同学自己拷贝网易反编译后的天气图片进行设置,尽量不要获取百度的天气图片,能从本地获取的图片,尽量从本地获取,节约系统资源。


下一篇博文将在两到三个星期后的某个时间更新。



本文的源代码在:


http://download.csdn.net/detail/liyuanjinglyj/9231921


查看运行的结果:

20.png

相关文章
|
8天前
|
人工智能 运维 安全
|
6天前
|
人工智能 异构计算
敬请锁定《C位面对面》,洞察通用计算如何在AI时代持续赋能企业创新,助力业务发展!
敬请锁定《C位面对面》,洞察通用计算如何在AI时代持续赋能企业创新,助力业务发展!
|
7天前
|
机器学习/深度学习 人工智能 自然语言处理
B站开源IndexTTS2,用极致表现力颠覆听觉体验
在语音合成技术不断演进的背景下,早期版本的IndexTTS虽然在多场景应用中展现出良好的表现,但在情感表达的细腻度与时长控制的精准性方面仍存在提升空间。为了解决这些问题,并进一步推动零样本语音合成在实际场景中的落地能力,B站语音团队对模型架构与训练策略进行了深度优化,推出了全新一代语音合成模型——IndexTTS2 。
642 22
|
7天前
|
人工智能 测试技术 API
智能体(AI Agent)搭建全攻略:从概念到实践的终极指南
在人工智能浪潮中,智能体(AI Agent)正成为变革性技术。它们具备自主决策、环境感知、任务执行等能力,广泛应用于日常任务与商业流程。本文详解智能体概念、架构及七步搭建指南,助你打造专属智能体,迎接智能自动化新时代。
|
13天前
|
人工智能 JavaScript 测试技术
Qwen3-Coder入门教程|10分钟搞定安装配置
Qwen3-Coder 挑战赛简介:无论你是编程小白还是办公达人,都能通过本教程快速上手 Qwen-Code CLI,利用 AI 轻松实现代码编写、文档处理等任务。内容涵盖 API 配置、CLI 安装及多种实用案例,助你提升效率,体验智能编码的乐趣。
1045 110
人工智能 数据可视化 数据挖掘
235 0