[스마트인재개발원] Constraint Layout에서 Chain 사용하기

Chain은 ConstraintLayout에서 사용할 수 있는 기능으로 양방향의 위치를 제한하여 서로 연결된 View Group을 만들 수 있다.

Chain 내 view는 가로(Horizonal) 혹은 세로(Vertical)로 분산될 수 있다.

Chain linear group은 Spread, Spread inside, packed 세가지 속성으로 제어할 수 있다.

• Spread
  • 각각의 View를 균등하게 분산시킨다.
• Spread inside
  • 첫번째와 마지막번째 View를 양쪽 끝 구속 조건에 붙여주고 나머지는 균등하게 분산시킨다.
• Packed
  • 모든 View가 서로 거리를 두지않은채 꽉 달라붙어버린다.

 

Chain 설정방법과 Constraint에 맞춰 화면을 꽉 채우도록(block-inline) 지정하는 방법

Chain들의 종류. (Horizonal Chain)

 

하지만 주의할 점이 있다.

언뜻같아보이면 한개의 Vertical 세로 체인과 가로로 2개의 체인이 생성되어있는것 같아 보이는 이 구성도는

사실 LinearLayout의 구성만으로 이루어진것이다.

(왼) 가운데 구성의 Component Tree, (가운데) 전체 아이템을 지정한 결과 Layout간의 연결성 없음 (오) 전체 아이템을 지정한 결과 Chain의 연결선

Chain과는 다르게 ConstraintLayout과 아무런 연결점이 없으니 주의해야한다.

Vertical Chain

얘가 버티컬체인이다. 그냥 세로로 연결하는것일뿐 Horizon과 지정하는 방식도 똑같다.

체인에 감이 왔다면 이제 한번 카카오 로그인 화면을 디자인해보자.

가로 로그인은 레이아웃 xml 리소스파일을 만든 뒤 Landscape속성으로 지정해주면 된다.