[Android] 녹음기 만들기 with 코틀린(1) - 기본 UI 구성(뷰 클래스 만들기)

주요기능

- 마이크를 통해 음성 녹음

- 녹음된 시간 및 재생시간 타임 스탬프 표시

- 녹음한 음성 재생 및 초기화

- 음성 시각화

---

기술

- Request runtime permissions

- CustomView

- MediaRecorder

- MedioPlayer

---

상태에 따라 달라지는 버튼

enum class State {
    BEFORE_RECORDING,
    ON_RECORDING,
    AFTER_RECORDING,
    ON_PLAYING
}

녹음 상태에 따라 다른 UI를 보여주어야하기 때문에 현재 녹음 상태를 나타내는 Enum class를 정의한다.

녹음 상태는 녹음전, 녹음중, 녹음후, 재생중 이렇게 4개이다. 

 

class RecordButton (
    context: Context,
    attrs: AttributeSet
): AppCompatImageButton(context,attrs){

    fun updateIconWithState(state: State){
        when(state){
            State.BEFORE_RECORDING ->{
                setImageResource(R.drawable.ic_record)
            }
            State.ON_RECORDING -> {
                setImageResource(R.drawable.ic_stop)
            }
            State.AFTER_RECORDING -> {
                setImageResource(R.drawable.ic_play)
            }
            State.ON_PLAYING -> {
                setImageResource(R.drawable.ic_stop )
            }
        }
    }
}

새로운 클래스를 추가하여 녹음 버튼을 생성한다. 

(context와 attributeset을 매개변수로 전달해야함 공식문서)

버튼을 상속받아 커스터마이징한다. 이때 구버전과의 호환성을 위해 AppCompatImageButton을 상속한다.

그러면 기존 클래스를 래핑하여 이전 버전에서도 새 버전으로 출시된 것을 정상적으로 동작하게 해준다.

 

RecordButton 클래스 내에 녹음 상태가 바뀔때마나 아이콘을 변경해주는 함수를 생성한다.

 

이렇게 생성한 클래스를 xml파일에 추가해주고 녹음버튼 외에도 타임스탬프와 리셋버튼을 추가한다.

 

마지막으로 MainActivity에서 state변수를 생성하여 이전에 생성해둔 enum 클래스로 초기화 해준 후

녹음 버튼과 연결한다.

private fun initViews(){
    recordButton.updateIconWithState(state)
}

 

 

기본 UI 화면