View

유민국·2023년 6월 8일
0

Widget

  • 안드로이드의 View 중 기능을 갖고 사용자와 상호작용을 하는 것들을 Widget이라고 부른다.
  • Widget은 Layout 위에 배치되어 화면에 나타나고 코드를 통해 Widget 통제하여 사용자와 소통을 하는 수단이 된다.

Widget 사용 패턴

  • 먼저 Layout에 사용하고자 하는 Widget을 배치한다.
  • 이 때, Activity가 실행되면 화면이 구성되고 화면에 배치된 모든 View들은 객체로 생성된다.
  • 객체로 생성된 View 중에 필요한 Widget들의 주소 값을 얻어와 코드로 이들을 통제하게 된다.
  • 필요하다면 이벤트에 대한 코드를 구성하여 사용한다.

TextView

  • 사용자에게 전달하고자 하는 문자열을 표시하는 View

주요 속성

  • text : TextView를 통해 보여 줄 문자열
  • lines : 표시하고자 하는 문자열의 라인 수
  • textColor : 표시되는 문자열의 색상
  • textSize : 표시되는 문자열의 크기
  • textAppearance : 표시되는 문자열의 형식

주요 메서드

  • setBackgroundColor : 배경 색상을 지정한다.
  • setTextColor : 글자 색상을 지정한다.
  • append : 문자열을 추가한다.
textView2.run{
    // 문자열 설정
    text = "안녕하세요"
    // 배경색 설정
    // setBackgroundColor(Color.RED)
    // setBackgroundColor(Color.rgb(0,255,191))
    setBackgroundColor(Color.argb(50, 145, 141, 194))

    // 글자색 설정
    setTextColor(Color.RED)

    // 새로운 문자열 설정
    text = "문자열1"

    // 문자열 추가(기존 문자 뒤에 붙임)
    append("문자열2")
    append("문자열3")
}

Button

  • 사용자가 클릭하면 개발자가 만든 코드를 동작시켜 주는 View이다.
  • Button은 문자열을 표시하는 Button과 이미지를 표시하는 ImageButton이 있다.

ImageButton

srcCompat : 표시할 이미지
이미지 버튼을 사용할 때는 background 색상에 투명도를 0으로 설정해서 사용하세요

주요 속성

  • text : Button의 문자열을 설정한다.
  • srcCompat : ImageButton의 이미지를 설정한다.

이벤트

  • OnClick : 사용자가 Buttton을 Click하면 발생하는 이벤트이다.

EditText

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

주요 속성

text : EditText에 표시할 문자열을 설정한다.
hint : 입력된 값이 없을 경우 표시할 안내 문구를 설정한다.
inputType : 입력 값에 대해 설정한다. 표시되는 형식, 나타나는 키보드 등에 영향을 준다.
imeOptions : 나타나는 키보드의 Enter 키 모양을 설정한다.

주요 메서드

getText : 입력한 문자열을 가져온다.
setText : 문자열을 설정한다.

이벤트

TextWatcher : 사용자가 입력한 내용을 실시간으로 감시한다.
EditorAction : 키보드의 Enter 키를 눌렀을 때 발생하는 이벤트

엔터키를 눌렀을 때의 이벤트

setOnEditorActionListener{ v, actionId, event ->
    textView.run{
        text = "엔터 버튼을 눌렀습니다"
    }
    textView2.run{
        text = text.toString()
    }
    // true를 반환하면 엔터키 누른 후에 포커스가 현재 EditText로 유지죈다.
    // false를 반환하면 엔터키 누른 후에 다음 EditText로 포커스가 이동한다.
    false
}

EditText 입력 감시자 클래스 만들어 사용하기

// EditText 입력 감시자
inner class EditTextWatcher1 : 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}"
    }

}

addTextChangedListener를 사용할 때 고차함수를 사용하면
TextWatcher의 after 역할을 수행한다.
즉 실시간으로 사용자의 입력 내용을 받아 낼 수 있다.

addTextChangedListener {
     textView.text = it
}

LogCat

안드로이드 스튜디오에서 에뮬레이터나 단말기에서 사용하는 콘솔

일반 출력
println("안녕하세요")

// Log를 사용하면 tag를 정할 수 있기 때문에 필터링할 때 사용할 수 있다.
// tag를 System.in으로 설정하여 Log.i 메서드로 로그켓에 출력한다.
        
// information, 정보(데이터)를 출력하는 용도로 사용한다.
Log.i("test", "반갑습니다")
// debug, 개발중에 출력해보고 싶은 것이 있을 때 사용한다.
Log.d("테스트", "aaa")
// error, 오류 메시지를 출력해보고 싶을 때 사용한다.
Log.e("테스트", "errmsg")
// warning, 경고 메시지를 출력해보고 싶을 때 사용한다.
Log.w("테스트", "ccc")
// verbose, 기타 용도로 사용한다.
Log.v("테스트", "ddd")

ImageView

  • 이미지를 사용자에게 보여주고자 하는 목적으로 제공되는 View 이다.

Drawble vs Mipmap

  • 안드로이드에서 이미지를 넣은 폴더는 drawable 폴더이다.
  • 안드로이드 버전이 변경되면서 mipmap이라는 폴더를 제공하는데 이 폴더의 이미지는 비트맵이 아닌 벡터 방식으로 그리게 된다.
  • mipmap 폴더의 이미지는 런처 아이콘용 이미지를 넣는 폴더로 사용한다.

주요 속성

  • srcCompat : 보여줄 이미지를 지정한다. 안드로이드 4 버전까지는 src 였는데 백터 방식의 이미지(SVG, PSD 등)을 처리할 수 있는 기능을 추가혀여 srcCompat로 변경하였다.

주요 메서드

setImageResource : res 폴더에 있는 이미지를 설정한다.
setImageBitmap : Bitmap 객체로 만들어진 이미지를 설정한다.
setImageDrawable : Drawable 객체로 만들어진 이미지를 설정한다.

ToggleButton

  • 환경설정 같은 화면에서 애플리케이션의 기능을 ON/OFF 하는 기능을 제공하고자 할 때 사용한다.
  • 지금은 더 보기 좋은 View들이 생겨 많이 사용하지는 않는다.

주요 속성

textOn : ON 상태일 때 표시할 문자열을 설정한다.
textOff : OFF 상태일 때 표시할 문자열을 설정한다.
checked : 초기 상태를 설정한다. True면 on 상태이다

주요 메서드

isChecked : ON/OFF 상태 여부 값을 반환한다. ON 이면 true, OFF 면 false.
setChecked : ON/OFF 상태를 설정한다. true면 ON, false면 OFF
toggle : 현재의 토글 상태를 반전시킨다.

주요 이벤트

click : Toggle 버튼을 클릭하면 발생하는 이벤트
checked change : ON/OFF 상태가 변경하면 발생하는 이벤트

CheckBox

  • 선택할 수 있는 항목 들을 제공하고 체크를 통해 선택할 수 있도록 하는 View
  • 다수의 CheckBox를 동시에 선택할 수 있다.

주요 속성

text : CheckBox에 표시되는 문자열을 설정한다.
checked : 체크 상태를 설정한다.

주요 메서드

isChecked : 체크 박스의 현재 체크 값
setChecked : 체크 박스의 현재 체크 상태를 설정한다.
toggle : 현재 체크 상태를 반전시킨다.

주요 이벤트

checkedChange : 체크 상태가 변경되는 사건

RadioButton

하나의 그룹 안에서 하나만 선택할 수 있도록 하는 View

주요 속성

text : RadioButton에 표시되는 문자열을 설정한다.
checked : 체크 상태를 설정한다. RadioButton은 그룹 내에서 반드시 하나는 선택되어 있는 상태로 제공되는 목적으로 사용하는 View 이므로 반드시 하나는 체크해야 한다.

RadioButton의 주요 메서드

setChecked : RadioButton 체크 상태 값. 체크 상태 설정 시 같은 그룹 내의 RadioButton은 모두 체크가 해제된 상태가 된다.

RadioGroup의 주요 메서드

getCheckedRadioButtonId : 그룹 내에서 선택되어 있는 RadioButton의 id

RadioGroup의 주요 이벤트

checkedChange : 그룹 내의 RadioButton의 체크 상태가 변경되었을 때

Switch

ON/OFF 상태를 좌우로 이동하면서 설정할 수 있는 View 이다

주요 속성

text : Switch 좌측에 표시되는 문자열을 설정한다.
thumb : 버튼 부분의 이미지를 설정한다.
track : 트랙 부분의 이미지를 설정한다.
textOn : on 상태일 때 표시되는 문자열을 설정한다.
textOff : off 상태일 때 표시되는 문자열을 설정한다.
showText : textOn, textOff에 설정한 문자열을 보여줄 것인가를 설정한다.
checked : ON/OFF 상태를 설정한다.

주요 메서드

isChecked : Switch의 ON/OFF 상태 값을 반환한다.
setChecked : Switch의 ON/OFF 상태를 설정한다.

주요 이벤트

checkedChange : Switch의 ON/OFF 상태가 변경되었을 때.

CheckedTextView

CheckBox, RadioButton 을 커스터마이징 할 수 있도록 제공되는 View 이다.

주요속성

checkMark : 체크 상태를 표시하는 아이콘을 설정한다.
checked : 체크 상태를 설정한다.
clickable : 클릭이 가능한지 설정한다. CheckedTextView는 CheckBox나 RadioButton이 가지고 있는 기능이 구현되어 있지 않다. 이 때문에 개발자가 기능을 모두 구현해줘야 하는데 clickable에 true를 설정해야 이벤트에 반응할 수 있고 이를 통해 리스너를 구현하여 기능을 구현해줘야 한다.

주요 메서드

isChecked : 체크 상태 값을 반환한다.
setChecked : 체크 상태를 설정한다.
Toggle : 체크 상태를 반전한다.

주요 이벤트

click : 클릭했을 때 발생한다. checkedTextView는 이 이벤트를 반드시 설정해야 한다. checkedTextView는 checkbox나 radioButton이 가지고 있는 기능을 click 이벤트 발생 시 개발자가 모두 처리해줘야 한다.

checkMark 방향

checkedTextView는 checkMark를 설정하면 우측에 표시된다.
checkMark 속성이 아닌 다음 속성을 이용하면 원하는 방향에 표시할 수 있다.
drawableTop : 상단
drawableBottom : 하단
drawableLeft : 좌측
drawableRigt : 우측

Chip

버튼, 체크박스, 라디오 등의 기능을 가지고 있는 UI 요소이다.
ChipGroup을 통해 RadioButton 처럼 구성할 수 있다.

주요속성

Style : Chip 의 스타일을 설정한다.
Checkable : 체크 가능 여부를 설정한다.
Text : Chip에 표시할 문자열을 설정한다.
chipIcon : Chip에 표시할 아이콘을 설정한다.
chipIconVisiable : Chip 아이콘을 보여줄 것인가를 설정한다.
checkedIcon : 선택되었을 때의 아이콘을 설정한다.
checkedIconVisiable : 선택되었을 때의 아이콘을 보여줄 것인가를 설정한다.

주요 메서드

isChecked : 체크 상태 값을 반환한다.
setChecked : 체스 상태 값을 설정한다.

주요 이벤트

checkedChange : 체크 상태가 변경되었을 때
CloseIconClick : 닫기 버튼을 눌렀을 때

ChipGroup

주요 속성

singleSelection : 내부의 Chip 중 하나만 선택되게 할 것인가를 설정
checkedChip : 최초에 선택되어 있을 Chip을 설정한다.

주요 메서드

getCheckedChipId : 그룹 내에서 선택되어 있는 Chip의 id 값을 반환한다.

주요 이벤트

CheckedChange : ChipGroup 내부의 Chip의 체크 상태가 변경되었을 때

ProgressBar

  • 오래 걸리는 작업이 있을 경우 작업 중임을 표시하는 View

주요 속성

style : ProgressBar의 모양을 설정한다.
max : 최대 값
progress : 현재 값

주요 메서드

getProgress : 현재 값을 반환한다.
setProgress : 현재 값을 설정한다.
incrementProgressBy : 지정한 값 만큼 증가 혹은 감소시킨다.

SeekBar

ProgressBar와 매우 유사하지만 사용자가 값을 직접 지정할 수 있는 기능을 갖추고 있다.

주요 속성

style : SeekBar의 모양을 설정한다.
max : 최대 값
progress : 현재 값

주요 메서드

getProgress : 현재 값을 가져온다.
setProgress : 현재 값을 설정한다.
incrementProgressBy : 지정한 값 만큼 증가 혹은 감소시킨다.

주요 이벤트

SeekBarChange : SeekBar의 상태가 변경되었을 때

RatingBar

별 점을 조절할 수 있는 View이다.

주요 속성

numStars : 별의 개수를 설정한다.
stepSize : 별 점이 조절되는 양을 설정한다.
rating : 현재 별 점을 설정한다.
isIndicator : 별 점을 사용자가 조절 할 수 있는지 설정한다. true를 설정하면 사용자는 별 점을 조절 할 수 없다.
style : 스타일을 설정한다.
progressDrawable : 별의 이미지를 설정한다.

주요 메서드

getRating : 별 점을 가져온다.
setRating : 별 점을 설정한다.

주요 이벤트

RatingBarChange : 별 점이 변경되었을 때

Customizing

별이 있을 때 이미지와 없을 때의 이미지를 준비한다.
drawable 폴더에 xml 파일을 만들어 다음과 같이 작성한다.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
	<!-- 기본 배경 -->    
    <item android:id="@android:id/background" 											android:drawable="@drawable/star_off"/>
    <!-- 별점을 조절 중일 때 보여줄 이미지 -->
    <item android:id="@android:id/secondaryProgress"
    	android:drawable="@drawable/star_off"/>
    <!-- 채워진 부분 -->
    <item android:id="@android:id/progress"
    	android:drawable="@drawable/star"/>
</layer-list>

CardView

화면에 배치되는 View 들을 그룹으로 묶어 관리할 수 있는 View 이다.
CardView 자체에 그림자를 두어 약간 공중에 떠있는 듯한 모습을 보여줄 수 있다.

주요 속성

contentPadding : CardView 내부의 여백을 설정한다.
cardCornerRadius : CardView 모서리 부분의 둥근 정도를 설정한다.
cardElevation : CardView가 공중에 떠있는 정도를 설정한다.

FloatingActionButton

공중에 띄워져 있는 버튼 용도로 사용한다.

주요 속성

scrCompat : FloatingActionButton에 표시할 이미지를 설정한다.

주요 이벤트

click : FloatingActionButton을 클릭했을 때 발생한다.

Adapter View

  • 개발자는 화면의 다양한 View들을 배치해 화면을 구성하게 된다.
  • 대부분의 뷰들은 배치를 하면 기본적으로 정해진 속성에 따라 모양이 구성된다.
  • 하지만 이런 View들은 스스로 결정할 수 없는 부분이 있어 개발자가 반드시 데이터를 설정해야만 구성이 가능하다.
  • 이렇게 개발자가 반드시 설정해야 화면을 구성할 수 있는 View들을 Adapter View 라고 한다.

Adapter Class

  • Adapter View들은 View 구성하기 위해서 개발자가 다양한 데이터를 설정해줘야 한다.
  • 이러한 데이터를 관리하는 class를 Adapter Class라고 부른다.
  • Adapter Class는 사용 목적이나 적용할 View에 따라 다양하게 제공되고 있으며 원한다면 직접 생성해서 사용할 수도 있다.
    -주로 다양한 항목을 제공하는 View를 구성할 때 사용한다.

ListView

가장 대표적이고 가장 많이 사용하는 Adapter View 이다.
지금은 RecyclerView 사용을 추천하고 있지만 AdapterView 개념을 공부하기에 적당하다.
RecyclerView가 내부적으로 관리의 효율성을 가지고 있지만 지금도 ListView를 많이 사용하고 있다.
RecyclerView를 사용할 정도가 아니라면 ListView를 사용해도 된다.

주요 메서드

setAdapter : AdapterView를 구성하기 위해 사용하는 adapter를 설정한다.
setOnItemClickListener : ListView의 항목 하나를 선택하면 동작하는 리스너 position : 사용자가 터치한 항목의 순서값(0부터 1씩 증가)

setOnItemClickListener { parent, view, position, id ->
	textView.text = "${data1[position]}를 눌렀습니다"
}

주요 이벤트

ItemClick : 항목을 터치하면 발생된다.

Adapter

Adapter 생성
val adapter = ArrayAdapter<String>(
            this, android.R.layout.simple_list_item_1, data1
)

ArrayAdapter : 칸 하나에 문자열 하나만 사용하는 경우 사용
android.R.layout.simple_list_item1 : 안드로이드에서 리스트뷰의 항목 하나를 구성할 때 사용하라고 제공하는 layout, TextView 하나만 있다.

Context : 어떠한 작업을 위한 정보를 관리하는 요소들을 통칭한다.
안드로이드는 시스템이나 애플리케이션과 관련된 정보를 가지고 있다.

adapter.notifyDataSetChanged() : 갱신요청

ArrayAdapter를 이용해 Adapter 객체를 만들 때 개발자가 작성한 layout 파일을 지정할 수 있다.
두 번째 매개 변수로 layout 파일을, 세 번째 layout 파일 내에서 문자열을 설정한 View의 아이디를 설정한다.

SimpleAdapter

개발자가 ListView 의 항목을 자유롭게 디자인 했을 때 사용하는 Adapter Class이다.
ListView의 항목 내에 배치된 View들을 직접 지정하면서 데이터를 설정할 수 있다.

Custem ListView

기본으로 제공되는 layout 파일 대신해 개발자가 직접 작성한 layout을 이용해 ListView를 구성할 수 있다.
ListView 뿐만 아니라 모든 AdapterView는 동일한 방법으로 설정이 가능하다.
여기서는 문자열 하나를 설정하는 방법을 살펴본다.

기타

currentTimeMillis() : 현재 시간을 리턴하며 중복되지 않는 값을 사용하기 위해 사용되곤 한다.

profile
안녕하세요 😊

0개의 댓글