Eclipse, IntelliJ에서 Live Templates를 이용한 빠른 레이아웃 구성



Eclipse, IntelliJ IDE에서 Live Templates기능을 이용하여 레이아웃을 빠르게 구성하는 방법을 소개하고자 한다. Live Templates이란 기능을 통해 코드 자동완성하는것과 동일하게 사용자가 커스텀으로 구성 할 수 있다.  


IntelliJ IDE에서 설정 > Live Templates으로 들어가면 다음과 같이 다양한 템플릿들이 존재한다. (Eclipse도 동일)


기본적으로 많은 종류의 템플릿이 존재 하며, 하나를 선택 해보면 금방 알 수 있다. fori를 예로 들면, fori를 입력하고 탭버튼을 누르면 Texplate text가 자동으로 완성되는 설정이며 $$은 탭을 누를때 마다 이름을 위치가 이동되며 수정 하면된다.  기본 적으로 제공되는 템플릿도 반복적으로 사용하는 것들이 많이 있으니 익혀 두면 편할 것이다. 

본론으로가서 우리는 XML에서 레이아웃 구성을 빠르게 하기위해 템플릿을 구성해야 한다. 가장 많이 쓰는 레이아웃과 뷰를 다음과 같이 정리해서 설정 했다.

빠른 입력을 위해서 레이아웃이나 뷰의 첫 영문 한자로 약자로 지정했다. 예를 들어 TextView를 입력을 위해 t를 약자로 지정했다. 


Framelayout → f

ImageView → i

LinearLayout → l

RelativeLayout → r

TextView → t

위와 같은 식으로 약어를 지정해주고 아래 Template text에 입력될 값을 설정 하면된다. XML에서만 사용될것이기 때문에 아래 Define에서 XML만 선택 해준다.

v8eabtMtMKXtr77tlXbbFxA

얼마나 빠르게 레이아웃 구성을 할 수 있는지 확인 해보자.









Android 레이아웃 디테일하게 확인하는 방법

안드로이드 앱 개발시 레이아웃작업은 참 힘들다. 다양한 기기의 해상도를 지원하기 위해서 DP단위를 쓰기 때문에 디자이너나 개발자는 힘이 빠진다. 개발하기도 힘들지만 이것을 확인 하는것도 힘들다. 디자이너는 1px이라도 어긋나면 달려와서 고쳐 달라고 요구하기도 하고, 어떨 경우는 디자이너도 모르게 넘어 가는 경우도 있다. 

개발자 입장에서는 1px쯤이야 하고 넘어 가지만 디자이너한테는 용납되지 않는다. 하지만 서비스 입장에서는 이런 디테일한 부분도 챙기면 좋기는 하지만 중요한건 개발자 눈에는 보이지 않는 다는 점이다.

이런 개발자와 디자이너들이 레이아웃을 좀 더 명확하게 볼 수 있는 GridWichterle 라는 안드로이드 앱으로 가능하다.

GridWichterle 앱을 통해서 화면에 그리드를 그려 볼 수 있다. 색상, 그리드 간격을 설정 할수 있다. 이것을 이용해서 가이드를 바탕으로 레이아웃이 정확하게 짜여졌는지 확인이 가능하다.  

개발자는 이 앱을 실행 해놓고 디자인 가이드라인에 레아웃을 작업을 하면 바로바로 확인이 가능하기 때문에 유용듯 하다.

앱의 코드도 깃허브에 공개했으니 좀더 보완해서 사용해도 좋을듯 하다.

안드로이드 앱 성능 최적화 – 2. 최적의 레이아웃 구성 확인방법

안드로이드 플랫폼이 국내에 출시 된지도 약 3년이라는 시간이 지났습니다. 개발자들도 많은 경험이 축척되면서 앱의 퀄리티는 점점더 높아지고 있으나, 아직 해외 만큼의 퀄리티를 가진 국내앱은 손에 꼽힐 정도라고 생각합니다. 이런 퀄리티 높은 앱을 개발하기위해 좀 더 성능을 높이는 방법에 대해 소개 하기위해 “안드로이드 앱 성능 최적화”라는 주제를 가지고 연제글을 쓰게 되었습니다.

안드로이드 앱 성능 최적화 – 2. 최적의 레이아웃 구성확인 방법

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

최적화된 레이아웃인지 확인 하는 방법중 안드로이드 4.2부터 개발자 옵션에 불필요하게 드로잉 되는 영역을 알려주는 기능이 있습니다. Show GPU overdraw를 활성화 한다음 앱을 실행하면 드로잉 횟수를 색상으로 표현 해줍니다.

Blue 1번 

Green 2번 

Light Red 3번

Dark Red 4번 이상

구글에서는 Light Red인 3번 정도까지는 무리 없으며 Dark Red는 최대한 없게 만들어라고 제안해주고 있습니다. 

여기에서 Draw되는 영역은 테마의 윈도우 배경도 포함 됩니다.

레이아웃에서 특별히 배경을 따로 주었다면 테마의 윈도우 배경은 android:background=”@null”을 주어 없애도록 합시다. 간혹 android:background=”@android:color/transparent”를 주는 경우가 있는데 눈에는 보이지 않지만 실제 내부적으로 draw하게 되니 @null로 주어 그려지지 않게합시다.

이렇게 가이드라인이 잘 지켜지고 있나 보기위해 몇개의 앱을 실행 해보았습니다.

구글에서 만든 앱인 구글 플레이와 구글 플레이어를 실행 해보았습니다. 빨강색은 거의 찾아 볼수 없을 정도로 최소한으로 그려지게 레이아웃을 구성 한것을 볼 수있습니다. 

해외 유명한 앱들도 테스트 해보면, 빨강색이 거의 찾아 볼 수 없을 정도로 최적화된 레이아웃을 구성하고 있습니다.

국내 유명한 앱들도 테스트를 해보니, 빨강색이 아닌 부분을 찾아 볼 수가 없습니다. 필요이상으로 draw되고 있다는 것을 보여주고 있습니다.

이런식으로 Over Draw가 되는 곳에는 레이아웃을 단순하게 정리해야 될 필요가 있다는 것을 확인 해보 실수 있습니다.

다음 시간에는 이런 Over Draw된 영역을 어떤식으로 최적의 레이아웃을 구성하는지에 대해 알아보겠습니다. 

<

p style=”text-align: left; clear: none; float: none; “>