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만 선택 해준다.

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

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

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

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

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

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

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

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