[1팀] 11-4~7. 화면에 그려지는 디자인 요소 위젯: 에딧텍스트, 라디오그룹&버튼, 체크박스, 토글 버튼&스위치

이 글은 이것이 안드로이드다 with 코틀린(개정판)를 참고하여 작성하였습니다.

작성자 : 이승민

개발환경은 Windows, Android Studio입니다.

 

 

1. 에디트 텍스트 (Edit Text)

- 에디트 텍스트 : 사용자가 입력한 문자열을 보이게 하거나, 다른 textView의 text를 수정할 수 있게 하는 위젯

• id 값을 변경 (스코프 수정) → 텍스트 구성 삭제 → 뷰바인딩 설정

※ 로그 찾을 때, 한글로 설정하면 찾기 쉬움!

val binding by lazy {ActivityMainBinding.inflate(LayoutInflater) }

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

	with(binding) { this: ActivityMainBinding
		editText.addTextChangedListener { editable ->
			//Log.d("에딧텍스트", "입력된 값${editable.toString()}")
			textView.text = deitable.toString() //textView의 텍스트가 에딧텍스트의 값으로 바뀜
		}
	}
}

2. 라디오 그룹 & 버튼 (Radio Group & Button)

- Radio Group : 여러 개의 Radio Button이 묶여있는 그룹

- Radio Button : 여러 개의 버튼(선택지) 중 하나의 선택지만 체크할 수 있는 위젯

val binding by lazy {ActivityMainBinding.inflate(LayoutInflater) }

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

	binding.radioGroup.setOnCheckedChangeListener { group, checkedId ->
			when(checkedId) {
				R.id.radioApple -> Log.d(tag: "라디오버튼", msg: "사과가 선택되었습니다.")
				R.id.radioBanana -> Log.d(tag: "라디오버튼", msg: "바나나가 선택되었습니다.")
				R.id.radioOrange -> Log.d(tag: "라디오버튼", msg: "오렌지가 선택되었습니다.")
		}
	}
}

radioGroup 속성에서 orientation을 horizontal, vertical을 설정하면 수직, 수평 정렬을 바꿀 수 있음

3. 체크박스 (Check Box)

• 라디오 버튼과 달리 중복 선택이 가능한 위젯
• 라디오 버튼처럼 체크박스 그룹이 따로 없음

-> LinearLayout를 만들고 그 아래에 체크 박스들을 만들어 준다.

val binding by lazy {ActivityMainBinding.inflate(LayoutInflater) }

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

	with(binding) { this : ActivityMainBinding
		checkApple.setOnCheckedChangeListener { buttonView, isChecked ->
			if(isChecked) Log.d(tag: "체크박스", msg: "사과가 선택되었습니다.")
			else Log.d(tag: "체크박스", msg: "사과가 선택 해제 되었습니다.")
		}

		checkBanana.setOnCheckedChangeListener { buttonView, isChecked ->
			if(isChecked) Log.d(tag: "체크박스", msg: "바나나가 선택되었습니다.")
			else Log.d(tag: "체크박스", msg: "바나나가 선택 해제 되었습니다.")
		}

		checkOrange.setOnCheckedChangeListener { buttonView, isChecked ->
			if(isChecked) Log.d(tag: "체크박스", msg: "오렌지가 선택되었습니다.")
			else Log.d(tag: "체크박스", msg: "오렌지가 선택 해제 되었습니다.")
		}
	}
}

 

4. 토글 버튼 & 스위치 (Toggle Button & Switch)

• On & Off를 변경할 수 있는 위젯
• On, Off를 할 때 원하는 textView의 text를 변경시키는 위젯

val binding by lazy {ActivityMainBinding.inflate(LayoutInflater) }

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

	with(binding) { this : ActivityMainBinding
		toggleButton.setOnCheckedChangeListener { buttonView, isChecked ->
			textToggle.text = if(isChecked) "On" else "Off"
		}
		switchButton.setOnCheckedChangeListener { buttonView, isChecked ->
			textSwitch.text = if(isChecked) "On" else "Off"
		}
	}
}