천소희

기록하는 개발자

업데이트:

카테고리:

/

태그: ,

무엇을 배우는가

  1. ConstraintLayout 사용
  2. ConstraintLayout에서 텍스트 정렬
  3. view 그룹을 수직, 수평 연결 만들기

ConstraintLayout이란?

유연한 방식으로 하위 요소의 위치를 지정하고 크기를 조정할 수 있는 View 그룹이다.
ConstraintLayout을 사용하면 크고 복잡한 레이아웃을 사용할 수 있다.

Constraints
두 UI 요소 사이의 연결 또는 정렬이다.
ConstraintLayout은 수평, 수직으로 하나의 연결은 꼭 필요하다.

1. ConstraintLayout의 기본설정

image
디자인 탭에 상단을 보면 🧲 생긴 버튼이 있다.
해당 버튼은 요소 추가시 자동으로 Constraint를 설정해준다.
자석버튼 옆에는 요소 추가시 자동으로 설정되는 간격을 설정할 수 있다.

Cosntraint 스타일
image
요소의 속성을 보면 왼쪽과 아래쪽에 바가 존재하는데 이것은 Constraint bias라고 한다.
이 축에 따라 요소 사이의 거리가 결정된다.

그리고 박스 내부를 보면 >>>의 기호가 있다.

  • >>> Wrap Content: 내부에 들어있는 내용만큼 뷰를 확장한다.
  • |--| Fixed: 고정된 치수를 정한다.
  • |-/-/-/-| Match Constraints: 부모요소에 맞춰서 연결하게 된다.

Chain 스타일
Chain Head가 되는 부분에 layout_constraintVertical_chainStyle를 추가해준다.
또는 원하는 요소를 선택하고 우클릭으로 Chain을 만들어준다.

  • Spread: 기본 옵션, 요소와 벽사이 구간에 일정 간격이 존재
  • Spread inside: 요소 내부의 간격만 동일한게 설정, 양 끝 요소는 벽에 붙어있음
  • Packed: 요소들이 붙어있고 양 끝에 일정 간격으로 벌어져 있다.
  • Weighted: 가중치, 전체구간에서 해당 요소가 얼마나 차지하는지 결정

baseline 설정
요소를 우클릭하면 최상단에 BaseLine 표시 여부가 있다.
클릭하면 요소 하단에 긴 바가 생기게 되고 이것을 다른 요소와 연결하면 정렬상태를 설정할 수 있다.
이것을 설정하게 되면 연결된 요소 중 하나만이라도 Constraint를 설정하면 같이 움직이게 된다.

2. 같은 함수를 다른 요소에 적용하기

private fun makeColored(view: View) {
  when (view.id) {
    R.id.box_one_text -> view.setBackgroundResource(R.drawable.green)
    R.id.box_two_text -> view.setBackgroundResource(R.drawable.green)
    R.id.box_three_text -> view.setBackgroundResource(R.drawable.green)
    R.id.box_four_text -> view.setBackgroundResource(R.drawable.green)
    R.id.box_five_text -> view.setBackgroundResource(R.drawable.green)

    else -> view.setBackgroundColor(Color.LTGRAY)
  } 
}

private fun setListeners() {
  val boxOneText = findViewById<TextView>(R.id.box_one_text)
  val boxTwoText = findViewById<TextView>(R.id.box_two_text)
  val boxThreeText = findViewById<TextView>(R.id.box_three_text)
  val boxFourText = findViewById<TextView>(R.id.box_four_text)
  val boxFiveText = findViewById<TextView>(R.id.box_five_text)

  val rootConstraintLayout = findViewById<View>(R.id.constraint_layout)

  // 클릭 가능한 요소들을 리스트로 제작
  val clickableViews: List<View> = listOf(boxOneText, boxTwoText, boxThreeText, boxFourText, boxFiveText)

  // 해당 요소들에 모두 clickListener를 연결한다.
  for (item in clickableViews) {
    item.setOnClickListener{
        makeColored(it)
    }
  }
}

참고