MDCのBottomAppBarのShadowの実現方法

2019/1/28
potatotips #58

Transcript

1. גࣜձࣾϊϋφɹ੉ށ༏೭ .%$ͷ#PUUPN"QQ#BSͷ
   4IBEPXͷ࣮ݱํ๏
2. ੉ށ
   ༏೭
   ˏTFUP@IJ גࣜձࣾϊϋφ
   ΞϓϦΤϯδχΞɺ
   ϦαʔνɺࢪࡦɺσβΠϯ
4. .BUFSJBM
   %FTJHO
   $PNQPOFOUT
5. #PUUPN"QQ#BS
6. 04͕4IBEPXΛඳը͢Δ৚݅ w "OESPJE
   ˢ
   w &MFWBUJPO͕ΑΓେ͖͍
   w 7JFXͷ0VUMJOF͕௕ํܗ
   
   • Outline.MODE_ROUND_RECT w ·ͨ͸
   ತਤܗ
   • Outline.MODE_CONVEX_PATH
7. #PUUPN"QQ#BS
8. Ͳ͏΍ͬͯ
   ࣮ݱ͞Ε͍ͯΔͷ
9. #PUUPN"QQ#BS࣮૷ EdgeTreatment topEdgeTreatment = new BottomAppBarTopEdgeTreatment(…); ShapeAppearanceModel appBarModel = materialShapeDrawable.getShapeAppearanceModel(); appBarModel.setTopEdge(topEdgeTreatment); materialShapeDrawable.setShadowCompatibilityMode( SHADOW_COMPAT_MODE_ALWAYS); … ViewCompat. setBackground(this, materialShapeDrawable);
10. #PUUPN"QQ#BS5PQ&EHF5SFBUNFOU @Override public void getEdgePath(…) { … shapePath.lineTo(…) shapePath.addArc(…) shapePath.addArc(…) shapePath.addArc(…) shapePath.lineTo(…) … }
11. BEE"SD BEE"SD BEE-JOF BEE-JOF #PUUPN"QQ#BS BEE"SD
12. .BUFSJBM4IBQF%SBXBCMFESBX MaterialShapeDrawable.drawCompatShadow → EdgeShadowOperation.draw → ShadowCompatOperation.draw → ShadowRenderer.drawCornerShadow / ShadowRenderer.drawEdgeShadow canvas.drawBitmap(shadowLayer, …)
13. 4IBEPX3FOEFSFSESBX$PSOFS4IBEPX … cornerShadowPaint.setShader( new RadialGradient( …, Shader.TileMode.CLAMP)); … canvas.drawArc( …, cornerShadowPaint); …
14. 4IBEPX3FOEFSFS
    ΂ΜΓ
16. ·ͱΊ w #PUUPN"QQ#BS͸.BUFSJBM4IBQF%SBXBCMFΛ࢖͏
    w .BUFSJBM4IBQF%SBXBCMFͷ5PQ&EHF͕ #PUUPN"QQ#BS5PQ&EHF5SFBUNFOU
    w #PUUPN"QQ#BS5PQ&EHF5SFBUNFOU͸
 BSDͰ͘΅ΈΛදݱ͍ͯ͠Δ
    w Өͷඳը͸4IBEPX3FOEFSFS