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进去该方法中,得到如下图所示的信息:
这个执行是有条件的,当屏幕打开时,会导致动画开始。也就是说start()出来的动画执行是有前提条件的。
所以当我们需要反复执行动画,或者说,你想立即动画就有效果的话,就优先使用startAnimation()方法吧。
7.设置天气界面
我们查看日志,看看我们获取的天气格式:
在看看网易的天气界面:
大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
查看运行的结果: