现在的位置: 首页 > 综合 > 正文

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

2013年10月30日 ⁄ 综合 ⁄ 共 2359字 ⁄ 字号 评论关闭

实现widget时钟翻页效果,类似墨迹天气:

比较简单的方法是 帧动画方式实现,但需要很多的图片资源,每次切换都需要三张图,放弃此种方法。

墨迹天气的实现方法:

通过基本的图片每次在时间切换时动态生成图片:

[DEMO  widget生成图]  每次切换时 从上往下翻。

主要使用的xml文件:

<?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:

http://download.csdn.net/detail/gg137608987/4958597

抱歉!评论已关闭.