꿈꾸는 엘프

 살아질 것인가. 살아갈 것인가.
이글루스 | 로그인
메뉴릿
카테고리
전체
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.3 예제로 이해하는 layout - 2.3.1 LinearLayout

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

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

2.3 예제로 이해하는 layout

 * 들어가는 말 : 오늘은 드디어 layout을 주물러 보도록 하겠습니다. 액티비티니, 통신이니, 스레드니 하는 것들은 차차 보기로 하고, 일단 눈에 보이는 것부터 해야 재미도 있고, 당장 폰에 올려 보고 신나게 해볼 수 있을테니까요... 자 그럼 시작합니다~

 2.3.1 LinearLayout
   UI 관련된 것은.. 그중에서도 xml이나 html처럼 화면정의 파일이 따로 있는 경우에는 더더욱, 백문(百聞)이 불여일견(不如一見)이다. 시시콜콜한 설명을 듣기 보다, 차이를 확실하게 알 수 있도록 의도적으로 작성해 놓은 예제를 보는 것만큼 효율적인 것이 없다. 그럼, 필자가 '의도적으로'작성한 아래 예제를 보자.

[그림16]

 둘러보면, 가장 바깥에 LinearLayout이 있고, 그 안에 TextView, LinearLayout, TextView가 차례로 들어 있다. 여기서 알 수 있는 한가지 사실은 Layout은 얼마든지 중첩이 가능하다는 것이며, 이는 매우 유용할 것으로 보인다. 사실, 이정도도 말이 안될 것이다.
우선, LinearLayout의 속성을 살펴 보자 

android:orientation="vertical" : 내부 아이템들을 리니어하게, 즉 일렬로 나열하는데, vertical이므로 세로로 나열하겠다는 뜻으로 보인다.
android:layout_width="fill_parent" android:layout_height="fill_parent" : 가로/세로 모두 바로 위 부모를 꽉 채우라는 것을 의미한다. 이 값들은 px이나 dp등의 사이즈 유닛으로 채울 수도 있으며, fill_parent의 반대 개념인 wrap_content도 가능한데, 이는 내부 아이템들을 넣을 수 있을 만큼만 차지하겠다는 것을 의미한다.
android:background="@color/bg" : 레이아웃의 배경을 의미하는데, 여기에 @color/bg 가 보이는데, 지난 챕터에서 비슷한 것을 본 것 같지 않은가? 바로, @string/hello 이다. 이것은 res/values/strings.xml에 있었다. 마찬가지로 res/values/color.xml 이다. 보는 김에 이것도 살펴보고 지나가자. 그러기 위해 만든 예제이다.



[그림17]

<color name="bg">#1191d0</color> : 이렇게, bg라는 이름으로 #1191d0 라는 컬러값이 정의되어 있는 것을 알 수 있다. 상당히 유용할 것 같다. 배경색을 지정할 때, background="#1191d0" 이렇게 해도 되지만 자주 쓰는 컬러는 왠만하면 이렇게 따로 정의해 두는 것이 나중에 색상을 바꾸기도 편하고 여러모로 좋다. 자, 이제 Layout을 전개하면서 가장 헷갈리는 부분을 설명하겠다. 이건, 결과물을 함께 보면서 이야기하자.

[그림17]

[그림17]에서 보면, 파란색 바탕이 가장 바깥에 있는 LinearLayout이고, 가운데 하얀색 부분이 내부 LinearLayout이다. 내부 LinearLayout의 속성을 살펴보자.

 

android:orientation="horizontal" : 앞서 보았던 것과 반대로 이번에는 horizontal이다. 즉, 가로로 전개하겠다는 뜻이다.
android:layout_weight="1" : 주목해야 할 부분이다. 바깥의 LinearLayout은 fill_parent였는데, 위아래 "1", "3"이 찍힌 TextView는 글씨가 들어갈 크기만큼 차지하고 나머지 부분은 모두 이 내부 LinearLayout이 차지한 것은, 바로 이 layout_weight="1"이 있기 때문이다. 정의하지 않으면 layout_weight="0"으로 세팅한 것과 같은데, 이는 layout_height에 지정한 크기만큼만 차지하겠다는 뜻이며, 나머지는 layout_weight 이 0이 아닌 차일드뷰끼리 나눠서 차지하게 된다. 매우 유용하므로 꼭 이해해야 한다.
android:gravity="center" : 내부 정렬을 의미한다. 차일드들을 한가운데에 몰아서 정렬하겠다는 뜻이다. left, right, top, bottom, center, center_vertical 등이 가능한데, 오른쪽 가운데 정렬을 하고 싶을 경우에는 "right|center_vertical"과 같이 "|" 연산자로 중첩시켜야 한다.


이제, 내부 레이아웃의 차일드인 2-1, 2-2, 2-3의 주요 속성들을 살펴보자.
먼저, 2-1, 2-2, 2-3 모두 android:layout_weight="1" 속성을 가지고 있으므로, 가로 길이는 정확히 3등분이 됨을 알 수 있다.

2-1의 android:layout_gravity="left|bottom" : 텍스트뷰 2-1의 가로는 3등분하였지만, 세로는 wrap_content로, 자기 자신의 텍스트를 표시할 수 있을 정도의 크기만 차지하는데, 이는 부모의 크기에 비해 많이 남는다. 이럴 때 layout_gravity속성을 사용한다. 그렇다면 무조건 top-left에 표시되게 된다. 여기서는 left|bottom 이므로 왼쪽 아래에 정렬되는데, 사실 가로는 셋이서 3등분하여 차지하였기 때문에 그냥 bottom 으로 설정한 것과 같은 결과를 보인다.
2-2의 gravity="center" : 2-2는 세로도 fill_parent이므로, layout_gravity는 의미가 없으며, 내부의 텍스트에 대해여 gravity="center"를 통하여 텍스트를 가운데에 정렬시켰다. 가로, 세로 크기가 표시할 텍스트에 비해 공간이 많이 남는다. 이럴 때 어디에 정렬시킬지 gravity를 사용하여 정의한다.
2-3의 layout_gravity="center", gravity="right" : 내부 글자는 오른쪽으로 정렬시키면서 뷰 자체는 부모의 가운데에 위치시키도록 하였다.


이와 같이 2-1, 2-2, 2-3의 xml소스와 결과 화면을 비교해 보면, gravity와 layout_gravity를 이해할 수 있을 것이다. 사실, 이게 여러겹으로 중첩이 되다 보면 상당히 헷갈리는데, 예를 들어 parent의 gravity와 child의 layout_gravity가 겹쳐지면 매우 환상적인(@.@) 헷갈리는 결과를 볼 수 있다. 따라서, 본 예제의 xml을 가지고 이렇게 저렇게 중첩시키고, 변형해 보면서 완전히 이해해 둘 것을 당부한다. 내 머리를 믿고, 알 것 같다고 해서 그냥 넘어가면 꼭 실제 개발할 때, 골치아픈 날이 올 것이다. 만들 때 괴롭지 않으려면, 한 대여섯번이라도 바꿔서 결과를 보도록 하자.

 2.3.1 LinearLayout 에서, LinearLayout뿐만 아니라 모든 Layout의 공통적인 부분까지 정렬에 관한 중요한 부분을 모두 알아보았다. AbsoluteLayout, FrameLayout, TableLayout 등을 알아볼 때에는 중첩되는 부분은 안다는 가정하에 기술할 것이니, 가장 기본이 되는 LinearLayout을 잘 익히기 바란다.

===================================================================================================================
자, 오늘은 여기까지.. 휴우~ 차이를 확실하게 알아볼 수 있도록 예제를 꾸며 보았습니다. 앞으로도 이런식으로 전개하여, 제가 공식 문서들만 보면서 개발할 때 힘들었던 부분들을 중점적으로 적어 보도록 하겠습니다. 안드로이드를 시작하는 분들에게 도움이 되길 바랍니다. 화이팅!!!

by 나의엘프 | 2010/10/13 11:59 | TokTokLab(모바일개발) | 트랙백(1) | 덧글(18)
트랙백 주소 : http://myelf.egloos.com/tb/2694773
☞ 내 이글루에 이 글과 관련된 글 쓰기 (트랙백 보내기) [도움말]
Tracked from at 2014/03/11 00:33

제목 : buy pure garcinia cambogia
line5...more

Commented by 안녕하세요 at 2010/12/15 13:38
안드로이드 공부하고있는 학생입니다
죄송하지만 예제소스 주석이랑 단파일좀
제메일로 보내주시면안델까요..?
공부하는데 많은 도움이 될거같아서
조금이나 도움을주세요
ooiisksms@naver.com
Commented by 나의엘프 at 2010/12/20 16:04
보내 드리는게 어려운 일은 아니지만, 처음 공부하시는 것인 만큼...

다 된 모습의 소스보다는... 번거롭더라도 한번씩 쭉 따라서 코딩해 보시는 것이 낫지 않을까 생각합니다.

최대한 상세히 기술하였으니, 한번 해보시길 권해 드립니다.
Commented by 호호 at 2011/02/11 20:25
좋은 자료 감사합니다
Commented by 허허 at 2011/02/17 16:08
엄청난 소스인줄 알았네요..
이미지화 되있길래 대기업 기밀 소스인줄 알았는데
엄청 간단한 샘플소스인데 이미지화로 해놓다니;; ㅎ
다른포스트가면 훨씬 훌륭한소스들도 다 공개인데 좀 웃기네요
많이 웃다 갑니다 수고요
Commented by 나의엘프 at 2011/02/19 23:28
실컷 웃다 가십시오... 딱히 보호하겠다고 막아 놓은 것도 아니고 오히려 공개소스로 할만한 내용도 아니기에, 게다가 이글루스는 소스를 편집하기에 용이하자 않아 편하게 붙여놓았을 뿐... 단순 이해를 돕기 위해 써 놓은 포스트에 붙어 있는 이정도 소스가 그리 아쉬워 이런 댓글까지 써 놓은걸 보면... 차라리 이런 내용이라도 아쉽다면 아쉽다고 쓰시지요. 필요없다면 그냥 지나치면 그만인 것을... 누가 우스운지는 스스로도 알 것..
Commented by 자세 at 2011/03/29 01:43
허허님, 참 희한한 분이시군요. 이런 간단한 예제에 뭔 샘플을 요구하시는 것인지.
뭔가 다들 공개 공유라고 하니 개념도 모르면서 트랜드면 무조건 따라하는 성향을 가진 사람인것 같군요.
개발자나 학생이라면, 개발 포기하라고 권하고 싶습니다.
사는 자세도 상당히 불량하시고..
이런 개발 글 올려서 알려주시는 분에 대한 예의가 정말 없으시군요.
먼저 사람이 되시라는...
허허 당신같은 사람 때문에 한국 개발자가 기술 공유성이 떨어지는 겁니다.
Commented by ㅋㅋㅋㅋ at 2013/04/13 14:26
Commented by 웃자 at 2011/03/06 16:33
기초를 다질 수 있는 좋은 자료인 것 같습니다.
좋은 자료 감사합니다.
Commented by 감사 at 2011/03/31 13:47
요즘들어 열심히 안드로이드 공부중입니다
예제와 함께 있는 강좌 찾다가 여기까지 왔네요 ㅎㅎ
기초를 다지기에 정말 좋은 것 같습니다
프로그래밍은 역시 기초가 제일 중요한 듯 합니다
위에 좀 불편한 댓글이 있네요..
뭐 암튼 좋은 자료 잘 보고 갑니다
그럼 오늘도 좋은 하루 되세요 ^^
Commented by 좋군요 at 2011/04/08 14:18
좋은 자료입니다.
인터넷상에는 참 이상사람들이 많으니 너무 신경쓰지 마세요...
단순히 소스만 가져다 쓰실분은 어차피 얼마 안가서 포기하실 분들이 많습니다.
좋은 자료 감사하고요 많이 배우고 있습니다.
Commented by 음하하하 at 2011/06/14 20:00
간만에 웃었네 허허님땜에 아마 지금쯤이면 놀고 있을듯 ^^a
Commented by 감사 at 2011/09/26 12:12
아주 유용했습니다. 감사합니다~^^
Commented by sw2tsalt at 2011/11/04 11:55
감사합니다~
Commented by 짱짱 at 2012/03/28 04:51
정말 좋은 자료같아요 초보들에게 쏙쏙 들어오는 글입니다.
완전 초보이지만 조금씩 눈에 띄는 글귀들이 있어서 유용하네요^^
Commented by 몰락아티스트 at 2012/04/16 14:07
정성스럽고 좋은 자료에 기분 상하시는 댓글이 보이네요.
가끔씩 잊어버리는 것들을 깔끔하게 잘 정리하셔서 도움이 많이 되었습니다 :)
Commented by 나의엘프 at 2012/04/17 14:04
도움이 되었다니 다행입니다. 흐흐.. 이상한 댓글에는 그저 웃을 뿐이지요. 그보다, 적어둘 만한 많은 것들이 쌓여 있는데 도저히 시간이 안나네요. 블로깅을 멈춘지도 한참이 되었군요.
Commented by 냐츠 at 2014/06/26 23:44
감사합니다. 정말 좋은자료네요. 초보가 이해하기 참 쉽게 적어놓으셨네요.
잘 배우고 갑니다
Commented by 감사 at 2015/05/08 21:45
오랫동안 안드로이드 개발했지만 항상 레이아웃이 가장 헷갈리는 파트이고 이해도 잘 안되고..
포스트하신 자료 쉽게 이해가 쏘옥 되네요.

감사합니다^^

:         :

:

비공개 덧글


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