2. 程式人生 > >Android自定義控制元件之仿汽車之家下拉重新整理

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

阿新 • • 發佈：2018-12-23

這裡寫圖片描述
關於下拉重新整理的實現原理我在上篇文章Android自定義控制元件之仿美團下拉重新整理中已經詳細介紹過了，這篇文章主要介紹錶盤的動畫實現原理

汽車之家的下拉重新整理分為三個狀態：
第一個狀態為下拉重新整理狀態(pull to refresh)，在這個狀態下是一個錶盤隨著下拉的距離動態改變指標的角度
第二個狀態為放開重新整理狀態(release to refresh)，在這個狀態下是指標角度變化的一個動畫

第一個狀態的實現：

這裡寫圖片描述
這個效果我們使用自定義View來實現，我們從汽車之家apk中拿到下拉重新整理所用到的兩張圖片：
這裡寫圖片描述
這裡寫圖片描述
我們將第一張圖片畫在畫布上作為背景，接著我們根據當前進度值來動態旋轉畫布，然後再將第二章圖片畫在畫布上，我們看到錶針的旋轉實則是畫布在旋轉。

 @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
            //現將第一張圖片畫在畫布上
            canvas.drawBitmap(finalBackGroundBitmap,0,0,null);
            //旋轉畫布
            canvas.rotate(mCurrentProgress*2.7f,x/2,y/2);
            //將第二張圖片畫在旋轉後的畫布上
            canvas.drawBitmap(finalPointerBitmap, 0
 
, 0, null);
    }

自定義View的完整程式碼如下：

/**
 * Created by zhangqi on 15/10/17.
 */
public class AutoHome extends View{
    private Bitmap backGroundBitmap;
    public Bitmap pointerBitmap;
    private int x;
    private int y;
    private Bitmap finalBackGroundBitmap;
    private Bitmap finalPointerBitmap;
    private
 
 float mCurrentProgress;

    public AutoHome(Context context) {
        super(context);
        init(context);
    }


    public AutoHome(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    public AutoHome(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }


    private void init(Context context) {
        backGroundBitmap = Bitmap.createBitmap(BitmapFactory.decodeResource(context.getResources(), R.drawable.load_icon_dial2x));
        pointerBitmap = Bitmap.createBitmap(BitmapFactory.decodeResource(context.getResources(), R.drawable.load_icon_pointer2x));
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(measureWidth(widthMeasureSpec),measureWidth(heightMeasureSpec));
        x = getMeasuredWidth();
        y = getMeasuredHeight();
        finalBackGroundBitmap = Bitmap.createScaledBitmap(backGroundBitmap, x, y, false);
        finalPointerBitmap = Bitmap.createScaledBitmap(pointerBitmap, x, y, false);
    }
    private int measureWidth(int widMeasureSpec){
        int result = 0;
        int size = MeasureSpec.getSize(widMeasureSpec);
        int mode = MeasureSpec.getMode(widMeasureSpec);
        if (mode == MeasureSpec.EXACTLY){
            result = size;
        }else{
            result = backGroundBitmap.getWidth();
            if (mode == MeasureSpec.AT_MOST){
                result = Math.min(result,size);
            }
        }
        return result;

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

            canvas.drawBitmap(finalBackGroundBitmap,0,0,null);
            canvas.rotate(mCurrentProgress*2.7f,x/2,y/2);
            canvas.drawBitmap(finalPointerBitmap, 0, 0, null);
    }


    public void setCurrentProgress(float progress){
        mCurrentProgress = progress*100;
    }
}

接著我們在Activity中用SeekBar來模擬一個進度值，從而傳遞給我們自定義View

public class MainActivity extends AppCompatActivity {
    private SeekBar mSeekBar;
    private AutoHome mAutoHome;
    private float mCurrentProgress;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mSeekBar = (SeekBar) findViewById(R.id.seekbar);
        mAutoHome = (AutoHome) findViewById(R.id.autohome);

        mSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
                mCurrentProgress = (float)seekBar.getProgress()/(float)seekBar.getMax();
                mAutoHome.setCurrentProgress(mCurrentProgress);
                mAutoHome.invalidate();
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });
    }

第二個狀態的實現：

第二個狀態是錶針在執行一個旋轉的動畫，我們可以將錶針寫成一個自定義View，然後錶盤作為背景圖片，然後錶針View來執行rotate動畫即可

/**
 * Created by zhangqi on 15/10/27.
 */
public class PointerView extends View {
    private int x;
    private int y;
    private Bitmap finalPointerBitmap;
    private Bitmap pointerBitmap;
    public PointerView(Context context) {
        super(context);
        init();
    }

    public PointerView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public PointerView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        pointerBitmap = Bitmap.createBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.load_icon_pointer2x));
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(measureWidth(widthMeasureSpec),measureWidth(heightMeasureSpec));
        x = getMeasuredWidth();
        y = getMeasuredHeight();
        finalPointerBitmap = Bitmap.createScaledBitmap(pointerBitmap, x, y, false);
    }
    private int measureWidth(int widMeasureSpec){
        int result = 0;
        int size = MeasureSpec.getSize(widMeasureSpec);
        int mode = MeasureSpec.getMode(widMeasureSpec);
        if (mode == MeasureSpec.EXACTLY){
            result = size;
        }else{
            result = pointerBitmap.getWidth();
            if (mode == MeasureSpec.AT_MOST){
                result = Math.min(result,size);
            }
        }
        return result;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //目的是讓錶針初始位置為270度！
        canvas.rotate(270,x/2,y/2);
        canvas.drawBitmap(finalPointerBitmap,0,0,null);
    }
}

然後我們在xml檔案中這樣寫：

 <FrameLayout
    android:id="@+id/anim_container"
    android:layout_width="45dp"
    android:layout_height="45dp"
    android:layout_margin="15dp"
    android:visibility="gone" >

    <com.zhangqi.autohomerefreshlistview.PointerView
        android:id="@+id/anim_pointer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/load_icon_dial2x" />
    </FrameLayout>

這樣就將錶盤作為背景了，我們可以操作錶針來執行rotate動畫

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="-150"
    android:pivotY="50%"
    android:pivotX="50%"
    android:duration="1000"
    android:repeatCount="infinite"
    android:repeatMode="reverse"

    >
</rotate>
mAutoHomeAnim = (PointerView) headerView.findViewById(R.id.anim_pointer);
animation = AnimationUtils.loadAnimation(context, R.anim.pointer_rotate);
//執行動畫
mAutoHomeAnim.startAnimation(animation);

在listview中

由於下拉重新整理核心程式碼和美團下拉重新整理是一樣的，這裡我只擷取不一樣的部分

private void changeHeaderByState(int state){
        switch (state) {
        case DONE:
            headerView.setPadding(0, -headerViewHeight, 0, 0);
            //第一狀態的view顯示出來
            mAutoHome.setVisibility(View.VISIBLE);
            //先停止一下第二階段view的動畫
            mAutoHomeAnim.clearAnimation();
            //將第二階段view隱藏起來
            mAnimContainer.setVisibility(View.GONE);
            break;
        case RELEASE_TO_REFRESH:
            tv_pull_to_refresh.setText("放開重新整理");

            break;
        case PULL_TO_REFRESH:
            tv_pull_to_refresh.setText("下拉重新整理");
            //第一狀態view顯示出來
            mAutoHome.setVisibility(View.VISIBLE);
            //停止第二階段動畫
            mAutoHomeAnim.clearAnimation();
            //將第二階段view隱藏
            mAnimContainer.setVisibility(View.GONE);
            break;
        case REFRESHING:
            tv_pull_to_refresh.setText("正在重新整理");
            //將第一階段view隱藏
            mAutoHome.setVisibility(View.GONE);
            //將第二階段view顯示出來
            mAnimContainer.setVisibility(View.VISIBLE);
            //先停止第二階段動畫
            mAutoHomeAnim.clearAnimation();
            //啟動第二階段動畫
            mAutoHomeAnim.startAnimation(animation);
            break;
        default:
            break;
        }
    }

完整程式碼：

大家可以到我的GitHub上下載

相關推薦

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

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

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

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

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

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

【Android自定義控制元件】之仿網易星球浮動小球

仿網易星球浮動小球 讀唄開發過程中遇到新需求，類似於網易星球收集黑鑽的介面，考慮到可能也有人會使用，索性封裝成庫，後面好移植使用 先看看需要實現的效果： 需求分析： 資料集合可能是int、double、float等型別 小球位置隨機 沒有資料時

Android自定義控制元件之區域性圖片放大鏡--BiggerView

零、前言： 本文的知識點一覽 1.自定義控制元件及自定義屬性的寫法，你也將對onMesure有更深的認識 2.關於bitmap的簡單處理，及canvas區域裁剪 3.本文會實現兩個自定義控制元件:FitImageView(圖片自適應)和BiggerView(放大鏡)，前者為後者作為鋪墊。 4.最後會

Android自定義控制元件之《折線圖的繪製》

金融軟體裡的行情分時圖，這是我們最常見的折線圖，當然了，折線圖的用途並不僅僅侷限於此，像一般在一定區間內，為了更好的能顯示出幅度的變化，那麼用折線圖來展示無疑是最符合效果的，當然了，網上也有很多的第

Android自定義控制元件之實現滑動選擇開關

前言：今天我們仿照著Google給我們提供的Switch控制元件來進行一次模仿，自己動手打造一個可以換滑動圖片以及背景的圖片。 -----------------分割線--------------- 先看一下google提供的Switc控制元件： 其實用法很簡單就當普通的

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

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

Android 自定義控制元件之繼承view

一.自定義控制元件的型別:            1.繼承view（自繪檢視：view中的內容是我們自己繪製出來的，需要重寫onDraw方法）            2.繼承已有原生控制元件            3.自定義組合控制元件（將系統原生的控制元件組合到一起） 本

android自定義控制元件之圓形進度條（帶動畫）

首先貼上圖片： 額，感覺還行吧，就是進度條的顏色醜了點，不過咱是程式設計師，不是美工，配色這種問題當然不在考慮範圍之內了 下面說重點，如何來寫一個這樣的自定義控制元件。 首先，需要有一個灰色的底圖，來作為未填充時的進度條； 然後，根據傳入的當前進度值，繪製填充時的進度圓

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

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

Android自定義控制元件之百分比圓環進度條

首先我們先來看一下效果 分析 我們來看這個進度條應該分為3個小部分 1.中間的圓 2.外邊的圓環 3.中間的文字 分開畫 這3部分就是需要我們自己畫出來的，因此我們需要3根畫筆 //設定中心園的畫筆

Android自定義控制元件之圓形頭像

重寫ImageView public class CircleImageView extends ImageView { private static final ScaleType SCALE_TYPE = ScaleType.CENTER_CROP; p

Android 自定義控制元件之命運之輪（抽獎轉盤）

1 思路 首先肯定是要繪製扇形的，每一個獎品為一個扇形區分開，然後在扇形中得有當前獎品的說明，最後讓這個輪盤轉起來就行了。說起來很簡單，但是在繪製的時候，特別是繪製文字的時候還有有一些細節需要注意的，也不是難點，只是要理清楚那些地方應該怎麼去畫，怎麼獲取需要繪製的座標。  

Android 自定義控制元件之ViewPager Indicator實現方式

介紹 ViewPager 的Indicator實現兩種效果 如下圖所示： 效果一 效果二 佈局檔案： <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmln

Android自定義控制元件之掃描動畫UI

前言 最近有一個需求，就是做一個掃描的UI，看了很多掃描動畫，發現酷狗的掃描動畫挺漂亮的，所以就做了一個相似的掃描動畫，廢話不多說，先看一下最終的效果吧。 最終效果圖 介紹 首先我們看一下這個效果，它由以下幾部分組成： 1.中間一個音符圖片

Android自定義控制元件之測量onMeasure

由上圖可知，語法角度：子類可以重寫onMeasure，只能繼承View的measure，setMeasuredDimension方法。測量流程分為兩種情況討論：容器控制元件ViewGroup，原始的View(非容器控制元件)。原始的View測量，只需要測量自己的寬高；而容器控制元件需要先測量所有的子View

Android 自定義控制元件之 繼承佈局檔案

首先定義一個layout實現按鈕內部佈局： <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:andr

Android自定義控制元件之入門篇---整理網路上的資源

前言， 我的視訊系列 http://edu.csdn.net/course/detail/2741， 一起來學習Android… 本篇部落格主要是想要講解一下自定義控制元件如何入門，其中有好多資料資源來源自網路，綜合了網路上一些有些的博文

Android自定義控制元件之畫圓，並且修改其填充色

畫圓就是簡答呼叫了drawCircle的api public class Dot extends View { public Dot(Context context) { s