[안드로이드 프로그래밍] Widget

PUJIN·2023년 6월 12일

TECHIT android kotlin 안드로이드 안드로이드 프로그래밍 앱스쿨 코틀린 테킷

android programming

목록 보기

7/26

📌 TextView

문자열을 표시하는 view

주요 속성

text : 문자열 설정
lines : 표시할 문자열의 라인 수
textColor : 표시할 문자열의 색상
textSize : 표시할 문자열의 크기 (sp 단위)
textAppearance : 표시할 문자열의 형식
alpha : 투명도
fontFamily : 폰트
* 코드를 사용해 설정하는 방법 권장
lineSpacingExtra : 라인 간격
textStyle : 볼드, 이탤릭, 전체 대문자 설정
textAlignment : 정렬
lines : 최대 줄 수 (생략시 무한대로 설정)

주요 메서드

getText : 문자열 반환
setText : 문자열 설정
setBackgroundColor : 배경 색상 지정
setTextColor : 글자 색상 지정
append : 문자열 추가

📌 button

사용자가 클릭하면 코드를 동작시키는 view

문자열 button
- text : 문자열 설정
- setText : 문자열 설정
ImageButton
- srcCompat : 이미지 설정
- setBitmap : 이미지 설정

주요 이벤트

Click : 버튼을 눌렀을 때 발생
- setOnClickListener : 버튼 눌렀을 때 수행할 코드 작성 함수 (람다식 사용 가능)

activityMainBinding.run{
	button.run {
    // click event 발생
      setOnClickListener{
      	text.text = "버튼 활성화"
      }
    }
}

📌 EditText

사용자에게 문자열 데이터를 입력받을 때 사용하는 view

주요 속성

text : 문자열 설정
hint : (입력된 값이 없는 경우) 안내 문구 설정
inputType : 입력 값에 대한 설정
- 표시되는 형식, 나타나는 키보드 등에 영향

주요 메서드

getText : 문자열 반환
setText : 문자열 설정
- Editable! : 수정 가능한 문자열, 문자열 자체 변환

주요 이벤트

TextWatcher : 입력 내용 실시간 감시
- addTextChangedListener : 실시간으로 사용자 입력 받아오는 함수
  - beforeTextChanged : 입력 내용 변경 전
  - onTextChanged : 입력 내용 변경 했을 때
  - afterTextChanged : 입력 내용이 변경된 후

// 입력 감시자 설정
val editTextWatcher = EditTextWatcher()
editText.addTextChangedListener(editTextWatcher)
// EditText 입력 감시자
inner class EditTextWatcher : TextWatcher {
	// 입력 내용 변경 전
	override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {
		activityMainBinding.textView.text = "before : ${s}"
	}
	// 입력 내용 변경 했을 때
	override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
    	activityMainBinding.textView2.text = "changed : ${s}"
	}
	// 입력 내용이 변경된 후
	override fun afterTextChanged(s: Editable?) {
		activityMainBinding.textView3.text = "after : ${s}"
	}
}

고차함수 이용할 경우 : after 역할 수행

editText.run{
	// 고차함수 이용
	addTextChangedListener { 
    	text.text = it
    }
}

EditorAction : enter 키를 눌렀을 때 발생
- setOnEditorActionListener : enter 키 눌렀을 때 동작하는 함수
  - true : enter키 누른 후 포커스가 현재 EditText로 유지
  - false : enter키 누른 후 포커스가 다음 EditText로 이동

setOnEditorActionListener { v, actionId, event ->
	textView.text = text.toString()
	false
}

📌 ScrollView

View가 화면을 벗어날 경우 스크롤을 사용하는 view

ScrollView : 위 아래 스크롤
HorizontalScrollView : 좌 우 스크롤
* ScrollView & HorizontalScrollView 조합 : 상하 좌우 스크롤 가능

주요 메서드

getScrollY : 현재 스크롤된 Y 좌표값
getScrollX : 현재 스크롤된 X 좌표값
scrollTo : 지정된 위치로 스크롤
- ScrollView : Y 좌표 설정
- HorizontalScrollView : X 좌표 설정
scrollBy : 현재 위치에서 지정된 값만큼 이동
smothScrollTo : 지정된 위치로 스크롤 + 애니메이션
smothScrollBy : 현재 위치에서 지정된 값만큼 스크롤 이동 + 애니메이션
* 애니메이션이 동작하는 smooth(ScrollTo or ScrollBy) 주로 사용

주요 이벤트

ScrollChange : 스크롤됐을 때 발생
- setOnScrollChangeListener { 이벤트가 발생한 뷰, 스크롤된 X 좌표, 스크롤된 Y 좌표, 스크롤 되기전 X 좌표, 스크롤 되기전 Y 좌표 } : scroll 됐을 때 동작하는 함수

setOnScrollChangeListener { v, scrollX, scrollY, oldScrollX, oldScrollY -> 
	textView.text = "Y : $oldScrollY -> $scrollY"
}

📌 TextInputLayout

EditText를 보완한 view

textInputLayout 배치시 textInputLayout→TextInputEditText 자동 생성

주요 속성

hint
- 입력한 내용이 없는 경우 : 안내문구 설정
- 입력한 내용이 있는 경우 : 상단으로 안내문구 이동
counterEnabled : 입력한 글자 수 출력
counterMaxLength : 지정된 글자수를 넘으면 빨간색으로 표시
* counterEnabled & counterMaxLength : textInputLayout에서 설정

주요 메서드

getEditText : TextInputLayout이 가지고 있는 EditText 객체의 주소값
setError : 오류로 표시할 메세지 설정

textInputLayout.run{
	editText?.run{
		addTextChangedListener {
			if(it!!.length > 10){
				textInputLayout.error = "10 글자 이하로 입력해주세요"
			} else {
				textInputLayout.error = null
			}
		}
	}
}

📌 ImageView

이미지를 사용자게에 보여주는 view

drawable : 비트맵 방식
- 파일 용량 ↓
- 확대, 축소시 깨진다. (계단 형식)
  (ex) jpg, png 등
mipmap : 벡터 방식
- 이미지를 그리기 위한 코드 or 데이터
- 시간 ↑, 작업 ↑
  (ex) svg

주요 속성

srcCompat : 이미지 설정

주요 메서드

setImageResource : res 폴더에 있는 이미지 설정

imageView.setImageResource(R.drawable.img_android)

📌 CheckBox

선택할 수 있는 항목을 제공하고 체크를 통해 선택하는 view

다중 선택 가능

주요 속성

text : 문자열 설정
checked : 선택여부 설정
- true : 선택
- false : 선택 X (기본값)

주요 메서드

isChecked : 현재 체크 값 (boolean type)

checkBox1.isChecked = true
checkBox2.isChecked = true
checkBox3.isChecked = true

toggle : 현재 체크 상태 반전

checkBox.toggle()

주요 이벤트

checkedChange : 체크 상태가 변경됐을 때 발생
- setOnCheckedChangeListener : 체크 상태가 변경됐을 때 동작하는 함수

setOnCheckedChangeListener { buttonView, isChecked -> 
  if(isChecked){
      textView.text = "첫 번째 체크박스는 체크 되어 있습니다"
  } else {
      textView.text = "첫 번째 체크박스는 체크 되어 있지 않습니다"
  }
}

📌 RadioButton

하나의 그룹 안에서 하나만 선택하는 view

그룹 내에서 반드시 하나는 선택되어 있는 상태로 설정

RadioGroup

주요 속성

checkedButton : 체크 상태로 설정할 버튼 설정

주요 메서드

getCheckedRadioButtonId : 그룹 내에 선택되어 있는 RadioButton ID
 when(radioGroup1.checkedRadioButtonId){
	R.id.radioButton -> {
		textView.append("1-1 선택")
	}
	R.id.radioButton2 -> {
		textView.append("1-2 선택")
    }
	R.id.radioButton3 -> {
		textView.append("1-3 선택")
	}
}
주요 이벤트

checkedChange : 체크 상태가 변경됐을 때 발생

setOnCheckedChangeListener : 체크 상태가 변경됐을 때 동작하는 함수

checkedId : 선택된 버튼의 ID
setOnCheckedChangeListener { group, checkedId ->  
	when(checkedId){
		R.id.radioButton -> {
			textView.text = "1-1 선택"
		} 
		R.id.radioButton2 -> {
			textView.text = "1-2 선택"
		}
		R.id.radioButton3 -> {
			textView.text = "1-3 선택"
		}
	}
}

주요 속성

text : 문자열 설정
checked : 선택여부 설정

주요 메서드

setChecked : 선택할 button 설정
- 설정시 같은 그룹 내의 RadioButton은 모두 체크 해제

radioGroup1.check(R.id.radioButton)
radioGroup2.check(R.id.radioButton2)

📌 ToggleButton

어플리케이션의 기능을 ON/OFF할 수 있도록 제공하는 view

주요 속성

textOn : ON일 때 표시할 문자열 설정
textOff : OFF일 때 표시할 문자열 설정
checked : 초기 상태 설정
- true : ON 상태
- false : OFF 상태

주요 메서드

isChecked : ON/OFF 상태 여부 반환 (boolean type)
- true : ON 상태
- false : OFF 상태
toggle : 현재 체크 상태 반전

주요 이벤트

checked change : ON/OFF 상태가 변경됐을 때 발생
- setOnCheckedChangeListener : ON/OFF 상태가 변경됐을 때 동작하는 함수

setOnCheckedChangeListener { buttonView, isChecked ->
	if(isChecked){
		textView.text = "Toggle 버튼 ON 상태"
	} else {
		textView.text = "Toggle 버튼 OFF 상태"
	}
}

📌 Switch

ON/OFF 상태를 좌우로 이동하면서 설정하는 view

주요 속성

text : 좌측 문자열 설정
thumb : 버튼 이미지 설정
track : 트랙(배경) 이미지 설정
textOn : ON일 때 표시할 문자열 설정
textOff : OFF일 때 표시할 문자열 설정
showText : textOn, textOff에 설정한 문자열 표시 여부 설정
checked : ON/OFF 상태 설정

주요 메서드

isChecked : ON/OFF 상태 여부 반환 (boolean type)
toggle : 현재 체크 상태 반전

주요 이벤트

checked change : ON/OFF 상태가 변경됐을 때 발생
- setOnCheckedChangeListener : ON/OFF 상태가 변경됐을 때 동작하는 함수

setOnCheckedChangeListener { buttonView, isChecked ->
	if(isChecked){
		textView.append("Switch ON 상태")
	} else {
		textView.append("Switch OFF 상태")
	}
}

📌 CheckedTextView

checkBox, radioButton을 커스터마이징 할 수 있는 view

주요 속성

checkMark : 체크 상태 표시 아이콘 설정
- drawableTop : 상단
- drawableBottom : 하단
- drawableLeft : 좌측
- drawableRight : 우측 (기본 설정 값)
checked : 체크 상태 설정
clickable : 클릭이 가능한지 설정
- true : 클릭 가능, 이벤트 반응 가능 → 리스너로 기능 구현
- false : 클릭 불가능

주요 메서드

isChecked : 현재 체크 값 (boolean type)

checkBox
- 다중 선택 가능

if(checkedTextView.isChecked){
	textView.append("CheckBox1 체크")
} else {
	textView.append("CheckBox1 체크 X")
}

radioButton
- 다중 선택 불가능

if(checkedTextView1.isChecked){
	textView.append("Radio1 선택")
} else if(checkedTextView2.isChecked){
	textView.append("Radio2 선택")
} else if(checkedTextView3.isChecked){
	textView.append("Radio3 선택)
}

toggle : 현재 체크 상태 반전

주요 이벤트

click : 클릭할 때 발생
- setOnClickListener : 클릭할 때 수행할 코드 작성 함수 (람다식 사용 가능)
  - 해당 이벤트 반드시 설정
    → checkBox, radioButton의 기능 모두 해당 이벤트 발생 시 코드로 처리

checkBox
- 다중 선택 가능

setOnClickListener {
	checkedTextView.isChecked = true
	checkedTextView2.isChecked = true
}

radioButton
- 다중 선택 불가능

// 초기값 설정
checkedTextView3.isChecked = true
checkedTextView1.run{
	setOnClickListener {
		checkedTextView1.isChecked = true
		checkedTextView2.isChecked = false
		checkedTextView3.isChecked = false
	}
}
checkedTextView2.run{
	setOnClickListener {
		checkedTextView1.isChecked = false
		checkedTextView2.isChecked = true
		checkedTextView3.isChecked = false
	}
}
checkedTextView3.run {
	setOnClickListener {
		checkedTextView1.isChecked = false
		checkedTextView2.isChecked = false
		checkedTextView3.isChecked = true
	}
}

📌 Chip

button, checkBox, radioButton 등의 기능을 가지고 있는 view

ChipGroup

주요 속성

singleSelection : 내부 chip 중 하나만 선택하게 할 것인가 설정

true : 1개만 선택 가능

false : 중복 선택 가능

checkedChip : 체크 상태로 설정할 버튼 설정

주요 메서드

getCheckedChipId : 그룹 내에 선택되어 있는 chip ID
when (chipGroup.checkedChipId) {
	R.id.chip1 -> {
		textView.append("라디오1 선택")
	}
	R.id.chip2 -> {
		textView.append("라디오2 선택")
	}
	R.id.chip3 -> {
		textView.append("라디오3 선택")
	}
}
주요 이벤트

CheckedChange : 그룹 내부 chip의 체크 상태가 변경되었을 때 발생

주요 속성

layout_width
- match_parent : orientation = vertical
- wrap_content : orientation = horizontal
style : 스타일 설정
checkable : 체크 가능 여부 설정
text : 문자열 설정
chipIcon : 표시할 아이콘 설정
chipIconVisible : 아이콘 표시 여부 설정
checkedIcon : 선택됐을 때 아이콘 설정
checkedIconVisible : 선택됐을 때 아이콘 표시 여부 설정

주요 메서드

isChecked : 현재 체크 값 (boolean type)

주요 이벤트

checked change : ON/OFF 상태가 변경됐을 때 발생
closeIconClick : 닫기 버튼을 눌렀을 때

📌 ProgressBar

작업 중을 표시하는 view

주요 속성

style : 모양 설정
max : 최대값
progress : 현재 값

주요 메서드

getProgress : 현재 값 반환

textView.text = "ProgressBar : ${progressBar.progress}"

setProgress : 현재 값 설정

progressBar.progress = 70

📌 SeekBar

progressBar + 사용자가 직접 값을 지정할 수 있는 기능을 가진 view

주요 속성

style : 모양 설정
max : 최대값
progress : 현재 값

주요 메서드

getProgress : 현재 값 반환

textView.text = "SeekBar : ${seekBar.progress}"

setProgress : 현재 값 설정

seekBar.progress = 70

주요 이벤트

SeekBarChange : 상태가 변경되었을 때 발생
- rating : 설정된 상태 값
- fromUser : 상태가 사용자에 의해 변경되었는지 확인
  - true : 사용자에 의해 변경
  - false : 코드로 변경

seekBar.run {
	setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener {
		override fun onProgressChanged(
			seekBar: SeekBar?,
            progress: Int,
            fromUser: Boolean
		) {
			if(fromUser){
				textView.text = "사용자에 의해 변경"
			} else {
				textView.text = "코드를 통해 변경"
			}
		}

		override fun onStartTrackingTouch(seekBar: SeekBar?) {}
		override fun onStopTrackingTouch(seekBar: SeekBar?) {}

	})
}

📌 RatingBar

별점을 조절할 수 있는 view

주요 속성

numStars : 별 개수 설정
stepSize : 별점 단위 설정
rating : 현재 별점 설정
isIndicator : 별점을 사용자가 조절 가능한지 설정
- true : 사용자 별점 조절 불가능
- false : 사용자 별점 조절 가능
style : 스타일 설정
progressDrawable : 별점 이미지 설정

주요 메서드

getRating : 현재 별점 값 반환

textView.text = "RatingBar : ${ratingBar.rating}"

setRating : 별점 값 설정

ratingBar.rating = 1.5F

주요 이벤트

RatingBarChange : 별점이 변경되었을 때 발생
- rating : 설정된 별점 값
- fromUser : 별점이 사용자에 의해 변경되었는지 확인
  - true : 사용자에 의해 변경
  - false : 코드로 변경

ratingBar.run{
	setOnRatingBarChangeListener { ratingBar, rating, fromUser ->
		if(fromUser){
			textView.text = "사용자에 의해 변경"
        } else {
			textView.text = "코드를 통해 변경"
		}
	}
}

📌 CardView

view를 그룹으로 관리 + 자체 그림자를 생성에 공중에 있는 듯한 모습을 보여주는 view

recyclerView에 자주 사용

주요 속성

contentPadding : 내부 여백 설정
cardCornerRadius : 모서리 둥근 정도 설정
cardElevation : 공중에 떠있는 정도 설정

📌 FloatingActionButton

공중에 있는 버튼 view

주요 속성

srcCompat : 표시할 이미지 설정

주요 이벤트

Click : 버튼을 눌렀을 때 발생
- setOnClickListener : 버튼 눌렀을 때 수행할 코드 작성 함수 (람다식 사용 가능)
  - 일반 button과 동일

floatingActionButton.run{
	setOnClickListener {
		textView.text = "버튼 클릭"
	}
}

PUJIN

이전 포스트

[안드로이드 프로그래밍] Layout

다음 포스트

[안드로이드 프로그래밍] Widget

android programming

📌 TextView

주요 속성

주요 메서드

📌 button

주요 이벤트

📌 EditText

주요 속성

주요 메서드

주요 이벤트

📌 ScrollView

주요 메서드

주요 이벤트

📌 TextInputLayout

주요 속성

주요 메서드

📌 ImageView

주요 속성

주요 메서드

📌 CheckBox

주요 속성

주요 메서드

주요 이벤트

📌 RadioButton

RadioGroup

주요 속성

주요 메서드

주요 이벤트

주요 속성

주요 메서드

📌 ToggleButton

주요 속성

주요 메서드

주요 이벤트

📌 Switch

주요 속성

주요 메서드

주요 이벤트

📌 CheckedTextView

주요 속성

주요 메서드

주요 이벤트

📌 Chip

ChipGroup

주요 속성

주요 메서드

주요 이벤트

주요 속성

주요 메서드

주요 이벤트

📌 ProgressBar

주요 속성

주요 메서드

📌 SeekBar

주요 속성

주요 메서드

주요 이벤트

📌 RatingBar

주요 속성

주요 메서드

주요 이벤트

📌 CardView

주요 속성

📌 FloatingActionButton

주요 속성

주요 이벤트

[안드로이드 프로그래밍] Layout

[안드로이드 프로그래밍] Visibility

0개의 댓글