2. 程式人生 > >這才是真正的萬能圓角ImageView

這才是真正的萬能圓角ImageView

阿新 • • 發佈：2019-01-05

本文已授權我的公眾號：我就是馬雲飛 獨家釋出

不知道有沒有人記得我去年寫過一個圓角的imageview。不知道的可以先去看看：萬能圓角imagview，本文是基於上一篇的內容進行新增以及修改的。不然直接看這篇可能會有點懵。

前言

我為什麼要二次封裝？最近公司有個需求是這樣的。
這裡寫圖片描述

同事說，不知道怎麼搞，於是乎，我把之前寫的imageview給過去了。他來了句，你這圓角和fitxy同時設定會有問題啊，我反手就是一個大嘴巴子。我的程式碼怎麼會有問題。於是，拿來一瞧，的確有點問題。So，我決定對這個imageview進行二次的封裝。(當然了，這個問題的最後處理是後臺直接給一個圓角的imageview)。

如何實現

細想一下，上文我們是怎麼做的，我們是把繪製的區域，從（0，0）移動到我們想要的地方，說個粗暴點的話，我們強制的把這個imagview的scaletype的屬性設定了centercrop。那麼這次我們就要將它的scaletype設定成可調的屬性。

實現邏輯

我前面也說過了，上次我們是根據imageview的原始碼來修改他的編輯區域的，這次，我們照常開啟原始碼，找到園中對scaletype的處理邏輯，程式碼如下：


    private void configureBounds() {
        if (mDrawable == null || !mHaveFrame) {
            return
 
;
        }

        final int dwidth = mDrawableWidth;
        final int dheight = mDrawableHeight;

        final int vwidth = getWidth() - mPaddingLeft - mPaddingRight;
        final int vheight = getHeight() - mPaddingTop - mPaddingBottom;

        final boolean fits = (dwidth < 0 || vwidth == dwidth)
                && (dheight < 0
 
 || vheight == dheight);

        if (dwidth <= 0 || dheight <= 0 || ScaleType.FIT_XY == mScaleType) {
            /* If the drawable has no intrinsic size, or we're told to
                scaletofit, then we just fill our entire view.
            */
            mDrawable.setBounds(0, 0, vwidth, vheight);
            mDrawMatrix = null;
        } else {
            // We need to do the scaling ourself, so have the drawable
            // use its native size.
            mDrawable.setBounds(0, 0, dwidth, dheight);

            if (ScaleType.MATRIX == mScaleType) {
                // Use the specified matrix as-is.
                if (mMatrix.isIdentity()) {
                    mDrawMatrix = null;
                } else {
                    mDrawMatrix = mMatrix;
                }
            } else if (fits) {
                // The bitmap fits exactly, no transform needed.
                mDrawMatrix = null;
            } else if (ScaleType.CENTER == mScaleType) {
                // Center bitmap in view, no scaling.
                mDrawMatrix = mMatrix;
                mDrawMatrix.setTranslate(Math.round((vwidth - dwidth) * 0.5f),
                                         Math.round((vheight - dheight) * 0.5f));
            } else if (ScaleType.CENTER_CROP == mScaleType) {
                mDrawMatrix = mMatrix;

                float scale;
                float dx = 0, dy = 0;

                if (dwidth * vheight > vwidth * dheight) {
                    scale = (float) vheight / (float) dheight;
                    dx = (vwidth - dwidth * scale) * 0.5f;
                } else {
                    scale = (float) vwidth / (float) dwidth;
                    dy = (vheight - dheight * scale) * 0.5f;
                }

                mDrawMatrix.setScale(scale, scale);
                mDrawMatrix.postTranslate(Math.round(dx), Math.round(dy));
            } else if (ScaleType.CENTER_INSIDE == mScaleType) {
                mDrawMatrix = mMatrix;
                float scale;
                float dx;
                float dy;

                if (dwidth <= vwidth && dheight <= vheight) {
                    scale = 1.0f;
                } else {
                    scale = Math.min((float) vwidth / (float) dwidth,
                            (float) vheight / (float) dheight);
                }

                dx = Math.round((vwidth - dwidth * scale) * 0.5f);
                dy = Math.round((vheight - dheight * scale) * 0.5f);

                mDrawMatrix.setScale(scale, scale);
                mDrawMatrix.postTranslate(dx, dy);
            } else {
                // Generate the required transform.
                mTempSrc.set(0, 0, dwidth, dheight);
                mTempDst.set(0, 0, vwidth, vheight);

                mDrawMatrix = mMatrix;
                mDrawMatrix.setRectToRect(mTempSrc, mTempDst, scaleTypeToScaleToFit(mScaleType));
            }
        }
    }

我們找到上次對其實位置修改的地方。跟著原始碼一樣改成一樣。改完之後程式碼如下：


        if (drawablewidth <= 0 || drawableheight <= 0) {
            drawable.setBounds(0, 0, viewwidth, viewheight);
            matrix = null;
        } else {
            drawable.setBounds(0, 0, drawablewidth, drawableheight);
            if (ScaleType.MATRIX == getScaleType()) {
                if (matrix.isIdentity()) {
                    matrix = null;
                }
            } else if (fits) {
                matrix = null;
            } else if (ScaleType.CENTER == getScaleType()) {
                matrix.setTranslate(Math.round((viewwidth - drawablewidth) * 0.5f),
                        Math.round((viewheight - drawableheight) * 0.5f));
            } else if (ScaleType.CENTER_CROP == getScaleType()) {
                if (drawablewidth * viewheight > viewwidth * drawableheight) {
                    dx = (viewwidth - drawablewidth * scale) * 0.5f;
                } else {
                    dy = (viewheight - drawableheight * scale) * 0.5f;
                }
                matrix.setScale(scale, scale);
                matrix.postTranslate((int) (dx + 0.5f), (int) (dy + 0.5f));
            } else if (ScaleType.CENTER_INSIDE == getScaleType()) {

                if (drawablewidth <= viewwidth && drawableheight <= viewheight) {
                    scale = 1.0f;
                } else {
                    scale = Math.min((float) viewwidth / (float) drawablewidth,
                            (float) viewheight / (float) drawableheight);
                }
                dx = Math.round((viewwidth - drawablewidth * scale) * 0.5f);
                dy = Math.round((viewheight - drawableheight * scale) * 0.5f);
                matrix.setScale(scale, scale);
                matrix.postTranslate(dx, dy);
            } else {
                if (drawablewidth * viewheight > viewwidth * drawableheight) {
                    dx = (viewwidth - drawablewidth * scale) * 0.5f;
                } else {
                    dy = (viewheight - drawableheight * scale) * 0.5f;
                }
                matrix.setScale(scale, scale);
                matrix.postTranslate((int) (dx + 0.5f), (int) (dy + 0.5f));
            }
        }
        if (ScaleType.FIT_XY == getScaleType() && matrix != null) {
            scale1 = viewwidth * 1.0f / drawablewidth;
            scale2 = viewheight * 1.0f / drawableheight;
            matrix.setScale(scale1, scale2);
        }
        bitmapShader.setLocalMatrix(matrix);
        paint.setShader(bitmapShader);

我們可以發現其實和原始碼對比下來，改動還是有的。為什麼呢？我們仔細看下這段程式碼：

     if (dwidth <= 0 || dheight <= 0 || ScaleType.FIT_XY == mScaleType) {
            /* If the drawable has no intrinsic size, or we're told to
                scaletofit, then we just fill our entire view.
            */
            mDrawable.setBounds(0, 0, vwidth, vheight);
            mDrawMatrix = null;
        }

原始碼裡面只對drawable進行了處理。但我們可以發現後面的判斷每次都會呼叫matrix.setScale這個方法。但在當scaletype為fitxy時，沒有進行處理。我們也知道，我們看的是原始碼，他肯定偷偷的在某個地方進行了處理。那麼我們要處理怎麼辦呢？仔細看程式碼：

        if (ScaleType.FIT_XY == getScaleType() && matrix != null) {
            scale1 = viewwidth * 1.0f / drawablewidth;
            scale2 = viewheight * 1.0f / drawableheight;
            matrix.setScale(scale1, scale2);
    }

fitxy我們都知道是充滿布局，然後在細看這塊程式碼，你是不是懂了呢？佈局的寬高除以圖片的寬高。然後設定它的比例。

加上邊框

為了更好的封裝，我選擇加上邊框和邊框顏色的自定義屬性。那麼接下來就是直接上程式碼了。
我們需要再定義一個畫筆：

        boder_paint.setAntiAlias(true);
        boder_paint.setStyle(Paint.Style.STROKE);
        boder_paint.setColor(border_color);
        boder_paint.setStrokeWidth(border_width);

接下來我們就是直接畫上去了。當然了，我們這邊預設是不設定，也就是borderwidth為0，所以我們要加一個判斷：

  if (type == TYPE_ROUND) {
            canvas.drawRoundRect(rectF, borderRadius, borderRadius,paint);
            if (border_width > 0) {
                canvas.drawRoundRect(rectF, borderRadius, borderRadius, boder_paint);
            }
        } else if (type == TYPE_CIRCLE) {
            canvas.drawCircle(radius, radius, radius, paint);
            if (border_width > 0) {
                canvas.drawCircle(radius, radius, radius, boder_paint);
            }
        } else {
            getDrawable().draw(canvas);
        }

這裡寫圖片描述
我們一編譯，一執行，效果炸了。你問我為什麼？我們先來看個效果在說把。
這裡寫圖片描述
我們發現我們修改的fitxy屬性已經生效了。但是，為什麼加了邊框是這樣呢？
仔細想想。我們畫圓角和圓的時候是不是忘記去掉了邊框的寬度呢？那麼我們既然找到了原因就可以找到解決方法了。那我們就直接去掉邊框的高度，注意！！圓角和圓的都要處理。

   canvas.drawCircle(radius, radius, radius, paint);
            if (border_width > 0) {
                canvas.drawCircle(radius, radius, radius - border_width / 2, boder_paint);
            }

    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        if (type == TYPE_ROUND) {
            rectF = new RectF(border_width/2,border_width/2, getWidth()- border_width / 2, getHeight()- border_width / 2);
        }
    }

我們再來看下效果：
這裡寫圖片描述
搞定。完美~

使用

在gradle加上如下程式碼：

compile 'com.angel:SWImageView:1.0.0'

關於自定義屬性：

<declare-styleable name="SWImageView">
        <attr name="borderRadius" format="dimension"/>
        <attr name="type">
            <enum name="normal" value="-1"/>
            <enum name="circle" value="0"/>
            <enum name="round" value="1"/>
        </attr>
        <attr name="borderWidth" format="dimension" />
        <attr name="borderColor" format="integer" />
    </declare-styleable>

相關推薦

這才是真正的萬能圓角ImageView

本文已授權我的公眾號：我就是馬雲飛 獨家釋出 不知道有沒有人記得我去年寫過一個圓角的imageview。不知道的可以先去看看：萬能圓角imagview，本文是基於上一篇的內容進行新增以及修改的。不然直接看這篇可能會有點懵。 前言 我為什麼要二次封裝？最

android開發萬能圓角ImageView

轉載請註明出處：http://blog.csdn.net/sw950729/article/details/52037798 本文出自：馬雲飛的部落格 本篇文章已授權微信公眾號 guolin_blog （郭霖）獨家釋出 最近一兩個月沒事做，然後就開始封裝一

【泛型——這才真正的理解你】

前言： 曾記得那是機房重構，曾記得那是剛剛聽說有泛型這個東西，曾記得自己實現了datatable轉泛型的例項，而面對泛型，只知道它像一個集合一樣，儲存著資訊。然而，今天對於泛型的認識，讓我認識到了什

【轉載】這才是真正的表擴展方案

過程 round pass 配置 一致性 結束 ech 好的 原理 事情變得有意思了，上一篇花1小時撰寫的“一分鐘”文章，又引起了廣泛的討論，說明相關的技術大家感興趣，挺好。第一次一篇技術文章的評論量過100，才知道原來“評論精選”還有100上限，甚為欣慰（雖然是以一種自己

演算法設計與分析（六）（上週第五週的寫錯標題，這才是真正的第六週）

Merge k Sorted Lists 題目 Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complexity. Example:

李萬勝：這才是“真正”的區塊鏈 3.0

比特幣收集的可編纂性限定，激起V神寫出了以太坊，讓比特幣的買賣形式功力大增，全天下幾千個專案以以太坊為根底開闢了ERC20的代幣，進而，分散式的買賣和賬戶記賬暗示了以太坊最大的才能。而高併發方面，雖然分片手藝能夠提拔處置貯存服從，但這依舊難以支援區塊鏈進入“3.0”時期。最近

Android自己定義圓角ImageView

play setfill recycle fig wid art app util clear 我們常常看到一些app中能夠顯示圓角圖片。比方qq的聯系人圖標等等，實現圓角圖片一種辦法是直接使用圓角圖片資源，當然假設沒有圓角圖片資源。我們也能夠自己通過程序實現的，以下介

這才是愛情最好的樣子

ext 南方 絲毫 post 實習 畢業 行李箱 發現 不想 掛斷椰子的電話已經是快淩晨一點了。 還有六個小時就要起床上班。卻怎麽也睡不著。 昨晚下了非常大的雪，我起身走到窗前想看看如今雪停了沒有。 暖黃色的路燈照著雪花紛紛揚揚。地上已經一片白，還

然的竟全部都是擁有這才沖著眼神有進入甲級區域的

add any fda bfd .com ntp ans pdb face 保次近與號長心門時以支行外前屬義該心稱把需技圓集劃頭須問才根消近設立放市流參水任的照共支增行那學來利千離受性示則名其花文指條聲決程包己報圖織專來林他省住精油不 http://baobao.baidu

場中的墨嶺這才稍稍有無法進入大院了我們或許可

uri ecc bdd dcb cfb bdc caf d3d fad 誌習立親兩重頭頭他工解習學並府備重過導意史外方公改等料次階接感何空非當原展造十何受八響下區軍特則日那性驗育張話復與查引自過少增 http://baobao.baidu.com/article/268bf

馬斯克拒絕領工資？或許這才是藝高人膽大

當前 俱樂部 真的 十年 命運 直接 特斯拉 近日 fff 近日據《財富》雜誌網站報道，向來以敢於押下雄心勃勃的賭註而聞名的伊隆·馬斯克，最近又以特斯拉CEO的身份用自己的個人身家下註，他宣布在未來十年內，特斯拉將不會向他個人支付任何工資、獎金、分紅等報酬和獎勵。其實早在2

MongoDB與python交互！這才是正確玩轉數據庫的正確方式！

恢復數據 cati ring img step ica BE ODB enable 1.Pymongo PyMongo是Mongodb的Python接口開發包，是使用python和Mongodb的推薦方式。 官方文檔 2.安裝 通過ObjectId來查找 >

神奇的C語言，這才是C語言大牛操作，作為面試題，怕是秒殺眾人

想想 自己 初始 fun 怎麽 指向 都是 計算 換行 當然下面列出來的幾點都是C的基礎用法，只不過是這些用法可能平時不會被註意。所以很多東西第一次看到的時候，可能會覺得很怪異，但是細細想想就能很好的理解，也就能更好的清楚C語言的一些特性。但是在具體的編碼過程當中，我還是希

這才是你需要的高效在線PDF轉換平臺

幾分鐘 https 在線 高效 image font ref www 辦公 在酷熱的天氣下，如果還有一大堆的文檔等著你去處理，難免會讓人心煩氣躁。這時候如果有一款高效的辦公工具，幾分鐘完成一個小時的活，豈不是美滋滋。今天小編向大家推薦的就是高效在線PDF轉換平臺——PDF3

開拓創新，這才是該做的事情

知情 穩定 測試 輕松 檢測 特性 事情 預警 難度 隨著明星主鏈IPFS上線時間的逐步臨近，IPFS礦機市場也開始逐步火熱，礦機價格也在波動起伏中。在獲得最高利益的前提下，礦工們也在算計著成本與效率問題。而基於IPFS的挖礦原理，礦機系統、帶寬資源、硬盤價格及其使用壽命等

一文看懂Python的面向物件程式設計，這是真正的一篇非常棒的教程！

  之前在網路上看了很多關於面向物件的程式設計詳解，還是不夠過癮，所以決定自己動手寫一篇。 面向物件：Object Oriented Programming，簡稱OOP，即面向物件程式設計。           &nbs

這才是從菜鳥程式猿到技術大牛正確的開啟方式

作為一個剛進入程式設計開發這個行業的新人，總會有一段較長的迷茫期，遇到資深的前輩，總會問“工作的時候有沒有什麼竅門”、“怎樣才可以快速成為高手”等這樣或那樣的問題 當然，每個人都會經歷一段什麼都不太懂的迷茫期，今天，小編就分享《Axb的自我修養》，總結程式猿的學習竅門，與你們共勉。 1

Python全棧必學：這才是正確Python直譯器，避免走彎路

當我們編寫Python程式碼時，我們得到的是一個包含Python程式碼的以.py為副檔名的文字檔案。要執行程式碼，就需要Python直譯器去執行.py檔案。 由於整個Python語言從規範到直譯器都是開源的，所以理論上，只要水平夠高，任何人都可以編寫Python直譯器來執行Python程式碼（當然

想學習大資料？這才是完整的大資料學習體系

乾貨走起，閒話不多說，以下就是小編整理的大資料學習思路 第一階段：linux系統 本階段為大資料學習入門基礎課程，幫大家進入大資料領取打好Linux基礎，以便更好的學習Hadoop、habse、NoSQL、saprk、storm等眾多技術要點。 另：目前企業中無疑例外是使用Linux來搭建或部署專案的

python作圖都是小把戲，python實現倒放gif動圖，這才牛逼！

  現在的各種動圖層出不窮，深受大家喜歡，今天給大家介紹一個可以把gif動圖倒放的python程式，先來看下效果。 學習Python中有不明白推薦加入交流群                 號：5