ConstraintLayout, Chain, setBackgroundColor/Resource, 리스트의 아이템에 click handler 적용

ConstraintLayout

• 자식 뷰들을 유연하게 배치하고 크기를 조정할 수 있는 ViewGroup
• 크고 복잡한 layout을 만드는 데 도움이 됨
•  ConstraintLayout을 사용하려면 constraints 조건들을 추가해야 함

** ConstraintLayut은 API 레벨 9 이상에서 사용할 수 있는 지원 라이브러리로 제공 됨

• constraints : 두 UI 요소 간의 연결 또는 정렬
  • 하나의 뷰를 다른 뷰, 상위 레이아웃 또는 보이지 않는 가이드라인에 연결하거나 정렬함
  • 하나 이상의 수평 constraint와 수직 constraint를 정의하여 뷰를 배치함
  • constraintTopToBottom 등

1 = 수평 구속, 2 = 수직 구속

체인 만들기

• 체인 : 양방향 제약 조건으로 서로 연결된 group of views
• 체인 내 뷰는 수직 또는 수평으로 분산됨
• Head of the Chain
  
  • 체인의 첫 번째 view
  • 체인헤드에 설정된 속성은 체인의 모든 뷰를 control, position, distribute 함
  • 수평 체인의 경우 체인 헤드는 맨 왼쪽 view
  • 수직 체인의 경우 맨 위 view

• Chain Styles
  • 체인 스타일은 체인 뷰가 펼쳐지고 정렬되는 방식을 정의함
  • 체인 스타일 속성을 지정하거나, 가중치를 추가하거나, 뷰에 bias를 설정하여 체인을 스타일링 할 수 있음
  • chain style의 종류 세 가지
    • Spread : 기본 스타일 -> view들은 available space(margin 미포함) 안에서 균등하게 분산됨
    • Spread inside : 첫 번째 뷰와 마지막 뷰는 체인의 양 끝에 있는 parent에 연결 됨. 나머지는 균등하게 펼쳐짐
    • Packed : margin을 제외한 후 뷰들이 가운데로 모아져서 함께 표시 됨
      • 체인헤드의 bias를 변경하여 전체 체인의 위치를 조정할 수 있음
  • Weighted 가중치
    • layout_constraintHorizontal_weight 에서 설정된 값에 따라 모든 공간을 채우도록 뷰의 크기가 조정됨
    • 가중치 1을 사용하는 뷰와 2를 사용하는 뷰 두 개가 체인으로 연결되어 있다면 1:2:2 의 비율로 공간ㅇ르 나눠가짐
  • 체인에 체인 스타일을 추가하려면 체인 헤드의 layout_constraintHorizontal_chainStyle 또는 layout_constraintVertical_chainStyle 속성에 값을 지정하면 됨

// Horizontal spread chain
app:layout_constraintHorizontal_chainStyle="spread"

// Vertical spread inside chain
app:layout_constraintVertical_chainStyle="spread_inside"

// Horizontal packed chain
app:layout_constraintHorizontal_chainStyle="packed"

spread

spread inside

packed

packed chain with bias

weighted

---

• setBackgroundColor()
  • view에 대해서 배경색을 바꿔주는 메소드
  • 인자로 Color클래스의 상수를 받아서 그 상수에 해당하는 색으로 배경색 변경함
  • view.setBackgroundColor(Color.GRAY)

view.setBackgroundColor(Color.GRAY)

• setBackgroundResource()
  • 사용자 정의 색상으로 배경색 변경
  • R.color에 속하는 아이디값을 인자로 받음

box_three_text.setBackgroundResource(R.color.my_red)

---

여러 뷰들에 공통 구조의 setOnClickListener 적용하기

• 각 뷰들에 대한 핸들러 값들을 when 문을 이용해 지정해 줌

private fun makeColored(view: View) {
   when (view.id) {
      
       // Boxes using Color class colors for the background
       R.id.box_one_text -> view.setBackgroundColor(Color.DKGRAY)
       R.id.box_two_text -> view.setBackgroundColor(Color.GRAY)
       R.id.box_three_text -> view.setBackgroundColor(Color.BLUE)
       R.id.box_four_text -> view.setBackgroundColor(Color.MAGENTA)
       R.id.box_five_text -> view.setBackgroundColor(Color.BLUE)
       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)
}

• 그 뷰들을 list로 묶어 줌

fun setListeners() {
...
   val clickableViews: List<View> =
       listOf(boxOneText, boxTwoText, boxThreeText,
              boxFourText, boxFiveText, rootConstraintLayout)
  }

• 리스트의 각 아이템에 대해 setListeners 등록해 줌

 for (item in clickableViews) {
       item.setOnClickListener { makeColored(it) }

• onCreate에서 해당 리스너 함수 호출

override fun onCreate(savedInstanceState: Bundle?) {
...
   setListeners()
}

 

https://codelabs.developers.google.com/codelabs/kotlin-android-training-constraint-layout/index.html?index=..%2F..android-kotlin-fundamentals&hl=ko#0