[6팀] 코틀린 안드로이드 기초 강의 23 -26

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

작성자 : 정서영

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

 

 

1. 토글 스위치 ( 화면에 그려지는 디자인 요소 위젯 )

화면에 그려지는 디자인 요소 위젯 중 토글 버튼과 스위치 버튼을 구현해보자.

 

우선 activity_main.xml 파일에서 토글버튼과 스위치버튼을 가져와 배치하고 각각 textview도 만들어 준다.

id는 toggleButton, switchButton, textToggle, textSwitch이다.

 

레이아웃을 다 만들고 각각에 id도 부여했으니까 이제 build. gradle 파일에서 binding을 위한 코드를 작성하고

android {
	...
	buildFeatures {
        viewBinding true
    }
}

 

MainActivity. kt 파일에서도 binding을 해준다.

class MainActivity : AppCompatActivity() {

    val binding by lazy { ActivityMainBinding.inflate(layoutInflater) }
	// binding 생성
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(binding.root)//binding.root로 변경

        with(binding){ //스코프 함수로 binding 사용
            toggleButton.setOnCheckedChangeListener { buttonView, isChecked ->
            // toggleButton이 눌렸는지 확인하는 리스너 함수 작성
                textToggle.text = if(isChecked) "On" else "Off"
                // isChecked이면 On 아니면 Off
            }
            switchButton.setOnCheckedChangeListener { buttonView, isChecked ->
                textSwitch.text = if(isChecked) "On" else "Off"
            }
        }
    }
}

 

실행하면 아래와 같이 토글과 스위치가 눌리고 text는 On으로 바뀐다.

 

 

2. 프로그래스 바 ( 화면에 그려지는 디자인 요소 위젯 )

디자인 요소 위젯: Linear layouts (vertical) 안에 progress bar과 text를 가져온다.

 

layout에서 width와 height를 wrap content로 해주면 중앙에 배치된다.

visibility를 처음에는 gone으로 설정하고 함수를 만들어 visibility를 바꿀 수 있도록 코드를 작성한다.

 

위에서 한 것처럼 binding을 해주고 

MainActivity. kt 파일에서 프로그래스 바가 3초후에 사라지도록 코드를 작성해준다.

이 때, 서브스레드를 분기시켜서 메인스레드에 영향을 주지 않고 sleep하도록 한다.

class MainActivity : AppCompatActivity() {
    val binding by lazy { ActivityMainBinding.inflate(layoutInflater) }
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(binding.root)

        with(binding){
            // <- 메인스레드
            showProgress(true)
            thread(start = true){ // <- 서브스레드로 분기
                Thread.sleep(3000) // 3초간 sleep
                //화면에 영향을 미치는 코드는 메인스레드로 다시 보내야한다.
                runOnUiThread {
                    showProgress(false)
                }
            }// <- 서브스레드
        }// <- 메인스레드
    }
    fun showProgress(show: Boolean){ // visibility를 바꾸는 함수
        binding.progressLayout.visibility = if(show) View.VISIBLE else View.GONE
    }
}

 

3. 시크 바 ( 화면에 그려지는 디자인 요소 위젯 )

바뀌는 숫자가 보여질 text와 seekbar를 가져와서 배치해준다. 

 

레이아웃을 설정할 때 해당 부분을 눌러보면 아래처럼 Match Constraints로 설정할 수도 있고,

이외에도 fixed와 wrap content로 설정할 수 있다. 

 

레이아웃을 다 설정하면 똑같이 binding을 해주고 MainActivity. kt 에서 코드를 작성한다.

setOnSeekBarChangeListner함수에서 setOnSeekBarChangeListner 인터페이스 안에 있는 함수들을 override해서 작성해줘야한다. ( 커서를 올리면 implement members가 나오는데 아래처럼 모두 선택하여 함수들을 구현해준다. )

 

setOnSeekBarChangeListner안의 onProgressChanged함수에서 textVeiw를 set해주는 코드를 작성해준다.

class MainActivity : AppCompatActivity() {
    val binding by lazy { ActivityMainBinding.inflate(layoutInflater) }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(binding.root)

        with(binding) {
            seekBar.setOnSeekBarChangeListener(object: SeekBar.OnSeekBarChangeListener{
                override fun onProgressChanged( seekBar: SeekBar?, progress: Int, fromUser: Boolean) {
                    if(fromUser){ // seekBar 가 터치될때만 동작
                        textView.text = "$progress" //text 에 정수형으로 전달되는 progress 값을
                    }
                }
                override fun onStartTrackingTouch(seekBar: SeekBar?) {}
                override fun onStopTrackingTouch(seekBar: SeekBar?) {}
            })
        }
    }
}

 

실행화면 )

+ progresss는 숫자 0~100까지인데 이 숫자를 바꾸고 싶으면 attribute의 MAX값을 바꿔주면 된다!

 

4. 레이팅 바 ( 화면에 그려지는 디자인 요소 위젯 )

이제 디자인 요소 위젯 설정하는 방법이 조금은 익숙해졌을 거라 믿는다...

또 똑같이 위젯에서 RatingBar랑 textVeiw를 가져와서 배치해주고 바인딩도 해준다.

 

ratingBar의 setOnRatingBarChangeListner함수에서 text를 rating객체로 받아온 값으로 set해준다.

with(binding) {
            ratingBar.setOnRatingBarChangeListener { ratingBar, rating, fromUser ->
                if(fromUser)
                    textView.text = "$rating"
            }
        }

rating되는 폭을 조절하고 싶으면 attribute의 stepsize를 변경해준다. ( default값은 0.5 )