MDCのBottomAppBarのShadowの実現方法

Transcript

1. גࣜձࣾϊϋφɹ੉ށ༏೭ .%$ͷ#PUUPN"QQ#BSͷ
   4IBEPXͷ࣮ݱํ๏

2. ੉ށ
   ༏೭
   ˏTFUP@IJ גࣜձࣾϊϋφ
   ΞϓϦΤϯδχΞɺ
   ϦαʔνɺࢪࡦɺσβΠϯ

3. None

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
    ΂ΜΓ

15. None

16. ·ͱΊ w #PUUPN"QQ#BS͸.BUFSJBM4IBQF%SBXBCMFΛ࢖͏
    w .BUFSJBM4IBQF%SBXBCMFͷ5PQ&EHF͕ #PUUPN"QQ#BS5PQ&EHF5SFBUNFOU
    w #PUUPN"QQ#BS5PQ&EHF5SFBUNFOU͸
 BSDͰ͘΅ΈΛදݱ͍ͯ͠Δ
    w

    Өͷඳը͸4IBEPX3FOEFSFS
17. None