實戰-仿bilibili刷新按鈕的實現

来源:http://www.cnblogs.com/yihoudangxian/archive/2017/10/26/7735455.html
-Advertisement-
Play Games

一、簡述 最近跟小伙伴一起討論了一下，決定一起仿一個BiliBili的app（包括android端和iOS端），我們並沒有打算把這個項目完全做完，畢竟我們的重點是掌握一些新框架的使用，併在實戰過程中發現並彌補自身的不足。 本系列將記錄我（android端）在開發過程中的一些我覺得有必要記錄的功能實現 ...


一、簡述

       最近跟小伙伴一起討論了一下，決定一起仿一個BiliBili的app（包括android端和iOS端），我們並沒有打算把這個項目完全做完，畢竟我們的重點是掌握一些新框架的使用，併在實戰過程中發現並彌補自身的不足。

       本系列將記錄我（android端）在開發過程中的一些我覺得有必要記錄的功能實現而已，並不是完整的從0到1的完整教程，若個別看官大爺覺得不好請出門左拐謝謝。

以下是該項目將會完成的功能。

  1. 視頻播放功能
  2. 直播功能
  3. 彈幕功能
  4. 換膚功能
  5. …

本系列文章，將會有記錄以上功能的實現但不僅僅只有這些，還會有一些其他，比如自定義控制項、利用fiddler抓包等，接下來就進入本篇的主題——《仿bilibili刷新按鈕的實現》。

二、實戰

1、分析

先來看看原版效果：

該按鈕由3部分組成，分別是圓角矩形、文字、旋轉圖標。在點擊按鈕後，開始載入數據，旋轉圖標發生旋轉，數據載入完成後，旋轉圖標複位並停止旋轉。話不多說，開始敲代碼。

2、繪製

這裡，我們要繪製的部分有3個，分別是上面提到的圓角矩形、文字、旋轉圖標。那麼這裡就為這3部分分別聲明瞭一些屬性。

要註意的一點是，這個類中有3個構造函數，因為有部分屬性需要在構造函數中初始化（也為之後自定義屬性做準備），所以，將第1個與第2個構造函數中的super修改為this。

public class LQRRefreshButton extends View {

    // 圓角矩形屬性
    private int borderColor = Color.parseColor("#fb7299");
    private float borderWidth = 0;
    private float borderRadius = 120;

    // 文字屬性
    private String text = "點擊換一批";
    private int textColor = Color.parseColor("#fb7299");
    private float textSize = 28;

    // 旋轉圖標屬性
    private int iconSrc = R.mipmap.tag_center_refresh_icon;
    private float iconSize = 28;
    private Bitmap iconBitmap;
    private float space4TextAndIcon = 20;

    // 畫筆
    private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

    public LQRRefreshButton(Context context) {
        this(context, null);
    }

    public LQRRefreshButton(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public LQRRefreshButton(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        // 將圖標資源實例化為Bitmap
        iconBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.tag_center_refresh_icon);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 1、畫圓角矩形
        // 2、畫字
        // 3、畫刷新圖標
    }
}

接下來著重完成onDraw()方法的實現：

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    // 1、畫圓角矩形
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setColor(borderColor);
    mPaint.setStrokeWidth(borderWidth);
    canvas.drawRoundRect(new RectF(0, 0, getWidth(), getHeight()), borderRadius, borderRadius, mPaint);

    // 2、畫字
    mPaint.setTextSize(textSize);
    mPaint.setColor(textColor);
    mPaint.setStyle(Paint.Style.FILL);
    float measureText = mPaint.measureText(text);
    float measureAndIcon = measureText + space4TextAndIcon + iconSize;
    float textStartX = getWidth() / 2 - measureAndIcon / 2;
    float textBaseY = getHeight() / 2 + (Math.abs(mPaint.ascent()) - mPaint.descent()) / 2;
    canvas.drawText(text, textStartX, textBaseY, mPaint);

    // 3、畫刷新圖標
    float iconStartX = textStartX + measureText + space4TextAndIcon;
    canvas.drawBitmap(iconBitmap, iconStartX, getHeight() / 2 - iconSize / 2, mPaint);
}

先來看看效果：

我給該控制項設置了寬為200dp，高為100dp。

可以看到效果還不錯，但還是有一點點問題的，下麵就分別說說這3部分是怎麼畫的，及存在的小問題。

1）畫圓角矩形

其實畫圓角矩形很簡單，設置好畫筆的樣式、顏色、線粗，再調用canvas的drawRoundRect()方法即可實現。

  • 因為我們要畫的圓角矩形只需要畫線，所以畫筆的樣式便設置為Paint.Style.STROKE。
  • canvas的drawRoundRect()方法中，第一個參數是繪製範圍，這裡就直接按該控制項的大小來設置即可。第二、三個參數是x軸和y軸的圓角半徑，第三個參數是畫筆（要畫東西當然需要畫筆~）。

但你有沒有發現，此時的 線粗為0（borderWidth=0），矩形線怎麼還有？這是因為畫筆的樣式為Paint.Style.STROKE，當線粗為0時，還要畫出1px的線，因為對畫筆來說，最小的線粗就是1px。所以，上面的代碼需要做如下改動：

// 1、畫圓角矩形
if (borderWidth > 0) {
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setColor(borderColor);
    mPaint.setStrokeWidth(borderWidth);
    canvas.drawRoundRect(new RectF(0, 0, getWidth(), getHeight()), borderRadius, borderRadius, mPaint);
}

2）畫字

畫字的一般步驟是設置文字大小、文字顏色、畫筆樣式，繪製起點。其中後2個最為重要。

  • 畫筆樣式對畫出的字是有影響的，當畫筆樣式為Paint.Style.STROKE時，畫出來的字是鏤空的（不信你可以試試），我們需要的是實心的字，所以需要修改畫筆的樣式為Paint.Style.FILL。
  • 在安卓中，文字的繪製跟其它繪製是不同的，例如，圓角矩形和旋轉圖標的繪製起點是左上角，而文字則是按文字左下字為起點，也就是按基線（Baseline）來繪製，故需要得到基線起點的坐標。

如上圖中，現在要獲得的就是文字左下角的點，這要怎麼求呢？

先說x，一般需要讓文字居中顯示（跟文字的對齊方式也有關係，這裡以預設的左對齊為例），所以計算公式一般為： x = 控制項寬度/2 - 文字長度/2。但我們這個控制項有點不同，它還需要考慮到旋轉圖標的位置問題，所以x應該這麼求： x = 控制項寬度/2 - (文字長度+空隙+旋轉圖標寬度)/2。

// 得到文字長度
float measureText = mPaint.measureText(text);
// 得到 文字長度+空隙+旋轉圖標寬度
float measureAndIcon = measureText + space4TextAndIcon + iconSize;
// 得到文字繪製起點
float textStartX = getWidth() / 2 - measureAndIcon / 2;

再說y，如圖所示：

如果直接用控制項的高度的一半作為文字繪製的基線，那麼繪製出來的文字肯定偏上，這是因為Ascent的高度比Descent的高度要高的多，我們在計算Baseline時，需要在Ascent中減去Descent的高度得到兩者高度差，再讓控制項中心y坐標加上（下降）這個高度差的一半。故：

float textBaseY = getHeight() / 2 + (Math.abs(mPaint.ascent()) - mPaint.descent()) / 2;

3）畫刷新圖標

最後就是畫刷新圖標了，它是以左上角為起點的，通過canvas的drawBitmap()方法進行繪製即可。

但是，有一點需要註意，iconSize是我自己定的一個大小，並不是圖標的實際大小，所以在往後做旋轉動畫時獲取到的旋轉中心會有誤差，將導致圖標旋轉時不是按中心進行旋轉。所以，這裡需要對圖標大小進行調整：

public class LQRRefreshButton extends View {
    ...
    public LQRRefreshButton(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        // icon
        iconBitmap = BitmapFactory.decodeResource(getResources(), iconSrc);
        iconBitmap = zoomImg(iconBitmap, iconSize, iconSize);
    }

    public Bitmap zoomImg(Bitmap bm, float newWidth, float newHeight) {
        // 獲得圖片的寬高
        int width = bm.getWidth();
        int height = bm.getHeight();
        // 計算縮放比例
        float scaleWidth = ((float) newWidth) / width;
        float scaleHeight = ((float) newHeight) / height;
        // 取得想要縮放的matrix參數
        Matrix matrix = new Matrix();
        matrix.postScale(scaleWidth, scaleHeight);
        // 得到新的圖片
        Bitmap newbm = Bitmap.createBitmap(bm, 0, 0, width, height, matrix, true);
        return newbm;
    }
    ...
}

3、動畫

現在，要實現旋轉圖標的旋轉功能了。原理就是在canvas繪製圖標時，將canvas進行旋轉，canvas旋轉著繪製圖標也很簡單，只需要4步：

canvas.save();
canvas.rotate(degress, centerX, centerY);
canvas.drawBitmap(iconBitmap, iconStartX, getHeight() / 2 - iconSize / 2, mPaint);
canvas.restore();

 

接下來要做的，就是計算出旋轉中心，旋轉角度，並不停止的去調用onDraw()編製圖標，可以使用ValueAnimator或ObjectAnimator實現這個功能，這裡選用ObjectAnimator。實現如下：

public class LQRRefreshButton extends View {
    ...
    private float degress = 0;
    private ObjectAnimator mAnimator;

    public LQRRefreshButton(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        // 旋轉動畫
        mAnimator = ObjectAnimator.ofObject(this, "degress", new FloatEvaluator(), 360, 0);
        mAnimator.setDuration(2000);
        mAnimator.setRepeatMode(ObjectAnimator.RESTART);
        mAnimator.setInterpolator(new LinearInterpolator());
        mAnimator.setRepeatCount(ObjectAnimator.INFINITE);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        ...
        // 3、畫刷新圖標
        float iconStartX = textStartX + measureText + space4TextAndIcon;
        canvas.save();
        float centerX = iconStartX + iconSize / 2;
        int centerY = getHeight() / 2;
        canvas.rotate(degress, centerX, centerY);
        canvas.drawBitmap(iconBitmap, iconStartX, getHeight() / 2 - iconSize / 2, mPaint);
        canvas.restore();
    }

    public void start() {
        mAnimator.start();
    }

    public void stop() {
        mAnimator.cancel();
        setDegress(0);
    }

    public float getDegress() {
        return degress;
    }

    public void setDegress(float degress) {
        this.degress = degress;
        invalidate();
    }
}

 

使用ObjectAnimator可以對任意屬性值進行修改，所以需要在該控制項中聲明一個旋轉角度變數（degress），並編寫getter和setter方法，還需要在setter方法中調用invalidate()，這樣才能在角度值發生變換時，讓控制項回調onDraw()進行圖標的旋轉繪製。ObjectAnimator的使用也不複雜，這裡就不詳細介紹了。來看下動畫效果吧：

4、自定義屬性

一個自定義控制項，是不能把屬性值寫死在控制項里的，所以我們需要自定義屬性，從外界獲取這些屬性值。

1）屬性文件編寫

在attrs.xml中編寫如下代碼：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="LQRRefreshButton">
        <attr name="refresh_btn_borderColor" format="color"/>
        <attr name="refresh_btn_borderWidth" format="dimension"/>
        <attr name="refresh_btn_borderRadius" format="dimension"/>
        <attr name="refresh_btn_text" format="string"/>
        <attr name="refresh_btn_textColor" format="color"/>
        <attr name="refresh_btn_textSize" format="dimension"/>
        <attr name="refresh_btn_iconSrc" format="reference"/>
        <attr name="refresh_btn_iconSize" format="dimension"/>
        <attr name="refresh_btn_space4TextAndIcon" format="dimension"/>
    </declare-styleable>
</resources>

 

2）屬性值獲取

在控制項的第三個構造函數中獲取這些屬性值：

public class LQRRefreshButton extends View {

    public LQRRefreshButton(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        // 獲取自定義屬性值
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.LQRRefreshButton);
        borderColor = ta.getColor(R.styleable.LQRRefreshButton_refresh_btn_borderColor, Color.parseColor("#fb7299"));
        borderWidth = ta.getDimension(R.styleable.LQRRefreshButton_refresh_btn_borderWidth, dipToPx(0));
        borderRadius = ta.getDimension(R.styleable.LQRRefreshButton_refresh_btn_borderRadius, dipToPx(60));
        text = ta.getString(R.styleable.LQRRefreshButton_refresh_btn_text);
        if (text == null)
            text = "";
        textColor = ta.getColor(R.styleable.LQRRefreshButton_refresh_btn_textColor, Color.parseColor("#fb7299"));
        textSize = ta.getDimension(R.styleable.LQRRefreshButton_refresh_btn_textSize, spToPx(14));
        iconSrc = ta.getResourceId(R.styleable.LQRRefreshButton_refresh_btn_iconSrc, R.mipmap.tag_center_refresh_icon);
        iconSize = ta.getDimension(R.styleable.LQRRefreshButton_refresh_btn_iconSize, dipToPx(14));
        space4TextAndIcon = ta.getDimension(R.styleable.LQRRefreshButton_refresh_btn_space4TextAndIcon, dipToPx(10));

        ta.recycle();   
        ...
    }
}

 

這裡有一點需要留意：

ta.getDimension(屬性id, 預設值)

 

通過TypedArray對象可以從外界到的的值會根據單位（如：dp、sp）的不同自動轉換成px，但預設值的單位是一定的，為px，所以為了符合安卓規範，不要直接使用px，所以需要手動做個轉換。最後還需要調用recycle()方法回收TypedArray。

3）在佈局文件中應用

<com.lqr.biliblili.mvp.ui.widget.LQRRefreshButton
    android:id="@+id/btn_refresh"
    android:layout_width="118dp"
    android:layout_height="32dp"
    android:layout_gravity="center"
    android:layout_marginBottom="3dp"
    android:layout_marginTop="8dp"
    app:refresh_btn_borderRadius="25dp"
    app:refresh_btn_borderWidth="1dp"
    app:refresh_btn_iconSize="16dp"
    app:refresh_btn_text="點擊換一批"
    app:refresh_btn_textColor="@color/bottom_text_live"
    app:refresh_btn_textSize="14sp"/>

 

最後附近完整代碼

LQRRefreshButton.java

源碼免費下載地址：http://www.jinhusns.com/Products/Download


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 原生javascript實現文件非同步上傳
    效果圖： 代碼：（demo33.jsp） ...
  • 前端存儲
    前端存儲 轉載請註明出處： "前端存儲" 前端存儲是每個前端開發工程師必備的技能。廢話不多說了，直接進入主題。 以下總結以下我接觸過的一些有關前端存儲方面的知識。主要是Cookie與WebStorage。當然，對於這兩種存儲方式的介紹，會與前端安全的問題一起討論 Cookie + Cookie定義 ...
  • js 只比較時間大小
    ...
  • input type=file 選擇圖片並且實現預覽效果
    通過<input />標簽，給它指定type類型為file，可提供文件上傳； accept：可選擇上傳類型，如：只要傳圖片，且不限製圖片格式，為image/*； multiple：規定是否可以選擇多個文件； 規定只可上傳圖片，且可以選擇多個文件 當然，直接一個input type=file 只能選擇 ...
  • vue-cli + sass 的正確打開方式
    關於在vue cli搭建的項目中怎麼配置sass，網上搜到的基本是這種答案： 但是我認為，直接將樣式寫在每個單文件的<style 里，是十分不明智的做法。且不說node sass安裝過程的各種坑，內嵌的<style 也讓組件顯得十分混亂。想象一下你在修改某個methods時必須拖動滾輪穿 ...
  • Vue-router路由判斷頁面未登錄跳轉到登錄頁面
    在這之前是給路由加一個meta屬性： 註意:但是事實是登錄的時候大多數時候並不進行跳轉，所以這裡需要在login跳轉的路徑中再加一段： ...
  • 頁面滾動條的問題
    有時候特別需要，個別網頁要去掉橫向滾動條和豎向滾動條，那該怎麼去掉呢，很簡單，看代碼： 讓豎條沒有： <body style=`overflow:-Scroll;overflow-y:hidden` > </body> 讓橫條沒有： <body style=`overflow:-Scroll;ove ...
  • vue2.0 練習項目-外賣APP(1)
    前言 vue這個框架現在挺流行的，作為一個專註前端100年的代碼愛好者，學習下目前流行的框架是必須的！在網上搜索vue的項目是比較少的，在官網進行了入門學習後，沒有一個項目練習鞏固下，學了就等於沒學，所以我就決定自己寫一個項目咯。在這裡我也順便分享下我學習vue的資源。我在GitHub上發現了一個v ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類