Android ConstraintLayout
•
1 like•205 views
ConstraintLayout Constraint / Chain [Helper] Guideline / Barrier / Group / Holder - Google Presentation 에서 작성
Recommended
More Related Content
Featured
Featured (20)
Android ConstraintLayout
- 2. Constraint Layout ● Android Jetpack 에 포함된 레이아웃 ● 중첩된 레이아웃을 사용하지 않고, 평면 상에 복잡한 레이아웃 구성 가능 ● 같은 계층의 View 및 부모 레이아웃 간의 관계에 따라 레이아웃 작성 ● 각 View 는 가로 / 세로에 하나 이상의 제약 조건(Constraint) 를 포함해야함 ● Android Studio 의 Layout Editor 를 통해 쉽게 작성 가능
- 3. ● AndroidProjects/build.gradle ● app/build.gradle Dependency Convert Layout Create New Layout repositories { google() } dependencies { implementation “androidx.constraintlayout:constraintlayout:{$version}” }
- 4. Dependency Convert Layout Create New Layout 1. ConstraintLayout 으로 변환할 레이아웃 파일 열기 2. 하단 Design 탭 클릭 3. 변환할 레이아웃을 우클릭한 후, [ Convert layout to ConstraintLayout ] 메뉴 클릭
- 5. Dependency Convert Layout 1. layout 파일 생성할 위치 우클릭 후 [ New > XML > Layout XML File ] 선택 2. 레이아웃 파일 입력 후, Root Tag 에 [ androidx.constraintlayout.widget.ConstraintLayout ] 입력 3. [ Finish ] 버튼 클릭 Create New Layout
- 6. Add New Constraint Delete Constraint 1. [ Layout Editor > Palette ] 에서 드래그하여 ConstraintLayout 에 View 추가 2. Constraint 를 추가할 View 선택 3. View 의 각 변에 있는 핸들을 클릭한 후 다른 View, 부모 레이아웃 등의 앵커로 드래그 (설정된 Constraint 는 화살표 등의 모양으로 표시)
- 7. Add New Constraint Delete Constraint 방법1. Control (Mac OS일 경우 Command) 를 누른 상태로 삭제할 Constraint 의 앵커 클릭 (삭제할 Constraint 는 빨간색으로 표시)
- 8. Add New Constraint Delete Constraint 방법2. [ Attributes > Layout ] 에서 삭제할 앵커 클릭
- 10. Position & Alignment Bias Size Chain ConstraintLayout A B C * 모든 Constraint 가 정의되지 않은 상태 * 남은 Constraint 정의에 따라 위치 및 정렬이 변경될 수 있음
- 11. Position & Alignment Bias Size Chain ConstraintLayout A B C * 모든 Constraint 가 정의된 상태 * 모든 위치 및 정렬에 대한 정보있음
- 12. Position & Alignment Bias Size Chain ConstraintLayout Text1 Text2 * Text 의 Baseline 을 이용한 정렬 가능 1. Text 우클릭 후, [ Show Baseline ] 클릭 2. Baseline 클릭 후 드래그하여 다른 Text 의 Baseline 에 연결
- 13. Position & Alignment Bias Size Chain ConstraintLayout View * View 양쪽에 Constraint 를 정의할 경우 설정된 Constraint 의 중심에 View 가 위치
- 14. Position & Alignment Bias Size Chain ● View 에 적용하는 Margin 의 경우 layout_constraint[기준1]_to[기준2]Of=”viewId | parent” 와 같이 적용 가능 app:layout_constraintBottom_toBottomOf=”parent” app:layout_constraintBottom_toBottomOf=”@+id/textView”
- 15. Position & Alignment Bias Size Chain * 실제로 Constraint 가 적용된 결과
- 16. Position & Alignment Bias Size Chain ● 특정 View 의 중심을 기준으로 특정 각도와 거리만큼 Constraint 정의하여 View 를 원형 배치 가능 layout_constraintCircle=”view_id” layout_constraintCircleRadius=”radius” layout_constraintCircleAngle=”angle” app:layout_constraintCircle=”@+id/centerView” app:layout_constraintCircleRadius=”20dp” app:layout_constraintCircleAngle=”10”
- 18. Position & Alignment Bias Size Chain ConstraintLayout View * View 양쪽에 Constraint 를 정의할 경우 설정된 Constraint 의 중심에 View 가 위치 * 기본 Bias 는 50으로 설정되며, Attributes 창에서 수정 가능
- 19. Position & Alignment Bias Size Chain * 수직, 수평 방향에 대한 Bias 를 설정할 수 있는 슬라이더 * Bias 가 0 에 가까울수록 위 또는 왼쪽에 치우침 * 더블 클릭 시 50 으로 초기화
- 20. Position & Alignment Bias Size Chain View View View View View Horizontal Bias = 0 Horizontal Bias = 25 Horizontal Bias = 50 Horizontal Bias = 75 Horizontal Bias = 100
- 21. Position & Alignment Bias Size Chain * 모든 View 의 Bias 를 0 으로 설정한 결과
- 22. Position & Alignment Bias Size Chain ConstraintLayout View View View 0dp, match_constraint wrap_content fixed size (100dp, @dimen/view_width)
- 23. Position & Alignment Bias Size Chain 1 2 3 4 1 2 3 4 View 종횡비 (ratio 입력창에 비율 설정) View margin 너비/높이 모드 설정 (클릭하여 모드 순환 변경) Bias 슬라이더
- 24. 고정된 크기 (ex: 100dp, @dimen/view_width) 하단 입력창 또는 Layout Editor 에서 특정 크기로 설정 WRAP_CONTENT View 내부 항목 (텍스트 등) 에 맞는 크기로 설정 MATCH_CONSTRAINT (0dp) 양쪽 Constraint 에 맞게 확장된 크기로 설정 [ MATCH_CONSTRAINT 일 경우 추가 속성 ] 1.layout_constraintWidth_default - 양쪽 Constraint에 맞게 크기 확장 2. layout_constraintWidth_min - 지정된 크기만큼의 최소 너비 설정 3. layout_constraintWidth_max - 지정된 크기만큼의 최대 너비 설정 4. layout_constraintWidth_percent - 지정된 비율만큼의 크기 설정 Position & Alignment Bias Size Chain
- 25. Position & Alignment Bias Size Chain ConstraintLayout This is Text View View This is Too Long Long Long Long Long Long Long Long Text View WRAP_CONTENT 인 TextView 옆에 아이콘 등의 View 가 있을 경우 (Chain Style = Packed) 긴 텍스트가 입력됐을 경우
- 26. Position & Alignment Bias Size Chain ● Chain Style 이 Packed 이고 양쪽에 모든 Constraint 가 정의되어 있으나, 긴 텍스트가 입력될 경우 정의된 Constraint 를 무시하고 가변적인 TextView 의 너비 (WRAP_CONTENT) 가 우선 적용 ● 가변적인 View 의 너비를 MATCH_CONSTRAINT 로 설정 및 layout_constraintWidth_default 속성 정의로 수정 가능 (@Deprecated) ● 가변적인 View 의 너비를 WRAP_CONTENT 로 설정 및 layout_constrainedWidth 속성 정의로 수정 가능
- 27. Position & Alignment Bias Size Chain ConstraintLayout This is Text View View This is Too Long Long Long Long Long Long Lo... WRAP_CONTENT 인 TextView 옆에 아이콘 등의 View 가 있을 경우 (Chain Style = Packed) 긴 텍스트가 입력됐을 경우 (layout_constrainedWidth=”true” 적용) View
- 28. Position & Alignment Bias Size Chain ConstraintLayout View1 View2 * 2개 이상의 View 가 양방향 Constraint 를 통해 연결 * 체인으로 연결된 View Group 은 체인 방향에 따라 분산/집합 설정 가능 * Layout Editor 에서 체인을 설정할 View 들을 선택 후 [ 우클릭 > Chains > Create Horizontal/Vertical Chain ] 선택하여 체인 설정 * 체인이 설정된 뷰 [ 우클릭 > Cycle Chain Mode ] 선택하여 체인 모드 변경
- 29. Position & Alignment Bias Size Chain View1 View2 View3 View1 View2 View3 View1 View2 View3 View1 View2 View3 Spread (app:layout_constraintHorizontal_chainStyle=”spread”) Spread_Inside (app:layout_constraintHorizontal_chainStyle=”spread_inside”) Weighted (app:layout_constraintHorizontal_weight=”int”) ** 각 뷰에 weight 설정 Packed (app:layout_constraintHorizontal_chainStyle=”packed”)
- 30. Position & Alignment Bias Size Chain ConstraintLayout View1 View2 View3 Packed marginLeft =”0dp” layout_goneMarginLeft=”30dp” horizontal_bias=”0” View1 View3 30dp
- 31. ● View 의 위치를 설정하는데 사용되는 ConstraintLayout Helper ● PhotoShop, Power Point 의 안내선과 동일한 개념 ● 화면에는 실제로 표시되지 않으며, View 위치 설정 시 참조 가능 ● Layout Editor 에서 [ 우클릭 > Helpers > Add Vertical/Horizontal Guideline ] 선택하여 추가 ● layout_constraintGuide_[ begin | end | percent ] 의 속성으로 위치 설정 Guideline Group Barrier Placeholder begin 레이아웃의 윗쪽 또는 왼쪽을 기준으로 가이드라인을 위치 layout_constraintGuide_begin=”20dp” end 레이아웃의 아랫쪽 또는 오른쪽을 기준으로 가이드라인을 위치 layout_constraintGuide_end=”20dp” percent 레이아웃의 윗쪽 또는 왼쪽을 기준으로 가이드라인을 위치 begin / end 와 달리 비율에 따라 가이드라인의 위치를 0~1 사이의 값으로 정의 layout_constraintGuide_percent=”0.1”
- 33. ● 많은 View 의 Visibility 를 동시에 설정하는데 사용 ● 기존의 방법처럼 View 를 감싸는 별도의 레이아웃을 만들고 관리하는 방법이 아닌, Group 에 관리할 View 를 기재하여 관리하는 방법 ● group.setVisibility(View.VISIBLE) / group.setVisibility(View.GONE) 과 같이 Group 전체의 Visibility 를 설정 ● constraint_referenced_ids=”id1,id2,id3” 과 같이 View 를 Group 에 추가 ● Layout Editor 에서 Group 추가할 View 들을 드래그하여 추가 가능 Guideline Group Barrier Placeholder
- 34. Guideline Group Barrier Placeholder 회색 TextView 가 우측에 배치하는 일반적인 경우 좌측 TextView 중 하나의 길이가 변했을 경우
- 35. ● 회색 TextView 의 왼쪽 Constraint 가 빨간 TextView 에 우측에만 정의되어 있기 때문에 초록색 TextView 의 길이가 변해도 처리 불가 ● 회색 TextView 의 왼쪽 Constraint 는 한 번에 1개의 대상만을 정의할 수 있어 모든 상황에 대해 대처 불가능 Guideline Group Barrier Placeholder
- 36. ● 길이가 가변적인 2개 이상의 View 들을 묶어 정의할 때 사용 ● 생성된 Barrier 는 다른 View 가 Constraint 의 대상으로 지정 가능 ● Barrier 의 방향은 barrierDirection 으로 정의하며, right 일 경우 묶인 View 들의 오른쪽에 Barrier 가 위치 barrierDirection=”top | bottom | left | right | start | end” ● constraint_referenced_ids=”id1,id2,id3” 과 같이 Barrier 그룹에 추가 ● barrierAllowsGoneWidgets=”true | false” 로 Barrier 내 View 의 Gone 처리 방법 정의 (Default : true) Guideline Group Barrier Placeholder
- 38. ● 다른 View 의 위치를 정의된 PlaceHolder 위치에 재배치하여 표시 ● PlaceHolder 에 설정된 기존 View 는 View.GONE 처리되며, PlaceHolder 위치에 표시 ● XML 파일 상에서 위치 및 Constraint 를 설정할 수 있으며, 코드 상에서 placeHolder.setContentID(view_id) 와 같이 적용 가능 Guideline Group Barrier Placeholder
- 39. ● Google ConstraintLayout https://developer.android.com/training/constraint-layout?hl=ko ● 범석의 안드로이드 메모장 https://beomseok95.tistory.com/305#Placeholder ● 찰스의 안드로이드 https://www.charlezz.com/?p=669 ● @tura velog https://velog.io/@tura/android-jetpack-constraint-layout Reference