Android自定义控件之3D上下翻页效果的倒计时控件

这是一个自定义的倒计时控件，具有3D上下翻页翻转效果。最近项目中需要做一个倒计时控件，需要和iOS端的效果保持一样。大致效果是这样的，如下图所示：

由于暂时还不会怎么样制作gif动态图，所以想看具体效果的，可以在下面的源码中下载运行查看。

废话不说了，开干吧。那么是怎么实现呢？我们首先得找到3D翻页的效果，这个效果我是参考的一个github项目，https://github.com/emilsjolander/android-FlipView。

其次，倒计时的逻辑，这个不难，最后是自定义的View了。

下面是动画的效果

1.动画的效果

（1）.这里的动画效果是由Scroller类来实现的。

public void startScroll (int startX, int startY, int dx, int dy, int duration)

（2）.翻页效果
           主要分为三部分

           |___绘制控件翻转页面的上半部分：

 canvas.clipRect(mTopRect);

           |___绘制控件翻转页面的下半部分： 

canvas.clipRect(mBottomRect);

           |___绘制控件中间的翻页部分：这里利用的是camera类的方法，

camera.rotateX()//看意思就明白表示沿X轴翻转，这是翻转效果的核心方法。
camera.clipRect(mTopRect,mBottom) //根据当前翻转的度数（0~180度），决定画布裁剪部分。
camera.getMatrix(mMatrix) //设置matrix矩阵的值，对中间页进行变形，达到翻页的视觉效果。
//然后通过矩阵变换，绘制视图和控件
mMatrix.preScale(0.25f, 0.25f);
mMatrix.postScale(4.0f, 4.0f);
mMatrix.preTranslate(-getWidth() / 2, -getHeight() / 2);
mMatrix.postTranslate(getWidth() / 2, getHeight() / 2);
canvas.concat(mMatrix) 
drawChild();

其中，控件中间的黑线，也是自定义的一个TextView,因为原生的TextView没有设置文字上画黑线的方法，有画线的方法，但是是跟着字体的颜色变化的，所以不符合需求，需要自定义一下，设置绘画的颜色。

不说了，上代码

clock_view_activity.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:customs="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#3B96FD"
    android:gravity="center_horizontal"
    android:orientation="vertical" >

    <com.example.timeticker.MyClockView
        android:id="@+id/clockView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="14dp"
        android:background="@mipmap/tcd_timer_bg"
        customs:dayTextBackground="@drawable/time_bg"
        customs:dayTextColor="#ffffff"
        customs:hourTextBackground="@drawable/time_bg"
        customs:hourTextColor="#ffffff"
        customs:minTextBackground="@drawable/time_bg"
        customs:minTextColor="#ffffff"
        customs:secTextBackground="@drawable/time_bg"
        customs:secTextColor="#ffffff" >
    </com.example.timeticker.MyClockView>

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="倒计时" />

</LinearLayout>

attrs.xml 自定义的属性

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="MyClock">
        <attr name="dayTextSize" format="dimension" />
        <attr name="hourTextSize" format="dimension" />
        <attr name="minTextSize" format="dimension" />
        <attr name="secTextSize" format="dimension" />
        <attr name="dayTextColor" format="color" />
        <attr name="hourTextColor" format="color" />
        <attr name="minTextColor" format="color" />
        <attr name="secTextColor" format="color" />
        <attr name="dayTextBackground" format="reference|color" />
        <attr name="hourTextBackground" format="reference|color" />
        <attr name="minTextBackground" format="reference|color" />
        <attr name="secTextBackground" format="reference|color" />
    </declare-styleable>
</resources>

ids.xml 因为用到的是动态布局，为了能找到控件，得为每个控件设置一个id

<?xml version="1.0" encoding="utf-8"?>
<resources>
     <item name="dayTextView" type="id" />
     <item name="hourTextView" type="id" />
     <item name="minTextView" type="id" />
     <item name="secTextView" type="id" />
</resources>

time_bg.xml 控件的样式

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <corners android:radius="3dp" />