自定义控件 | 仿《最美有物》点赞效果

前言

最近在跟着Hencode学习自定义控件，一直想着自己能够照着别人写的demo写一个好看的View，就科学上网看看了别人的一些demo，看到了一位大神写的模仿《最美有物》的点赞效果，觉得胜似喜欢，于是也跟着写了一个demo。主要是看着流程分析自己撸出来的，之前用了自己的写法，然后看到了大神demo有更好的解决方案，后面也改过来了，所以在代码实现方式都差不多。

效果图

动画分析

1.向上拉伸是一个属性动画；
2.笑脸（不开心脸）动画是一个帧动画和属性动画组合；
3.背景回收也是一个属性动画。
（对动画不熟的需要可以去看看郭神的博客）

实现分析

点击触发 ：

1.颜色切换（选中黄，未选中白）
2.按比例拉伸（两个笑脸同时升高，显示点赞比例的高度）
3.展示数据文本（百分比数据显示）
4.显示选中部分的笑脸动画（这一步与3文本数据同时进行，在拉伸至最高处停留后）
5.缩回至原始大小，保持选中状态

通过这个流程的分析，我们可以把主要的功能点划分为以下两类：
​ 1.动画类 ： 脸部动画，拉伸动画

​ 2.控制类： 颜色切换，数据显示，拉伸比例

在自定义View的过程中，动画特效是最吸引人，也是最复杂的部分,虽然现在有高效炫酷的矢量动画库供我们选择, 但是基础动画的组合也是相当有用的,重点是发挥想象力。

主要的难点就在于如何进行拉伸操作。对于将一个圆形从中间拉伸成长条…

最开始想到的方案是拼接图形，即通过圆形 + 矩形 + 圆形的方式叠加这个控件。通过调节中间矩形的高度，来控制拉伸操作。但是这种方式结构略复杂，需要在一小块地方摆上三个图形，还要带上最外层的笑脸动画，还没写代码就感觉应该是性能低下的方案，另外一个致命的问题就是，不能有描边！大家可以参考饿了么的实现效果，在有描边的情况下，形状拼接的方案明显不可行。遂放弃。

而最终采用的则是使用圆角矩形作为外层Layout背景，通过控制内部笑脸的marginBottom，来动态的调节Layout的高度。这样，即可以保持笑脸始终处于控件的上部，同时也能控制相对简单的结构。

拉伸操作的实现

首先我们先简单的模拟下通过marginBottom控制拉伸的效果。

在布局里设置一个LinearLayout ，里面只有一个ImageView。用一个seekBar来模拟效果。

Layout：

  <LinearLayout
        android:id="@+id/backGround"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:background="@drawable/yellow_background"
        android:layout_above="@+id/sb_smile"
        android:layout_centerHorizontal="true">

        <ImageView
            android:id="@+id/iv_smile_face"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:src="@drawable/like_1"/>
    </LinearLayout>

    <SeekBar
        android:id="@+id/sb_smile"        
        android:layout_width="match_parent"
        android:layout_height="50dp" />

这里Linearlayout中设置了一个背景，是自定义的圆角矩形shape，通过调大圆角，使其显示为一个正圆。

Activity：

  seekBar.setOnSeekBarChangeListener(new SeekBar.O