일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- 안드로이드 스튜디오 반복되는 레이아웃 코드
- 디자인 패턴 예제
- 다른 객체 리스트의 비교
- 객체지향 프로그래밍 5가지 원칙
- LifeCycle
- 안드로이드 스튜디오 인터넷 연결 확인
- 아파치란
- 아파치 엔진엑스
- hilt error
- 자바 스레드 예제
- 안드로이드 디자인패턴
- java thread 예제
- 변수
- 안드로이드 스튜디오 custom dialog
- edittext 연결
- 안드로이드 스튜디오 커스텀 다이얼로그
- recyclerview item recycle
- java
- 안드로이드 mvvm 예제
- Kotlin
- 안드로이드 스튜디오 인터넷 연결 안되어 있을 때
- 이중for문 사용 안하기
- AAC
- apache란
- 안드로이드 스튜디오 tts
- Thread
- 리사이클러뷰 아이템 재사용
- 안드로이드 스튜디오 style
- dagger error
- apache nginx
- Today
- Total
Sam Story
안드로이드 ConstraintLayout 본문
그간 예제에서는 전부 LinearLayout을 사용해 레이아웃을 작성했었다.
LinearLayout을 이용하면 간단하게 코드를 짤 수 있지만 뷰가 많이 들어가거나
복잡한 레이아웃의 경우 view가 많아지는 경향이 있다.
사실 안드로이드 스튜디오에서 권장하는 레이아웃은 ConstraintLayout 이다.
처음 안드로이드 공부를 할때에는 ConstraintLayout 으로 레이아웃을 작성했었고
굉장히 편하고 유용하다는 생각을 했었다.
하지만 여러 레이아웃을 만들어 볼수록 조금씩 뷰가 틀어지거나 배치한 위치가
내가 생각한 위치와 다른경우도 많았기 때문에 점점 LinearLayout을 사용하게 되었었다.
이러한 이유때문인지 점점 ConstraintLayout를 접할 기회가 줄었었는데
ConstarintLayout 공부 한걸 잊지않게 간단하게 포스팅 해보려 한다.
1. ConstraintLayout 이란 ?
ConstraintLayout 은 부모 뷰그룹 안의 다른 요소들과의 상대적인 제약조건(Constraints)을
설정함으로써 화면에 배치되도록 하는 레이아웃이다.
기존의 레이아웃 (LinearLayout , RelativeLayout 등) 에 비해 레이아웃이
중첩하지 않도록 복잡한 레이아웃을 간단하게 만들 수 있다.
또한 안드로이드 스튜디오의 레이아웃 에디터로 만들기도 편하고
성능도 다른 레이아웃에 비해 우수하다.
ConstraintLayout을 쓰는 것이 복잡한 View를
성능 저하 없이 만들 수 있는 방법으로 안드로이드에서 권장하고 있다.
2. ConstraintLayout 의 속성
ConstraintLayout 속성을 설명하기에 앞서 쓰이는 단어들의 의미를 이해할 필요가 있다.
Left / Start : Left의 뜻대로 View의 왼쪽을 뜻한다. Start 또한 왼쪽을 의미한다고 보면된다.
Right / End : Right의 뜻대로 View의 오른쪽을 뜻한다. End 또한 왼쪽을 의미
Top : View의 위쪽을 뜻한다.
Bottom : View의 아래쪽을 뜻한다.
Chains : 수평 또는 수직 방향으로 연결된 뷰를 위한 속성
위의 단어들을 숙지했다면 아래의 속성들을 보자
속성들의 공통점은 Constraint의 시작부분 , 지정된 부분 으로 구성되어 있다는 것이다.
위의 속성을 글로만 보면 이해가 쉽지 않기에 예제를 통해서 좀 더 직관적으로 알아보자.
3. 예제
먼저 프로젝트를 만들거나 액티비티를 만들게 되면
메인 액티비티의 레이아웃의 기본설정이 ConstraintLayout으로 설정되어 있는걸 볼 수 있다.
위의 TextView가 Constraint 속성으로 관계가 맺어져 있는것도 볼 수 있다.
여기서 TextView의 parent는 바로 상위의 View인 ConstraintLayout이다.
그다음 버튼을 한번 만들어보자.
버튼을 만들어보면 버튼쪽에 에러가 뜨는걸 볼 수 있다.
이 에러가 뜨는 이유는 Constraint 레이아웃 에서는 최소 3개의 관계를 맺어줘야 한다.
상 하 좌 우 (Top , Bottom , Start , End) 의 관계중 3개의 관계를 맺는걸 의미한다.
우측 상단 디자인 탭에서도 관계를 맺어줄 수 있다.
Start 속성 , End 속성 , Bottom 속성의 관계를
Parent와 맺어주면 맺어주면 위이미지와 같이 뷰의 위치가 지정된다.
코드로 보게되면 기존에 있던 에러가 사라진걸 볼 수 있다.
이번에는 Chain 속성이다.
TextView의 Bottom 과 Button 의 Top 을 위 코드와 같이 작성하면
Button의 Top에 Chain이 생긴걸 볼 수 있다.
이렇게 View 끼리 관계를 맺어준걸 Chain이라 하고 이 Chain의 속성을 선언해 줄 수 있다.
위 공식문서처럼 View 3개를 만들어보고
Constraint를 맺어준 다음 맨 왼쪽의 View에 Chain 속성을 지정해보자.
Spread_inside 속성을 사용했을때
Spread 속성 사용했을 때
Packed 속성 사용했을 때
이렇게 View 간에 Constraint를 맺고 Chain 속성에 따라서 View들의 위치를 지정할 수 있다.
이렇게 서로 View와 View 끼리 Constraint가 되어 있으므로 View 하나의 속성을 바꿔주면
다른 View에도 영향이 갈 수 있는 점을 항상 생각하면서 레이아웃을 구성해 나가야 한다.
오늘 사용한 예제는 단순히 버튼3개를 가지고 진행 했지만
좀 더 복잡한 레이아웃의 경우를 구성해야 할때에도 기준 View를 기준으로 View의 배치를 짜야한다.
확실히 다른 레이아웃들에 비해 훨씬 유연하고 간단한 View의 배치는 다루기도 쉽다는 강점이 있는것 같다.
'Android' 카테고리의 다른 글
안드로이드 MVP 패턴 (0) | 2024.04.29 |
---|---|
안드로이드 MVC 패턴 (0) | 2024.04.27 |
제트팩 컴포즈 (Jetpack Compose) (1) | 2024.04.21 |
룸 (Room) (0) | 2024.04.16 |
라이브 데이터 (LiveData) (0) | 2024.04.13 |