Android Chpater5, 사용자 인터페이스

1. AndroidChpater5, 사용자 인터페이스 천주희 wngml1205@kunsan.ac.kr • 군산대학교 통계컴퓨터과학과 정보과학기술 연구실 2013.01.16

2. 목차 • 뷰/ 레이아웃 개요 • 사용자인터페이스 구축 • 안드로이드 기본 위젯 • 레이아웃 • 레이아웃 구축 • 레이아웃 수정 • 리소스 • 리소스 생성 • 리소스 사용 IST (Information Sciences & Technology) Laboratory

3. 사용자 인터페이스 • 사용자 인터페이스에 언급되는 요소 • 뷰(View) • 위젯(컨트롤) : 직접적으로 화면에 보이는 부분 • 안드로이드의 사용자 인터페이스(UI)를 구성하는 핵심 컴포넌트 • 뷰 그룹 (View Group) • 레이아웃 • 직접적으로 보이지 않지만 뷰를 담는 컨테이너 역할 • 액티비티(Activity) • 사용자가 직접 상호 작용하는 창, 화면 • 사용자 인터페이스를 표기하기 위해 뷰나 레이아웃을 액티비티에 저장함 IST (Information Sciences & Technology) Laboratory

4. 사용자 인터페이스 구축 외부 레이아웃 리소스를 사용 레이아웃 지정 Activity 레이아웃 리소스 ID, 단일 뷰인스턴스를 인자로 사용 XML에서 선언한 위젯을 자바 소스 상에서 접근할 때 사용 • 사용자 인터페이스 구축하기 • New Activity : 빈 화면 위 사용자 인터페이스 배치 • Activity에 사용자 인터페이스 설정 • setContentView매서드 호출 -> 표시할 뷰인스턴스 지정 • 사용자 인터페이스를 코드로 정의하는 방법 • 외부 레이아웃 리소스를 사용하는 방법 • 애플리케이션 로직에서프레젠테이션 계층을 분리하기 때문에, 코드를 수정하지 않고도 화면 출력 형태를 변경할 수 있는 유연성 제공 IST (Information Sciences & Technology) Laboratory

5. 안드로이드 기본 위젯 • 개념 • 자주 사용될 것으로 예상되는 컨트롤을 미리 가지고, 표준 뷰도구 상자에서 제공 • 위젯 컨트롤 • Button : 버튼 • checkBox : checked와 unchecked 상태 가짐 • EditText : 편집 가능한 텍스트 입력 박스, 다중 라인 입력과 자동 줄 바꿈 지원 • ListView: 여러 개의 유사 항목을 목록에 표시, 사용되는 뷰를 묶어서 관리하는 뷰 그룹 • RadioButton : 단 하나의 버튼만 선택된 상태를 가짐 • TextView : 화면 상에 텍스트나 메시지를 표시할 때 사용, 다중 라인 출력과 자동 줄 바꿈, 문자열 서식 지원 IST (Information Sciences & Technology) Laboratory

6. 레이아웃 (Layout) • 개념 • 화면 위에 배치되어 있는 컨트롤의 위치를 동적으로 관리하기 위해 설계된 ViewGroup클래스의 확장 클래스 • 레이아웃 클래스 • FrameLayout : 레이아웃 좌상단 모서리에 고정(여러 개의 뷰를 추가하면 나중에 추가된 뷰가 이전에 추가된 뷰 위에 표시 됨 ) • LinearLayout : 수직 or 수평으로 일직선 상에 배치 • RelativeLayout : 소유하고 있는 뷰의 위치를 뷰와 레이아웃의 경계를 기준으로 상대적인 배치 • TableLayout : 가상 테이블을 생성하고 테이블의 행과 열을 기준으로 뷰 배치 (열을 늘어나거나 줄어들도록 설정 ) • AbsoluteLayout : 절대 좌표 기준으로 배치 IST (Information Sciences & Technology) Laboratory

7. 레이아웃 구축 단일 루트 엘리먼트 가질 것! 최상위 노드는 겹쳐진 레이아웃과 뷰 소유 가능 • 레이아웃 구현 • XML구축 IST (Information Sciences & Technology) Laboratory

8. 리소스 리소스를 항상 최신 상태로 유지하도록 관리하는 것이 간편 → 리소스 저장되는 곳 애플리케이션 아이콘을 비롯한 이미지 등의 시작적 데이터 저장← → 문자열, 상수등의 리소스 저장 • 개념 • 리소스를 코드와 분리하여 관리하는 것이 중요 -> 리소스에 대한외부화 지원 • 리소스의 형태 • 상수값(values), 드로어블(drawable), 레이아웃(layout), 애니메이션, XML, 스타일, 원시 리소스 • 애플리케이션이 빌드 될 때 효율적이고 최적화된 방식으로 변형되고 컴파일 되어 패키지에 포함 -> 프로젝트에 포함된 각각의 리소스에 대한 참조를 담고 있는 R클래스 파일 생성 • 디자인 타입 문법의 검사 가능 • 리소스를 직간접적으로 참조 IST (Information Sciences & Technology) Laboratory

9. 리소스 생성 (1/8) R.java 모든 리소스 파일의 이름에 사용 될 수 있는 문자는 영문 소문자, 숫자,마침표, 밑줄 문자로제한됨 • R 클래스 파일 • 정의한 모든 자원들에 대한 명세서 • 자원들이 프로젝트에 추가될 때 마다 개발 프로그램이 자동 생성 IST (Information Sciences & Technology) Laboratory

10. 리소스 생성 (2/8) 여러 종류의 상수가 하나의 파일 안에 포함된 XML • 리소스의 형태에 따라 각각 다른 xml 파일 에 저장 • 일관성 유지 • 여러 언어를 동시에 지원하는 애플리케이션 Good! • 상수 (Simple Values) 생성하기 • 문자열상수, 색상, 치수, 문자열, 정수 배열 IST (Information Sciences & Technology) Laboratory

11. 리소스 생성 (3/8) Res/values/stirng.xml <B> , <I>, <U> 태그 • 상수 (Simple Values) 생성하기 • 문자열상수 IST (Information Sciences & Technology) Laboratory

12. 리소스 생성 (4/8) • 색상 • 표현방식 • #RGB : 256 색상 • #ARGB : 256 색상 + 16단계 투명도 • #RRGGBB : 16,777,216 색상 • #AARRGGBB : 16,777,216 색상 + 256 알파채널 • 치수 • 표현방식 • dp : 밀도독립적픽셀 단위 (160dp는 1인치와 동일) • sp : 배율 독립적 픽셀 단위 (글꼴 크기와 연동됨) • pt : 포인트, 화면의 물리적인 사이즈 단위 • px : 픽셀, • in : 인치 , 화면의 물리적인 사이즈 단위 • mm : 밀리리터 , 화면의 물리적인 사이즈 단위 IST (Information Sciences & Technology) Laboratory

13. 리소스 생성 (5/8) • 스타일 • 애플리케이션의 색상과 글꼴을 지정하고 저장하기 위해 사용 • 애플리케이션의 모든 화면이 일관성을 가지도록 강제할 수 있음 IST (Information Sciences & Technology) Laboratory

14. 리소스 생성 (6/8) 확장자를 제외한 파일이름 .9.png를 제외한 파일 이름이 리소스 구분자! • 드로어블 • 이미지 파일 (.bmp, .9.png, .jpeg, .gif) • 비트맵 • 동일한파일 이름을 가지면서 확장자만 다른 비트맵 리소스는 하나의 프로젝트에서 사용x • 나인패치 PNG • 이미지가 늘어날 수 있는 영역을 표시한 특별한 png파일 • 애니메이션 • 중첩 애니메이션 (= 트윈스 애니메이션) • 하나의 이미지를 기반으로 자체적으로 변형됨 • 뷰를 회전하고, 이동시키고, 크기를 조절하고, 사라지는 효과를 줌 • 연속 애니메이션 (= 프레임 바이 프레임 애니메이션) • 여러 개의 이미지를 목록에 쌓아두고 하나씩 꺼내서 보여줌 IST (Information Sciences & Technology) Laboratory

15. 리소스 생성 (7/8) res/drawable/count_down.xml • 애니메이션 예제 IST (Information Sciences & Technology) Laboratory

16. 리소스 생성 (8/8) • 레이아웃 • 사용자 인터페이스 구조를 가지는 리소스로, 코드와 디자인을 분리할 수 있게 해주는 역할 • res/layout 폴더 안에 별도의 XML 파일로 저장 • XML 파일 이름 자체가 리소스 구분자 IST (Information Sciences & Technology) Laboratory

17. 리소스 사용 (1/3) R.resourceType.resourceName -> 코드에서 리소스 사용 android.R.resourceType.resourceName -> 시스템에서 리소스 사용 • 코드에서 리소스 사용하기 • 코트에서 리소스를 사용하려면 리소스 ID와 리소스 타입 알아야함 • 시스템 리소스 사용 • 여러 애플리케이션이 공통으로 사용할 수 있는 시스템 리소스를 외부화 하여 제공 • 문자열, 이미지, 애니메이션, 스타일, 레이아웃이 있음 IST (Information Sciences & Technology) Laboratory

18. 리소스 사용 (2/3) @ 리소스 타입 / 리소스 식별자 • 리소스 간 상호 참조 • XML 형태의 리소스 사이에 다른 리소스를 속성 값으로 사용 가능 • 다양한 화면 크기를 가지는 하드웨어 별로 따로 애플리케이션을 만들지 않아도 다양한 크기의 레이아웃 지원 가능 IST (Information Sciences & Technology) Laboratory

19. 리소스 사용 (3/3) 시스템 리소스 사용 현재 사용 중인 테마에서 스타일을 실시간 참조 • 현재 사용 중인 테마에서 스타일을 실시간 참조 • 모든 스타일을 독립적으로 하나하나 정의하지 않고, 현재 사용 중인 테마에서 원하는 속성을 그대로 가져와 사용 IST (Information Sciences & Technology) Laboratory

20. 감사합니다천주희wngml1205@kunsan.ac.kr IST (Information Sciences & Technology) Laboratory