Tweet
Tweet

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

안성용 SOUP soupyong@gmail.com

Slide 3

Slide 3 text

Link: https://medium.com/@androidtechweekly AndroidTechWeeklyKorea

Slide 4

Slide 4 text

?

Slide 5

Slide 5 text

Neumorphism? Link: https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6

Slide 6

Slide 6 text

Neumorphism? Link: https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

생각보다관심을갖는사람들이있는것같아서 
 가볍게공유해보려고합니다.

Slide 9

Slide 9 text

Neumorphism 구현방법 2장의그림자를좌상단,우하단에그려줍니다. 각그림자는부드럽게퍼져나가게Blur처리합니다.

Slide 10

Slide 10 text

이슈 #1: 렌더링 문제 View영역을벗어난부분에그림자를그려서, 그림자가잘려나가는현상이있었습니다.

Slide 11

Slide 11 text

이슈 #1: 렌더링 문제 root에 를 사용하면 해결될까? android:clipChilderen="false" OS버전에따라혹은RelativeLayout등의ViewGroup에서는 속성이제대로동작하지않더라구요. 그래서...

Slide 12

Slide 12 text

이슈 #1: 렌더링 문제 inset width height 결국,inset을추가하여해결(?)했습니다. (심지어padding을이용해보기도했어요.)

Slide 13

Slide 13 text

이슈 #2: Elevation은 어떻게 처리할까? MaterialCard는그림자가두터워지는것, 표면이밝아지는것으로표현합니다.

Slide 14

Slide 14 text

이슈 #2: Elevation은 어떻게 처리할까? NeumorphicCard는 그림자를이동시켜서 깊이를표현할 수있습니다.

Slide 15

Slide 15 text

이슈 #2: Elevation은 어떻게 처리할까? Material Neumorphism 재밌게도이를이용하여 PressEffect를손쉽게구현할수있었는데요. 어떤방법이있을까요?

Slide 16

Slide 16 text

이슈 #2: Elevation은 어떻게 처리할까? 혹시 아래처럼 Touch Event를 다루는 방법을 떠올리신 건 아니겠죠? override fun onTouchEvent(event: MotionEvent): Boolean { when (event.action) { MotionEvent.ACTION_DOWN -> setShapeType(ShapeType.PRESSED) MotionEvent.ACTION_UP -> setShapeType(ShapeType.FLAT) } return super.onTouchEvent(event) }

Slide 17

Slide 17 text

이슈 #2: Elevation은 어떻게 처리할까? StateListAnimator를이용하면간단합니다! // NeumorphCardView.kt override fun setTranslationZ(translationZ: Float) { super.setTranslationZ(translationZ) shapeDrawable.setTranslationZ(translationZ) } // res/animator/state_list_animator.xml

Slide 18

Slide 18 text

이슈 #3: Layout Preview에 아무것도 안보여요!

Slide 19

Slide 19 text

이슈 #3: Layout Preview에 아무것도 안보여요! 원래는이렇게 보여야하는데요... RenderScript로처리하는 Blur부분에서문제가 발생하더라구요.

Slide 20

Slide 20 text

이슈 #3: Layout Preview에 아무것도 안보여요! 그래서!isInEditMode()에서는 Blur처리하지않도록수정해서 해결(?)했습니다.

Slide 21

Slide 21 text

이슈 #4: Tablet에서는 그림자가 잘려요! 저해상도 단말에서만 발생! 기기해상도를고려하지않고, 동일한BlurRadius를사용하여 발생하는이슈입니다.

Slide 22

Slide 22 text

이슈 #4: Tablet에서는 그림자가 잘려요! 기기해상도에따라 BlurRadius를설정해주면...?

Slide 23

Slide 23 text

이슈 #4: Tablet에서는 그림자가 잘려요! 짠!해결입니다.

Slide 24

Slide 24 text

이슈 #5: RecyclerView에 CardView를 넣었더니 버벅거려요!

Slide 25

Slide 25 text

이슈 #5: RecyclerView에 CardView를 넣었더니 버벅거려요! ViewHolder가Recycle되면 View가Gone,Visible순으로진행되는데요. 이때,invalidateSelf()를호출해다시그리게됩니다. 보통은문제가없지만.. dirtyflag를이용하여 Bitmap을재생성하기때문에 문제가발생했습니다.

Slide 26

Slide 26 text

이슈 #5: RecyclerView에 CardView를 넣었더니 버벅거려요! 수정후에는 한번만생성되어 Jank를해결할수있었습니다.

Slide 27

Slide 27 text

하지만 이외에도... 개발자들의요구와버그는끝이없었다

Slide 28

Slide 28 text

FLAT BASIN PRESSED FLAT BASIN PRESSED ShapeType

Slide 29

Slide 29 text

LightSource LEFT_TOP RIGHT_TOP LEFT_BOTTOM RIGHT_BOTTOM

Slide 30

Slide 30 text

Background Color, Stroke neumorph_backgroundColor neumorph_strokeColor neumorph_strokeWidth

Slide 31

Slide 31 text

Corner Customization <item name="neumorph_cornerFamily">rounded</item> <item name="neumorph_cornerSize">16dp</item> <item name="neumorph_cornerSizeTopLeft">64dp</item> <item name="neumorph_cornerSizeTopRight">64dp</item>

Slide 32

Slide 32 text

(해치웠나...?)

Slide 33

Slide 33 text

‣ Bitmap을 Blur 처리하여 Neumorphic UI를 성취할 수는 있었다. 
 (성능은 먼나라 이웃나라 이야기...) ‣ 단순히 재미로 시작했지만, 어느새 이슈에 쫓기는 느낌이 들었다. 
 (Star가 많은 오픈소스 메인테이너는 참 대단하다는 생각이 들었다.) ‣ 제곧내, 중복빌런 등 대부분의 이슈는 불친절한 느낌이었다. 
 (오픈소스 라이브러리에 이슈 올릴 때는 자세하게 적어줘야 겠다는 반성) 끝으로 소감을 정리하면!

Slide 34

Slide 34 text

감사합니다! Github: https://github.com/fornewid/neumorphism Slide: https://speakerdeck.com/fornewid/neumorphism-in-android Blog: https://medium.com/@fornewid/3a298e0337b0