Tweet
Tweet

Slide 1

Slide 1 text

© 2023 Wantedly, Inc. Compose Shadow Alternative potatotips #85 2023/11/14 久保出 雅俊

Slide 2

Slide 2 text

wantedly.com/id/kubode © 2023 Wantedly, Inc. X: @swiz_ard GitHub: @kubode

Slide 3

Slide 3 text

今日の目的 © 2023 Wantedly, Inc.

Slide 4

Slide 4 text

目的 © 2023 Wantedly, Inc. https://github.com/kubode/compose-shadow-alternative の宣伝

Slide 5

Slide 5 text

影の表現 © 2023 Wantedly, Inc.

Slide 6

Slide 6 text

CSS © 2023 Wantedly, Inc.

Slide 7

Slide 7 text

SwiftUI © 2023 Wantedly, Inc.

Slide 8

Slide 8 text

Compose © 2023 Wantedly, Inc.

Slide 9

Slide 9 text

モチベ Composeでも DropShadow | BoxShadowし たい！ © 2023 Wantedly, Inc.

Slide 10

Slide 10 text

BoxShadow © 2023 Wantedly, Inc.

Slide 11

Slide 11 text

BoxShadow © 2023 Wantedly, Inc.

Slide 12

Slide 12 text

BoxShadowの実装 © 2023 Wantedly, Inc. ブラー効果のPaint（影の実体 shapeの部分をくり抜き x,yずらす 影を描画

Slide 13

Slide 13 text

DropShadow © 2023 Wantedly, Inc.

Slide 14

Slide 14 text

DropShadow © 2023 Wantedly, Inc.

Slide 15

Slide 15 text

DropShadowの実装 © 2023 Wantedly, Inc.

Slide 16

Slide 16 text

DropShadowの実装 © 2023 Wantedly, Inc.

Slide 17

Slide 17 text

DropShadowの実装 © 2023 Wantedly, Inc. BitmapとCanvasを保持

Slide 18

Slide 18 text

DropShadowの実装 © 2023 Wantedly, Inc. Compose 1.6で追加されたAPI 別のCanvasに描画できる

Slide 19

Slide 19 text

DropShadowの実装 © 2023 Wantedly, Inc. ContentのImageを描画 ブラーをかける

Slide 20

Slide 20 text

1. Android 12以降じゃないと動作しない 2. コンテンツ内のIndicationなどが効かない 3. パフォーマンスは悪い 制約 © 2023 Wantedly, Inc.

Slide 21

Slide 21 text

まとめ © 2023 Wantedly, Inc.

Slide 22

Slide 22 text

● Composeでもリッチな影表現は可能 ● 公式でサポートしてほしい まとめ © 2023 Wantedly, Inc.

Slide 23

Slide 23 text

© 2023 Wantedly, Inc. https://github.com/kubode/compose-shadow-alternative