yourginieus
ConstraintLayout, Chain, setBackgroundColor/Resource, 리스트의 아이템에 click handler 적용 본문
Android/Android Kotlin 기초 실습 정리
ConstraintLayout, Chain, setBackgroundColor/Resource, 리스트의 아이템에 click handler 적용
EOJIN 2022. 10. 25. 20:06ConstraintLayout
- 자식 뷰들을 유연하게 배치하고 크기를 조정할 수 있는 ViewGroup
- 크고 복잡한 layout을 만드는 데 도움이 됨
- ConstraintLayout을 사용하려면 constraints 조건들을 추가해야 함
** ConstraintLayut은 API 레벨 9 이상에서 사용할 수 있는 지원 라이브러리로 제공 됨
- constraints : 두 UI 요소 간의 연결 또는 정렬
- 하나의 뷰를 다른 뷰, 상위 레이아웃 또는 보이지 않는 가이드라인에 연결하거나 정렬함
- 하나 이상의 수평 constraint와 수직 constraint를 정의하여 뷰를 배치함
- constraintTopToBottom 등
체인 만들기
- 체인 : 양방향 제약 조건으로 서로 연결된 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"
- 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()
}
'Android > Android Kotlin 기초 실습 정리' 카테고리의 다른 글
Fragment : fragment 생성 및 layout에 fragment 추가 (0) | 2022.10.25 |
---|---|
Data binding (0) | 2022.10.25 |
User Interactivity : 사용자와 상호작용 - 키보드 보이기, 숨기기 (0) | 2022.10.25 |
LinearLayout, TextView, Scroll View, dp/sp (0) | 2022.10.25 |
Basic Activity Architecture, Launcher Icon 변경 (0) | 2022.10.25 |
Comments