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

potatotips #61

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!