[Kotlin] 10 - Widget And Listener

Widget And Listener

실습 준비

• EmptyActivity 를 가진 새 프로젝트 생성

build.gradle.kts (Module:app)

MainActivity.kt

EditText

• 사용자로 부터 문자열을 입력 받을 수 있는 위젯
• 주요 설정 항목
  • android:inputType-> 입력 항목의 출력 및 가상 키보드 종류를 결정
  • android:ems->layout_width가 wrap_content일때 일정 영역을 확보하는 속성. 현재 시스템 폰트 기준으로 대문자 M의 너비를 ems 에 설정된 숫자만큼 확보

EditText - android.text.TextWatcher

• EditText의 입력이 바뀔 때 마다 그 사실을 알려주는 Listener
• 다음 세 가지 함수를 가진다.
• beforeTextChanged(s:CharSequence, start:Int, count:Int, after:Int)
  • s:수정전 문자열, start부터 count개의 글자가 after길이 문자열로 변경된다.
• onTextChanged(s:CharSequence, start:Int, before:Int, count:Int)
  • s:수정 문자열, start에서 count개의 글자가 before길이의 문자열을 대체한 결과.
• afterTextChanged(s:Editable)
  • s: 수정 완료

TextWatcher 사용법

• Activity가 직접 구현하는 경우 : old version

class MainActivity : AppCompatActivity(), TextWatcher{ 
     private val binding:ActivityMainBinding by lazy{ 
         ActivityMainBinding.inflate(layoutInflater) 
 } 
     override fun onCreate(savedInstanceState: Bundle?) { 
         super.onCreate(savedInstanceState) 
         setContentView(binding.root) 
         binding.editTextTextPersonName.addTextChangedListener(this) 
 } 
     override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) { 
         Log.d("TextWatcher", "beforeTextChanged ($s, $start, $count, $after)") 
 } 
     override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) { 
         Log.d("TextWatcher", "onTextChanged ($s, $start, $before, $count)") 
 } 
     override fun afterTextChanged(s: Editable?) { 
         Log.d("TextWatcher", "afterTextChanged (${s.toString()})") 
 } 
}

• 각 함수를 파라미터로 넘기는 경우 : new version
  • beforeTextChanged와 onTextChanged는 default parameter 가 있으므로afterTextChanged 만 람다식으로 넘길 수 있다.

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

     override fun onCreate(savedInstanceState: Bundle?) { 
         super.onCreate(savedInstanceState) 
         setContentView(binding.root) 
         binding.editTextName.addTextChangedListener { 
             Log.d("TextWatcher", "afterTextChanged (${s.toString()})")
         } 
     }
}

CompoundButton

• 상속

CompoundButton.OnCheckedChangeListener

• GUI의 업데이터는 자동으로 이루어진다.
• 기본적으로 onClick과 유사하고 추가정보로 isChecked를 통해 현재 Check 되었는지 해제 되었는지를 알려준다.

binding.checkBox2.setOnCheckedChangeListener { button, isChecked ->
            Log.d("main", "Checkbox is checked: " + isChecked)
}

만약 setOnClickListener로 구현을 하면 체크되었는지를 직접 작성해줘야한다.

binding.checkBox2.setOnClickListener {
    val btn = it as CompoundButton
    if(btn.isChecked) {

    } else {

    }
}   

RadioButton

• 다른 CompoundButton은 각자 동작
• RadioGroup의 자식으로 RadioButton들을 넣어야 함.
  • 같은 그룹 내에서 다른 RadioButton이 선택되면 이전 선택이 해제됨.
• RadioGroup 없이 사용할 경우 한 번 클릭하면 선택을 해제할 수 없음.
• RadioGroup은 android:orientation을 이용해 라디오 버튼의 방향을 지정 가능
• 클릭으로 선택을 해제 하는 방법이 없으므로 View.OnClickListener를 사용 가능

ImageView

• Bitmap 객체 또는 res/drawable 폴더에 있는 비트맵 형식의 그림(jpg, png) 또는 벡터 형식의 그림(svg를 변환한 xml)을 화면에 출력한다.
  • android:src
• ImageView의 사이즈와 원본 이미지의 사이즈가 다를 수 있으므로 android:scaleType 속성으로 지정한다.
  • 예) 원본이 매우 큰 경우

SVG 파일을 프로젝트에 추가하는 방법

• 안드로이드는 벡터 형식의 이미지를 지원함.
  • 해상도와 상관 없이 깨지지 않고 용량이 적은 것이 장점
• 그러나 svg 파일을 바로 쓸 수는 없고 import 과정을 통해 변환해서 사용함.
• res/drawable 폴더에서 우클릭 > New > VectorAsset

벡터 이미지 파일을 프로젝트에 추가하는 방법

• Clip Art: 구글에서 제공하는 벡터 이미지
• Local File: 별도로 다운받아둔 svg나 png 파일을 선택

PNG 이미지 파일을 프로젝트에 추가하는 방법

• res - drawable 안에 png 파일을 넣는다.
• layout에서 Common - ImageView를 추가한다.

Progressbar

• 진행을 나타내는 위젯으로 원형과 바(bar) 타입이 있다.
• 원형은 애니메이션을 가지고 있지만 멈출 수는 없다.
  • android:visibility="visible" 의 속성으로 숨길 수 있다.
• 바 타입은 진행 정도를 원하는대로 적용할 수 있다.
  • android:max(default 100), android:progress
  • Progressbar: getProgress(), setProgress(Int), incrementProgressBy(Int)