1 / 46

위젯 (Widget)

6. 위젯 (Widget). 학습목표 가장 기본적인 위젯인 TextView 를 통해 위젯의 일반적인 특징과 프로그래밍 방법을 상세하게 연구해보고 버튼의 사용 방법을 익힌다 . 내용 리소스 텍스트 뷰 버튼. 1. 리소스. 리소스 프로그램은 코드와 리소스로 구성된다 . 리소스는 동작과 직접적인 상관없이 주로 프로그램의 외형 장식을 정의한다 . 리소스는 환경이나 조건에 따라 통째로 교체할 수 있으므로 장비 호환성 확보에 유리하며 , 언어에 따른 지역화도 간단해진다 .

alaula
Download Presentation

위젯 (Widget)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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객체를 표면에 바로 출력할 수 있는 능력이 있다.

More Related