woong's

안드로이드 레이아웃 최적화 본문

Develop/Android

안드로이드 레이아웃 최적화

dlsdnd345 2016. 2. 14. 16:13

안드로이드 레이아웃 최적화 


안드로이드는 모바일 디바이스에서 구동되는 os 입니다 .
모바일 디바이스에는 장비적인 한계가 있습니다 .
제한된디바이스 파워와 데이터 저장소, 작은 화면, 갑갑한 배터리 수명 같은 모바일 장치 환경에서
가능한 한 효율적으로 실행되어야 한다는 것이 정말 쉽지 않은것 같습니다 .

이를 위해서 해야할 것들을 해보고자 합니다 .

그중의 한가지가 최적의 레이아웃 구성 확인 방법 입니다 .



최적의 레이아웃 구성 확인 방법


레이아웃이 그려지기 위해서는 Main Thread에서 xml의 레이아웃을 파싱해서 해당 View를 그립니다.
레이아웃의 구조가 많거나 복잡하면 그리는 시간이 오래 걸리기때문에 사용자들은 반응이 느리다라고 느끼게 됩니다.
앱이 좀더 빠르게 작동되도록 하기위해서 레이아웃 구조 최적화는 필수 요소입니다.

레이아웃 최적화를 하기 위해서 이번 android Jelly Bean 4.2 버젼 부터 OverDraw 체크 기능이 생겨 났습니다 .
이 체크 기능을 통해 색깔로 레이아웃이 최적화 되었는지 확인을 할수 있습니다 .


레이아웃의 색깔 구분


레이아웃 1개 : 블루
레이아웃 2개 : 그린
레이아웃 3개 : 빨강
레이아웃4개 이상 : 진한 빨강

 

 

레이아웃 최적화의 나쁜 사례와 좋은 사례

나쁜사례


 

국내 유명 앱 입니다 .


귝내 유명앱 조차 레이아웃이 최적화 되있지 않아 3단계 빨강과 4단계인 진한빨강을 볼수 있습니다 .

 

 

좋은사례

 

 

 

 

구글 플레이 스토어 레이아웃 입니다 .
구글 및 외국 유명 앱들은 빨강색이 아닌 파랑 , 초록이 전체전인것을 확인 할수 있습니다 .

 

1. OverDraw 확인 방법

 



4.2 환경설정 > 개발자 옵션에 가면 GPU 초과 표시가 있습니다 .
이 옵션을 선택하면 레이아웃의 OverDraw 를 색으로 표시를 해주는것을 볼수 있습니다 .

레이아웃을 확인후 수정하는 방법에 대해 말씀드리기 위해 개발한 앱하나를 보여 드리겠습니다 .






제앱도 상태가 엉망입니다 .

반성해야지요 이제 앞으로는 이런일 없도록 체크하면서 개발해야겠습니다 .

그래도 지금에서라도 확인할수 있어 고쳐보도록 하겠습니다 .


1. OverDraw 최적화 방법


레이아웃 투명 제거

개발을 하다보면 배경이 필요없는 위젯에서 보통 background 에 "#00000000" 으로 투명으로 처리를 합니다 .
하지만 눈에는 보이지 않지만 자바에서는 xml 을 파싱하고 투명에 대한값을 draw 한다고 합니다 .
투명이라도 하나의 레이아웃을 만들게 되는 것입니다 . 이것을 해결하기 위해서 ,
background="#00000000" 이 아닌 background="#unll" 을 넣어주면 되겠습니다.


불필요한 레이아웃 제거

xml 을 만들다보면 리니어 레이아웃, 렐러티브 레이아웃등 여러가지 레이아웃을 사용하다보면 불필요하게
레이아웃 안에 레이아웃이 들어가는것을 확인할수 있습니다 .
이런경우 불필요한 레이아웃을 정리해주어야 합니다 .


테마제거

마지막으로 액티비티를 구성하다보면 타이틀 바를 제거 하기 위해 매니페스트 파일의 액티비티에 
android:theme="@android:style/Theme.Translucent.NoTitleBar" 
속성을 통해 타이블바를 제거합니다 .

타이틀바가 제거 되고 배경을 투명처리합니다 .
하지만 이또한 투명처리만 될뿐 draw 되고 있어 레이아웃이 한층 겹쳐 나타납니다 .


1
2
3
    <style name="AppBaseTheme" parent="android:Theme.Holo.Light.NoActionBar">
        <item name="android:windowBackground">@null</item>
    </style>


위와 같이 windowBackground 를 제거하면 한겹의 레이아웃을 제거 할수 있습니다 .


이정도의 레이아웃 최적화를 거치면 좀더 나은 레이아웃을 볼수 있습니다 .


아까의 3단계 , 4단계의 화면을 이 절차를 통한 결과 입니다 .







이렇게 theme 에 백그라운드를 없애면 초록색 보다는 파란색을 좀더 보실수 있습니다 .

이런 방법들을 통해서 레이아웃을 디자인하시면 빨간색을 없애고 최적화된 레이아웃을 만들수 있을것 같습니다 .


Comments