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

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

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

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

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) } }

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にすでに描画さ れているため

オフスクリーンバッファ 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) } }

オフスクリーンバッファ 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) }

オフスクリーンバッファ 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!

グラデーションマスク処理 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) } }

グラデーションマスク処理 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) }

罠 ● 対象のViewがエフェクトを持っている場合は気をつけよう

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

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

Thanks!