MDCのBottomAppBarのShadowの実現方法

 MDCのBottomAppBarのShadowの実現方法

2019/1/28
potatotips #58

Ad449f3f4e595ade283a30c4f66010be?s=128

HiroYUKI Seto

January 28, 2019
Tweet

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