이제 box two를 추가할 차례입니다
일정한 간격유지를 어떻게 설정하는지 보도록 하겠습니다
textView 를 하나 끌어다 ConstraintLayout 에 추가 하시면 됩니다.
추가한 textView 에 ID 를 box_two_text 로 지정 합니다.
layout_width , layout_height 모두 130dp 로 사이즈 정해 주시고, style 에 WhiteBox 를 설정 해 주도록 합니다.
사이즈가 항상 유연하게 바뀌는 것도 좋지만 box tow처럼 항산 고정된 사이즈 일때도 필요합니다. 반응형도 중요하지만 의도치 않는 확대나 축소로 인한 깨짐도 발생할 수 있으니 상황에 잘 맞춰서 사용하셔야 합니다
앞으로 추가할 view 들까지 모두 strings.xml 에 추가 하도록 합니다.
<resources>
<string name="app_name">ColorMyViews</string>
<string name="box_one">Box One</string>
<string name="box_two">Box Two</string>
<string name="box_three">Box Three</string>
<string name="box_four">Box Four</string>
<string name="box_five">Box Five</string>
<string name="button_red">RED</string>
<string name="button_yellow">YELLOW</string>
<string name="button_green">GREEN</string>
</resources>
box_two_text 의 text 를 box_two 로 변경 해 주도록 합니다.
default Margin 값을 16으로 맞춰 주시고 제약 설정 해 주도록 합니다.
Constraint Layout 의 constraint 의 뜻이 제약이듯이 각 요소가 설정된 제약 조건을 가지고 그 제약내에서 표현되는 것이 constraint layout 입니다. 제약 설정을 한다는 것 보단 연결 해 주는 행위라 의미가 좀 햇갈릴 수도 있겠지만 정확한 의미는 box _two view 의 top 을 box_one view 의 bottom 에 둔다(설정된 margin 값의 간격을 두고)
입니다. ( box_two view 를 box_one 아래에 연결 시킨다 는 표현은 혼란을 가중시키는 틀린 표현으로 생각 되네요)
제약설정시에 default margin 값에 따른 차이도 한번 확인해 보시길 바랍니다
Default Margin 값을 줬을때 자동으로 View 간에 설정된 margin 값으로 설정이 되는걸 확인 할 수 있습니다.
같은 방식으로 Box Two 의 왼쪽도 ConstraintLayout 왼쪽 부분으로 이어 주도록 합니다.
ConstraintLayout 은 BoxTwo 와의 관계는 부모 자식 관계 이므로 parent 로 설정이 됩니다.
** 본 포스팅은 udacity.com 에서 제공하는 강의 Developing Android Apps with Kotlin 을 기반으로 작성되었습니다.**