Material Components——ShapeableImageView

書接前文，我們講了在MD Component中的MaterialShapeDrawable，今天則繼續講解在此基礎上，MDC封裝的一個Image元件——ShapeableImageView。它的作用就是讓開發者方便的對Imageview載入的影象進行Shape的處理。

老規矩，官網文件鎮樓。

http://developer.android.com/reference/com/google/android/material/imageview/ShapeableImageView

使用

ShapeableImageView的使用非常簡單，與傳統的Imageview類似，當然前提是需要引入MD Library。

implementation 'com.google.android.material:material:<version>'

首先，需要在xml中引入ShapeableImageView，並指定shapeAppearanceOverlay，程式碼如下所示。

<com.google.android.material.imageview.ShapeableImageView android:layout_width="wrap_content" android:layout_height="wrap_content" app:srcCompat="@drawable/test" app:shapeAppearanceOverlay="@style/ShapeAppearance.circle" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" />

這個指定的shapeAppearanceOverlay，就是具體的Shape的處理，它是一個Style，下面通過幾個例子來演示下如何建立這個Style。

Round Cut

在style中的內容即為需要處理的效果，這裡指定了Corner的處理效果型別為rounded，同時指定了Corner大小為Image的10%（當然你也可以指定其它單位）。

```

```

展示效果如圖所示，即最簡單的圓角影象。

cornerSize可以設定多種不同的數值，比如百分百，dp等等。例如50%，即為圓形。

另外，在程式碼中可以這樣設定。

val model = ShapeAppearanceModel.builder().setAllCornerSizes(ShapeAppearanceModel.PILL).build() test.shapeAppearanceModel = model

同時，這樣會覆蓋xml中的shapeAppearanceOverlay。

在程式碼中的處理應該更為常用，而且從這裡我們也可以發現，ShapeableImageView實際上就是採用的ShapeAppearanceModel來進行Shape的處理的。

直線Cut

再看下另一種Corner處理，程式碼如下所示。

```

```

即對Corner進行直角裁剪，效果如圖所示。

例如設定50%，即為裁剪成菱形。

混合

多種效果，在Style中可以和具體指定的Corner混合作用，產生不同的效果，程式碼如下所示。

```

```

效果如圖所示。

描邊

除了對Corner的處理之外，ShapeableImageView同樣可以對邊界進行描邊處理，在ShapeableImageView中指定strokeWidth和strokeColor即可，程式碼如下所示。

<com.google.android.material.imageview.ShapeableImageView android:id="@+id/test" android:layout_width="wrap_content" android:layout_height="wrap_content" app:strokeColor="@color/colorAccent" app:strokeWidth="4dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" app:srcCompat="@drawable/test" />

效果如圖所示。

同時，描邊是可以和裁剪結合起來用的，程式碼如下所示。

<com.google.android.material.imageview.ShapeableImageView android:id="@+id/test" android:layout_width="200dp" android:layout_height="200dp" android:padding="4dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" app:shapeAppearanceOverlay="@style/ShapeAppearance.circle" app:srcCompat="@drawable/test" app:strokeColor="@color/colorAccent" app:strokeWidth="4dp" />

效果如圖所示。

關於描邊寬度需要注意的是，和自定義View一樣，描邊的寬度是中心點在Layout邊界，所以是Layout邊界內外均分strokeWidth的，所以描邊是可能超出Layout邊界的，造成截斷的效果，所以可以設定內padding來處理溢位。

ShapeableImageView裁剪的原理

ShapeableImageView的原始碼並不複雜，核心程式碼如下。

實際上，就是在5.0之上，使用ViewOutlineProvider來對Image進行裁剪。

ViewOutlineProvider

ViewOutlineProvider是Android在5.0之後提出的對Shape處理的標準API，其效率會比傳統的通過Xfermode進行裁剪的方式高很多，程式碼如下所示。

class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) test.outlineProvider = object : ViewOutlineProvider() { override fun getOutline(view: View, outline: Outline) { // outline.setRoundRect(0, 0, view.width, view.height, 32f) // outline.setOval(0, 0, view.width, view.height) } } test.clipToOutline = true } }

其中的兩行註釋程式碼，分別用於繪製圓角矩形和圓形，效果如下所示。

除了這種最簡單的處理外，ViewOutlineProvider還支援外凸多邊形的設定，程式碼如下所示。

val path = Path() view.elevation = 4f path.moveTo(-20f, -20f) path.lineTo(-20f, view.height.toFloat() + 20) path.lineTo(view.width.toFloat() + 20, view.height.toFloat() + 20) path.lineTo(view.width.toFloat() + 20, -20f) path.close() outline.setConvexPath(path)

可以用於繪製外邊框、氣泡邊角和elevation陰影等效果。

修仙

對於Android和Flutter相關技術感興趣的朋友，可以新增我的微信，拉你進Flutter修仙群和Android開發群，微訊號 Tomcat_xu。

這是我的網站 http://xuyisheng.top 這裡有Flutter、Android、Kotlin的優質內容，歡迎大家訪問。