MDCのBottomAppBarのShadowの実現方法

2019/1/28
potatotips #58

Transcript

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

   View Slide

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

   View Slide

3. View Slide

4. .BUFSJBM%FTJHO$PNQPOFOUT
   

   View Slide

5. #PUUPN"QQ#BS
   

   View Slide

6. 04͕4IBEPXΛඳը͢Δ৚݅
   w "OESPJEˢ
   w &MFWBUJPO͕ΑΓେ͖͍
   w 7JFXͷ0VUMJOF͕௕ํܗ
   • Outline.MODE_ROUND_RECT
   w ·ͨ͸ತਤܗ
   • Outline.MODE_CONVEX_PATH
   

   View Slide

7. #PUUPN"QQ#BS
   

   View Slide

8. Ͳ͏΍ͬͯ
   ࣮ݱ͞Ε͍ͯΔͷ
   

   View Slide

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

   View Slide

10. #PUUPN"QQ#BS5PQ&EHF5SFBUNFOU
    @Override
    public void getEdgePath(…) {
    …
    shapePath.lineTo(…)
    shapePath.addArc(…)
    shapePath.addArc(…)
    shapePath.addArc(…)
    shapePath.lineTo(…)
    …
    }
    

    View Slide

11. BEE"SD
    BEE"SD
    BEE-JOF BEE-JOF
    #PUUPN"QQ#BS
    BEE"SD
    

    View Slide

12. .BUFSJBM4IBQF%SBXBCMFESBX
    MaterialShapeDrawable.drawCompatShadow
    → EdgeShadowOperation.draw
    → ShadowCompatOperation.draw
    → ShadowRenderer.drawCornerShadow /
    ShadowRenderer.drawEdgeShadow
    canvas.drawBitmap(shadowLayer, …)
    

    View Slide

13. 4IBEPX3FOEFSFSESBX$PSOFS4IBEPX
    …
    cornerShadowPaint.setShader(
    new RadialGradient(
    …,
    Shader.TileMode.CLAMP));
    …
    canvas.drawArc(
    …,
    cornerShadowPaint);
    …
    

    View Slide

14. 4IBEPX3FOEFSFS
    ΂ΜΓ
    

    View Slide

15. View Slide

16. ·ͱΊ
    w #PUUPN"QQ#BS͸.BUFSJBM4IBQF%SBXBCMFΛ࢖͏
    w .BUFSJBM4IBQF%SBXBCMFͷ5PQ&EHF͕
    #PUUPN"QQ#BS5PQ&EHF5SFBUNFOU
    w #PUUPN"QQ#BS5PQ&EHF5SFBUNFOU͸

    BSDͰ͘΅ΈΛදݱ͍ͯ͠Δ
    w Өͷඳը͸4IBEPX3FOEFSFS
    

    View Slide

17. View Slide