[안드로이드/android] 레이아웃과 속성

[안드로이드 스튜디오를 시작할 때 필요한 기본적인 개념을 정리하고자 포스팅합니다.]

 

[Do it 안드로이드 앱 프로그래밍]

 

 

1. 뷰(view)의 속성

- 뷰(view)는 일반적으로 컨트롤이나 위젯으로 불리는 UI 구성 요소이다. 즉, 사용자의 눈에 보이는 화면의 요소들이다.

- 이러한 뷰를 여러개 포함하고 있는 것이 뷰그룹(ViewGroup)이고 뷰그룹 안에서 뷰의 위치를 지정할 수 있다.

- 뷰그룹은 뷰를 상속받으며 뷰를 상속받은 뷰그룹은 뷰와 같은 기능을 하므로 또 다른 뷰라고 부를 수 있다.

- ex) 버튼은 텍스트뷰의 속성을 상속 받았으므로 텍스트뷰를 버튼으로 바꿔도 아무 문제가 없다\

 

 

2. 위젯과 레이아웃

위젯

- 뷰 중에서 일반적인 컨트롤의 역할을 하는 것을 위젯이라고 부른다. (ex. Button)

 

레이아웃

- 뷰그룹 중 내부에 뷰들을 포함하고 있고, 그것들을 배치하는 역할을 하는 것을 레이아웃이라 부른다. (ex. Linear Layout)

 

 

3. 뷰의 크기 속성

- 안드로이드는 뷰의 가로, 세로 크기가 지정되어있지 않으면 XML이 잘못됐다고 판단하기 때문에 꼭 넣어줘야 한다.

- 태그 안에 들어간 속성 중 android:는 기본 API, app:는 직접 정의했거나, 외부 라이브러리이다.

구분	설명
wrap_content	뷰에 들어 있는 내용물의 크기에 자동으로 맞춘다.
match_parent	뷰를 담고 있는 뷰그룹의 여유 공간을 꽉 채운다.
숫자	숫자를 사용해 크기 지정, 크기는 dp, px와 같은 단어로 되어있다.

 

 

 

4. 제약 레이아웃

- 안드로이드 스튜디오에서의 기본적인 레이아웃

- 뷰의 크기와 위치를 결정할 때 제약 조건을 사용하는데, 이는 뷰가 레이아웃 안의 다른 요소와 어떻게 연결되는지 알려주는 것이다.

- ex) Button은 왼쪽, 오른쪽, 위, 아래에 뷰의 연결점들이 있는데 이 점들을 다른 대상에게 연결할 수 있다. (상대적 위치)

- ex) Button을 정 가운데에 놓고 싶다면 부모 layout의 네 개의 면을 이으면 된다.

 

타깃 종류

 1) 같은 부모 레이아웃 안에 들어 있는 다른 뷰의 연결점

 2) 부모 레이아웃의 연결점

 3) 가이드라인

 

연결점 종류

 1) 왼쪽, 오른쪽, 위, 아래

 2) 가로축 가운데, 세로축 가운데

 3) 베이스라인 -> 테스트를 보여주는 뷰인 경우에만 적용

 

 

5. 속성 확인

접두어(Prefix)	의미
xmlns:android	안드로이드 기본 SDK에 포함되어 있는 속성을 사용
xmlns:app	프로젝트에서 사용하는 외부 라이브러리에 포함되어 있는 속성을 사용.(단어 교체 가능)
xmlns:tools	안드로이드 스튜디오의 디자이너 도구 등에서 화면에 보여줄 때 사용.

 

id

- 뷰 하나의 id. 즉, 뷰가 갖고 있는 중복되지 않는 주민등록증 같은 것. (뷰를 식별)

- XML 레이아웃 파일 안에서 각 뷰를 연결할 때 id값을 사용할 수 있다.

- 자바 소스 파일에서 데이터를 처리할 때

- "@+id/아이디 값"으로 정의함.

 

 

 

6. 크기 표현

안드로이드 프로젝트에서 사용자들은 여러 가지 기기를 이용해서 앱을 사용하는데, 이때 각각 사용자가 보는 화면의 크기, 속성, 요소들의 위치 등을 바로 보여줄 수 있는 방법이 match_parent, wrap_parent, dp, sp 등이 있다.

단위	단위 표현	설 명
px	픽셀	화면 픽셀 수
dp , dip	밀도 독립적 픽셀(density independent pixel)	160dpi 화면을 기준으로 한 픽셀
sp , sip	축척 독립적 픽셀 (scale independent pixel)	텍스트 크기를 지정할 때 사용하는 단위, 가변 글꼴을 기준으로 한 픽셀로 dp와 유사하나 글꼴의 설정에 따라 1sp 픽셀수가 달라짐
em	텍스트 크기	글꼴과 상관없이 동일한 텍스트 크기 표시

** 뷰에는 dp, 글자 크기에는 sp 단위를 사용하는 것이 좋다.

 

속성 이름	설 명
layout_marginTop	뷰의 위쪽을 얼마나 띄울지 지정
layout_marginBottom	뷰의 아래쪽을 얼마나 띄울지 지정
layout_marginLeft	뷰의 왼쪽을 얼마나 띄울지 지정
layout_marginRight	뷰의 오른쪽을 얼마나 띄울지 지정
layout_margin	뷰의 위, 아래, 왼쪽, 오른쪽을 얼마나 띄울지 지정

 

 

7. 파일이 저장되는 위치

구분	저장 위치
소스 파일	프로젝트 창 : /app/java
	파일 탐색기 : /app/src/main/java
XML 레아이웃 파일	프로젝트 창 : /app/res/layout
	파일 탐색기 : /app/src/main/res/layout
이미지 파일	프로젝트 창 : /app/res/drawable
	파일 탐색기 : /app/src/main/res/drawable