似墨迹天气 widget翻页时钟实现

实现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