꿈꾸는 엘프

 살아질 것인가. 살아갈 것인가.
이글루스 | 로그인
메뉴릿
카테고리
전체
Essay(내글)
Money(재테크)
Books(감상)
Books(추천도서)


WoodWork(목공 이야기)
Life Style(라이프스타일)


TokTokLab(모바일개발)
Transpedia(통번역)


I Want it(갖고 싶은 것들)
Like it (즐겨쓰는 모든것)
Go ! (즐겨찾기)
미분류
Profile

現톡톡랩 대표
前트랜스피디아 대표
前아침데이타시스템 과장(금융리스크 관리 컨설팅 및 개발)
前SK커뮤니케이션즈 메신저 개발팀 대리(NateOn3.7/4.0/Global Version개발)
前마켓포인트 신제품(전문가용실시간금융정보시스템) 개발 TF팀
박백민의 증권분석
Sugar Candy Mountain Lab

최근 등록된 덧글
좋은 글 감사합니다!!
by EE at 01/08
오랫동안 안드로이드 개발했지..
by 감사 at 05/08
좋은 글 잘보고 갑니다. 오래..
by ㄳㄳ at 05/07
똑같이 블로그를 하는 입장에..
by kwwon at 11/13
감사합니다. 정말 좋은자료네..
by 냐츠 at 06/26
포토로그

나의엘프의 포토로그
태그
전세 상태바사이즈 아이콘사이즈 응암1구역 집값 개발 응암2구역 모바일 쎌바이오텍 테라스가든 원목 안드로이드 부동산대책 메조트론 타운하우스 주식 투자설명회 누진세 사이즈 부동산 내이글루결산 전세대책 공간 보유세 어플개발 펜션 스마트폰 티크 주택가격
전체보기
최근 등록된 트랙백
garcinia cambogia fruit
by
garcinia cambogia
by
garcinia cambogia wikipe..
by
garcinia cambogia weight ..
by
http://helenmccrory.org/
by
buy pure garcinia cambo..
by
예비 창업자 & 소기업 사장이..
by 도서출판 부키
기본을 보면 미래가 보인다 2 -..
by 이글루스 블로거들의 살아있는..
왜 우리는 책을 읽어야 하는가? ..
by Fly, Hendrix, Fly
함정-으로 이어질 블로그링
by blogring.org
이전블로그
more...
이글루 파인더

rss

skin by 狂風
[안드로이드] 2. 예제로 안드로이드 맛보기 2.3.2 AbsoluteLayout vs RelativeLayout

2. 예제로 안드로이드 맛보기

2.1 모든 개발의 시작... Hello world
2.2 Hello world 파헤치기

2.3 예제로 이해하는 layout
 2.3.1 LinearLayout

 2.3.2 AbsoluteLayout vs RelativeLayout

 * 들어가는 말 : 가장 핵심이 되는 LinearLayout을 둘러 보았습니다. 대부분의 화면들은 LinearLayout의 범주에서 벗어나지 않겠지만, 좀 더 유연하고 자유로운 화면의 구현을 위해서는 AbsoluteLayout과 RelativeLayout을 활용할 수 있어야 하겠습니다. 이름만 들어 봐도 Linear보다는 구현이 덜 복잡할 것이 예상됩니다. 오늘은 두가지 모두 다루어 보겠습니다.

 * AbsoluteLayout
 말 그대로, 위 아래 양 옆 어디에 어떤 다른 차일드 뷰가 있어도, 상관하지 않고, 부모의 좌측 상단을 0, 0으로 하여 주어진 위치에 차일드를 배치할 수 있도록 한 레이아웃이다. 하지만 한가지 문제점은, 이 레이아웃은, px, dp등 크기가 일정한 단위만이 사용 가능하다. 예를 들어 부모의 가로를 100%으로 하고 20%, 20%에 배치한다거나 하는 일은 불가능하기 때문에, 이것을 이용하여 구현하게 되면 해상도가 다른 폰에 가서는 원하는대로 제대로 표현되기 힘들기 때문에, 특별한 상황이 아니면 사용하지 않는다. 예를 들어 뒷 배경이 정해진 BITMAP파일일 때, 배경에 맞춰서 정해진 위치에 표현할 경우에는 매우 유용하다. bitmap을 부모에 맞춰 늘여서 그리지 않는 한 주어진 위치에 표현될테니 말이다. android:layout_x, android:layout_y라는 두개의 속성만이 존재하는데, 각각이 좌측 상단을 (0,0)으로 한 (x,y)좌표이다. 이 간단한 레이아웃의 예제를 제공하는 것은 지면불리기에 불과하다고 판단되어 패스한다.

 * RelativeLayout
 xml등 화면정의파일이 존재하지 않던 시절, 단순 코딩만으로 개발할 때는 좌측 상단부터 오른쪽으로, 위에서 아래로 순서대로 컨트롤들을 배치하면서, A를 그리고, 5px띄어서 B를 그리고, 그렇게 하면서 화면을 구현하곤 했었다. 그런 느낌과 비슷한 레이아웃이 바로 RelativeLayout이다. 차일드들끼리 서로 영향을 주기 때문에, 하나의 길이를 수정하면 전체적으로 같이 조정된다. 이는 잘 설계하면 어떤 레이아웃보다 훌륭할 수 있지만, 너무 복잡한 화면을 하나의 RelativeLayout으로 처리하면, 자칫 너무 복잡해서 하나를 수정하면 다른게 틀어지는 낭패를 볼 수 있으니, 정확히 이해하고 적당히 차일드 레이아웃을 배치하면서 사용하도록 하자.

 이것은 속성이 매우 많기 때문에 하나의 예제로 모든 속성을 다 표현하기엔 무리가 있다. 예제를 통해 대표적인 전개 방식을 살펴본 후, 나머지 속성들은 리스트 형태로 설명을 첨부하겠다.
[그림19]

 [그림20]
 이미 알고 있는 속성들은 넘어가고, [그림19]에 각 뷰마다 한줄씩 띄어서 구분해 놓은 속성들을 살펴 보고, [그림20]의 결과를 살펴 보자.
android:id="@+id/id1" : 여기서 새롭게 등장한 것이 android:id 라는 개념이다. 이것은 말그대로 해당 뷰를 구별하기 위한 명명 ID이다. RelativeLayout은, 부모, 혹은 차일드 뷰끼리 서로의 위치를 기준으로 상대적인 위치를 맞추어 가는 레이아웃이기 때문에, id는 필수이다. 첨언하자면,레이아웃 xml을 사용하여 화면을 전개한 후, java 소스에서 이벤트 리스너를 연결하거나, 속성을 변경하고, 애니메이션을 구현하는 등의 작업을 할 때에도 이 id를 사용하여 특정 뷰에 접근한다.
@+id/id1 이라는 것은, id1이라는 이름을 정의하는데, "기존에 같은 이름으로 정의된 것이 있으면 그대로 사용하고, 없으면 추가하라" 는 의미이다. 기존에 같은 이름이 있다는 것의 의미는, 다른 화면에서 같은 이름을 사용했을 경우에도, 현재 뷰에서는 겹치지 않기 때문이다. 따라서 새로운 뷰에 이름을 부여할 때에는 항상 "+id" 를 사용한다.
android:layout_centerInParent="true" : 이것은 매우 간단하면서 유용하다. 부모를 기준으로 한가운데에 정렬하겠다는 의미이다. 일반적으로 첫번째 차일드의 경우 부모 외에 다른 기준이 없기 때문에, 이와 같이 부모를 기준으로 좌표를 설정하게 된다.  [그림20]에 보면, 한가운데 회색바탕에 흰글씨로 "1"이 써 있는 것이 보인다.
id2의 android:layout_toRightOf="@id/id1" : id2를 id1의 오른쪽에 위치시킨다.
id2의 android:layout_alignTop="@id/id1": id2의 상단을 id1의 상단에 위치시킨다. 이것은, layout_above와 다르다. [그림20]에 보면, "22222"의 상단이 기준이 되는 id1의 상단에 맞추어져 있음을 알 수 있다.
id3의 android:layout_alignBottom="@id/id1" : id3의 하단을 id1의 하단에 위치시킨다.
id3의 android:layout_toLeftOf="@id/id1" : id3를 id1의 왼쪽에 배치한다. [그림20]에 보면 "33333"의 우변이 id1의 좌변에 맞추어져 있음을 알 수 있다.
id4의 android:layout_alignLeft="@id/id1" : id4의 좌변을 id1의 좌변과 일치시킨다.
id4의 android:layout_alignTop="@id/id1" : id4의 상단을 id1의 상단과 일치시킨다. [그림20]을 보면, 이와 같이 RelativeLayout은 LinearLayout과 달리 뷰를 겹치는 것이 가능함을 알 수 있다. 좌변과 상단이 모두 일치하기때문에 이렇게 겹치게 된다.
id5의 android:layout_alignBaseline="@id/id1" : 여기서, 매우 중요한 개념이 나온다. id5의 baseline을 id1의 baseline에 맞춘다는 뜻인데, 이는 TextView에서 매우 유용하다. [그림20]의 id1과 같이 여백이 있거나, 여백이 없더라도 글자크기가 서로 다른 두개의 TextView를 나란히 배치할 경우, android:layout_alignBottom은 뷰 전체의 하단을 맞추기 때문에 글자들을 나란히 배치할 수가 없다. 이를 위해 존재하는 것이 바로 이 layout_alignBaseline이다. 따라서, 이것을 잘 활용해야 서로 다른 크기의 문자열을 가진 TextView를 엘레강스하게 배치할 수 있다.


 지금까지 예제를 통해 id1만을 기준으로 알기 쉽게 풀이하였는데, 실제 화면을 만들 때에는, 차일드 뷰끼리 서로 기준이 되어 연결 연결 하면서 화면을 작성하게 된다. 이 경우에는 하나가 틀리면 다같이 흐트러져 복잡해 질 수가 있기 때문에, 각 개념들을 '정확히' 이해해 두어야 한다. 어렴풋이 알고 대충 해보면서 고치다가는, 뷰하나 만드는데 세월을 다 보낼 수가 있다. (참고로, 개인이 만든 View나 Widget을 xml에 올릴 경우, 컴파일하여 실행해보기 전에 Preview 화면에서 결과를 볼 수가 없을 경우도 있다. 이럴 때는 정말 정확히 알지 않으면 고치고 결과 보기를 반복하는데에 세월 다 간다.)

=================================================================================================================
이제 Layout도 다 끝나가는군요. 사실, LinearLayout, RelativeLayout 만으로도 대부분의 화면을 구현할 수 있습니다. 다음에는 FrameLayout이라는, 화면겹치기를 위해 고안된 특별한 레이아웃과, HTML의 TABLE과 비슷하게 동작하지만, 그보다 훨씬 못한(--;) TableLayout을 소개하겠습니다. 모두들 화이팅!!! 즐프하시기 바랍니다.
by 나의엘프 | 2010/10/15 08:38 | TokTokLab(모바일개발) | 트랙백 | 덧글(1)
트랙백 주소 : http://myelf.egloos.com/tb/2695869
☞ 내 이글루에 이 글과 관련된 글 쓰기 (트랙백 보내기) [도움말]
Commented by 통통 at 2012/12/03 11:11
열심히 잘보며 공부하고 있습니다. 2년전 자료지만 참 좋아요. 감사합니다.

:         :

:

비공개 덧글


◀ 이전 페이지 다음 페이지 ▶