안드로이드 스튜디오 - 기본 위젯

Do it! 안드로이드 앱 프로그래밍을 참고하였습니다.

 

텍스트뷰

화면에 글자를 보여주는 역할을 합니다.

 

여러 가지 속성으로 텍스트뷰를 꾸밀 수 있습니다.

• text 속성 : 반드시 지정해야 합니다. 직접 문자열을 넣는 방법과 /app/res/values 폴더에서 strings.xml 파일을 작성한 문자열을 지정하여 할 수도 있습니다.

  • 다국어 지원이 필요할 때는 한국어, 영어, 일본어 버전의 xml 레이아웃 파일을 만드는 것보다 strings.xml 파일을 언어별로 만드는 것이 더욱 효율적입니다.

• textColor 속성 : 텍스트 뷰에서 표시하는 문자열의 색상을 설정할 수 있습니다. #000000처럼 표기하면 됩니다.

• textSize 속성 : 문자열의 크기를 설정할 수 있습니다. dp, sp, px 등을 사용할 수 있으나, sp단위는 단말의 해상도에 따라 글자의 크기를 일정한 크기로 보일 수 있게 하며 폰트를 변경했을 때 해당 폰트도 반영되도록 해주므로 sp를 사용하는 것을 권장합니다.

• textStyle : 텍스트뷰에서 표시하는 문자열의 스타일 속성을 설정합니다. (normal, bold, italic) | 기호를 사용하면 여러 개의 속성 값을 함께 지정할 수 있습니다. (대신 | 사이에 공백이 있으면 안 됩니다)

• typeFace : 텍스트 뷰에서 표시하는 문자열의 폰트 설정. 다른 폰트가 필요하면 폰트를 앱에 추가하고 폰트를 설정할 수 있다.

• fontFamily : 폰트를 설정할 수 있습니다. res/font 디렉토리를 만들고, font.xml과 ttf 파일을 넣으면 폰트를 등록할 수 있습니다. 아래와 같이 ttf 파일을 써넣으면 폰트를 바꿀 수 있습니다.

android:fontFamily = "@font/nanum"

• maxLines : 텍스트뷰에서 표시하는 문자열의 최대 줄 수를 설정합니다. (한 줄만 표시하고 싶을 때는 값을 1로 설정하면 됨) → 이렇게 하면 한 줄의 영역을 넘어가는 부분은 표시되지 않습니다. 주로 ellipsize와 함께 사용됩니다. ellipsize를 응용하는 방법에 대해서는 다음 포스팅에서 자세하게 다루도록 하겠습니다.

버튼

클릭에 대한 반응을 하는 위젯입니다. 텍스트 뷰를 상속하여 정의되어 있어서 텍스트 뷰의 속성도 그대로 가지고 있습니다. 그로 인해 훨씬 더 확장성이 뛰어난 버튼을 구성할 수 있다.

다양한 유형의 버튼을 제공한다. 안드로이드 내에서 체크 버튼, 라디오 버튼 등을 사용할 수 있습니다.

버튼 위젯에 발생한 이벤트를 가장 간단하게 처리할 수 있는 방법은 OnClickListener를 정의하여 버튼을 설정하는 것입니다. OnClickListener도 다른 포스팅에서 정리하도록 하겠습니다.

에디트텍스트

입력 상자의 역할을 하고, 사용자에게 값을 입력받을 때 사용합니다.

** 입력하는 문자의 유형을 지정할 수 있는 inputType 속성을 제공한다. (password 속성을 지정하면 입력한 글자가 보이지 않게 처리되는 형식으로 표현해줄 수 있습니다.)

• hint 속성 : 기본 안내글을 표시합니다. Ex. 아이디를 입력해주세요
• inputType을 "text"로 설정 → 글자 키패드가 보이게 하게 할 수 있습니다.

이미지뷰와 이미지 버튼

• 이미지 뷰에 이미지를 나타내려면 먼저 /app/res/drawable 폴더에 저장한 이미지 파일을 복사하여 넣은 후 app:srcCompat 속성 값을 @drawable/이미지 파일명으로 지정하면 됩니다. (이때 이미지 파일명은 확장자를 제외하고 작성해야 합니다. 이렇게 이미지 파일을 저장하는 방식을 이미지 리소스를 지정 방식이라고 합니다. ) 이미지 파일을 소스 코드에서 직접 로딩하여 비트맵으로 만든 후 설정하는 방법도 있다.
• android:src / app:srcCompat : 원본 이미지를 설정합니다. 이 속성은 반드시 설정해야 합니다. 이미지 뷰에 추가하는 이미지의 확장자는 jpg 또는 png 확장자입니다. 압축되지 않은 png 확장자를 추천합니다..
• maxWidth, maxHeight : 이미지가 표시되는 최대 폭, 높이를 설정합니다. 이 속성을 설정하지 않으면 원본 이미지가 그대로 나타납니다. 이미지의 원본이 너무 크면 이 속성으로 최대 크기를 제한할 수 있습니다.
• tint : 이미지뷰에 보이는 이미지의 색상을 설정할 수 있습니다.
• scaleType : 이미지뷰의 크기에 맞게 원본 이미지의 크기를 자동으로 늘리거나 줄여서 보여줄 때 사용합니다. 원하는 형태로 확대하거나 축소할 수 있습니다.
• 이미지 버튼은 일반적인 버튼과는 다르게 눌린 상태와 눌리지 않은 상태가 표시되지 않습니다. 

** drawable 폴더 제대로 사용하기 **

• 병렬 리소스 로딩 방식
• /app/res/drawable 폴더에 이미지를 그냥 넣게 되면 일반적으로 사용되는 이미지로 인식하게 됩니다.
• /app/res/drawable-hdpi에 넣은 이미지 : 고해상도 화면
• /app/res/drawable-mdpi에 넣는 이미지 : 중간 해상도 화면
• /app/res/drawable-xhdpi, xxhdpi, xxxhdpi : 초고해상도 화면
• /app/res/drawable-ldpi : 저해상도 화면

텍스트뷰와 에디트텍스트의 다른 기능들

텍스트뷰, 에디트텍스트 등은 모두 뷰를 상속받아 만들어진 것이므로 뷰의 속성들을 그대로 가지고 있습니다.

• 커서 관련 속성 : 에디트 텍스트에는 문자나 숫자를 입력하는 역할을 하며 커서가 깜박이는 동작이 있습니다. 에디트 텍스트의 커서 위치는 입력된 문자열의 마지막 지점으로 이동하도록 되어 있습니다. 사용자가 에디트 텍스트를 선택할 때마다 전체 내용을 수정할 수 있도록 편의를 제공할 수도 있습니다.
  • selectAllOnFocus 속성을 true로 설정하면 포커스를 받을 때 문자열 전체가 선택됩니다.
  • 커서를 보이지 않게 설정 → cursorVisible 속성을 "false" 값으로 설정하면 됩니다.
  • getSelectionStart() 메서드 : 선택된 영역의 시작 위치입니다.
  • getSelectionEnd() 메서드 : 끝 위치를 알려줍니다. (선택 영역이 없으면 커서가 있는 현재 위치를 알려줌)
  • setSelection() 메서드 : 선택 영역을 지정하는데 사용합니다.
  • extendSelection() : 선택 영역을 확장하는데 사용합니다.
  • selectAll() 메서드 : 전체 문자열이 선택됩니다. 한번에 지우는 기능을 개발할 때 좋습니다.
• 자동 링크 관련 속성 : autoLink 속성을 true로 설정하면 문서에 포함된 웹페이지 주소나 이메일 주소를 링크 색상으로 표시하고 링크를 누르면 웹페이지에 바로 접속하거나 메일 편집기를 띄워주는 기능을 간단히 넣을 수 있습니다.
• 줄 간격 조정 관련 속성 : 텍스트 뷰의 줄 간격을 조절하여 가독성을 높일 수도 있습니다.
  • lineSpacingMultiplier와 lineSpacingExtra로 설정할 수 있습니다.
  • lineSpacingMultiplier : 줄 간격을 기본 줄 간격의 배수로 설정할 때 사용됩니다.
  • lineSpacingExtra : 여유 값으로 설정할 때 사용합니다.
• 대소문자 표시 관련 속성 : capitalize 속성을 이용하여 글자, 단어, 문장 단위로 대소문자를 조절할 수 있습니다. 속성 값으로는 characters, words, sentences 등을 지정할 수 있습니다.
• 줄임 표시 관련 속성 : 텍스트 뷰에 많은 문자를 입력하면 입력한 내용의 뒷부분은 잘리고 말줄임표로 표시됩니다. 이때 ellipsize 속성을 사용하면 입력한 내용의 생략 부분을 설정할 수 있다.
  • 디폴트 값 "none" : 뒷부분을 자른다.
  • "start", "middle", "end" 값들은 각각 앞, 중간, 뒷 부분을 잘라서 보여준다.
  • 텍스트 뷰를 한 줄로 표시할 때는 maxLInes 속성을 사용합니다.
• 힌트 표시 관련 속성 : hint 속성
• 편집 가능 관련 속성 : 에디트 텍스트에 입력되어 있는 문자열을 편집하지 못하게 하고 싶다면 editable 속성 값을 "false" 로 설정합니다. 기본 값을 문자열을 편집할 수 있는 "true"
• 문자열 변경 처리 관련 속성 : 에디트 텍스트에 입력된 문자를 확인하거나 입력된 문자가 필요한 포맷과 맞는지 확인할 때 getText() 메서드를 사용합니다. 메서드가 리턴하는 것은 Editable 객체인데, 이 객체의 toString() 메서드를 이용하면 일반 String 타입의 문자열을 확인할 수 있습니다.
  • addTextChangedListener() 메서드 : TextWatcher 객체를 설정할 수 있습니다. 텍스트가 변경될 때마다 발생하는 이벤트를 처리합니다.
    • TextWatcher 인터페이스의 메서드 정의
      • public void beforeTextChanged(CharSequence s, int start, int count, int after)
      • public void afterTextChanged(Editable s)
      • public void onTextChanged(CharSequence s, int start, int before, int count)
      • 입력된 문자열의 길이 값 확인 : setFilters() 메서드 사용하여 InputFilter 객체를 파라미터로 전달하고 이 객체의 LengthFilter() 메서드를 호출하면 입력된 문자열의 길이 값을 설정할 수 있습니다.

public void beforeTextChanged(CharSequence s, int start, int count, int after)
public void afterTextChanged(Editable s)
public void onTextChanged(CharSequence s, int start, int before, int count)

•  이 TextWatcher 인터페이스를 활용하는 예 : SMS 문자 전송 (사용자가 몇 글자를 입력했는지 바로바로 표시하고 싶을 때 이 클래스를 사용합니다.)

이벤트 처리 이해하기

사용자의 화면 터치에 대한 이벤트를 처리해야 여러 기능을 구현할 수 있다.

이벤트 처리 방식

손가락으로 화면을 터치하면 터치 이벤트가 발생한다.

실제 버튼이나, 소프트 키패드를 누르면 발생하는 키 이벤트도 있다.

• 터치 이벤트는 손가락으로 누를 때, 누른 상태에서 움직일 때, 누른 상태에서 뗄 때 모두 다르게 처리해야 한다. → 터치 이벤트를 쉽게 처리할 수 있도록 클릭 이벤트를 별도로 제공한다.

  • 버튼 태그에 onClick 속성을 추가하면 버튼을 클릭했을 때 발생하는 이벤트를 처리할 수 있다. (xml에서 처리하는 방식)
  • 소스 코드에서 클릭 이벤트를 처리하도록 하려면 setOnClickListener 메서드를 이용해 리스너를 설정할 수 있다.

• 위임 모델 : 화면에서 발생하는 이벤트를 버튼과 같은 위젯 객체에 전달한 후 그 이후의 처리과정을 버튼에 위임한다.

  • 코드를 만들때 사용하는 패턴으로, 각각의 뷰마다 하나의 이벤트 처리 루틴을 할당해준다.
  • 이벤트를 위젯마다 개별적으로 처리하는 객체 지향 코드를 만들 수 있다.
  • 위임 모델은 각각의 이벤트를 처리할 수 있는 리스너 인터페이스를 등록할 수 있도록 한다. (OnClickListener) 사용 방식을 다이어그램으로 표현한 것
  • 대표적인 이벤트 처리 메서드
  boolean onTouchEvent (MotionEvent event) boolean onKeyDown (int keyCOde, KeyEvent event) boolean onKeyUp (int keyCode, KeyEvent event)
  • 사용자가 화면을 터치하거나 키패드의 키를 누르면 이벤트가 발생하고 파라미터로 필요한 정보들이 전달된다. 터치했을 때 발생하는 이벤트는 MotionEvent라 불리고, 키를 입력했을 때는 KeyEvent가 전달된다.
  • 해당 메서드들은 뷰를 상속하여 새로운 클래스를 정의할 때 재정의할 수 있다. Button 클래스를 상속하여 MyButton과 같은 새로운 클래스를 만들면 이 메서드들을 재정의할 수 있다.
  • 새로운 뷰를 정의하지 않고 기존의 뷰 객체에서 이벤트를 처리하려면 리스너를 설정하는 메서드를 호출해야 한다.
  View.OnTouchListener : boolean onTouch (View v, MotionEvent event) View.OnKeyListener : boolean onKey (View v, int keyCode, KeyEvent event) View.OnClickListener : void onClick (View v) View.OnFocusChangeListener : void onFocusChange (View v, boolean hasFocus)
  • onClickListener의 경우 버튼과 같은 객체에 자주 사용
  • OnTouchListener는 버튼뿐만 아니라 일반적인 뷰 객체에도 이용할 수 있다. (사용자와의 상호작용이 필요한 경우 더 많이 사용된다.)
  • OnTouchListener에 정의된 onTouch 메서드는 사용자가 손가락으로 터치할 때마다 발생하는 이벤트를 받아 처리할 수 있다.
  • OnKeyListener에 정의된 onKey 메서드는 키 입력이 발생할 때마다 발생되는 이벤트를 받아 처리한다.
  • FocusChange 이벤트 : 뷰에 포커스가 주어지거나 없어질 경우에 발생한다. OnFocusChangeListener를 사용해 처리한다.

  ** 대표적인 이벤트 **

  제목 없음

  • 제스처 : 일정한 패턴. 손가락으로 좌우로 스크롤할 때와 같은 패턴을 '제스처'라고 한다.
  • 제스처 이벤트는 터치 이벤트를 받은 후에 추가적인 확인을 거쳐 만들어지므로 일반적인 터치 이벤트보다 더 간단하게 처리할 수 있다. (손으로 눌러 움직이는 스크롤도 하나의 이벤트로 만들어져 하나의 메서드에서 처리되므로 복잡한 이벤트를 좀 더 쉽게 처리할 수 있다.)

터치 이벤트 처리하기

• getAction() 메서드 호출 :
  • MotionEvent.ACTION_DOWN → 손가락이 눌렸을 때
  • MotionEvent.ACTION_MOVE → 손가락이 눌린 상태로 움직일 때
  • MotionEvent.ACTION_UP → 손가락이 떼졌을 때

⇒ if / else if 구문으로 비교할 수도 있고, switch case 구문으로 비교할 수도 있음.

제스처 이벤트 처리하기

• 제스처 이벤트 : 터치 이벤트 중에서 스크롤 등을 구별한 후 알려주는 이벤트
• 제스처 이벤트를 처리해주는 클래스는 GestureDetector이다. 이 객체를 만들고 터치 이벤트를 전달하면 GestureDetector 객체에서 각 상황에 맞는 메서드를 호출한다.
• onTouch() 메서드 안에서는 GestureDetector 객체에 onTouchEvent() 메서드를 호출하면서 MotionEvent 객체를 전달한다. → 이러면 GestureDetector 객체가 터치 이벤트를 처리한 후 GestureDetector 객체에 정의된 메서드를 호출한다.
• 제스처 이벤트 중에서 대표적인 것 : scroll, fling
• scroll : 손가락으로 드래그하는 경우 (이동한 거리 값이 중요하게 처리됨)
• fling : 빠른 속도로 스크롤을 하는 것 (이동한 속도 값이 중요하게 처리됨)

키 이벤트 처리하기

• 키 입력은 onKeyDown() 메소드를 재정의하여 처리할 수 있다.
• onKeyDown 메서드로 전달되는 파라미터는 두 개. (KeyCode는 어떤 키가 사용되는 지, KeyEvent는 키 입력 이벤트에 대한 정보를 알고 싶을 때 사용된다.)
• 키 입력 이벤트는 하드웨어 키보드나 소프트 키패드에 상관없이 동일한 이벤트로 전달되며 시스템 버튼 중의 하나인 back 버튼도 이 이벤트로 처리할 수 있다.
• 홈 버튼과 RecentApp 버튼은 앱에서 직접 제어는 되지 않고, 키가 입력되었는지 정보만 전달받을 수 있다.
• onKey() 메서드는 뷰의 OnKeyListener 인터페이스를 구현할 때 사용된다. (Key-Code 정수 값으로구분할 수 있는 대표적인 키 값은 p 205에서 확인할 것)
• 실제 앱을 구성하면서 사용하는 키 입력의 대표적인 예는 카메라 미리보기를 하면서 사용하는 카메라 버튼, 시스템 back 버튼이 있다.
• 시스템 back 버튼은 onKeyDown() 메서드를 사용하면 간단히 처리할 수 있다. (void onBackPressed() 메서드를 재정의해서 간단히 이벤트를 처리할 수도 있다.)

단말 방향을 전환했을 때 이벤트 처리하기

• 가로와 세로 화면의 비율에 따라 화면이 다시 보인다. → XML 레이아웃이 다르게 보여야 한다.
• 단말의 방향이 바뀌었을 때 세로 방향의 XML 레이아웃과 가로 방향의 XML 레이아웃을 따로 만들어 둘 필요가 있다.

토스트, 스낵바 그리고 대화상자 사용하기

디버깅을 위해서는 일반적으로 Log 클래스를 사용해서 로그를 출력할 수 있다. (안드로이드 스튜디오 하단에 보이는 Logcat 창에서 확인할 수 있다.)

화면에 간단히 뿌려지는 정보를 보고 싶은 경우에는 토스트 메시지를 사용한다.

토스트는 간단한 메시지를 잠깐 보여주었다가 없어지는 뷰로 앱 위에 떠있는 뷰이다.

Toast.makeText(Context context, String message, int duration).show();

• Context 객체는 일반적으로 Context 클래스를 상속한 액티비티를 사용할 수 있으며 액티비티를 참조할 수 없는 경우에는 getApplicationContext 메서드를 호출하면 Context 객체가 반환된다.
• 토스트를 보여주고 싶다면 보여주려는 메시지와 디스플레이 시간을 파라미터로 전달하여 객체를 생성한다.

토스트 모양 바꿔 보여주기

스낵바 보여주기

토스트 대신 스낵바를 사용하는 경우도 많다.

외부 라이브러리로 추가되었기 때문에 스낵바가 들어있는 라이브러리를 추가해야 사용 가능

• 화면 아래쪽에서 올라오기 때문에 아래 쪽의 화면 일부분을 가리지만 토스트와는 다른 방식으로 메시지를 보여줄 수 있다는 장점이 있다.

알림 대화상자 보여주기

• 사용자에게 확인을 받거나 선택하게 할 때 사용한다.
• 사용자의 입력을 받기보다는 일방적으로 메시지를 전달하는 역할을 주로 하며 예, 아니오와 같은 전형적인 응답을 처리한다.
• AlertDialog는 기본 API에 포함된 것 외에 appcompat 패키지에 포함된 것도 있다.
• AlertDialog 클래스는 알림 대화상자를 보여주는 가장 단순한 방법을 제공한다.
• 알림 대화 상자의 타이틀은 setTitle() 메서드로 설정하고 내용은 setMessage() 메서드를 사용해 설정한다.
• 아이콘은 setIcon()메서드로 설정할 수 있다. (안드로이드에 포함된 아이콘 중 하나를 사용하고 싶다면 android.R.drawable을 코드에 입력한다.
• 예, 아니오와 같은 버튼 설정은 setPositiveButton() 과 setNegativeButton() 메서드를 사용한다. 이 메서드에는 OnClickListener를 설정할 수 있다.

⚡ 대화상자의 모양을 바꾸려면 어떻게 해야 할까?

→ 대화 상자 안에 에디트텍스트가 들어가는 경우, 프래그먼트를 사용해 원하는 형태의 대화상자 화면을 만들어야 한다.

프로그레스바 사용하기

프로그레스바

• 어떤 일의 진행 상태를 보여줄 수 있는 좋은 방법
• 막대모양 : style 속성 값을 '?android:attr/progressBarStyleHorizontal'로 설정한다.
• 원모양 (작업이 진행중임을 알려준다.)
• 프로그레스바를 추가할 때는 ProgressBar 태그가 사용된다.
  • 값의 최대 범위 : max 속성, 현재 값은 progress 속성
• 프로그레스바의 현재 값을 바꿀 때 사용하는 대표적인 메서드
  • void setProgress (int progress) : 정수 값을 받아 프로그레스바의 현재 값으로 설정한다.
  • void incrementProgressBy (int diff) : 현재 설정되어 있는 값을 기준으로 값을 더하거나 뺄 때
  • 타이틀바에 프로그레스 바를 표시하는 기능은 윈도우 속성으로 정의되어 있다.
  • requestWindowFeature(Window.FEATURE_PROGRESS); 메서드를 사용해야 한다.
• 타이틀 부분에 표시되는 프로그레스바는 범위를 지정할 수 없다.
• ProgressDialog 객체는 Context 객체가 파라미터로 전달되어야 하는데, 액티비티인 MainActivity를 전달하기 위해 파라미터를 MainActivity.this로 지정했다.
• 어떤 이벤트가 발생했을 때 대화상자를 보이지 않게 하고 싶다면 dismiss() 메서드를 호출하면 된다.