外部SDKのViewにマスク処理をする方法と罠

 外部SDKのViewにマスク処理をする方法と罠

potatotips #61

0f8842fabcd31a6c9007ddcd648247db?s=128

Keita Kagurazaka

May 15, 2019
Tweet

Transcript

  1. 外部SDKのViewに マスク処理をする方法と罠 2019/05/15 potatotips #61 Keita Kagurazaka

  2. AWAについて • 定額制音楽ストリーミングサービス • 歌詞表示機能あり

  3. やりたいこと • 歌詞表示にグラデーションマスクを適用したい!

  4. やりたいこと • 歌詞表示にグラデーションマスクを適用したい! ただし、歌詞表示Viewは 外部SDKのもので 手をいれることができない!

  5. ViewGroup#dispatchDraw class MaskLayout @JvmOverloads constructor( context: Context, attrs: AttributeSet? =

    null, defStyleAttr: Int = 0 ) : FrameLayout(context, attrs, defStyleAttr) { override fun dispatchDraw(canvas: Canvas) { // canvasにchild viewを描画する super.dispatchDraw(canvas) } }
  6. ViewGroup#dispatchDraw class MaskLayout @JvmOverloads constructor( context: Context, attrs: AttributeSet? =

    null, defStyleAttr: Int = 0 ) : FrameLayout(context, attrs, defStyleAttr) { override fun dispatchDraw(canvas: Canvas) { // canvasにchild viewを描画する super.dispatchDraw(canvas) } } ここで単にcanvasにマスク処理する のはNG 後ろのViewはcanvasにすでに描画さ れているため
  7. オフスクリーンバッファ private var canvasBitmap: Bitmap? = null private var canvas:

    Canvas? = null override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) { // ViewGroupと同じ大きさのBitmapとCanvasを用意 canvasBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888) .also { canvas = Canvas(it) } }
  8. オフスクリーンバッファ override fun dispatchDraw(canvas: Canvas) { val offScreenBitmap = canvasBitmap

    ?: return super.dispatchDraw(canvas) val offScreenBuffer = this.canvas ?: return super.dispatchDraw(canvas) // オフスクリーンバッファをクリア offScreenBuffer.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR) // オフスクリーンバッファに子Viewを描画 super.dispatchDraw(offScreenBuffer) // オフスクリーンバッファの内容を渡ってきたcanvasに描画 canvas.drawBitmap(offScreenBitmap, 0f, 0f, null) }
  9. オフスクリーンバッファ override fun dispatchDraw(canvas: Canvas) { val offScreenBitmap = canvasBitmap

    ?: return super.dispatchDraw(canvas) val offScreenBuffer = this.canvas ?: return super.dispatchDraw(canvas) // オフスクリーンバッファをクリア offScreenBuffer.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR) // オフスクリーンバッファに子Viewを描画 super.dispatchDraw(offScreenBuffer) // オフスクリーンバッファの内容を渡ってきたcanvasに描画 canvas.drawBitmap(offScreenBitmap, 0f, 0f, null) } ここでoffScreenBitmapを加工すれば OK!
  10. グラデーションマスク処理 private var maskPaint: Paint? = null override fun onSizeChanged(w:

    Int, h: Int, oldw: Int, oldh: Int) { maskPaint = Paint().apply { shader = LinearGradient( 0f, 0f, 0f, h.toFloat(), intArrayOf(Color.TRANSPARENT, Color.WHITE, Color.WHITE, Color.TRANSPARENT), floatArrayOf(0f, 0.15f, 0.85f, 1f), Shader.TileMode.CLAMP ) xfermode = PorterDuffXfermode(PorterDuff.Mode.DST_IN) } }
  11. グラデーションマスク処理 override fun dispatchDraw(canvas: Canvas) { val offScreenBitmap = canvasBitmap

    ?: return super.dispatchDraw(canvas) val offScreenBuffer = this.canvas ?: return super.dispatchDraw(canvas) val mask = maskPaint ?: return super.dispatchDraw(canvas) offScreenBuffer.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR) super.dispatchDraw(offScreenBuffer) offScreenBuffer.drawRect(0f, 0f, offScreenBitmap.width.toFloat(), offScreenBitmap.height.toFloat(), mask ) canvas.drawBitmap(offScreenBitmap, 0f, 0f, null) }
  12. 罠 • 対象のViewがエフェクトを持っている場合は気をつけよう

  13. 罠 • 対象のViewがエフェクトを持っている場合は気をつけよう OverScrollエフェクトがアルファをもっ ているので、このアルファでマスクがか かってしまう!

  14. まとめ • ViewGroup#dispatchDrawで子Viewの描画をフックすれば子 Viewに自由自在にエフェクトがかけられる • オフスクリーンバッファを使うことを忘れずに • 子View自体がエフェクトを持っている場合に注意 • https://github.com/k-kagurazaka/sample-mask-sdk-view

  15. Thanks!