[5팀] 코틀린 안드로이드 기초강의_21~24 | 라디오그룹&버튼, 체크박스, 토글 스위치, 프로그래스바

루이란 2021. 10. 29. 22:30

이 글은 이것이 안드로이드다 with 코틀린(개정판)를 참고하여 작성하였습니다.
작성자 : 임예람
개발환경은 Windows, Android Studio입니다.

1. (11-5) 화면에 그려지는 디자인 요소 위젯: 라디오그룹과 라디오버튼

📌 라디오 버튼: 하나의 버튼이 선택되면 다른 버튼의 선택이 해제되어야 한다.
📌 라디오 그룹: 중복 선택을 막기 위해 그룹을 만들어 묶어준다.

 buildFeatures { viewBinding true }

👉🏻 build.gradle에 코드 추가해서 viewBinding을 적용한다.

👉🏻 라디오 그룹을 먼저 배치하고 라디오 버튼 3개를 정렬한다.
👉🏻 리디오 그룹과 버튼에 아이디를 설정한다.

class MainActivity : AppCompatActivity() { val binding by lazy { ActivityMainBinding.inflate(layoutInflater) } override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(binding.root) binding.raioGroup.setOnCheckedChangeListener { group, checkedId -> when(checkedId) { R.id.raioApple -> { Log.d(tag:"라디오 버튼", msg:"사과 선택") } R.id.raioBanana -> { Log.d(tag:"라디오 버튼", msg:"바나나 선택") } R.id.raioOrange -> { Log.d(tag:"라디오 버튼", msg:"오렌지 선택") } } } } }

👉🏻 각 라디오 버튼을 클릭하면 Logcat에 msg를 출력한다.
✍🏻 setOnCheckedChangeListener: 각 버튼이 체크되었을 때 어떠한 일을 수행할지 정한다.
✍🏻 when: 조건문이라고 생각하면 된다. 여기서는 '각 버튼이 체크되었을때'라는 조건을 걸었다.

✍🏻 라디오버튼 그룹은 속성에서 'orientation' 속성을 바꾸면 가로 또는 세로 정렬을 할 수 있다.

2. (11-6) 화면에 그려지는 디자인 요소 위젯: 체크박스

📌 체크박스: 중복 선택이 가능한 버튼이다.

👉🏻 체크박스는 group이 없어서 미리 LinearLayout을 이용해 그룹처럼 활용할 수 있다.
✍🏻속성에서 layout_width와 layout_height를 wrap_content로 바꾸면 가운데 정렬이 된다.

✍🏻속성에서 dp로 margin값을 조절한다.

class MainActivity : AppCompatActivity() { val binding by lazy { ActivityMainBinding.inflate(layoutInflater) } override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(binding.root) with(binding) { this: ActivityMainBinding checkApple.setOnCheckedChangeListener(checkBoxlistener) checkBanana.setOnCheckedChangeListener(checkBoxlistener) checkOrange.setOnCheckedChangeListener(checkBoxlistener) } } val checkBoxlistener = CompoundButton.OnCheckedChangeListener { checkBox, isChecked -> when(checkBox.id) { R.id.checkApple -> { if(isChecked) Log.d( tag: "체크박스", msg: "사과 선택" ) else Log.d( tag: "체크박스", msg: "사과 선택 해제" ) } R.id.checkBanana -> { if(isChecked) Log.d( tag: "체크박스", msg: "바나나 선택" ) else Log.d( tag: "체크박스", msg: "바나나 선택 해제" ) } R.id.checkOrange -> { if(isChecked) Log.d( tag: "체크박스", msg: "오렌지 선택" ) else Log.d( tag: "체크박스", msg: "오렌지 선택 해제" ) } } } }

👉🏻 체크박스에 체크를 하고 해제할 때마다 Logcat에 msg를 출력한다.
✍🏻 동작부분, 구현기능 따로 만들어두면 코드를 깔끔하게 짤 수 있다.

3. (11-7) 화면에 그려지는 디자인 요소 위젯: 토글, 스위치

📌 토글 스위치: on off 형태로 켜고 끄는 버튼

👉🏻스위치는 토글 버튼 아래에 연결하고 각 버튼들에 textview를 연결한다. (어떤 상태인지 보기 위함)

class MainActivity : AppCompatActivity() { val binding by lazy {ActivityMainBinding.inflate(layoutInflater)} override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(binding.root) 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" } } } }

👉🏻 각각의 버튼을 체크할 때마다 상태를 확인하고 그에 맞게 텍스트가 변한다.

4. (11-8) 화면에 그려지는 디자인 요소 위젯: 프로그래스바

📌 프로그래스바: 어떤 일의 진행 상태를 중간중간 보여주는 위젯

👉🏻 텍스트뷰와 함께 써서 진행상황을 알린다.

class MainActivity : AppCompatActivity() { val binding by lazy {ActivityMainBinding.inflate(layoutInflater)} override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(binding.root) with(binding) {this: ActivityMainBinding //프로그래스바가 보이게 한다. showProgress(show: true) //아래 스레드는 메인 스레드와 상관없이 동작한다 //서브 스레드라고 생각하면 된다. thread(start=true) { //3초 뒤에 이 코드(프로그래스 지우는 코드)를 실행해! Thread.sleep(millis: 3000) //화면에 영향을 미치는 코드는 메인 스레드로 다시 보내야 한다. runOnUiThread{ //프로그래스바 지우는 코드 showProgress(show: false) } } } //불리언 값에 따라 프로그래스바를 보이게, 안 보이게 하는 함수 fun showProgress(show: Boolean) { binding.progressLayout.visibility = if(show) View.VISIBLE else View.GONE } } }

👉🏻 3초간 프로그래스 바가 돌아가도록 만든다.
✍🏻 Thread.sleep: 지정한 시간동안 해당 코드를 실행한다.
✍🏻 thread(start=true): 메인 스레드 내에서 Thread.sleep을 사용하면 모든 코드가 멈추므로 서브 스레드를 만들어준다. start=true이면 바로 블록이 실행된다.