Skip to content

Android:Layouts

Android Layout 사용방법에 대한 기본정보를 정리한다.

List of Layout

안드로이드의 기본 화면 구성은 xml파일을 통해서 이루어진다. (MFC에서는 리소스파일 .rc를 이용하지만, 안드로이드는 xml태그를 통해서 구현시킨다.) 그리고 각 xml파일 내에 1개 이상의 레이아웃을 집어 넣어서 화면을 구성할 수 있다. (마치 HTML 태그와 비슷함)

레이아웃에는 용도에 따라 몇가지로 분류가 된다. 대표적인 레이아웃은 아래와 같다.

android.widget.LinearLayout
이름처럼 하나의 선 (수평 or 수직)으로된 레이아웃이다. 이 레이아웃 내에서 또다른 레이아웃이나 위젯(Widget)을 넣을 경우 모두 일직선상에 놓이게 된다. LinearLayout에서는 하위 View에 대해서 weight 속성을 부여할 수 있다. 이 속성은 View의 상대적인 크기를 결정하게 된다.
android.widget.RelativeLayout
이름처럼 상대적인 위치를 이용해 구현하는 레이아웃이다. 즉, 각 스크린 경계에 대하여 View의 상대 위치를 지정할 수 있게 된다.
android.widget.AbsoluteLayout (Deprecated in API Level 3)
RelativeLayout과는 다르게 절대적인 위치를 이용해 구현하는 레이아웃이다.
android.widget.FrameLayout
레이아웃 내에서 생성된 레이아웃이나 위젯이 모두 왼쪽 상단에 들어가게된다. 화면은 가장 마지막에 불러온 레이아웃이나 위젯이 중첩되어 보이게 된다. (하위 뷰가 멀티인 경우 무조건 좌상에 붙어 버리므로 이전 컴포넌트를 덮어버리는 형식으로 추가된다.)
android.widget.TableLayout
테이블, 즉 표 형태의 배열로 만들 수 있는 레이아웃이다. 등 과 같은 옵션을 사용하여 행/열을 지정할 수 있다.
ScollLayout
말 그대로 스크롤이 있는 레이아웃이다. 내용물이 많으면 스크롤바가 생겨서 자동으로 스크롤이 된다.
android.widget.GridLayout
그리드 스타일의 레이아웃.

Relative classes

Inheritance

Widgets

Minor

  • android.support.v4.widget.DrawerLayout
  • android.support.v4.widget.SlidingPaneLayout
  • android.support.v4.widget.SwipeRefreshLayout
  • android.support.design.widget.CoordinatorLayout

Merge

화면 해상도에 관계없는 레이아웃(Layout) 만들기

안드로이드로 개발하다보면 xml 파일을 이용해서 레이아웃(Layout)을 설정하고 그 안에서 코드를 작성하는 경우가 대다수일겁니다. 이 때, 각 뷰(View)들의 좌표나 폭, 높이 등을 설정하는데, 픽셀 좌표인지, 밀도 좌표인지 기타 또 다른 좌표계인지에 따라 그 값이 바뀌게 됩니다. 또한 해당 어플리케이션을 실행시킬 단말기의 스크린 크기나 해상도에 따라 화면이 어색하게 나오거나 심한 경우에는 깨진 화면이 나타나기도 합니다.

저는 480x800의 해상도를 가진 갤럭시S2와 600x1024의 해상도를 가진 갤럭시탭 7인치 모델을 동시에 사용해서 개발하다보니 서로의 GUI 화면 좌표가 다르게 표시되는 현상이 발생해버렸습니다. 별의별 수단을 써봤습니다. 픽셀 좌표인 px를 사용해서 값을 지정해보기도 했고, 밀도 좌표인 dip나 dp를 사용해보기도 했습니다. 여기서 잠깐!! px와 dp에 대해서 먼저 정리하고 넘어가겠습니다. 

안드로이드는 160dpi를 기본으로 가정하고 있습니다. 이때 화면 해상도는 320x480이 됩니다.
해상도 320x480에서 가로폭이 160dp가 되기 때문에, 1dp의 크기는 320 / 160 = 2 pixel이라고 볼 수 있습니다.

하지만 요즘 단말기들의 해상도들은 WVGA인 480x800의 단말기가 많습니다.
픽셀 좌표를 이용해서 320x480 단말기에서 GUI를 구성하면 480x800인 단말기에서는 작은 화면으로 출력이 되고,
그 반대로 480x800에서의 GUI를 320x480인 단말기에서 출력하면 GUI가 잘려서 보여지게 됩니다.
심한 경우에는 깨진 GUI를 보이기도 하죠.

이 때를 대비해서 만든 것이 dip(density independent pixel) 단위입니다.
화면의 픽셀 밀도를 정의해서 만든 단위이기 때문에 같은 dip 값을 이용해서 레이아웃을 작성하면 
어느 해상도를 가진 단말기라고 하더라도 같은 비율로 이루어진 GUI 화면을 보여주게 됩니다. 
즉, 화면 해상도에 관계없는 균일한 GUI를 제공하는 어플리케이션을 제공할 수 있는거죠.

안드로이드에서 간주하고 있는 해상도 범주는 크게 3가지 입니다.
LDPI(저해상도), MDPI(중해상도), HDPI(고해상도) 이며, 각각의 밀도값은 LDPI가 120, MDPI가 160, HDPI가 240입니다.
(인치당 픽셀수를 의미합니다.)

그리고 픽셀 좌표와 dip 좌표의 환산공식은 다음과 같습니다. 

dip = px * (160 / density)

안드로이드가 160dpi를 기준으로 하고 있기 때문에 위와 같은 공식이 나오는 것이며, 만약 해상도 480x800 단말기에서 이런 수식을 계산하게 된다면, 480x800은 고해상도인 HDPI이기 때문에 

// 480x800 해상도에서 dip와 px 단위 환산
dip = px * (160/240) = px * (2/3)

이 됩니다. 따라서 480x800 px 좌표는 320x533 dip 좌표라고 생각하면 됩니다.

하지만 이렇게 px나 dip만을 이용해서 모든 해상도를 고려한 레이아웃이 술술술 나온다면 얼마나 좋겠습니까? 저도 갤럭시S2와 갤럭시탭7인치를 갖고 개발하다가 큰 난관에 봉착하게 되었는데 이 녀석들이 같은 dpi를 가지고 있는 겁니다. 화면 해상도는 480x800과 600x1024인데 dpi는 둘 다 240dpi입니다.

즉, 갤럭시S2에 맞게 GUI를 구성하면 갤럭시탭에서 깨진 GUI를 보여주게 되더군요. 결국, 이런 저런 문제 해결을 고려하다가 레이아웃에서 가중치(weight)값을 이용해서 화면을 구성하는 방법을 택하게 되었습니다. 어제 하루종일 px와 dip를 갖고 고민을 했지만, weight를 이용하니 고민이 한번에 날아갔습니다.

빈공간 Layout

아래의 예제를 확인해 보면 된다. 

<view android:layout_width="0dp" android:layout_weight="7" .../> 
<view android:layout_width="0dp" android:layout_weight="3" ..../>

위와 같이 하면 왼쪽은 70% 오른쪽은 30%가 된다. 빈 공간을 주고싶을 경우 두번째 뷰에 텍스트같은 값이나 배경같은걸 안주면 공간만 차지하게 된다.

버튼(Button) 레이아웃(Layout)에 아이콘 띄우는 방법

이미지와 텍스트가 함께 들어간 버튼을 만드는 방법은 아래와 같다.

android:drawableTop, android:drawableBottom, android:drawableLeft, android:drawableRight
텍스트의 상, 하, 좌, 우에 위치시킬 수 있다.
android:drawableStart, android:drawableEnd
텍스트가 시작하거나 종료하는 위치에 배치한다.
android:drawablePadding
텍스트와 이미지간의 간격을 조정할 수 있다.

수동으로 Layout을 Activity에 적용하는 방법

보통 레이아웃XML을 setContentView(R.layout.activity_main);과 같이 적용하는데, 직접 코드상에서 레이아웃을 적용하는 방법에 대한 샘플은 아래와 같다. 

final int kViewPixelWidth = 400; // 테스트용 임시너비.
final int kViewPixelHeight = 400; // 테스트용 임시높이.

RelativeLayout testview = new RelativeLayout(context);
RelativeLayout.LayoutParams testview_param = new RelativeLayout.LayoutParams(kViewPixelWidth, kViewPixelHeight);

CameraPreview cameraPreview = new CameraPreview(context);

testview.setGravity(Gravity.CENTER);
testview.setBackgroundColor(Color.WHITE);
testview.addView(cameraPreview, testview_param);

setContentView(testview);

Layout XML inside an empty RelativeLayout

비어있는 Layout에 layout.xml 파일을 연결하는 방법. 

LayoutInflater mLayoutInflater;
mLayoutInflater= getLayoutInflater();
RelativeLayout mLayout= mLayoutInflater.inflate(R.layout.name, null);

tools:context 란?

하나 이상의 Activity와 관련되어 있는 Layout을 쉽게 구성하고 추가 하기 위해 생겨난 놈으로. Graphic Layout 속성에서 Activity를 선택할 수 있는 놈이 생겼는데. 요걸 선택하면 속성이 변한다.

Favorite site