CircleImageView的使用

• 背景
  • 在APP的使用過程，很多情況下默認的ImageView是不能滿足需求的，由于圖片大小、形狀等等影響，圓形的圖片顯示未免有些過于難看，這種情況下圓形圖片展示更為合適一些。
  • 但是，自己去繼承ImageView這個類去完善有些過于麻煩，不過，不用擔心，已經有開源項目寫好了并且封裝了。
  • https://github.com/hdodenhof/CircleImageView是其開源地址。
  • 當然，谷歌官方在后來已經加入了CircleImageView控件，放在support包中，需要添加依賴support，這里只介紹第三方使得。
• 使用
  • 添加gradle依賴如下
    • compile 'de.hdodenhof:circleimageview:2.1.0'
    • 或者implementation 'de.hdodenhof:circleimageview:2.1.0'
  • 在res/values新建attrs.xml（如果有則不必新建）添加如下代碼，指定屬性
  • <?xml version="1.0" encoding="utf-8"?> <resources><declare-styleable name="CircleImageView"><attr name="border_width" format="dimension" /><attr name="border_color" format="color" /><attr name="border_overlay" format="boolean" /></declare-styleable> </resources>
  • 在布局中添加如下
  • <de.hdodenhof.circleimageview.CircleImageView xmlns:circleimageview="http://schemas.android.com/apk/res-auto"android:id="@+id/circle_image_view"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="8dp"android:layout_marginEnd="8dp"android:layout_marginBottom="8dp"android:src="@drawable/ic_launcher_background"circleimageview:civ_border_color="@android:color/holo_red_light"circleimageview:civ_border_overlay="false"circleimageview:civ_border_width="2dp"circleimageview:civ_fill_color="@android:color/holo_blue_light"circleimageview:layout_constraintBottom_toBottomOf="parent"circleimageview:layout_constraintEnd_toEndOf="parent"circleimageview:layout_constraintTop_toTopOf="parent" />

    ?

  • 其余使用類似ImageView，不多贅述
• 源碼分析
  • CircleImageView繼承自ImageView，核心方法為setup
  • 實現步驟如下
    • 首先通過setImageBitmap()或者setImageDrawerable()或者setImageResource()或者setImageURL()方法設置圖片,如果xml布局設置則無需java代碼指定。
    • 進入構造函數CircleImageView()獲取自定義參數，以及調用setup()。
    • 使用setup()函數，進行圖片畫筆邊界畫筆(Paint)一些重繪參數初始化。
      • 構建渲染器BitmapShader用Bitmap來填充繪制區域
      • 設置樣式和內外圓半徑計算等
      • 調用updateShaderMatrix()函數和invalidate()函數
    • 進入updateShaderMatrix()函數，計算縮放比例和平移，設置BitmapShader的Matrix參數等等。
    • 觸發ondraw()函數完成最終的繪制，使用配置好的Paint先畫出繪制內圓形來以后再畫邊界圓形。
• 效果對比

  ?

  • 與原來的ImageView效果對比，好看很多。
  • 左邊是ImageView，右邊是CircleImageView。

?

貼一點xml布局。

<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"><TextViewandroid:id="@+id/textView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Hello World!"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent" /><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginStart="8dp"android:layout_marginTop="8dp"android:layout_marginBottom="8dp"android:src="@drawable/ic_launcher_background"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent" /><de.hdodenhof.circleimageview.CircleImageView xmlns:circleimageview="http://schemas.android.com/apk/res-auto"android:id="@+id/circle_image_view"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="8dp"android:layout_marginEnd="8dp"android:layout_marginBottom="8dp"android:src="@drawable/ic_launcher_background"circleimageview:civ_border_color="@android:color/holo_red_light"circleimageview:civ_border_overlay="false"circleimageview:civ_border_width="2dp"circleimageview:civ_fill_color="@android:color/holo_blue_light"circleimageview:layout_constraintBottom_toBottomOf="parent"circleimageview:layout_constraintEnd_toEndOf="parent"circleimageview:layout_constraintTop_toTopOf="parent" /></android.support.constraint.ConstraintLayout>

源碼地址見我的GitHub，Kotlin源碼在上層目錄中也列舉了，歡迎star或者fork。

?

?

總結

以上是生活随笔為你收集整理的安卓进阶系列-04自定义原型图片显示(CircleImageView)的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。