[6팀] 코틀린 안드로이드 기초강의 20~22

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

작성자 : 신형철

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

 

 

---

0. Binding

우리가 모바일에서 행하는 실시간 작업 상황을 텍스트로 연결하려면 무엇이 필요할까?

바로 Binding이다.

4.1 버전 이후로 우리는 view binding을 통해 자바와 코틀린 모두에서 텍스트 뷰의 값을 작업할 수 있다.

Binding을 사용해주기 위해서는 Gradle Scripts로 우선 찾아가야 한다.

Build.gradle(Module EditText.app)에서 android내부에 다음과 같이 뷰바인딩을 설정해준다.

buildFeatures{
	viewBinding true
}

ViewBinding을 설정해준 이후에 사용할 메인바인딩을 생성해주고, 이때 새로운 contextview에 binding.root를 전달해준다.

class MainActivity : AppCompatActivity() {

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

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

(해당 클래스에서 사용할 MainBinding을 설정해줄 때 사용하는 class내부에 꼭 넣어주도록 한다.

필자는 멍청하게도 class외부에 작성하였다가 꽤나 오랜시간 왜 안되고 있는지 헤맸다...😥)

 

이제 Binding을 사용해주러 가보자.

 

1. EditText

안드로이드의 EditText는 Text를 보여주는 TextView에서 파생된 클래스로 입력 및 수정을 가능하게 해주는 View이다.

EditText를 만들어주기 위해서 xml에 Plain Text를 가져와 Layout을 고정시켜준다🕸.

앞서 설명한 것과 같이 Binding을 설정해주고, 우리는 그것을 통해 editText작업을 진행해준다.

 

다음과 같이 설정을 해주면 우리는 실시간으로 입력해주는 값을 두가지로 출력할 수 있다.

이때 with를 통해 편의성을 더하고, addTextChangedListner( )를 사용해준다.

class MainActivity : AppCompatActivity() {

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

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

        with(binding){
            editText.addTextChangedListener{
                Log.d("에딧텍스트", "입력된 값${it.toString()}")
                //입력받고 Log를 통해 출력
                textView.text = it.toString()
                //입력받은 값을 안드로이드 화면 상에 출력
            }
        }
    }
}

첫번째는 Log를 통해 입력하고 있는 값을 뽑아낼 수 있다. 우리가 에뮬레이터 상에서 입력해주고 있는 값들이 Log를 통해 기록이 될 것이다. 이때, tag를 한국어로 설정할 경우에 Log를 검샐할 때 좀 더 편하게 찾아갈 수 있다.

 

두번째는 textView에 우리가 입력해준 값을 넣어 실행해볼 경우 실시간으로 값이 바뀌는 것을 확인할 수 있다. 다음 캡쳐에서는 바로 위에 작은 회색글씨가 textView에 해당한다.

각각 안드로이드 스토디오의 Log내역과 에뮬레이터의 입력 및 출력 상황이다.

 

2. Radio

안드로이드의 Radio(gaga)는 여러 옵션 중에서 한가지를 선택할 수 있게 해주는 View이다.

EditText때와 마찬가지로 xml에서 시작한다. xml에 Button에는 radio에 대한 것이 두가지 존재한다.

하나는 RadioGroup이고, 다른 하나는 RadioButton이다.

RadioGroup을 먼저 만들어주고, RadioButton을 Group아래에 드래그해주면 다음과 같은 radio그룹을 만들 수 있다.

RadioGroup예시(Group명을 RadioCode로 변환)

radio그룹을 만들어주고 마찬가지로 Layout설정을 해준다.

앞서 했던것처럼 Binding작업을 해주고, radio작업을 시작한다.

다음과 같이 코드를 작성해주고, 마찬가지로 setOnCheckedChangeListener( )를 통해 실시간 반응을 확인해준다.

class MainActivity : AppCompatActivity() {

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

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

        binding.RadioCode.setOnCheckedChangeListener{ group, checkid ->
            when(checkid){
                R.id.radioPython -> Log.d("라디오버튼", "역시 Python")
                R.id.radioCpp -> Log.d("라디오버튼", "역시 Cpp")
                R.id.radioJava -> Log.d("라디오버튼", "역시 Java")
            }
        }
    }
}

다음과 같이 설정해줄 경우 우리가 Group해준 raido에서 각 버튼을 선택해줄 경우 실시간으로 해당 상황에 맞는 Log가 출력이 된다.

각각 안드로이드 스토디오의 Log내역과 에뮬레이터의 radio상황이다.

 

3. Check Box

안드로이드의 Check Box는 Radio와 같이 선택이 가능한 버튼으로 구성이 된다. 다만 차이점이라면 Check Box는 무려 중복!!선택이 가능해 진다.

CheckBox의 경우 radio처럼 따로 group을 정해줄 필요는 없기 때문에 LinearLayout을 이용해 틀을 만들어주고, 그 안에 CheckBox들을 넣어준다.

이때 layout_margin의 값을 설정해주면 각 체크박스간의 간격을 조정할 수 있다.

예시

마찬가지로 Layout설정을 해주고, layout의 위치를 wrap_content로 지정해주어 위치를 설정해주었다.

앞서 했던것처럼 Binding작업을 해주고, check box작업을 시작한다.

다음과 같이 코드를 작성해주고, 마찬가지로 setOnCheckedChangeListener( )를 통해 실시간 반응을 확인해준다.

class MainActivity : AppCompatActivity() {

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

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

        with(binding) {
            checkPython.setOnCheckedChangeListener { buttonView, isChecked ->
                if(isChecked) Log.d("체크박스", "역시 Python.")
                else Log.d("체크박스", "Python이 아닌가보네.")
            }
            checkCpp.setOnCheckedChangeListener { buttonView, isChecked ->
                if(isChecked) Log.d("체크박스",  "역시 Cpp.")
                else Log.d( "체크박스",  "Cpp이 아닌가보네.")
            }
            checkJava.setOnCheckedChangeListener { buttonView, isChecked ->
                if(isChecked) Log.d( "체크박스",  "역시 Java.")
                else Log.d( "체크박스",  "Java가 아닌가보네.")
            }
        }
    }
}

isChecked를 통해서 체크가 되었는지 안되었는지 확인하면서 각 상황에 따른 Log를 출력해준다.

Log와 에뮬레이터 예시(두가지의 상황이 다를 수 있음)

class MainActivity : AppCompatActivity() {

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

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

        with(binding) {
            checkPython.setOnCheckedChangeListener(CheckBoxListener)
            checkCpp.setOnCheckedChangeListener(CheckBoxListener)
            checkJava.setOnCheckedChangeListener(CheckBoxListener)
        }
    }

    val CheckBoxListener = CompoundButton.OnCheckedChangeListener {checkcode, isChecked ->
        when(checkcode.id){
            R.id.checkPython -> {
                if (isChecked) Log.d("체크박스", "역시 Python.")
                else Log.d("체크박스", "Python이 아닌가보네.")
            }
            R.id.checkCpp -> {
                if (isChecked) Log.d("체크박스", "역시 Cpp.")
                else Log.d("체크박스", "Cpp이 아닌가보네.")
            }
            R.id.checkJava -> {
                if (isChecked) Log.d("체크박스", "역시 Java.")
                else Log.d("체크박스", "Java가 아닌가보네.")
            }
        }
    }
}

위와 같은 행동을 하는 코드지만 변수를 생성해주어서 binding되는 코드부분을 보다 간결하게 처리했다.