arvigoes

Constraint layout 은 어렵게 사용하면 어렵지만, 간단하게 생각하고 만들면 정말 쉽게 만들 수 있습니다. 처음부터 이것 저것 고려 하고 잘 만들면 좋겠지만 이번 포스트에선 간단한 앱을 만들기 위해 UI를 쉽게 구성 하는 방법에 대해 알아 보도록 하겠습니다. 배치 원하는 view 를 Palette 창에서 선택하여 드래그 & 드롭 으로 배치 하면 됩니다. 저는 recycleView 를 배치 해 보았습니다. 상하좌우로 4개의 동그라미가 있습니다. 이게 이 view (recycleView)의 영역을 나타냅니다. 뷰가 배치되면 자동으로 적당한 영역으로 잡히게 되는데 recycleView 는 Layout 전체 크기로 잡히게 되네요 뷰의 크기는 layout_width, layout_height 값으로 결..

이번에는 각 view 에 클릭 이벤트로 색을 바꿔 보도록 하겠습니다. styles.xml 에서 이전에 만든 style "WhiteBox" 의 background 를 white 로 변경 해 줍니다. 백그라운드 색상을 흰색으로 변경하면 박스들이 약간의 흔적만 남기고 아무것도 보이지 않네요 constraint layout 의 background 의 색상이 완전한 white 라 색상차이가 있는것 같습니다. 자 이제 오랜만에 MainActivity.kt 에서 작업을 해 보도록 하죠 각 뷰에 클릭 이벤트 리스너 (setOnClickListener) 를 생성 해 주도록 합니다. 뷰가 여러개 이번트 리스너 등록하는 함수를 만들어서 onCreate 에서 호출 하게 해 주도록 했습니다. 코드를 간단히 설명하면 setLis..

다른 view 들을 추가하기 전에 chain 에 대해 잠깐 언급하고 넘어가도록 하겠습니다. 두개의 뷰 A, B가 있을때, A와 B가 "서로" 연결되어 있을 경우 이것을 체인 관계 상태라고 합니다. 여러 개의 뷰를 연결할 수도 있으며, 체인상태의 뷰는 하나의 헤드(HEAD)를 가지게 되는데 Vertical방향으로 연결할 경우 연결된 뷰의 최상단에 위치한 뷰, Horizontal 방향으로 연결할 경우 가장 왼쪽에 있는 뷰가 헤드가 됩니다. 두 버튼을 chain 연결 했을때 xml 에서는 자동으로 두 버튼에 대해 제약이 생기게 됩니다. Spread Chain : 모든 요소들이 동일한 간격으로 나눠서 배치 됩니다. Spread Inside Chain : 모든 요소들이 양끝을 기준으로 배치되고 동일한 간격으로 분..

이제 box two를 추가할 차례입니다 일정한 간격유지를 어떻게 설정하는지 보도록 하겠습니다 textView 를 하나 끌어다 ConstraintLayout 에 추가 하시면 됩니다. 추가한 textView 에 ID 를 box_two_text 로 지정 합니다. layout_width , layout_height 모두 130dp 로 사이즈 정해 주시고, style 에 WhiteBox 를 설정 해 주도록 합니다. 사이즈가 항상 유연하게 바뀌는 것도 좋지만 box tow처럼 항산 고정된 사이즈 일때도 필요합니다. 반응형도 중요하지만 의도치 않는 확대나 축소로 인한 깨짐도 발생할 수 있으니 상황에 잘 맞춰서 사용하셔야 합니다 앞으로 추가할 view 들까지 모두 strings.xml 에 추가 하도록 합니다. Colo..

이번에는 만능 Layout 이라 불리는 Constraint Layout 에 대해 학습해 보도록 하겠습니다. 이번 Constraint Layout 에 대해서는 처음부터 끝까지 실습 위주로 가도록 하겠습니다. 좀 더 자세한 내용이 궁금한게 있다면 추가로 포스팅 하도록 하겠습니다. Layout 을 구성하는 것은 UI 를 구성하는 것입니다. UI 화면구성 작업은 쉬운 일이 아닙니다. 앱의 요구 사항 변화가 있을때마다 UI 를 손대는 일도 빈번하게 발생하고, 사용하기 불편하지 않게, 동작을 잘 연결 해 주는것도 상당히 어려운 일입니다. 그리고 우리가 만드는 앱이 항상 동일한 환경에서 구동 되는 것도 아니라 상황에 맞게 각각 사이즈 조절이 되는 반응형으로 제작 되는것이 아주 중요합니다. Constraint Layo..