2. 程式人生 > >自定義控制元件 | 仿《最美有物》點贊效果

自定義控制元件 | 仿《最美有物》點贊效果

阿新 • • 發佈：2019-02-20

前言

最近在跟著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。

相關推薦

自定義控制元件 | 仿《最美有物》點贊效果

前言 最近在跟著Hencode學習自定義控制元件，一直想著自己能夠照著別人寫的demo寫一個好看的View，就科學上網看看了別人的一些demo，看到了一位大神寫的模仿《最美有物》的點贊效果，覺得勝似喜歡，於是也跟著寫了一個demo。主要是看著流程分析自己擼出來

SwipeToLoadLayout佈局中新增自定義控制元件仿美團、餓了嗎等下拉效果

　　SwipeToLoadLayout是一個可重用的下拉重新整理和上拉載入控制元件，理論上支援各種View和ViewGroup（ListView，ScrollView，RecyclerView，GridView，WebView，Linearlayout，Rela

Android自定義控制元件——仿微信半透明載入框

在我們的app中不免回遇到耗時操作，這時我們給個載入框進行過度，使使用者體驗大大加強。 一、CustomDialog類的編寫 package com.daqsoft.jingguan.weight; import android.app.Dialo

Android自定義控制元件-仿淘寶ios客戶端天貓商品詳情介面動效

效果圖 原始碼和例子 效果描述 一個自定義控制元件繼承自ScrollView,下拉時header會放大鬆開後會恢復原狀,上滑時header會被下面的內容吃掉蓋住而且會稍稍往上滑，在header高度範圍內滑動時導航欄背景和導航欄的按鈕會反向改變透明度形成一種對比

【Android】自定義控制元件-仿QQ聯絡人側滑條目，右側滑選單。

一直沒有寫部落格的習慣，一直都是看別人的部落格，學習別人的東西。平時工作中總會遇到或大或小的問題，往往是上百度CSDN查詢答案。今天嘗試著寫部落格，一是更加深入地熟悉一下部落格；二是轉變一下學習方式；三是把自己所學的東西分享出來，幫助別人的同時也提升了自己！

【Android】自定義控制元件——仿天貓Indicator

今天來說說類似天貓的Banner中的小圓點是怎麼做的（圖中綠圈部分） 在學習自定義控制元件之前，我用的是非常二的方法，直接在佈局中放入多個ImageView，然後程式碼中根據Pager切換來改變圖片。這種方法雖然可以在切換完成後正確顯示小圓點，但是卻做不到如下圖中的切換

自定義控制元件 仿微信朋友圈文字展開全文功能

自定義TextView仿微信朋友圈文字資訊，展開全文功能 程式碼及註釋如下： 首先寫一個xml檔案 showmore.xml： <?xml version="1.0" encoding="utf-8"?> <LinearLayout x

Android自定義控制元件—仿儀表盤進度控制元件ArcProgressBar

開門見山，效果圖如下： 這種效果經常會遇到，但卻一直不知道這個效果圖應該怎麼描述，所以暫且以“儀表盤進度控制元件”來描述，各位博友如果有更好的描述這種效果的詞彙，請回復博文告訴我，在此先謝謝各位博友了！ 其實做出這樣的效果並不困難，只需要瞭解自定義控制元

Android自定義控制元件——仿淘寶、網易、彩票等廣告條、Banner的製作

最近翻看以前的某專案時，發現了一個極其常用的效果——廣告條，或者也稱不上自定義元件，但是使用頻率還是相當普遍的。 開啟市面上各大App主介面，或多或少會出現這樣的東西，甚至一個應用中出現N多個，這種展示廣告的效果，不僅動態效果好，而且眾所周知的“不佔屏”，想想在手機裝

android自定義控制元件系列教程----繼承ViewGroup實現帶阻力效果的可回彈的SrollView

package com.example.scolview; import android.content.Context; import android.util.Log; import android.view.MotionEvent; import android.view.VelocityTracke

安卓專案實戰之仿微信朋友圈的九宮格自定義控制元件

效果圖 圖片展示形式 1、當只有1張圖時，可以自己定製圖片寬高，也可以使用預設九宮格的寬高； 2、當只有4張圖時，以2*2的方式顯示； 3、除以上兩種情況下，都是按照3列方式顯示，但這時有一些細節： a、如果只有9張圖，當然是以3*3的方式顯示；

Android自定義控制元件之仿汽車之家下拉重新整理

關於下拉重新整理的實現原理我在上篇文章Android自定義控制元件之仿美團下拉重新整理中已經詳細介紹過了，這篇文章主要介紹錶盤的動畫實現原理 汽車之家的下拉重新整理分為三個狀態： 第一個狀態為下拉重新整理狀態(pull to refresh)，在這個狀

Android自定義控制元件實戰——仿淘寶商品瀏覽介面

用手機淘寶瀏覽商品詳情時，商品圖片是放在後面的，在第一個ScrollView滾動到最底下時會有提示，繼續拖動才能瀏覽圖片。仿照這個效果寫一個出來並不難，只要定義一個Layout管理兩個ScrollView就行了，當第一個ScrollView滑到底部時，再次向上滑動進入第二

Android 高仿 QQ5.0 側滑選單效果 自定義控制元件來襲

上一篇部落格帶大家實現了：Android 自定義控制元件打造史上最簡單的側滑選單 ，有兄弟看了以後說，你這滑動選單過時了呀~QQ5.0的效果還不錯~~嗯，的確，上一篇也承諾過，稍微修改上一篇的程式碼，實現QQ5.0側滑選單~~好了，下面就開始為大家展示寫一個類QQ的側滑有多e

Android仿微信朋友圈九宮格圖片展示自定義控制元件，支援縮放動畫~

一直對微信朋友圈九宮格圖片顯示控制元件比較好奇，找到一篇介紹相關騷操作的部落格 部落格雖好但是不夠完美，缺少點選圖片預覽頁面和縮放動畫，作為一個不斷追求完美主義的人，我想把這個控制元件結合到專案中而不是單純作為一個控制元件。 下面是我的實現效果圖： （

自定義控制元件之仿汽車之家

public class VerticalDragListView extends FrameLayout {     // 可以認為這是系統給我們寫好的一個工具類     private ViewDragHelper mDragHelper;  

自定義控制元件之仿雅虎新聞載入

分析： 1.先畫固定不動的圓，圍成一個大圓，均勻分佈在外圓上 2.開始旋轉屬性動畫，獲取旋轉的角度3.開始內聚動畫，就是位移動畫，向大圓圓心移動 4.水波紋效果，就是strokeWidth型別的圓向外移動，半徑不斷變大          

安卓仿iphone日期選項器 仿iphone日期選擇自定義控制元件

原來的DatePicker總有這樣那樣的不如意，看到ipad的日期選擇，感覺很好，如果google android date like iphone, 得到Android Wheel,專案地址：https://code.google.com/p/android-wheel/

【Android自定義控制元件】仿IOS風格的搜尋框

IOS很多控制元件的設計都是很值得借鑑的存在，作為移動開發的初學者，我們可以把這種模仿等同於學畫、練字時為鑄就基礎的臨摹行為。達者為師，努力學習別人的優點吧。 這裡是仿IOS搜尋框風格的自定義控制元件，引用了http://blog.csdn.net/d

Android自定義控制元件——點贊效果(仿Twitter)

前言 通過自定義控制元件，意欲模仿Twitter的點贊效果。 主要涉及： 1.三次貝塞爾曲線應用; 2.屬性動畫的綜合應用； 3.自定義View流程. 拆解原效果 我們先看一下Twitter上的原版效果是怎樣的. 放大後： 好吧！原速的