Android打造不一样的圆盘签到

Android打造不一样的圆盘签到

哎，期末考试完后，找工作找了一个月，好不容易找到一个工作，要实现的效果，哇，当时一看，感觉好难(主要是对动画不了解，不熟悉)，但是没办法，毕竟最终还是要实现的，要不然，公司养你何用，说了这么多，先看下最终要实现的效果是啥吧：

当时看到这个效果说实在的，根本不知道如何下手，在伟大的群友的帮助下，找到了启舰大神写的动画专栏Animation动画详解，看完这个系列文章后，然后再看这个效果，突然发现其实并不是很难，都是一些最简单的动画来实现的，主要用到：位移、缩放、透明度，然后把这些最简单的动画，用AnimatorSet控制一下就好了。OK，我们来具体的分析一下吧！

ImageView的初始位置在哪里？

在实现这个动画的时候我们首先要明确一点就是周围的圆和中间的大圆的初始位置和初始大小分别在哪里，我们可以很清楚的看到，周围的小圆是围成的一个圆，然后大圆是在圆心的位置，且当点击的时候，会交换位置，之前大的变小，小的变大，这样的话，我们就可以确定，其实所有的圆的初始位置和初始大小都是在屏幕的中心，然后通过动画的位移，位移到周围的，中间的圆是通过缩放来达到放大效果的。中间的那些显示出来有100分的那些TextView也是同理哈，所以布局代码如下：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:background="@mipmap/bg_main">
    <!--提醒签到布局-->
    <LinearLayout
        android:layout_width="110dp"
        android:layout_height="25dp"
        android:layout_marginTop="50dp"
        android:background="@drawable/shape_layout_round"
        android:gravity="center"
        android:orientation="horizontal"
        android:paddingLeft="10dp"
        android:paddingRight="10dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <TextSwitcher
                android:id="@+id/ts_hint_sign_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"/>

            <ImageSwitcher
                android:id="@+id/is_hint_sign_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"/>
        </RelativeLayout>

    </LinearLayout>
    <!--初始时中间的大圆,通过动画来放大-->
    <!--签到1-->
    <ImageView
        android:id="@+id/iv_sign_one"
        style="@style/sign_image_attribute"
        android:background="@drawable/shape_circle_orange"
        android:src="@mipmap/zhiwen"
        android:visibility="visible"/>
    <!--积分1-->
    <TextView
        android:id="@+id/tv_integral_one"
        style="@style/sign_imge_top_text_attribute"/>
    <!--签到2-->
    <ImageView
        android:id="@+id/iv_sign_two"
        style="@style/sign_image_attribute"
        android:background="@drawable/shape_circle_red"/>

    <TextView
        android:id="@+id/tv_integral_two"
        style="@style/sign_imge_top_text_attribute"/>
    <!--图片和图片中间的内容-->
    <TextView
        android:id="@+id/tv_two_image_center_one"
        style="@style/sign_text_attribute"/>
    <!--签到3-->
    <ImageView
        android:id="@+id/iv_sign_three"