위젯 (Widget)

1. 6 위젯 (Widget)

2. 학습목표 • 가장 기본적인 위젯인 TextView를 통해 위젯의 일반적인 특징과 프로그래밍 방법을 상세하게 연구해보고 버튼의 사용 방법을 익힌다. • 내용 • 리소스 • 텍스트 뷰 • 버튼

3. 1. 리소스 • 리소스 • 프로그램은 코드와 리소스로 구성된다. • 리소스는 동작과 직접적인 상관없이 주로 프로그램의 외형 장식을 정의한다. • 리소스는 환경이나 조건에 따라 통째로 교체할 수 있으므로 장비 호환성 확보에 유리하며, 언어에 따른 지역화도 간단해진다. • 안드로이드 프로젝트는 현대적인 추세에 따라 코드와 데이터는 철저하게 분리하되 리소스와 애셋으로 좀 더 세분화 하여 관리하며, 다음은 리소스와 애셋의 데이터면에서 차이점을 말한다. • 리소스에 비해 애셋은 동영상 같은 큰 데이터를 의미한다. • 리소스는 컴파일되지만 애셋은 원본 그대로 저장된다. • 리소스는 빈번히 사용되는데 비해 애셋은 상대적으로 덜 사용된다.

4. 1. 리소스 • 리소스 • 리소스는 형태나 컴파일 방식에 따라 여러 종류로 나뉘며 리소스 타입은 다음과 같다.

5. 1. 리소스 • 리소스 사용 • 리소스는 코드에서 다방면으로 활용되어 지며, 모든 메서드에서는 리소스를 인식하는 것은 아니며 리소스 ID를 받아들이지 않는 메서드도 있다. • 리소스를 인식하지 않는 메서드의 예는 대표적인 다음 예와 같다. • FileInputStream openFileInput (String name) • 다음은 코드에서 리소스 값을 읽어들여 사용하는 예제이다. • 리소스 파일은 XML포맷이므로 XML 헤더로 시작되며 <resources> 루투 엘리먼트 안에 개별 리소스들이 엘리먼트로 정의된다.

6. 1. 리소스 • 리소스 사용 • 문자열 색상을 리소스로 정의하는 예는 다음과 같다. • 문자열 크기를 리소스로 정의하는 예는 다음과 같다.

7. 1. 리소스 • 리소스 사용(실습예제) • 코드에서 리소스의 정보를 읽어와 실행중에 속성을 변경해 보자

8. 1. 리소스 • 리소스 사용 • XML문서에서 다른 리소스를 참조할 때는 “@[패키지:/]타입/id”표현식으로 사용하되 같은 패키지에 있으면 패키지명은 생략한다. • 리소스 ID를 참조하는 방법이 코드에서와 리소스에서 각각 다르기 때문에 다음과 같이 외워 두자.

9. 1. 리소스 • 스타일과 테마 • 스타일과 테마는 여러 가지 속성값의 집합에 대해 이름을 붙여 넣은 것이다. • 스타일과 테마는 속성의 집합이라는 면에서 동일하며 정의하는 방법도 같지만 적용 대상이 다르다. • 스타일 : 각각의 뷰에 개별적으로 적용, 워드 프로세서의 문단 스타일과 개념상 같다. • 테마 : 액티비티 단위로 적용, 운영체제가 제공하는 데스크톱 테마와 개념상 같다. • 다음 예제를 보고 스타일을 정의해보자 (res/values폴더에 style.xml파일생성)

10. 1. 리소스 • 스타일과 테마(실습예제) • 위젯에 스타일을 적용할 때는 style속성에 “@style/스타일명”형식으로 지정한다. Red15스타일 텍스트8pt로 수정

11. 1. 리소스 • 대체 리소스 • 안드로이드는 환경에 따라 적절한 리소스를 선택하는 방식이다. • 개발자가 환경별로 사용할 리소스를 따로 작성해 놓으면 시스템은 실행시에 가장 적합한 리소스를 골라 로드한다. • 환경에 따라 사용할 대체 리소스를 폴더별로 작성하되 폴더의 이름에 환경을 의미하는 접미어를 붙여 놓는다.

12. 1. 리소스 • 대체 리소스(실습예제)

13. 1. 리소스 • 대체 리소스(실습예제)

14. 2. 텍스트 뷰 • 기본 속성 • 위젯 중 가장 사용되는 것은 명령을 입력 받는 Button과 문자열을 입력받는 Edit Text 이다. • 클래스 계층도를 보면 이 둘은 TextView로부터 상속을 받으며 View도 상속받는다.

15. 2. 텍스트 뷰 • 기본 속성(예제)

16. 2. 텍스트 뷰 • 기본 속성 • 수평 입력 • 위젯의 폭보다 더 긴 문자열이 입력될 때의 동작을 지정한다. • 디폴트는 자동 개행이어서 여러 줄을 입력할 수 있다. • 입력 문자 제한 • 키패드에 있는 모든 문자를 입력할 수 있다. • digits 속성에 문자열을 지정해 놓으면 문자열 내에 있는 문자들만 입력이 가능하다.

17. 2. 텍스트 뷰 • 기본 속성 • 커서 및 포커스 • 에디트는 포커스를 받으면 커서가 문자열의 제일 끝으로 이동한다. • 자동 링크 • autoLink속성은 문자열에 포함된 링크를 자동으로 해석하여 링크로 표시하고 클릭 이벤트를 처리하여 링크로 점프한다. • 지원 가능한 링크는 다음과 같으며 연산자로 묶어 여러 가지 링크를 같이 지정할 수 있다.

18. 2. 텍스트 뷰 • 기본 속성 • 글자의 모양 • shadow★ 속성은 텍스트 밑에 그림자를 깔아 입체적인 장식을 한다. • Dx, Dy는 그림자와 본 글자의 거리를 말한다. • Color는 그림자의 색상, Radius는 그림자의 크기이다. • 줄 간격 • 기본 줄 간격은 적용된 폰트의 높이 만큼이며, 줄 간격은 기본 줄 간격의 배수와 여유분으로 지정하는데 각 lineSpacingMultiplier, lineSpacingExtra 속성으로 지정한다.

19. 2. 텍스트 뷰 • 기본 속성 • 글꼴 기준 크기 • 위젯의 크기는 layout_width, layout_height 속성으로 지정하지만 텍스트 뷰는 폰트에 상대적인 크기로도 지정 할 수 있다. • lines 속성은 텍스트의 실제 길이에 상관없이 지정한 줄만큼의 높이를 강제로 차지한다. • ems는 수평 크기를 EM 크기 기준으로 지정한다. • 대소문자 변환 • capitalize속성을 characters, words, sentences 중 하나로 설정하면 글자, 단어, 문장 단위로 자동 대문자로 변환한다.

20. 2. 텍스트 뷰 • 기본 속성 • 생략 부호 • ellipsize속성은 긴 문자열의 일부 중 어디를 생략할 것인가를 지정한다 . • marquee는 생략된 부분을 잘라 먹지 않고 긴 내용을 좌우로 스크롤하여 보여준다. • TextView는 기본적으로 포커스를 가지지 못하므로 focusable 속성을 true로 지정해야 한다. • 힌트 • 힌트는 에디트에 어떤 내용을 입력하라는 안내 문자열이다. • hint 속성으로 힌트 문자열을 지정하며 textColorHint속성으로 힌트 색상을 지정한다.

21. 2. 텍스트 뷰 • buffer Type • 실행중에 코드에서 텍스트 뷰의 문자열을 읽거나 변경할 수 있는데 다음 메서드를 사용 한다. • CharSequence getText () • void setText (int resid [, TextView.BufferType type] ) • void setText (CharSequence text [, TextView.BufferType type]) • CharSequence는 다음 메서들을 제공하는 인터페이스로 정의되어 진다.

22. 2. 텍스트 뷰 • buffer Type • 버퍼타입이란 텍스튜 뷰가 가진 문자열로 어떤 작업을 할 수 있는지를 정의하는 값이다. • XML문서에서는 bufferType속성으로 지정한다. • 버퍼타입이 normal이면 단순한 문자열일 뿐이며 실행중에 편집할 수 없다. • editable이면 실행중에 사용자에 의해 편집이 가능하다. • 중간 수준의 버퍼 타입인 spannable은 편집은 안되지만 문자열의 중간 중간에 표식을 더 삽입 할 수 있다는 뜻이다.

23. 2. 텍스트 뷰 • buffer Type(실습예제1)

24. 2. 텍스트 뷰 • buffer Type(실습예제2)

25. 2. 텍스트 뷰 • buffer Type • 최상위의 버퍼 타입인 Editable은 스팬을 배치할 수 있음은 물론이고 실행 중에 편집도 가능하다. • Editable 인터페이스에는 다음 메서드들이 추가로 정의되어 있다. • Editable insert (int where, CharSequence text) • Editable delete (int st, int en) • Editable append (char text) • void clear () • Editable replace (int st, int en, CharSequence text) • 코드에서 메서드를 호출하면 사용자의 직접적인 조작 없이도 문자열을 편집 할 수 있다.

26. 2. 텍스트 뷰 • buffer Type(실습예제3)

27. 2. 텍스트 뷰 • 문자열 변경 리스너 • 에디트는 편집 관련 기능들이 모두 활성화되어 있어 레이아웃에 배치해 놓기만 해도 즉시 편집이 가능하다. • 텍스트가 변경되는 시점에 특정 작업을 하고 싶다면 다음 메스드로 리스너를 등록 한다. • void addTextChangedListener (TextWatcher watcher) • 편집 이벤트를 처리하는 TextWatcher객체를 생성한 후 리스너로 등록해 놓으면 사용자가 문자열을 편집할 때마다 TextWatcher인터페이스의 다음 메서드가 호출된다. • void beforeTextChanged (CharSequence s, int start, int count, int after) • void afterTextChanged (Editable s) • void onTextChanged (CharSequence s, int start, int before, int count)

28. 2. 텍스트 뷰 • 문자열 변경 리스너

29. 2. 텍스트 뷰 • 문자열 변경 리스너 • 에디트의 입력 길이를 제한하는 정석적인 방법은 입력 필터를 사용한다. • void setFilters (InputFilter[] filters) • 길이 제한 필터는 다음 클래스로 지정하며 생성자의 인수로 제한할 길이를 지정한다. • InputFilter.LengthFilter (int max) • 다음과 같은 예제의 에디트는 3글자까지만 입력을 허용하는 예이다.

30. 2. 텍스트 뷰 • 커서및 선택 관리 • 에디트는 현재 편집 위치를 표시하기 위해 커서를 표시하며 선택 영역이 있을 때는 선택 블록을 표시한다. • 코드에서 커서의 위치나 선택 블록에 간섭이 필요할 경우 다음 메서드로 선택 영역을 변경하거나 조사할 수 있다. • int getSelectionStart() • int getSelectionEnd() • void setSelection (int start, int stop) • void setSelection (int index) • void selectAll () • void extendSelection (int index)

31. 2. 텍스트 뷰 • 커서및 선택 관리(실습예제)

32. 2. 텍스트 뷰 • 키보드 관리 • 에디트의 input Type 속성은 어떤 종류의 값을 입력받을 것인가를 지정하며 이 값에 따라 키보드에 표시되는 키의 종류가 달라진다. • input Type은 Class, Variation, Flag세가지 속성을 연산자로 연결하여 지정한다. • Class : 숫자, 문자, 비밀 번호 등 입력할 문자의 종류를 지정하며, TYPE_CLASS_* 값들이 여러 개 정의 되어 있다. • Variation : Class의 세부적인 속성이다. • Flag : 세부적인 옵션값으로 입력 시 대문자 자동 변환, 여러 줄 입력 등 동작을 지정한다.

33. 2. 텍스트 뷰 • 키보드 관리(예제)

34. 2. 텍스트 뷰 • 키보드 관리(실습예제)

35. 2. 텍스트 뷰 • 키보드 관리 • 키보드를 화면에 정렬하는 방법에 다음 속성들을 사용하면 변화를 최대한 부드럽게 처리할 수 있다.

36. 2. 텍스트 뷰 • 키보드 관리 (예제) AdjustKey1 AdjustKey2

37. 3. 버튼 • 나인 패치 • Button은 일반적인 푸쉬 버튼을 표현하며 손가락으로 눌러 명령을 내린다. • 버튼은 문자열과 배경으로 구성되어진다. • 문자열 : 내용, 크기, 색상 등을 선택 할 수 있다. • 배경 : background속성으로 지정한다. • 다음 메서드로 코드에서 배경을 변경할 수 있는데 단색, 드로블, 드로블 리소스의ID를 전달 받는다. • void setBackgroundColor (int color) • void setBackgroundDrawable (Drawable d) • void setBackgroundResource (int resid) • 버튼의 배경으로 사용할 이미지를 drawable폴더에 넣어두고 background속성에 지정하면 이미지가 버튼의 배경에 나타나게 된다.

38. 3. 버튼 • 나인 패치(실습 예제)

39. 3. 버튼 • 나인 패치 • 나인 패치는 아홉 조각의 천을 잘라 하나의 무늬를 만드는 이불 제작 기겁의 하나로 디지털 이미지에서 원리를 응용한 것이다. • 나인 패치 이미지는 PNG포맷이며 .9.png를 지정하여 일반적인 이미지와 구분한다. • 나인 패치는 이미지의 원래 모양 외에 바깥쪽에 1픽셀 너비의 투명한 영역을 추가로 가지며, 영역에 검정색 점을 찍어 확장 및 텍스트 배치 영역에 대한 정보를 기록한다.

40. 3. 버튼 • 화살표 버튼 • 버튼 위젯을 정의하는 소스는 다음과 같다. • 버튼은 스타일만 다른 텍스트 뷰이며 스타일은 결국 속성의 집합이므로 속성만 다른 텍스트 뷰이다.

41. 3. 버튼 • 화살표 버튼(실습예제)

42. 3. 버튼 • 라디오 버튼 • Button으로부터 파생되는 서브 클래스들. • CompoundButton은 체크, 언체크의 두 가지 상태를 가지며, 코드에서 체크 상태를 변경 및 조사할 때는 다음 메서드를 사용한다. • public void setChecked (boolean checked) • public void toggle () • public boolean isChecked ()

43. 3. 버튼 • 라디오 버튼 • 체크 상태와 언체크 상태를 관리하는 방법이나 표현방법은 위젯마다 다르다. • 라디오 버튼은 선택 가능한 여러 개의 값 중 하나를 입력 받을 때 사용한다. • RadioGrouup은LinearLayout의 서브 클래스이며라디오 그룹을 일렬로 배치한다. • 그룹내에 속한 라디오 버튼의 체크 상태를 변경할 때는 다음 메서드를 사용한다. • void check(int id) • void clearCheck() • int getCheckedRadioButtonId() • 버튼의 체크 상태가 바뀔 때는 OnCheckedChangeLisener인터페이스의 메서드가 호출된다. • void onCheckedChanged(RadioGroup group, int checkedId)

44. 3. 버튼 • 라디오 버튼(실습예제)

45. 3. 버튼 • 이미지 버튼 • ImageButton은 버튼 대용으로 쓸 수 있는 위젯이다. • 표면에 이미지를 표시할 수 있으며 상태에 따라 다른 이미지를 보여주는 것도 가능하다. • 텍스트는 출력할 수 없으며 이미지만 표시할 수 있다. • Bitmap객체를 표면에 바로 출력할 수 있는 능력이 있다.