Upgrade to Pro — share decks privately, control downloads, hide ads and more …

MDCのBottomAppBarのShadowの実現方法

 MDCのBottomAppBarのShadowの実現方法

2019/1/28
potatotips #58

HiroYUKI Seto

January 28, 2019
Tweet

More Decks by HiroYUKI Seto

Other Decks in Technology

Transcript

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

    View Slide

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

    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