2. 程式人生 > >Android應用主題切換詳解

Android應用主題切換詳解

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

640?wx_fmt=png&wxfrom=5&wx_lazy=1

今日科技快訊

昨天，小米董事長、CEO雷軍的母校武漢大學召開新品釋出會，正式推出小米6X，該機售價1599元起，將於4月27日上午10點線上線下開賣。小米6X採用時下主流的5.99英寸18:9全面屏設計，全金屬機身採用“隱形”天線和底部全對稱設計，機身厚度為7.3mm，一共有赤焰紅、流沙金、冰川藍、曜石黑以及櫻花粉五種配色。

作者簡介

本篇來自 陳小緣 的投稿，分享了他如何一步一步完成炫酷主題動畫的過程 ，一起來看看！希望大家喜歡。

陳小緣 的部落格地址：

https://blog.csdn.net/u011387817

前言

前兩日偶然看到了一個很炫酷的動畫效果：

640?wx_fmt=gif&wxfrom=5&wx_lazy=1

於是就想知道它是怎麼實現的，因為有了上一次分析動畫效果的經驗，判斷它是不是用的ValueAnimator, 如果是的話, 我們可以在設定-開發者選項裡面設定 “動畫時長縮放”來改變動畫時長，所以這次我們通過設定這個選項, 把動畫速度降低之後, 很快就看出了其中的奧妙。

正文

初步分析

我們先降低一下它的速度:

640?wx_fmt=jpeg

我們把動畫時長縮放調成10x，看看效果:

640?wx_fmt=gif

哈哈，有沒有發現，當動畫在播放的時候，那個列表是不能滑動的，可能有以下三個原因:

  1. 被它所在的ViewGroup打斷或消費了;

  2. 被其他View先消費了;

  3. 列表根據動畫是否正在播放決定能不能滑動;

我們再來仔細看一遍動畫。。。

那個動畫會不會是一個View呢？如果它是一個View的話，那列表不能滑動的原因就可能是2: 被這個View先消費了。

好，我們就先假設動畫是一個獨立的View，那這個View究竟做了什麼呢？ 

動畫看上去就像是新的顏色把舊的顏色擦掉了一樣。咦？等等，擦掉，哈哈哈，把舊的擦掉，這下是不是有種豁然開朗的感覺？我們就按著這個思路繼續想下去。 

構思程式碼

還記不記得PorterDuff.Mode.CLEAR這個模式？用這個可以實現橡皮擦的效果，我們等下肯定是要用到它了。既然是擦掉舊的東西，那就必須要先得到這個舊東西，哈哈，這個可以用getDrawingCache來獲取了。我們剛剛假設它是一個View，也就是自定義的View了，那麼我們這個View也要先新增到對應視圖裡面才能顯示。

準備好上面的東西，我們這個動畫的流程也就很清晰了: 

這次我們不打算做成寫死在佈局中那種，因為這樣不夠靈活，應該要做成動態新增和移除。

  1. 獲取根佈局的截圖；

  2. 新增自定義View到根佈局中；

  3. 把截圖draw出來；

  4. 把paint的Xfermode設定成PorterDuff.Mode.CLEAR；

  5. 以按鈕被點選的位置為起點，畫圓，並且不斷擴大這個圓的半徑；

  6. 直至這個圓足以覆蓋螢幕，停止動畫、從根佈局中移除、回撥播放完成的介面；

為了程式碼的美觀，我們可以將構造方法私有，然後公開一個靜態的create(View onClickView)方法，哈哈，只要傳入一個被點選的View就可以滿足我們播放動畫所需的條件了。 

那麼我們要怎麼計算出這個圓究竟需要多大的半徑才能剛好覆蓋螢幕呢？因為按鈕的位置不可能是固定的，所以要動態地去計算這個所需要的半徑。 

我們來看看下面這張圖: 

640?wx_fmt=png

這個是開啟了開發者選項中的指標位置之後的效果，可以看到我們手指按下之後，螢幕被藍色線條分成了4個小矩形，我們可以分別計算出這些小矩形的對角線長度，再從中取最長的那條作為我們繪製的圓的半徑。那麼計算圓形半徑這個問題算是解決了。下面基本可以一路暢通地寫程式碼了。

動手寫程式碼

先是構造方法:

    private RippleAnimation(Context context, float startX, float startY, int radius) {
        super(context);
        //獲取activity的根檢視,用來新增本View
        mRootView = (ViewGroup) ((Activity) getContext()).getWindow().getDecorView();
        mStartX = startX;
        mStartY = startY;
        mStartRadius = radius;
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        //設定為擦除模式
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
        updateMaxRadius();
        initListener();
    }

既然構造方法被私有了，那麼我們就要公開一個靜態的create方法:

    public static RippleAnimation create(View onClickView) {
        Context context = onClickView.getContext();
        int newWidth = onClickView.getWidth() / 2;
        int newHeight = onClickView.getHeight() / 2;
        //計算起點位置
        float startX = getAbsoluteX(onClickView) + newWidth;
        float startY = getAbsoluteY(onClickView) + newHeight;
        //起始半徑
        //因為我們要避免遮擋按鈕
        int radius = Math.max(newWidth, newHeight);
        return new RippleAnimation(context, startX, startY, radius);
    }

我們來看看獲取圓形半徑的程式碼怎麼寫:

    /**
     * 根據起始點將螢幕分成4個小矩形,mMaxRadius就是取它們中最大的矩形的對角線長度
     * 這樣的話, 無論起始點在螢幕中的哪一個位置上, 我們繪製的圓形總是能覆蓋螢幕
     */
    private void updateMaxRadius() {
        //將螢幕分成4個小矩形
        RectF leftTop = new RectF(0, 0, mStartX + mStartRadius, mStartY + mStartRadius);
        RectF rightTop = new RectF(leftTop.right, 0, mRootView.getRight(), leftTop.bottom);
        RectF leftBottom = new RectF(0, leftTop.bottom, leftTop.right, mRootView.getBottom());
        RectF rightBottom = new RectF(leftBottom.right, leftTop.bottom, mRootView.getRight(), leftBottom.bottom);
        //分別獲取對角線長度
        double leftTopHypotenuse = Math.sqrt(Math.pow(leftTop.width(), 2) + Math.pow(leftTop.height(), 2));
        double rightTopHypotenuse = Math.sqrt(Math.pow(rightTop.width(), 2) + Math.pow(rightTop.height(), 2));
        double leftBottomHypotenuse = Math.sqrt(Math.pow(leftBottom.width(), 2) + Math.pow(leftBottom.height(), 2));
        double rightBottomHypotenuse = Math.sqrt(Math.pow(rightBottom.width(), 2) + Math.pow(rightBottom.height(), 2));
        //取最大值
        mMaxRadius = (int) Math.max(
                Math.max(leftTopHypotenuse, rightTopHypotenuse),
                Math.max(leftBottomHypotenuse, rightBottomHypotenuse));
    }

create方法裡面有個getAbsoluteX和getAbsoluteY方法，這兩個方法分別是獲取view在螢幕中的x座標和y座標，為什麼要有這兩個方法呢，因為被點選的View所在的ViewGroup不一定top、left都是0的，所以如果我們直接獲取這個View的xy座標的話，是不夠的，還要加上它父容器的xy座標，我們要一直遞迴下去，這樣就能真正獲取到View在螢幕中的絕對座標了:

   /**
     * 獲取view在螢幕中的絕對x座標
     */
    private static float getAbsoluteX(View view) {
        float x = view.getX();
        ViewParent parent = view.getParent();
        if (parent != null && parent instanceof View) {
            x += getAbsoluteX((View) parent);
        }
        return x;
    }

    /**
     * 獲取view在螢幕中的絕對y座標
     */
    private static float getAbsoluteY(View view) {
        float y = view.getY();
        ViewParent parent = view.getParent();
        if (parent != null && parent instanceof View) {
            y += getAbsoluteY((View) parent);
        }
        return y;
    }

我們還要定義一個start方法，用來啟動動畫:

    public void start() {
        if (!isStarted) {
            isStarted = true;
            updateBackground();
            attachToRootView();
            getAnimator().start();
        }
    }

updateBackground方法就是更新螢幕截圖了，這個當然要從DecorView中獲取了:

    /**
     * 更新螢幕截圖
     */
    private void updateBackground() {
        if (mBackground != null && !mBackground.isRecycled()) {
            mBackground.recycle();
        }
        mRootView.setDrawingCacheEnabled(true);
        mBackground = mRootView.getDrawingCache();
        mBackground = Bitmap.createBitmap(mBackground);
        mRootView.setDrawingCacheEnabled(false);
    }

更新完截圖後，我們就要新增自身到根佈局中了:

   /**
     * 新增到根檢視
     */
    private void attachToRootView() {
        setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
        mRootView.addView(this);
    }

我們呼叫addView方法之前還set了一個寬高都是MATCH_PARENT的LayoutParams，這樣我們的View就能遮擋住螢幕，然後把剛剛獲取到的截圖draw上去，以假亂真，哈哈:

    @Override
    protected void onDraw(Canvas canvas) {
        //在新的圖層上面繪製
        int layer = canvas.saveLayer(0, 0, getWidth(), getHeight(), null);
        canvas.drawBitmap(mBackground, 0, 0, null);
        canvas.drawCircle(mStartX, mStartY, mCurrentRadius, mPaint);
        canvas.restoreToCount(layer);
    }

我們的start方法中最後是呼叫了getAnimator().start(); 看看getAnimator方法裡面做了什麼:

     private ValueAnimator getAnimator() {
        ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, mMaxRadius).setDuration(mDuration);
        valueAnimator.addUpdateListener(mAnimatorUpdateListener);
        valueAnimator.addListener(mAnimatorListener);
        return valueAnimator;
    }

就建立了一個ValueAnimator，動畫的起始值是0，結束值是mMaxRadius，也就是圓的最大半徑，我們的mCurrentRadius跟著動畫的值更新，那麼當我們的動畫播放完之後，mCurrentRadius就剛好等於mMaxRadius，也就剛好覆蓋螢幕了，這個時候我們也可以將自身從根佈局中移除了:

    private void initListener() {
        mAnimatorListener = new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                //動畫播放完畢, 移除本View
                detachFromRootView();
                if (mOnAnimationEndListener != null) {
                    mOnAnimationEndListener.onAnimationEnd();
                }
                isStarted = false;
            }
        };
        mAnimatorUpdateListener = new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                //更新圓的半徑
                mCurrentRadius = (int) (float) animation.getAnimatedValue() + mStartRadius;
                postInvalidate();
            }
        };
    }

    /**
     * 從根檢視中移除
     */
    private void detachFromRootView() {
        mRootView.removeView(this);
    }

對了，還應該有一個setDuration方法來設定動畫的時長:

   public RippleAnimation setDuration(long duration) {
        mDuration = duration;
        return this;
    }

哈哈，到這裡我們的RippleAnimation就基本完成了. 

說說酷安這個效果的實現原理:

  1. 切換主題前先獲取當前螢幕截圖;

  2. 開始播放動畫;

  3. 切換主題;

哈哈, 不斷擴大的圓形就會把舊的螢幕截圖擦掉, 從而看到下面新的主題顏色, 這樣我們的炫酷效果就出來了, 哈哈哈

因為只能從create方法中獲取到RippleAnimation物件，所以我們的使用方法也是非常的簡單，並且只需一行程式碼就能播放了:

    public void onClick(View view) {
        RippleAnimation.create(view).setDuration(200).start();
        //在這裡切換主題
    }

我們寫一個demo來測試一下我們的勞動成果: 

640?wx_fmt=gif

哈哈哈，跟酷安客戶端的效果對比下: 

640?wx_fmt=gif

哈哈，基本就是這個效果了，其實我們的這個效果不一定只能用來做主題切換，還可以用來做其他介面切換的過渡，哈哈哈，這個大家可以發揮一下想象力，做出更多炫酷的動畫效果。

結語

好了，文章到這裡就結束了，具體demo地址如下：

https://github.com/wuyr/RippleAnimation

歡迎長按下圖 -> 識別圖中二維碼

或者 掃一掃 關注我的公眾號

640.png?

640?wx_fmt=jpeg

相關推薦

Android應用主題切換詳解

今日科技快訊昨天，小米董事長、CEO雷軍的母校武漢大學召開新品釋出會，正式推出小米6X，該機售價

Android應用程式啟動詳解（二）從原始碼瞭解App的啟動過程

本文承接《Android應用程式啟動詳解（一）》繼續來學習應用程式的啟動的那些事。上文提到startActivity()方法啟動一個app後經過一翻過程就到了app的入口方法ActivityThread.main()。其實我們在之前的文章中《Android的訊息機制（二）之L

Android應用開發Scroller詳解及原始碼淺析

1 背景 大家都知道Android View提供了scrollTo()與scrollBy()方法來供我們進行View的滾動，但是有個問題就是他的滾動很蛋疼，疼在是瞬時挪動到指定位置的，這種對於追求使用者體驗的今天來說簡直是硬傷啊；為了解決這個問題Google給

eclipse+ADT 進行android應用簽名打包詳解

1.Eclipse工程中右鍵工程，彈出選項中選擇 android工具-生成簽名應用包：   2.選擇需要打包的android專案工程：   3.如果已有私鑰檔案，選擇私鑰檔案輸入密碼，如果沒有參見第6和7步建立私鑰檔案： 4.輸入私鑰別名和密碼： 5.

Android應用數字簽名詳解

目錄 概述 Android系統要求所有的應用必須被證書進行數字簽名之後才能進行安裝。Android系統通過該證書來確認應用的作者，該證書是不需要權威機構認證的，一般情況下應用都是用開發者的自簽名證書，該證書是確保應用程式和應用程式作者之間建立信

Android自定義主題樣式詳解（結合自定義title欄講解）

此篇部落格將總結主題樣式的自定義並且結合例項自定義title欄進行講解。為了方便閱讀，在此先寫明文章結構： 1.對android主題樣式的理解 （簡略結合系統自帶樣式的講解） 2.如何自定義主題樣式 （主要，有例子） 3.如何自定義titl

Android入門——Broadcast Receiver詳解與應用

引言 作為Android四大元件之一——BroadcastReceive。BroadcastReceive廣泛運用在APP的開發中，其他的三大應用元件不同一樣，是唯一需要被動接收，即負責接收的廣播接收器永遠不知道什麼時候可以接收到廣播，這種機制其實有點像Eve

Android自定義view詳解

this boolean mar 處理 都是 並且 jdk text 命名 從繼承開始 懂點面向對象語言知識的都知道：封裝，繼承和多態，這是面向對象的三個基本特征，所以在自定義View的時候，最簡單的方法就是繼承現有的View 通過上面這段代碼，我定義了一個Ske

Android MVC開發框架詳解

div ada 2-2 展示 gpo lose 回調接口 cycle recycler 1、目錄根據需要自行添加 　　adapter　　　　用於RecyclerView、ListView 等各種適配器　　fragment　　　 存放fragment 　　model　　　　

【轉】Android Camera 相機開發詳解

exc troy start 當前 container rac google getconf 對比度 在Android 5.0（SDK 21）中，Google使用Camera2替代了Camera接口。Camera2在接口和架構上做了巨大的變動, 但是基於眾所周知的原因

Android Parcel對象詳解

行數 ado state on() 直接 之一 一起 sharp mar 關於Parcel的使用 在分析Parcel之前，首先按照分析流程，介紹下關於Parcel的相關常規使用。 首先是關於Parcel的獲取： Parcel parcle = Parcel.Obtain()

第一個flask應用代碼詳解

python flask 上一篇我們創建了第一個簡單的flask應用程序，這一篇我們來看一下，這個最簡單的應用程序都做了哪些事 第一行代碼，導入了flask類 from flask import Flask 第二步創建了Flask類的實例 app = Flask(__name__) 這行代碼裏

Android EventBus3.x 使用詳解（一）

led AC target 分解 感覺 div activit .org android事 ?(^∇^*) 五一假期在家無事，新項目中用的是RxJava2+EventBus感覺還不錯，趁這閑暇總結下EventBus 一、概要簡述 　　EventBus

Linux三劍客awk的應用對比案例詳解

單引號 -i id號 std 引號 技術分享 詳細說明 數據 font awk的格式 一 awk 參數 ‘條件’（單引號） 文件路徑 a.參數我們一般用-F “[]” (雙引號) 指定分隔符 b.條件 為BEGIN 模塊 + 模式

Android-系統/proc目錄詳解

/proc是一個虛擬檔案系統，其下面的檔案不是真實存在的，不佔用實際儲存空間。 /proc/cmdline：顯示核心啟動的命令列。 /proc/cpuinfo：顯示系統cpu的資訊。 /proc/filesystems，顯示當前註冊了的檔案系統列表，nodev表示為虛擬檔案系統。

Android FileProvider 屬性配置詳解及FileProvider多節點問題

眾所周知在android7.0，修改了對私有儲存的限制，導致在獲取資源的時候，不能通過Uri.fromFile來獲取uri了我們需要適配7.0+的機型需要這樣寫： 1:程式碼適配 if (Build.VERSION.SDK_INT > 23) {//

Android 常用的Context詳解

1.Context概述 Context是一個抽象類，其通用實現在ContextImpl類中。它的主要作用是一個訪問application環境全域性資訊的介面，通過它可以訪問application的資源和相關的類，其主要功能如下： 啟動Activity

android中wifi原理詳解(轉)

二：Wifi模組的初始化:： 在 SystemServer 啟動的時候，會生成一個ConnectivityService的例項， try { Log.i(TAG, "Starting Connectivity Service."); ServiceManager.addService(Con

android狀態機statemachine詳解

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

Android小知識-ActivityManagerService詳解(APP啟動過程)

前言 AMS（ActivityManagerService）的啟動是在SystemServer程序中啟動的，它的職責是用於和所有APP的四大元件進行通訊，Activity的啟動過程就是APP端與AMS端進行通訊，首先理解的一點是APP端與AMS是在兩個不同的程序中，因此APP端與AMS是通過跨程序通訊的。