'ios'에 해당되는 글 1건

  1. 2014.03.11 Android에서 iOS 에어로글래스 효과 만들기 (1)
2014.03.11 14:27

이번에 아이폰으로 바꾸면서 iOS7을 접했습니다. 그런데 너무 마음에 드는게 상단 타이틀바와 위에 노티바? 가 혼연일체가 되어 같은 색으로 표시됨과 동시에 윈도의 에어로 글래스 효과인데, 안드로이드에서는 적용된 앱이 별로 없더군요. (야후 날씨앱이 적용된거 같은데....자세히는 모르겠네요)


요즘 디자인 트랜드가 Flat design 인데 여기서 나오는것이 Focus on Typo, Color 등이 있습니다. 

그중 하나가 이런 배경 흐림 효과가 다른 엘리먼트에 Focus on 할 수 있게 도와주는, 그런 역할을 하는듯 싶네요.

이런식으로 배경 흐림을 줌으로써 단순히 알파를 준것과는 다르게 인지부하를 많이 줄일 수 있는 방안이라 생각됩니다.


* iOS의 경우, status bar 또한 앱의 색상에 맞춰서 바꿀 수 있는데 안드로이드의 경우 지원하지 않습니다. 요즘 버전들은 또 이쁘게 나오는것 같은데 아이폰으로 갈아타서 자세힌 모르겠네요... 라기보단, 대신 안드로이드에서도 아이폰과 같이 status bar의 색상을 바꿀 수 있는 라이브러리가 존재합니다.



그래서 안드로이드에서는 안될까? 해서 한번 해보기로 했습니다. 


먼저 이러한 효과를 구현하기 위해서는 


1. 타이틀바의 영역을 알아내고

2. 타이틀바 아래에 위치한 뷰의 이미지를 실시간으로 가져와야하고

3. 가져온 이미지에 후처리를 가한뒤(블러)

4. 색상을 입히면 됩니다.


먼저 지금까지의 결론을 말하면 "NDK를 쓰지 않고는 제대로된 효과를 구현하기 어렵다." 입니다.

비트맵 처리가 메모리도 많이 먹고 속도도 느리기 때문에 NDK를 사용해야 실사용할 수 있을 만큼의 성능이 나올것 같습니다.



먼저 성능 생각 하지 않고 해보면 

1. 타이틀바 아래에 위치한 뷰의 원본 이미지를 가져오고

2. 타이틀바 영역부분만 잘라낸뒤,

3. 블러를 하고

4. 타이틀바의 백그라운드로 설정합니다.


이렇게 했을때 굉장히 느리고 스크롤도 힘들고 무엇보다도

스크롤할땐 갱신되지 않고 스크롤을 땟을때만 갱신이 됩니다.

(하단에 위치한 뷰는 ViewPager 이고 타이틀바의 onDraw() 를 오버라이드해 갱신을 하고 있습니다.)

굉장히 만족할만한 퀼리티이지만 실사용이 불가능해 포기.

이것은 스모키하게 색상을 추가한것입니다.



그다음으로 생각해본건 이미지의 사이즈가 너무 크다보니(갤2 기준 480x74 px) 이를 줄여서 블러 처리를 하자 인데,

(블러 처리가 부하가 심하기 때문..)

이미지를 축소한뒤, 백그라운드로 넣어주면 아래와 같이 엘리어싱이 보이게 됩니다.

하지만 퍼포먼스가 조금 나아지긴 했지만 여전히 느리고 위와 같은 문제점을 안고 있습니다.

또 퀼리티도 후지기 때문에 포기.




여기까지 진행하다가 큰 문제점인 뷰페이져에서 가로 스와이프시 타이틀바 미 갱신 문제를 해결하기로 했습니다.

일단 하단에 위치한 뷰에 대한 이미지를 가져오는 방법은 두가지가 있는데(물론 더 있겠죠.,,)


1. view.draw(muCanvas); 로 캔버스에 그리기

2. view.getDrawingCache(); 또는 view.buildDrawingCache(); 로 캐시를 비트맵 형태로 가져오기


이렇게 있습니다. 

먼저 각각 살펴보면


1번의 경우 퍼포먼스가 좋습니다. 캔버스 영역만 그려서인지 실사용할 수준의 속도가 나오지만 뷰페이져의 경우엔 가로 스와이프시 갱신되지 않고 다른 페이지에 대해서도 갱신되지 않았습니다. - 한페이지에 대해서만 그리는데 좀 더 찾아봐야할듯합니다.


2번의 경우엔 굉장히 느립니다. 미칠듯이 느립니다. 느린 원인이 이녀석이었습니다.

먼저 캐시를 가져오는 코드가


pager.setDrawingCacheEnable(true);

pager.setDrawingCAcheQuaility(DRAWING_CACHE_QUAILITY_LOW);

// ---- 여기까진 미리 셋팅 해주면 되고


실시간으로 가져오기 위해서는 

pager.getDrawingCache();를 호출하여 뷰페이저의 캐시를 가져오고 

사용한뒤엔 반드시

pager.destoryDrawingCache(); 를 호출해서 캐시를 삭제해줘야 합니다.

이때 삭제를 해주지 않으면 제대로 캐시가 갱신되지 않고 좌우 스와이프시에도 갱신이 안됩니다.








아직 고민중인데 결국 NDK를 사용해야 할것 같습니다.


블러의 경우 스택블러라 불리는 블러기법을 사용중입니다. (박스블러보단 퀼리티가 좋고 가우시안블러보단 몇배 빠르답니다)



14.5.13



그러다 실시간 갱신은 상당한 부하를 가짐을 알고 있어 이 부분을 어떻게 해결할까를 생각하다 굉장히 쉬운 방법이 떠올랐습니다.ㅋㅋㅋ


애초에 실시간이 어렵기 때문에 차라리 블러된이미지를 미리 만들어 두고 이를 옮기는 식으로 사용하면 될것 같습니다. 하지만 이것도 스크롤이벤트를 받아다가 계속 움직여 주고 가지고있는 부분의 이미지가 끝나면 곧바로 다음 이미지를 받아다가 블러를 해줘야 해서 일종의 렉이 발생할 수 있을듯 합니다만 위 방법처럼 무식하게 계속 실시간 블러를 하는것 보단 나을듯 합니다. 


도전은 나중에;;;;;;;라고 하다가 못하겟지;;;






== 계속 작성중 ==


저작자 표시 비영리 변경 금지
신고
Trackback 0 Comment 1
  1. Favicon of http://estellesiahome.tistory.com BlogIcon 에스텔시아 2014.04.07 12:48 신고 address edit & del reply

    오랫만에 와봤더니 이런 내용이 업데이트 되어 있네
    잘 지냐냐?



티스토리 툴바