맛클에 레이아웃 속성을 정리한 자료가 거의 없어 보이네요.
저도 이제까지 필요할 때마다 웹검색을 통해 찾아보곤 했었는데요 ;;
자주 사용하는 속성치를 모아놓고 보려고 정리해 놓은 겁니다.
제가 여기저기서 모아놓은 거라 간혹 잘못된 정보가 있을 수 있으니 양해해주세요.
* View (뷰)
: 화면을 구성하는 일반적인 요소
* Widget (위젯)
: 뷰를 정의한 후 그 중에서 콘트롤의 역할을 하는 화면 구성 요소
* 레이아웃 (layout)
: 뷰들을 담고 있는 그릇을 뷰그룹으로 정의한 후 그 안의 뷰들을 배치하는 역할을 하는 것
* 공통적 속성
android:layout_width=" "
android:layout_height=" "
: 뷰의 폭과 높이를 설정
- match_parent : 무조건 남아있는 여유 공간을 채움 (= fill_parent)
- wrap_content : 뷰에 들어있는 내용물의 크기에 따라 뷰의 크기가 결정되도록 조정
- 정수값 : 지정한 크기에 맞춤
android:id="@+id/ "
: 뷰의 ID를 지정
- '@' 기호는 id를 리소스(R.java)에 정의하거나 참조한다는 뜻이며 무조건 붙여야한다.
- '+' 기호는 ID를 새로 정의한다는 뜻, 처음 정의할 때만 붙이고 참조할 때는 붙이지 않는다.
- 소문자 id는 예약어, '/'뒤에 원하는 이름을 작성한다.
android:background="#RGB"
: 뷰의 배경을 설정
- #RGB
- #ARGB (A :Alpha, R :Red, G :Green, B :Blue)
- #RRGGBB
- #AARRGGBB
android:orientation=" "
: 뷰를 추가하는 방향을 설정
- vertical : 세로 방향으로 추가
- horizontal : 가로 방향으로 추가
android:gravity=" "
: 뷰의 정렬 방향을 설정, 뷰의 화면에 표시하는 내용물을 정렬
- 두가지 이상의 방향을 설정할 때에는 '|'를 사용하여 여러 속성값을 적용
Ex) android:gravity="center_vertical|rignt"
android:padding=" "
android:paddingLeft=" "
android:paddingRight=" "
android:paddingTop=" "
android:paddingBottm=" "
: 뷰의 여유 공간을 설정(안쪽 여백)
- padding 속성은 상하좌우 모든 방향에 적용
- 각 방향의 여백을 다른 값으로 설정 가능
android:margin=" "
: 뷰와 부모와의 간격(바깥 여백)
android:visibility=" "
: 뷰의 표시 유무를 결정
- visible : 보이는 상태
- invisible : 보이지 않는 상태, 자리 차지
- gone : 보이지 않는 상태, 자리 차지X
android:layout_gravity=" "
: 부모 컨테이너의 여유 공간에 뷰가 모두 채워지지 않아 여유 공간 안에서 뷰를 정렬
android:focusable=" "
: 키보드 포커스를 받을 수 있을지 결정
- true : Default값
- false : 사용자의 입력을 받아야 하는 것은 이 속성의 Default값이 true로 지정
+) gravity 의 정렬 속성값
top
: 대상 객체를 위쪽 끝에 배치하기
bottom
: 대상 객체를 아래쪽 끝에 배치하기
left
: 대상 객체를 왼쪽 끝에 배치하기
right
: 대상 객체를 오른쪽 끝에 배치하기
center_vertical
: 대상 객체를 수작 방향의 중앙에 배치하기
center_horizontal
: 대상 객체를 수평 방향의 중앙에 배치하기
fill_vertical
: 대상 객체를 수직 방향으로 여유 공간만큼 확대하여 채우기
fill_horizontal
: 대상 객체를 수평 방향으로 여유 공간만큼 확대하여 채우기
center
: 대상 객체를 수직 방향과 수평 방향의 중앙에 배치하기
fill
: 대상 객체를 수직 방향과 수평 방향으로 여유 공간만큼 확대
clip_vertical
: 대상 객체의 상하 길이가 여유공간 보다 클 경우에 남는 부분 잘라내기
clip_horizontal
: 대상 객체의 좌우 길이가 여유공간 보다 클 경우에 남는 부분 잘라내기
* TextView
: TextView의 속성
android:id="@+id/ "
: TextView id속성 추가
android:layout_width=" "
: TextVIew의 가로 길이 설정
android:layout_height=" "
: TextView의 세로 길이 설정
android:text=" "
: TextVIew의 내용 설정
android:backgroud="#RGB"
: TextView의 배경 색 설정
android:textColor="#RGB"
: TextVIew 내용의 글자색 설정
android:gravity=" "
: Text의 정렬 방향
- 버튼이나 텍스트뷰의 크기를 wrap_content로 지정하면 버튼 안에 들어 있는 글자가 뷰이 내부를 꽉 채워 내부의 여유 공간이 없어지므로 gravity 속성을 지정해도 아무런 변화가 없다.
android:textSize=" "
: TextView 내용의 글자크기를 설정
- 일반적으로 'sp'단위를 사용
android:textStyle=" "
: TextView에서 표시하는 문자열의 스타일 속성을 설정
- normal
- bold : 굵게
- italic : 기울임꼴
android:textFace=" "
: TextView에서 표시하는 문자열의 폰트를 설정
- normal
- sans
- serif
- monospace
android:singleLine=" "
: 문자열이 한 줄로만 표시되도록 설정
- true : 한 줄의 영역을 넘어가면 '...' 표시가 뒤게 붙게 됨
- false : 디폴트 값으로 true로 설정하지 않으면 여러 줄로 표시
* EditText
: 사용자의 입력을 받고자 할 때 일반적으로 사용
android:id="@+id/ "
: EditText의 id속성 추가
android:layout_width=" "
: EditText의 가로 길이 설정
android:layout_height=" "
: EditText의 세로 길이 설정
android:layout_margin=" "
: EditText 뷰와 텍스트사이의 여백 설정
android:inputType=" "
: EditText 입력 방식 결정
- number : 숫자 형식으로 입력
- textPassword : 비밀번호 형식으로 입력
(이 외에도 여러 입력 방식이 있다.)
android:autoText=" "
: 철자 자동 고침
android:hint=" "
: 기본 안내문 표시
android:capitalize=" "
: 가장 앞 글자를 대문자로 자동 변경
- characters : 글자 모두 대문자
- words : 단어의 첫 글자만 대문자
- sentences : 문장의 첫 글자만 대문자
android:textMultiLine=" "
: 여러 줄로 표현
- true / false
android:maxLine=" "
: EditView에 나타나는 라인의 수로 그 수를 넘어가게 되면 자동으로 스크롤이 됨
android:scrollbars=" "
: 스크롤 방향을 설정
- vertical : 세로 스크롤
- horizontal : 가로 스크롤
android:singleLine=" "
: 한 줄로만 표현, 스크롤 및 개행 불가
- true / false
android:cursorVisible=" "
: 커서의 활성 / 비활성 설정
- true : 커서 활성
- false : 커서 비활성
* ImageView
: 이미지를 화면에 표시하기 위해 제공되는 가장 간단한 위젯
android:src=" "
: 원본 이미지를 설정, 이 속성을 설정하지 않으면 영역을 확인할 수 없음
android:maxWidth=" "
: 이미지가 표현될 수 있는 최대 가로 길이
android:maxHeight=" "
: 이미지가 표현될 수 있는 최대 세로 길이
android:tint="#RGB"
: 이미지뷰에 보이는 이미지 위에 색상을 적용
android:scaleType=" "
: 화면에서 원본 이미지의 크기와 다르게 보이는 경우 확대/축소를 어떤 방식으로 적용할 것인가 설정
- matrix : 이미지를 원본파일의 사이즈 그대로를 보여주는 속성
- fixXY : ImageView 틀에 맞게 이미지가 비율에 상관없이 틀에 꽉차게 확대 또는 축소 되어 보인다.
- centerCrop : 이미지가 공백이 있을 경우 정렬기준을 가운데로 하고 비율은 유지하면서 이미지를 늘리는 속성
- centerInside : 화면을 벗어나면 비율을 유지하면서 이미지의 크기를 축소시키는 속성
android:visibility=" "
: 보여지는 여부를 결정
- visible : 보이는 상태, default
- invisible : 보이지 않는 상태이지만 자리는 유지
- gone : 보이지 않는 상태이고 자리유지를 하지 않음
android:cropToPadding=" "
: true인 경우 위젯의 주어진 여백에 맞추기 위해 이미지를 일부 잘라낸다.
* Button
: Button의 속성
android:id="@+id/ "
: 버튼 id 속성 추가
android:layout_width=" "
: 버튼의 가로길이를 결정
android:layout_height=" "
: 버튼의 세로길이를 결정
android:text=" "
: 버튼의 내용
android:backgroud="#RGB"
: 버튼의 배경색 지정
android:textColor="#RGB"
: 버튼 text의 색 지정
android:padding=" "
: 버튼과 버튼의 내용사이의 여백의 크기를 결정
android:ayout_gravity=" "
: 부모 컨테이너의 여유 공간에 뷰가 모두 채워지지 않아 여유 공간에서 뷰를 정할 때
Ex) android:layout_gravity="bottom" 로 설정하게 되면 부모 컨테이너의 여유공간의 아래쪽에 정렬
( 위의 표에서 설명되지 않은 각 속성의 값은 LinearLayout의 설명과 동일 )
* RadioButton / RadioGroup
: 라디오 버튼의 경우 하나를 선택했을 때 다른 버튼들은 선택이 해제되는 동작을 수행하여야 하므로 RadioGroup을 이용해 하나의 그룹으로 묶어주어야 한다.
: RadioButton의 속성
android:id="@+id/ "
android:layout_width" "
android:layout_height=" "
android:text=" "
: RadioButton의 내용 설정
android:textColor="#RGB"
android:textStyle=" "
android:textSize=" "
: RadioGroup의 속성
android:id="@+id/ "
android:layout_width=" "
android:layout_height=" "
android:orientation=" "
: RadioButton의 정렬 방향을 설정
android:padding=" "
: RadioGroup과 RadioButton의 사이 여백 설정
* LinearLayout (리니어 레이아웃)
: 박스(Box)모델로 사각형 영역들을 이용해 화면을 구성하는 방법
android:layout_weight=" "
: layout의 가로길이를 설정
- wrap_content : 뷰의 내용물 크기에 따라 뷰의 가로길이가 결정
- match_parent : 가로의 길이를 부모의 뷰의 크기에 맞춤
- dp : dp 단위로 가로 길이를 직접 설정
android:layout_height=" "
: layout의 세로길이를 설정
- wrap_content : 뷰의 내용물 크기에 따라 뷰의 세로길이가 결정
- match_parent : 세로의 길이를 부모의 뷰의 크기에 맞춤
- dp : dp 단위로 세로 길이를 직접 설정
android:orientation=" "
: 뷰를 추가하는 방향을 설정
- horizontal : 가로로 뷰를 추가
- vertical : 세로로 뷰를 추가
android:gravity=" "
: 뷰의 정렬 방향을 설정
- top, bottom, left, right, center, fill, center_vertical, center_horizontal, fill_vertical, fill_horizontal, clip_vertical, clip_horizontal 등의 속성을 이용하여 원하는 위치에 정렬
-> clip_horizonal : 대상 객체의 좌우 길이가 여유 공간보다 클 경우 남는 부분 잘라내기
- 두개의 속성을 설정할 때에는 '|'를 사용
ex) left|center_vertical
android:background="# "
: layout의 배경색을 결정
- #RGB 형태로 설정
Ex) 흰색 : #ffffff / 검정색 : #000000
android:padding=" "
: 뷰 안의 내용물인 텍스트나 이미지와 뷰 안의 영역 사이의 여백을 줄 수 있는 방법
: paddingRight, paddingLeft, paddingTop, paddingBottom의 크기를 따로 설정 가능
- dp 값으로 여백 크기 설정 가능
android:layout_margin=" "
: 부모 컨테이너의 여유 공간과 뷰 사이의 여백을 설정
: layout_marginLeft, layout_marginRight, layout_marginTop, layout_marginBottom의 크기를 따로 설정 가능
- dp 값으로 여백의 크기 설정 가능
android:baselineAligned=""
: 글자의 아랫줄 맞추기
layout_gravity : 부모 컨테이너상에서의 자신의 위치를 정의해준다.
gravity : 자신의 구성요소들의 위치를 정의
★ android:layout_weight
: 가중치, 비율을 나타내는 속성이다.
* 같은 비율로 나누어 나타내기
: 3개 뷰의 크기를 match_parent 로 설정하고, layout_weight 의 값을 똑같이 설정하게 되면 3개의 뷰가 같은 비율로 나타나게 된다.
* 고정 크기를 필요로 할 때
: layout_weight 값을 '0' 으로 설정하게 되면 그 뷰는 자신이 설정한 크기의 영역을 무조건 차지하게 된다.
★ 프레임 레이아웃
: 하나의 뷰만을 화면에 표시하는 레이아웃
: '중첩' 기능을 자주 사용
: 뷰를 하나 이상 추가할 경우에는 추가된 순서대로 차곡차곡 쌓이게 됨
-> 가장 먼저 추가한 뷰가 가장 아래쪽에 쌓이고 그 다음에 추가한 뷰는 그 위에 쌓이게 됨
: 가장 위의 뷰를 Visibility 속성을 보이지 않도록 설정시 그 다음 뷰가 보이게 됨
: addView(), removeView() 와 같은 메소드가 정의되어 있으므로 간편하게 뷰를 추가하거나 삭제하고, 보이게 하거나 보이지 않게 전환가능
☞ 하나의 화면을 보이도록 만든 액티비티 안에서도 여러 화면을 보이게 만들 수 있다
★ 릴레이티브 레이아웃
: Relative layout은 child view를 상대적인 위치에 배치할 수 있도록 하는 ViewGroup이다.
즉 child view 들끼리 서로의 위치에 따라 상대적인 위치에 배치할 수 있다는 것이다.
Relative layout은 인터페이스를 디자인 하기에 제일 강력한 레이아웃이다.
여러개의 linear layout을 중첩하여 사용한 레이아웃을 하나의 Relative layout을 이용하여 배치가 가능하다.
다른 뷰를 기준으로 하는 속성
layout_above
~의 위에 배치
layout_below
~의 아래에 배치
layout_toLeftOf
~의 왼쪽에 배치
layout_toRightOf
~의 오른쪽에 배치
layout_alignLeft
~와 왼쪽변 정렬
layout_alignTop
~와 위쪽 변 정렬
layout_alignRight
~와 우측변 정렬
layout_alignBottom
~와 아래쪽 변 정렬
부모를 기준으로 하는 속성
layout_alignParentLeft
true이면 부모와 왼쪽변 정렬
layout_alignParentTop
true이면 부모와 위쪽변 정렬
layout_alignParentRight
true이면 부모와 오른쪽변 정렬
layout_alignParentBottom
true이면 부모와 아래쪽변 정렬
layout_centerHorizontal
true이면 부모의 수평 중앙에 배치한다.
layout_centerVertical
true이면 부모의 수직 중앙에 배치한다.
layout_centerInParent
true이면 부모의 수평, 수직 중앙에 배치한다.
layout_alignBaseline
~와 베이스라인을 맞춘다
layout_alignWithParentIfMissing
layout_toLeftOf 등의 속성에 대한 앵커가 발견되지 않으면 부모를 앵커로 사용한다