实现widget时钟翻页效果,类似墨迹天气:
比较简单的方法是 帧动画方式实现,但需要很多的图片资源,每次切换都需要三张图,放弃此种方法。
墨迹天气的实现方法:
通过基本的图片每次在时间切换时动态生成图片:
[DEMO widget生成图] 每次切换时 从上往下翻。
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="@integer/pageturning_layout_weight_top" android:orientation="vertical" > <FrameLayout android:layout_width="fill_parent" android:layout_height="fill_parent" > <LinearLayout android:id="@+id/topoldnum_m" android:layout_width="fill_parent" android:layout_height="fill_parent" > <ImageView android:id="@+id/topoldhalf_m" android:layout_width="fill_parent" android:layout_height="fill_parent" android:scaleType="fitXY" /> </LinearLayout> <LinearLayout android:id="@+id/topnewnum_m" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layoutAnimation="@anim/la_pageturning_top" > <ImageView android:id="@+id/topnewhalf_m" android:layout_width="fill_parent" android:layout_height="fill_parent" android:scaleType="fitXY" /> </LinearLayout> </FrameLayout> </LinearLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="@integer/pageturning_layout_weight_bottom" android:orientation="vertical" > <FrameLayout android:layout_width="fill_parent" android:layout_height="fill_parent" > <LinearLayout android:id="@+id/bottomoldnum_m" android:layout_width="fill_parent" android:layout_height="fill_parent" > <ImageView android:id="@+id/bottomoldhalf_m" android:layout_width="fill_parent" android:layout_height="fill_parent" android:scaleType="fitXY" /> </LinearLayout> <LinearLayout android:id="@+id/bottomnewnum_m" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layoutAnimation="@anim/la_pageturning_bottom" > <ImageView android:id="@+id/bottomnewhalf_m" android:layout_width="fill_parent" android:layout_height="fill_parent" android:scaleType="fitXY" /> </LinearLayout> </FrameLayout> </LinearLayout> </LinearLayout>
上为分钟部分 所用的xml布局文件。
总体分为上下两部分: 上下两部分各有动画效果,实现翻页的效果。
每部分又有两张图需要动态生成【表现为ImageView】,如 topoldhalf_m 和 topnewnum_m, topoldhalf_m代表 上一分钟的时间的上半部分 如 23,topnewnum_m为下一分钟的时间的上半部分 如 24。
同理下半部分依然,上下两部分拼接在一起就是我们看到的时钟数字了。
废话不多说,上Demo。
PageAnimation.rar