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

来源：互联网发布：网络炒作kim 编辑：程序博客网时间：2024/06/05 19:39

前言

最近在跟着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.OnSeekBarChangeListener() {            @Override            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {                LinearLayout.LayoutParams layoutParams= (LinearLayout.LayoutParams) imageView.getLayoutParams();                layoutParams.bottomMargin=progress*3;                Log.i(">>>>>",progress+"");                imageView.setLayoutParams(layoutParams);            }

通过获取SmileFace的LayoutParams，通过Seekbar设置其下边距bottomMargin，来控制高度。

效果如下所示：

这里写图片描述

这样拉伸的原理就很清楚了。

我们需要在自定义控件中完成上述操作，并用属性动画替换掉seekBar。

自定义控件的封装

1.子控件的布局

考虑到实现目标里有两个并排的笑脸控件，这里采用继承LinearLayout的方式，可以把两个控件及中间的分割线直接摆放进去。

首先是一个水平排列的线性布局，里面又包含了三个子布局，点赞线性总布局，中间竖线，差评线性总布局，点赞线性总布局是一个垂直排列的的布局，包含了两个TextView和一个线性布局的点赞。
我们先将初始化这些布局和控件。

代码如下：

 //初始化文字--点赞        likeText=new TextView(getContext());        likeText.setText("喜欢");        likeText.setTextSize(18);        likeText.setTextColor(Color.WHITE);        likeNumText=new TextView(getContext());        likeNumText.setTextSize(14);        likeNumText.setText(likeNum+"%");        likeNumText.setTextColor(Color.WHITE);        //初始化文字--无感        disLikeText=new TextView(getContext());        disLikeText.setText("无感");        disLikeText.setTextSize(18);        disLikeText.setTextColor(Color.WHITE);        disLikeNumText=new TextView(getContext());        disLikeNumText.setTextSize(14);        disLikeNumText.setText(disLikeNum+"%");        disLikeNumText.setTextColor(Color.WHITE);        //差评线性布局        disLikeImageView=new ImageView(getContext());        disLikeImageView.setImageResource(R.drawable.dislike_1);        disLikeBack=new LinearLayout(getContext());        LayoutParams disLikeBackLP=new LayoutParams(defalutSize, defalutSize);        //disLikeBackLP.gravity=Gravity.BOTTOM;        disLikeBack.addView(disLikeImageView,disLikeBackLP);        disLikeBack.setBackgroundResource(R.drawable.white_background);        disLikeBack.setOrientation(VERTICAL);        //点赞线性布局        likeImageView=new ImageView(getContext());        likeImageView.setImageResource(R.drawable.like_1);        LayoutParams likeBackLP=new LayoutParams(defalutSize, defalutSize);        //likeBackLP.gravity=Gravity.BOTTOM;        likeBack=new LinearLayout(getContext());        likeBack.addView(likeImageView,likeBackLP);        likeBack.setBackgroundResource(R.drawable.white_background);        likeBack.setOrientation(VERTICAL);        //点赞总布局        LayoutParams textLP=new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);        textLP.gravity=Gravity.CENTER_HORIZONTAL;        LayoutParams backLP = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);        backLP.gravity = Gravity.CENTER;        likeAll =new LinearLayout(getContext());        likeAll.setOrientation(VERTICAL);        likeAll.addView(likeNumText,textLP);        likeAll.addView(likeText,textLP);        likeAll.addView(likeBack,backLP);        //差评总布局        disLikeAll=new LinearLayout(getContext());        disLikeAll.setOrientation(VERTICAL);        disLikeAll.addView(disLikeNumText,textLP);        disLikeAll.addView(disLikeText,textLP);        disLikeAll.addView(disLikeBack,backLP);        //中间竖线        ImageView centerLineImageView=new ImageView(getContext());        centerLineImageView.setBackground(new ColorDrawable(Color.GRAY));        LayoutParams centerLineLP=new LayoutParams(3,160);        centerLineLP.setMargins(40, 10, 40, 50);        centerLineLP.gravity= Gravity.BOTTOM;        //初始化总布局        LayoutParams lp=new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);        lp.bottomMargin=50;        lp.gravity=Gravity.BOTTOM;        addView(disLikeAll,lp);        addView(centerLineImageView,centerLineLP);        addView(likeAll,lp)

2.背景拉伸动画

我们点击点赞线性布局时，布局背景变成黄色，同时背景开始拉伸，之前用seekbar模拟了背景拉伸动画，我们这边直接应用过来。
因为这边是同时两个一起拉伸，之前准备创建两个ValueAnimator对象，分别控制动画，但是别人用一个对象就能控制，具体实现看代码，应该很好理解。
代码如下：

/**    *背景拉伸     */    private void scaleAnim() {        float disLikePercent=disLikeNum/(disLikeNum+likeNum);        float likePercent=(likeNum/(likeNum+disLikeNum));        //计算点赞百分比*300        final int likeMax=Math.round(likePercent*300);        //计算差评百分比*300        final int disLikeMax=Math.round(disLikePercent*300);        int max=Math.max(likeMax,disLikeMax);        /**         * 本来想创建两个ValueAnimator对象，不过这种方法创建一个对象一样可以达到目的         */        animationBack=ValueAnimator.ofInt(0,max);        animationBack.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator animation) {                int margin= (int) animation.getAnimatedValue();                LayoutParams layoutParams= (LayoutParams) likeImageView.getLayoutParams();                layoutParams.bottomMargin=margin;                if (margin<=likeMax)                {                    likeImageView.setLayoutParams(layoutParams);                }                if (margin<=disLikeMax)                {                    disLikeImageView.setLayoutParams(layoutParams);                }                invalidate();            }        });        likeBack.setClickable(false);        disLikeBack.setClickable(false);        isClose=false;        animationBack.setDuration(1000);        animationBack.start();        animationBack.addListener(this);    }

3.笑脸动画
笑脸动画是一个帧动画和属性动画一起组成的。
帧动画不解释，比较简单。属性动画是通过设置控件的translationX或者translationY属性从而让他左右或者上下移动。
代码如下：

/**     * 点赞补充属性动画     * @param likeImageView     */    private void translationY(ImageView likeImageView) {        ObjectAnimator objectAnimator=ObjectAnimator.ofFloat(likeImageView,"translationY",-5.0f, 0.0f, 5.0f, 0.0f, -5.0f, 0.0f, 5.0f, 0);        objectAnimator.setRepeatMode(ValueAnimator.RESTART);        objectAnimator.setDuration(1500);        objectAnimator.start();        objectAnimator.addListener(new AnimatorListenerAdapter() {            @Override            public void onAnimationEnd(Animator animation) {                super.onAnimationEnd(animation);                setBackUpAnimation();            }        });    }

4.背景回收动画
与拉伸类似，用的属性动画：
代码如下：

  /**     * 背景收回动画     */    private void setBackUpAnimation() {        float disLikePercent=disLikeNum/(disLikeNum+likeNum);        float likePercent=(likeNum/(likeNum+disLikeNum));        //计算点赞百分比*300        final int likeMax=Math.round(likePercent*300);        //计算差评百分比*300        final int disLikeMax=Math.round(disLikePercent*300);        int max=Math.max(likeMax,disLikeMax);        animationBack=ValueAnimator.ofInt(max,0);        animationBack.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator animation) {                int margin = (int) animation.getAnimatedValue();                LayoutParams lp= (LayoutParams) disLikeImageView.getLayoutParams();                lp.bottomMargin=margin;                if (margin<likeMax)                {                    likeImageView.setLayoutParams(lp);                }                if (margin<disLikeMax)                {                    disLikeImageView.setLayoutParams(lp);                }                Log.i(">>>>>>>","margin"+margin);                invalidate();            }        });        animationBack.addListener(this);        animationBack.setDuration(500);        animationBack.start();    }

这样就完成了自定义控件的封装了，最后在布局文件引用这个控件就行。

传送门

最后附上demo地址。喜欢的可以Star OR Fork。

阅读全文

0 2