안드로이드 스튜디오에는 화면을 구성하는데 사용하는
6가지 레이아웃이 있습니다.
ㅇ LinearLayout
카카오톡의 화면을 예시로 들면,
LinearLayout 방향은 Horizontal(수평)으로 3개의 View가 들어가있다고 볼 수 있습니다.
가운데에 있는 가족, 대화메시지에도 LinearLayout으로 구성했다고 볼 수 있습니다.
LinearLayout 방향은 Vertical(수직)으로 2개의 뷰가 들어가있겠죠
이렇게 Layout안에 Layout을 넣어서 화면을 구성하는 것을 Layout 중첩이라고합니다.
복잡한 화면을 만들 때에는 Layout을 잘 활용해서 사용하시면 됩니다.
LinearLayout의 속성
android:orientation="vertical" , horizontal (View를 쌓을 방향)
LinearLayout에 들어가는 View의 속성
android:layout_gravity = "center_vertical" (방향이 horizontal일시 상하 가운데 정렬),
(center_horizontal 방향이 vertical 일시 좌우 가운데 정렬)
레이아웃에서 View의 위치 정렬을 위해 사용
※ 방향과 반대로 쓰셔야 됩니다 방향과 같은 정렬 시 적용되지 않습니다.
ex)android:orientation="vertical"
android:layout_gravity = "center_vertical"
이유는 생각해보세요.
android:layout_weight="1"
weight를 1로 지정한 View가 3개 있으면 이렇게 Layout을 3등분하게 됩니다.
따라서 자신이 가진 weight값 / 총 weight 합 만큼 Layout내의 공간을 차지하게 됩니다.
ㅇRelativeLayout
어떤 뷰와의 상대적인 위치를 통해 위치를 판단하는 방법입니다.
Relative안에 있는 View에 다음의 속성을 부여해주면되는데
위치
android:layout_above="View id" 뷰의 위에 위치
android:layout_below 뷰의 아래
android:layout_toLeftOf 뷰의 왼쪽
android:layout_toRightOf 뷰의 오른쪽
정렬(align)
android:layout_alignTop 해당 뷰의 위쪽으로 정렬
android:layout_alignBottom 해당 뷰의 아래쪽으로 정렬
android:layout_alignLeft 해당 뷰와 왼쪽정렬
android:layout_alignRight 해당 뷰와 오른쪽정렬
android:layout_alignBaseLine 해당 뷰와 텍스트 하단 라인을 정렬
="View id"
이건 파워포인트 다뤄보신 분들은 금방 이해하실겁니다.
android:layout_alignParentTop 자신을 감싸고 있는 부모 뷰, 혹은 레이아웃의 위쪽 정렬
android:layout_alignParentBottom 아래
android:layout_alignParentLeft 왼쪽
android:layout_alignParentRight 오른쪽
android:layout_centerHorizontal 가로의 가운데
android:layout_centerVertical 세로의 가운데
android:layout_centerInParent 가로 세로 가운데
="true"
ㅇ★FrameLayout
FrameLayout 솔직히 저는 이게 제일 중요하다고 생각합니다.
이거만 잘 활용하면 Activity 하나에 화면구성을 여러개 만들 수 있습니다.
TapHost가 TapWidget과 FrameLayout을 가지고 있고,
TapWidget 버튼 하나에 하나의 FrameLayout을 보여주는 방식입니다.
이거 직접 코딩하고 그러면 복잡한데 정말 간단하게 구성할 수 있게 해놓았습니다.
(진짜 짱짱맨)
이렇게하면 3개의 화면을 구성할 수 있습니다.
참고로 중요한 것은 TabHost에서 TabWidget의 id와 FrameLayout의 id는 라이브러리에 포함되어 있다는 것입니다.
TabWidget id = @android:id/tabs
FrameLayout id = @andoird:id/tabcontent
@+id/~~~ 이건 내 App 전용으로 id를 라이브러리에 추가해서 사용하겠다는 뜻입니다.
자바코드도 작성해주어야 하는데
Tab화면 하나를 추가하는 기본 양식입니다.
외우세요 이건 진짜 혁명입니다.
TabSpec이 하나의 Tab을 구성하는 것이고
setIndicator를 통해 TabWidget에 어떻게 표현할 것인지,
가운데 ResourcesCompat.getDrawable로 이미지를 불러옵니다.
(구문 자체는 굳이 저렇게 해야하나 싶네요)
setContent로 어떤 화면을 보여줄 것인지 정해주고
TabHost에 addTab해주면 탭 화면 구성이 끝납니다.
진짜 이건 혁명..입니다..
ㅇTableLayout
TableLayout안에 TableRow로 화면을 구성할 때 사용합니다.
속성
android:shrinkColumns="0,1" Row가 화면 보다 커질 시 0,1의 크기를 줄임
android:stretchColumns="1" Row에 여백이 발생할 시 index 1의 크기를 늘림
android:layout_column="1" index 1번째 자리로
android:layout_span="2" 2개 만큼 Row 차지
ㅇGridLayout
갤러리 앱에서 사용하는 방식입니다.
TableLayout과 비슷하면서도 다른게 Table은 크기를 정해놓지만
GridLayout은 순서대로 쌓아가는 방식입니다. (동적 할당)
GridLayout 속성
orientation = View가 들어왔을 때 배치하는 방향
columnCount = 열의 최대 개수 (방향이 horizontal일 때)
rowCount = 행의 최대 개수 (방향이 vertical일 때)
GridLayout안에 위치한 View의 속성
layout_column = 열 index 지정
layout_row = 행 index 지정
layout_columnSpan = 숫자만큼 열 크기 늘어남
layout_rowSpan = 숫자만큼 행 크기 늘어남
layout_gravity = "fill" 늘리고나서 채울 때
1의 rowSpan, columnSpan = 2로 주었을 때
gravity = "fill"
ㅇConstraintLayout
ConstraintLayout은 Relative Layout과 비슷하면서도 다른 Layout입니다.
Constraint 안에 있는 View의 속성
app:layout_constraintLeft_toLeftOf="View id"
app:layout_constraintLeft_toRightOf="View id"
app:layout_constraintRight_toLeftOf="View id"
app:layout_constraintRight_toRightOf="View id"
app:layout_constraintTop_toTopOf="View id"
app:layout_constraintTop_toBottomOf="View id"
app:layout_constraintBottom_toTopOf="View id"
app:layout_constraintBottom_toBottomOf="View id"
app:layout_constraintBaseline_toBaselineOf="View id"
app:layout_constraintStart_toEndOf="View id"
app:layout_constraintStart_toStartOf="View id"
app:layout_constraintEnd_toStartOf="View id"
app:layout_constraintEnd_toEndOf="View id"
View id에는 parent도 들어갈 수 있습니다. (뷰의 상위 뷰)
여백 (margin)
android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginRight
android:layout_marginTop
android:layout_marginBottom
View가 gone 상태일 때 margin 값을 바꿔주려면
layout_goneMarginStart 형식으로 사용해주시면 됩니다.
치우침 (bias)
왼쪽, 오른쪽 모두 ★연결되어 있는 상태
app:layout_constraintHorizontal_bias="0.2"
비율 (Ratio)
가로, 세로 비율
app:layout_constraintDimensionRatio="1:1"
1:1 이면 가로, 세로 비율이 1:1로 맞춰지는 것
(layout_width, layout_height)
여기서 중요한 것은 한 쪽이 0이여야 한다는 것입니다.
※ 둘 다 0인 경우)
app:layout_constraintDimensionRatio="H,2:1"
(H)orizontal 가로방향을 기준으로 세로 값을 조정
(V)ertical 세로 방향을 기준으로 가로 값을 조정
Layout 완벽 정리 끝~
'슬기로운 개발자생활 > Native APP' 카테고리의 다른 글
| [APP 개발] 안드로이드 스튜디오 알림 기능 (진동, 벨, 토스트, 알림창) (4) | 2020.01.07 |
|---|---|
| [APP 개발] 안드로이드 스튜디오 UI 구성 뷰(View) 간단 설명 (0) | 2020.01.04 |
| [APP 개발] 안드로이드 스튜디오 개발을 위한 기초 지식 (2) | 2020.01.03 |