Widget

안드로이드의 view 중 기능을 갖고 사용자와 상호작용을 하는 것들

레이아웃 위에 배치되어 화면에 나타나고 코드를 통해 통제하여 사용자와 소통하는 수단이 된다.

 

Widget 사용 패턴

• 먼저 레이아웃에 사용하고자 하는 위젯을 배치한다.
• 이때 Activity가 실행되면 화면이 구성되고 화면에 배치된 모든 뷰들은 객체로 생성된다.
• 객체로 생성된 뷰 중에 필요한 위젯들의 주소 값을 얻어와(뷰 바인딩으로 인해 해당 작업은 필요 없다.) 코드로 이들을 통제하게 된다.
• 필요하다면 이벤트에 대한 코드를 수성하여 사용한다.

 

위젯의 종류

• textview
  • 사용자에게 전달하고자 하는 문자열을 표시하는 뷰
  • 주요 속성
    • text : 보여주고자 하는 문자열
    • lines : 최대 라인 수(기본값 무한)
    • textColor : 문자열의 색상
    • textSize : 문자열의 크기
    • textAppearance : 문자열의 형식(색상, 크기 등)
  • 주요 메서드
    • getText : 문자열(CharSequence) 추출하기, toString으로 string 형태로 추출도 가능
    • setText : 문자열 덮어쓰기
    • setBackgroundColor : 문자열 배경색 지정하기, Color.RED, Color.Blue, Color.argb(50, 0, 255, 190) ...
    • setTextColor : 문자열 색상 지정하기
    • append : 문자열 추가하기
• button
  • 사용자가 클릭하면 개발자가 만든 코드를 동작시켜 주는 뷰이다.
  • 문자열을 표시하는 Button과 이미지를 표시하는 ImageButton이 있다.
  • 주요 속성
    • text : Button의 문자열 (기본값 전부 대문자)
    • srcCompat : ImageButton의 이미지 (이미지 파일을 사용한다면 파일명이 빈 칸이 없어야 하며 모두 소문자여야 한다.)
  • 주요 메서드
    • setText : Button의 문자열 덮어쓰기
    • setBitmap : ImageButton의 이미지 덮어쓰기
      • res 객체 생성 Resources res = getResources();
      • Bitmap 객체 생성 Bitmat bitmap = BitmapFactory.decodeResource(res, R.drawable.파일명);
      • activityMainBinding.imageButton.setImageBitmap(bitmap)
  • 주요 이벤트
    • Click : 버튼을 눌렀을 때 발생하는 이벤트
      • implements OnClickListener를 통해 리스너 클래스를 생성한다. 익명 클래스를 사용해도 된다.
      • 이때 OnClickListener가 android.view.View의 인터페이스인 것을 확인해야 한다.
        android.content.DiaLogInterface는 대화 상자의 버튼 이벤트 처리를 위한 인터페이스이다.
• EditText
  • 사용자에게 문자열 데이터를 입력 받을 때 사용하는 뷰이다.
  • 입력 받는 형식이 어떻든 문자열로 저장한다.
  • Palette -> Text에 기본 inputType 설정에 따라 여러 종류의 EditText가 있다.(password, e-mail ...)
  • 주요 속성
    • text : 표시할 문자열을 설정
    • hint : 입력된 값이 없을 경우 표시할 안내 문구를 설정
    • inputType : 입력 값에 대해 설정. 표시되는 형식, 나타나는 키보드 등에 영향을 준다. (제한 X)
    • imeOptions : 나타나는 키보드의 Entet 키 모양을 설정한다.
  • requestFocus로 포커스를 줄 수 있다.
  • 주요 이벤트
    • TextWatcher : 입력한 내용을 실시간으로 감시. 입력 내용 변경 전, 변경 순간,(:=) 변경 후로 나눠서 작업할 수 있다.
    • EditorAction : Enter 키를 눌렀을 때 발생하는 이벤트
• TextInputLayout
  • EditText를 보완한 뷰이다.
  • 속성, 이벤트, 프로퍼티 등을 그대로 사용하며 몇 가지 요소가 추가되었다.
  • 주요 속성
    • hint : 원래는 입력된 값이 없을 경우 표시되고 있다면 사라지지만, 여기서는 안내 문구 용도로 사용돼 사라지지 않고 상단으로 이동한다.
    • counterEnabled : 입력한 글자의 수가 나타난다.
    • counterMaxLength : 지정한 글자수를 넘으면 붉은 색으로 표시해준다.
  • 주요 메서드
    • getEditText : TextInputLayout이 가지고 있는 EditText 객체의 주소 값
    • setError : 오류로 표시할 메시지를 설정한다.
• ImageView
  • 이미지를 사용자에게 보여주고자 하는 목적으로 제공되는 뷰
  • 이미지를 저장하는 경로는 drawable과 mipmap이 있다.
  • 이미지를 넣는 폴더는 기본적으로 drawable이다.
  • 버전이 변경되면서 mipmap이라는 폴더도 제공하는데, 이 폴더의 이미지는 비트맵이 아닌 벡터 방식으로 이미지를 그리게 된다.
  • 비트맵 방식은 이미지를 화면상에 표시하는 속도가 빠른 대신 용량이 크고(압축 기술로 인해 이 단점은 상관 없어졌다), 이미지를 확대하면 계단현상이 발생하고 축소하면 이미지가 뭉개지는 단점이 있다.
  • 벡터 방식은 이미지를 그리기 위한 데이터를 가지고 있어 이를 해석해야 하기 때문에 속도가 느리지만 확대/축소에서 이미지가 변질되지 않는다. 그래서 mipmap은 런처 아이콘용 이미지를 넣는 폴더로 사용된다.
  • 주요 속성
    • srcCompat : 보여줄 이미지를 지정한다. 안드로이드 4 버전까지는 src였는데 벡터 방식의 이미지(SVG, PSD 등)을 처리할 수 있는 기능을 추가하여 srcCompat으로 변경하였다.
  • 주요 메서드
    • setImageResource : res 폴더에 있는 이미지를 설정한다.
    • setImageBitmap : Bitmap 객체로 만들어진 이미지를 설정한다.
    • setImageDrawable : Drawable 객체로 만들어진 이미지를 설정한다.
• ToggleButton
  • 환경설정과 같은 화면에서 애플리케이션의 기능을 ON/OFF 하는 기능을 제공하고자 할 때 사용한다.
  • 지금은 더 좋은 뷰들이 생겨 많이 사용하지는 않는다.
  • 주요 속성
    • textOn : On 상태일 때 표시할 문자를 설정한다.
    • textOff : Off 상태일 때 표시할 문자를 설정한다.
    • checked : 기본 상태를 설정한다. 기본값은 Off 상태이다.
  • 주요 메서드
    • isChecked : 현재 상태를 확인한다. On이면 true, Off면 false를 반환한다.
    • setChecked : 상태를 설정한다. true면 On, false면 Off로 설정한다.
    • toggle : 현재의 토글 상태를 반전시킨다.
  • 주요 이벤트
    • click : Toggle 버튼을 클릭했을 때 발생하는 이벤트
    • checked change(android.widget.Compound <== true or false 인 뷰를 위한 메서드) : On/Off 상태가 변경되면 발생하는 이벤트. 클릭 여부와 상관없이 변경을 감지하기 때문에 보통 이 이벤트를 사용한다.
• CheckBox
  • 선택할 수 있는 항목들을 제공하고 체크를 통해 선택할 수 있도록 하는 뷰
  • 다수의 CheckBox를 동시에 선택할 수 있다.
  • 각각의 CheckBox는 독립적이므로 서로 영향을 주지 않는다.
  • 주요 속성
    • text : 체크 박스에 표시할 문자열을 설정한다.
    • checked : 체크 상태를 설정한다.
  • 주요 메서드
    • isChecked : 현재 체크 상태를 확인한다.
    • setChecked : 체크 상태를 설정한다.
    • toggle : 현재 체크 상태를 반전시킨다.
  • 주요 이벤트
    • checkedChange : 체크 상태가 변경되는 사건을 감지한다.
• RadioButton
  • 하나의 그룹 안에서 하나만 선택할 수 있도록 하는 뷰  
  • 주요 속성
    • text : RadioButton에 표시되는 문자열을 설정한다.
    • checked : 체크 상태를 설정한다. 반드시 하나는 체크해야 한다.
  • 주요 메서드
    • getCheckedRadioButtonId : 그룹 내에서 선택되어 있는 RadioButton의 id를 확인한다.
    • setChecked : RadioButton 체크 상태 값. 체크 상태 설정 시 같은 그룹 내의 RadioButton은 모두 체크가 해제된 상태가 된다.
  • 주요 이벤트
    • checkedChange : 그룹 내의 RadioButton의 체크 상태가 변경되는 것을 감지한다.
• Switch
  • On/Off 상태를 좌우로 이동하면서 설정할 수 있는 뷰이다. toggle과 유사하다.
  • 주요 속성
    • text : Switch 좌측에 표시되는 문자열을 설정한다.
    • thumb : 버튼 부분의 이미지를 설정한다.
    • track : 트랙 부분의 이미지를 설정한다. xml로 설정하면 on/off 상태일 때 이미지를 각각 설정할 수 있다.
    • textOn : on 상태일 때 표시되는 문자열을 설정한다.
    • textOff : off 상태일 때 표시되는 문자열을 설정한다.
    • showText : textOn, textOff에 설정한 문자열을 보여줄 것인가를 설정한다. 기본값은 false.
    • checked : on/off 상태를 설정한다.
  • 주요 메서드
    • isChecked : Switch의 on/off 상태 값을 반환한다.
    • setChecked : Switch의 on/off 상태를 설정한다.
  • 주요 이벤트
    • checkedChange : Switch의 on/off 상태가 변경되는 것을 감지한다.
• CheckedTextView
  • CheckBox, RadioButton을 커스터마이징 할 수 있도록 제공되는 뷰이다.
  • TextView이기 때문에 기본적으로 문자열을 보여주는 것이 주 목적이며 클릭했을 때 상호작용되지 않는다.
  • 체크 상태, 체크 표시를 보여주는 기능을 포함한다.
  • 체크박스와 라디오버튼의 기능을 가지고 있지 않는다.
  • 주요 속성
    • checkMark : 체크 상태를 표시하는 아이콘을 설정한다.
      
      • checkedTextView는 checkMark를 설정하면 우측에 표시된다.
      • checkMark 속성이 아닌 다음 속성을 이용하면 원하는 방향에 표시할 수 있다.
      • drawalbeTop, drawableBottom, drawableLeft, drawableRight
    • checked : 체크 상태를 설정한다.
    • clickable : 클릭이 가능한지 설정한다. CheckBox나 RadioButton이 가지고 있는 기능이 구현되어 있지 않기 때문에 개발자가 기능을 모두 구현해줘야 한다. 이때 clickable에 true를 설정해야 이벤트에 반응할 수 있고 이를 통해 리스너를 구현하여 기능을 구현해줘야 한다.
  • 주요 메서드(CheckBox와 유사)
    • isChecked : 체크 상태 값을 반환한다.
    • setChecked : 체크 상태를 설정한다.
    • toggle : 체크 상태를 반전한다.
  • 주요 이벤트
    • click : 클릭했을 때 발생한다. checkedTextView는 이 이벤트를 반드시 설정해야 한다.
      checkedTextView는 checkbox나 radioButton이 가지고 있는 기능(checkedChange ...)을 click 이벤트 발생 시 개발자가 모두 처리해줘야 한다.
• Chip
  • 버튼, 체크박스, 라디오 등의 기능을 가지고 있는 UI 요소이다.
  • ChipGroup을 통해 RadioButton 처럼 구성할 수 있다.
  • 주요 속성
    • style : Chip의 스타일을 설정한다. 기본값은 Chip.Action
    • checkable: 체크 가능 여부를 설정한다.
    • text : Chip에 표시할 문자열을 설정한다.
    • chipIcon : Chip에 표시할 아이콘을 설정한다.
    • chipIconVisible : chipIcon을 보여줄 지 설정한다.
    • checkedIcon : 선택되었을 때 표시할 아이콘을 설정한다.
    • checkedIconVisible : checkedIcon을 보여줄 지 설정한다.
    • singleSelection : 내부의 Chip 중 하나만 선택되게 할 것인가를 설정한다.
    • checkedChip : 최초에 선택되어 있을 Chip을 설정한다.
  • 주요 메서드
    • isChecked : 체크 상태 값을 반환한다.
    • setChecked : 체크 상태를 설정한다.
    • getCheckedChipId : 그룹 내에서 선택되어 있는 Chip의 id 값을 반환한다.
  • 주요 이벤트
    • checkedChange : 체크 상태가 변경되는 것을 감지한다.
    • CloseIconClick : 닫기 버튼을 누르는 것을 감지한다. 
    • CheckedChange : ChipGroup 내부의 Chip의 체크 상태가 변경되는 것을 감지한다. 
• ProgressBar
  • 오래 걸리는 작업이 있을 경우 작업 중임을 표시하는 뷰이다.
  • 3초의 법칙 : 사용자는 3초 이상을 기다려주지 않는다. 반응이 너무 늦으면 앱이 멈춘 줄 알고 종료할 수 있기 때문에 progressBar를 사용해 오래 걸리는 작업임을 알려준다.
  • 주요 속성
    • style : ProgressBar의 스타일을 설정한다. 보통 Material이 붙은 것을 사용한다.
      • 구글의 Material Design 지침에 따라 디자인된 UI를 의미한다.
      • 부드럽고 직관적인 애니메이션 효과, 그림자와 고도 표현, 다양한 색상 및 테마 등의 장점을 지니고 있다.
      • 무엇보다 익숙하고 일관적인 디자인을 유지할 수 있다는 장점이 있다.
    • Horizontal ProgressBar는 막대기 형으로 진행 상황을 나타낼 수 있는데, 아래 속성을 가진다.
    • max : 최댓 값
    • progress : 현재 값
  • 주요 메서드
    • getProgress : 현재 값을 반환한다.
    • setProgress : 현재 값을 설정한다.
    • incrementProgressby : 지정한 값 만큼 증가 혹은 감소시킨다.
• SeekBar
  • ProgressBar와 매우 유사하지만 사용자가 값을 직접 지정할 수 있는 기능을 갖추고 있다.
  • SeekBar(Descript)는 눈금이 있는 버전이다.
  • 주요 속성
    • style : SeekBard의 스타일을 설정한다.
    • max : 최대 값(Descript는 눈금의 수)
    • progress : 현재 값
  • 주요 메서드는 ProgressBar와 같다.
  • 주요 이벤트
    • seekBarChange : SeekBar의 상태가 변경되는 것을 감지한다.
      
      • 코드를 통해서 변경됐는지 혹은 사용자에 의해서 변경됐는지 구분이 가능하다.
      • onProgressChanged - 값이 변경되었을 때
      • onStartTrackingTouch - 값을 변경하기위해 터치했을 때
      • onStopTrackingTouch - 값을 변경하기 위해 터치 한 후 떼었을 때
• RatingBar
  • 별점을 조절할 수 있는 뷰이다.
  • 주요 속성
    • numStars : 별의 개수를 설정한다.
      layout_width가 match_parent로 되어있으면 numStars에 상관없이 가로로 꽉 차도록 별의 개수가 조절된다.
    • stepSize : 별점이 조절되는 양을 설정할 수 있다.
    • rating : 현재 별점을 설정한다.
    • isIndicator : 별점을 사용자가 조절할 수 있는지 설정한다. true면 사용자가 별점을 조절할 수 없다.
    • style : RatingBar의 스타일을 설정한다.
    • progressDrawable : 별의 이미지를 설정한다. 기본, 조절 중, 채워진 부분을 구분해줘야 한다.
  • 주요 메서드
    • getRating : 현재 별점을 반환한다. 반환 타입은 float이다.
    • setRating : 현재 별점을 설정한다.
  • 주요 이벤트
    • RatingBarChange : 별점이 변경되는 것을 감지한다. SeekBar처럼 변경되는 것만 감지하고, 사용자가 변경했는지 여부를 구분할 수 있다.
• ScrollView
  • 배치되어 있는 뷰가 화면을 벗어날 경우 스크롤을 할 수 있도록 제공되는 뷰이다.
  • 위 아래로 스크롤이 가능하며 HorizontalScrollView는 좌우로 스크롤이 가능하다.
  • ScrollView와 HorizontalScrollView를 조합하면 상하 좌우 스크롤이 가능하다.
  • 주요 메서드
    • getScrollY : 현재 스크롤 된 Y 좌표를 반환한다. 반환타입은 int이고, 픽셀 수를 의미한다.
    • getScrollX : 현재 스크롤 된 X 좌표를 반환한다.
    • scrollTo : 지정된 위치로 스크롤한다. 입력된 좌표가 화면보다 크다면 최대한 이동한다.
      • ScrollView에서는 Y좌표를, HorizontalScrollView에서는 X좌표를 설정한다.
    • scrollBy : 현재 위치에서 지정된 값 만큼 이동한다.
    • smoothScrollTo : 지정된 위치로 스크롤한다. 애니메이션이 동작한다.
    • smoothScrollBy : 현재 위치에서 지정된 값 만큼 이동한다. 애니메이션이 동작한다.
  • 주요 이벤트
    • ScrollChange : 스크롤 변경을 감지한다.
• CardView
  • 화면에 배치되는 뷰들을 그룹으로 묶어 관리할 수 있는 뷰이다.
  • CardView 자체에 그림자를 두어 약간 공중에 떠있는 듯한 모습을 보여줄 수 있다.
  • 주요 속성
    • contentPadding : 내부 여백을 설정한다.
    • cardCornerRadius : CardView 모서리의 둥근 정도를 설정한다.
    • cardElevation : 공중에 떠있는 정도를 설정한다. 이에 따라 그림자 효과가 달라진다.
• FloatingActionButton
  • 공중에 띄워져 있는 버튼 용도로 사용한다. (스크롤에 상관없이 화면에 고정되어 있는 버튼 등)
  • ImageButton 처럼 이미지를 넣어 사용한다.
  • 주요 속성
    • srcCompat : 표시할 이미지를 설정한다.
  • 주요 이벤트
    • click : 클릭되는 것을 감지한다.
• CalendarView
  • 달력을 표시할 수 있는 뷰이다.
  • 주요 속성
    • firstDayOfWeek : 한 주의 첫 번째 요일을 설정한다. 1 = 일요일(기본), 2 = 월요일 ....
    • minDate : 달력에 표시되는 최소 날짜
    • maxDate : 달력에 표시되는 최대 날짜
  • 주요 메서드
    • setDate : 날짜를 설정한다. 원래는 지정한 날짜를 millisec로 환산한 값을 넣어야 하지만, Java의 Calendar 객체를 사용하면 간편하다.
    • getDate : setDate를 통해 설정된 날짜 값을 반환한다. 즉, 사용자가 터치한 날짜를 반환하지는 않는다. 해당 기능을 원할경우에는 아래 이벤트를 사용한다.
  • 주요 이벤트
    • dateChange : 사용자가 달력을 터치하여 선택한 날짜를 감지한다. 사용자가 터치한 날짜를 반환하고 싶다면 선택한 날짜를 setDate로 설정해줘야 한다.
• SearchView
  • 검색어를 입력할 수 있도록 제공되는 뷰이다.
  • 검색에 관련된 기능은 없으며 검색어 입력 용도로 사용한다. 즉, 개발자가 직접 구현해야 한다.
  • 주요 속성
    • queryHint : 안내 문구를 설정한다.
  • 주요 메서드
    • getQuery : 사용자가 입력한 검색어를 반환한다.
  • 주요 이벤트
    • queryText : 검색어를 입력하거나 enter 버튼을 누르면 검색어를 받는다. onQueryTextSubmit의 반환값이 false면 키보드가 내려가고, true면 키보드가 유지된다.