마음만은 새내기

항상 초심을 잃지 않고 생활하겠습니다~!

프로그래밍/Android

Android 스마트폰 앱 만들기 - 4. 레이아웃 디자인의 기초 (1)

동동매니저 2016. 7. 9. 13:09

안녕하세요 ^^

오랜만에 안드로이드 프로그래밍에 관한 글을 올려봐요

제가 안드로이드 프로그래밍에 대한

글을 올리려고 하는데요,

전에 기초적인 앱 만들기에 대한 글을 쓴 적이 있어요


바로가기 1 - 개발 환경 구축

바로가기 2 - 초기 설정 & Eclipse 프로젝트 불러오기

바로가기 3 - 간단한 앱 만들기 (Toast 메시지)


그리고, 아직 어떻게 하는지 모르시는 분들도

앱을 만들 수 있도록

기초부터 차근차근 글을 쓰려고 해요


먼저, 안드로이드 앱을 만들기 위해서는,

XML과 Java에 대한 지식(?)이 필요해요

XML은 Manifest, 레이아웃, 기타 등등

여러가지 파일에 사용되며,

Java는 소스 파일을 작성할 때 필요해요


이번에는 Java를 다루기에 앞서,

안드로이드 앱 제작 할 때 사용되는

화면 레이아웃 디자인에 관한 내용을 다룰거예요


공통 필수사항 !!

모든 뷰에는

'android:layout_height' 속성과

'android:layout_width' 속성을

반드시 !! 필요로 해요


'android:layout_height' 속성은 뷰의 높이,

'android:layout_width' 속성은 뷰의 폭을 결정해요

여기에서 직접 크기(dp 등...)를 지정 할 수도 있지만,

간단한 속성 2가지를 사용할 수도 있어요

먼저, 'match_parent' 속성은 Parent 뷰의 크기에 맞추는 속성이예요

그리고, 'wrap_content' 속성은 뷰의 내용에 따라 크기를 결정해요


안드로이드에서 지원하는 레이아웃의 종류가 여러가지인데요,

이번에는 'Linear Layout'에 대해서 알아볼게요


Linear Layout은 지정된 방향에 따라

순서대로 뷰를 배치하는 방식이예요

방향은 2종류가 있는데요,

'vertical'은 세로 방향,

'horizontal'은 가로 방향이예요

방향 설정의 경우,

이 부분을 수정하시면 돼요


▼▼▼ 그림 1. 방향을 'vertical'로 설정한 경우


▼▼▼ 그림 2. 방향을 'horizontal'로 설정한 경우


그리고 !!

Linear Layout의 경우, 색다른 기능을 쓸 수 있어요

바로!!

'layout_weight' 속성인데요,

Linear Layout 안의 뷰들에게 사용할 수 있어요

이 속성을 지정하면,

뷰의 크기를 일정 비율로 나눌 수 있어요

단, 유의해야 할 사항이 있는데요,

정확한 크기 분할을 위해서

방향이 'vertical'이면 'layout_height' 속성을,

방향이 'horizontal'이면 'layout_width' 속성을

'0dp'로 설정 해주세요


▼▼▼ 그림 3. 레이아웃 XML 코드


▼▼▼ 그림 4. 위에서 언급한 속성='wrap_content'


▼▼▼ 그림 5. 위에서 언급한 속성='0dp'


'그림 3'에서 각 뷰의 크기 비율을 1:2:3:4:5로 지정했어요 (방향 = vertical)

그리고 '그림 4'는 'layout_height' 속성을 'wrap_content'로 설정 했을 때,

'그림 5'는 이 속성을 '0dp'로 설정 했을 때의 모습이예요

'그림 4'보다 '그림 5'에서 더 정확이 크기 분할 비율이 정확한 것을 알 수 있어요


그리고 뷰의 속성들을 몇가지 알아볼게요


1. android:gravity

이 속성으로 뷰의 내용의 배치를 정할 수 있어요

이 속성의 값으로 넘겨줄 수 있는 것에 대해서 알아보면,


center = 정 가운데

center_vertical = 세로 방향의 가운데

center_horizontal = 가로 방향의 가운데

top = 맨 위

bottom = 맨 아래

left = 왼쪽

right = 오른쪽

등이 있어요

참고로, 두 개 이상의 값을 사용하고 싶다면,

'값|값' 형식으로 사용 할 수 있어요


2. android:layout_gravity

이 속성은 gravity 속성과 유사한 점이 있어요

하지만, 다른 점이 있다면,

gravity 속성이 뷰의 내용의 위치를 설정한다면,

layout_gravity 속성은 Parent 에서의 뷰의 위치를 정해요


3. android:padding

이 속성은 뷰의 여백을 설정하는 속성이예요

(뷰의 크기는 변화가 없어요)

물론 이 속성을 사용하면, 모든 방향의 여백을 한번에 설정 할 수 있어요

그리고, 개별 방향의 여백도 설정 할 수 있어요


paddingTop = 위

paddingBottom = 아래

paddingLeft = 왼쪽

paddingRight = 오른쪽


4. android:layout_margin

이 속성은 위의 padding 속성과 유사한 점(여백 설정)이 있어요

padding 속성이 뷰의 크기를 변화시키지 않고

내용물이 들어갈 수 있는 크기만 줄어든다면,

layout_margin 속성은 뷰의 크기를 직접 줄이고

줄어든 공간을 여백으로 설정하는 속성 이예요


▼▼▼그림 6. padding 속성 = 30dp


▼▼▼그림 7. layout_margin 속성 = 30dp


'그림 6'은 padding 속성을 30dp로 설정했고,

'그림 7'은 layout_margin 속성을 30dp로 설정했어요

차이가 느껴지시죠??


5. android:id

이 속성은 나중에 Java 연동시 꼭! 필요한 속성이예요

뷰에 android:id="@+id/[뷰의_ID_입력]" 형식으로 사용할 수 있어요

여기에서 ID는 영어와 숫자로 구성되어야 해요


6. android:visibility

이 속성은 뷰를 표시할지 숨길지를 설정할 수 있어요

visible = 표시

invisible = 숨김 (공간 확보)

gone = 숨김 (공간 미확보)


6. android:background

이 속성은 뷰의 배경을 설정 할 수 있어요

단색이나 그림으로도 설정 할 수 있어요

단색 : android:background="#AARRGGBB" 또는 android:background="#RRGGBB"

그림 : android:background="@drawable/[리소스_파일_이름_확장자_제외]"


이 외에도 다양한 뷰의 속성들이 있는데요,

나머지 속성들은 지금 언급하지 않고,

나중에 사용할 때 언급하도록 할게요


모두들 좋은 하루 되세요 ^o^