Microsoft PowerPoint UI-Layout.Menu.pptx

Transcription

1 To be an Android Expert 문양세강원대학교 IT 대학컴퓨터학부

2 User Interface 개요 Declaring Layout Creating Menus 2

3 View: user interface 의기본단위 사각형 (rectangle) 영역을차지하며, 그리기및이벤트처리의기본단위이다. Widget 을생성하기위한기본클래스이다. 예 : 버튼, 텍스트창, 이미지뷰, 시계 ViewGroup (LinearLayout) Views ViewGroup: Layoutclass 제공을위한기본단위 View 혹은 ViewGroup을포함하는 invisible container이다. 예 : LinearLayout, TableLayout ViewGroup (TableLayout) 3

4 ViewGroup(Layout) 은 ViewGroup이나 View를포함하여계층구조를형성한다. 계층구조의순서에따라화면에 View 들이그려진다. 4

5 LinearLayout TextView TextView Spinner Table Layout Button Relative Layout TableRow TableRow Text View Edit Text Button Butto n Button Button Button Button Button 이모양은다음페이지의 XML로구성되어있다. 5

6 6

7 ( 앞서설명한바와같이 ) view hierarchy 를표현하는일반적인방법은 XML layout 파일을사용하는것이다. XML 엘리먼트의이름은그것이나타내는 Java 클래스각각에해당한다. <TextView> 는 UI에뷰 ( 텍스트뷰 ) 를하나만들고, <LinearLayout> 은 UI에 LinearLayout 뷰그룹을하나만든다. 레이아웃리소스가안드로이드시스템에의해로드될때, 각엘리먼트에해당되는클래스가런타임오브젝트로초기화된다. 7

8 그림 : from kandroid.org 8

9 1. 프로젝트생성 (1/2) UiPracticeFirst UiPracticeFirst ui.practice.first UiPracticeFirst 9

10 1. 프로젝트생성 (2/2) 10

11 2. 레이아웃변경 (1/2) 11

12 2. 레이아웃변경 (2/2) 12

13 3. Java class 와실행 (1/2) 13

14 3. Java class 와실행 (2/2) 14

15 웨젯은사용자상호작용 (user interaction) 을위한인터페이스를제공하는 view object이다. 간단하면서대표적인위젯은 TextView, Button, Checkbox 등이다. 좀더복잡한위젯으로 DatePicker, Clock, Spinner 등이제공된다. 자기자신만의 custom view object를정의하거나, 기존위젯을확장혹은조합하여 customized widget 을생성할수있다. 15

16 그림 : from kandroid.org 16

17 그림 : from kandroid.org 17

18 그림 : from kandroid.org 18

19 Java 프로그램에서뷰 ( 위젯 ) 과의 interaction 이필요하다면, Event listener를정의하고, 이를해당뷰에등록하거나, 뷰에이미존재하는 callback method를 override한다. Event listener 정의하고, 등록하기 보다일반적으로이벤트를처리하는방법이다. 해당뷰에이벤트가발생했을때, 이의처리를위한 callback method 를등록하는 방법이다. On<something>Listener 형태의인터페이스에,on<something>() 형태의 callback method를 seton<something>listener() 를사용하여등록한다. 예 : OnClickListener에 onclick() 을 setonclicklistener를사용하여해당뷰에등록한다. 19

20 자신의 callback method 를 override 하기 이방법은자신만의 view class 를구현했을때, 해당 view 에대한 이벤트를처리하기위한방법이다. ( 고급사용에해당하므로 ) 자세한내용은생략한다. 20

21 ( 앞서의 layout 예제에서 ) 버튼을누르는이벤트를처리하는예제 21

22 22

23 주요메뉴 디바이스의 MENU 키를눌러서나타나는메뉴 : OptionsMenu 특정이벤트 ( 주로버튼오래누르기 ) 에반응하여나타나는메뉴 : ContextMenu 메뉴도뷰계층구조를사용하여구조화된다. oncreateoptionsmenu() 혹은 oncontextoptionsmenu() 를사 용하여, 메뉴에포함되기를원하는아이템들을선언한다. 메뉴또한자신의이벤트를처리한다. 메뉴가선택되었을때, 처리 할액션을구현하기위해, onoptionsitemselected() 및 oncontextitemselected() 를사용한다. 23

24 OptionsMenu 예제 24

25 ContextMenu 예제 Long click 25

26 User Interface 개요 Declaring Layout Creating Menus 26

27 XML 로 UI 엘리먼트선언하기 XML 을사용하여 layout 및 widget 들을선언할수있다. XML 에서사용한어휘 ( 특히, id 및 string) 는프로그램내에서해 당엘리먼트의제어를위해사용된다. 프로그램과독립적으로수행되며, 일반적으로사용하는방법이다. 런타임에 layout 엘리먼트를인스턴스화하기 애플리케이션프로그램내에서 View 및 ViewGroup 오브젝트를 ( 동적으로 ) 만들수있다. 프로그램에종속적이며, ( 익숙하지않은상태에서는 ) 가급적권장하지않는다. 27

28 XML 소스 Layout viewer View hierarchy 28

29 /res/layout/l 디렉토리에.xml 확장자로이름짓는다. 꼭 main.xml일필요는없으며, 대개하나의 XML 파일이하나의 activity에대응된다. Root 엘리먼트에서시작하여, ViewGroup 및 View 를적절히사용하여애플리케이션의 layout을디자인한다. 29

30 button02 추가 30

31 Activity.onCreate() callback 에서해당 layout 을로드한다. 31

32 View 및 ViewGroup 오브젝트는다양한 XML 애트리뷰트를지원한다. 공통적으로사용되는애트리뷰트 ( 예 : id) 가있는반면에, 특정 View 나 ViewGroup 에만적용되는것들 ( 예 : TextView 의 textsize) 도있다. 32

33 해당 View(ViewGroup) 를유일하게식별하기위한식별자이다. 심볼은 XML parser 가확장하라 는것을지시한다. XML Parser 33

34 Java 프로그램내에서는 R.id.name 형태로해당오브젝트를레퍼런스한다. 34

35 layout_something 으로명명된애트리뷰트는해당 View/ViewGroup 에대한레이아웃을정의한다. 35

36 View 의위치와크기에대한단위는픽셀이다. 그림 : from kandroid.orgorg 36

37 Layout position 연습하기 37

38 기타 method getmeasuredwidth(), getmeasuredheight() getwidth(), getheight() getpaddingleft(), getpaddingright(), getpaddingtop(), getpaddingbottom() setpadding(int, t int, int, int) 38

39 User Interface 개요 Declaring Layout Creating Menus 39

40 Options 메뉴 디바이스의 MENU 키를눌렀을때나타난다. Icon 메뉴 스크린하단에나타난다. 아이콘을지원하나, 체크박스나라디오버튼은지원하지않는다. Extended 메뉴 Icon 메뉴의 More 를선택했을때보여지는아이템목록이다. Icon 메뉴에아이템을모두표현하지못했을때나타난다. Context 메뉴 View( 특히 button) 를길게눌렀을때, 화면에떠서나타나는메뉴 (floating menu) 이다. Submenu Options 혹은 Context 메뉴목록에의해, 화면에떠서나타나는서브메뉴이다. 40

41 기본예제 41

42 Options Menu 만들기 (1/3) 액티비티내에 oncreateoptionsmenu() ti 를생성한다. add() method 를사용하여메뉴목록을채워넣는다. 42

43 Options Menu 만들기 (2/3) 추가된부분 43

44 Options Menu 만들기 (2/2) 44

45 SubMenu 만들기 (1/3) addsubmenu() method 를사용하여서브메뉴목록을만든다. 45

46 SubMenu 만들기 (2/3) 추가된부분 46

47 SubMenu 만들기 (3/3) scroll 47

48 메뉴에아이콘사용하기 (1/2) seticon() method 를사용하여, 아이콘을변경할수있다.. 48

49 메뉴에아이콘사용하기 (2/2) 49

50 메뉴아이템선택하기 (1/4) 메뉴아이템이선택될때, onoptionsitemselected() method가콜백된다. getitemid() 를사용하여, 어떤아이템이선택되었는지를식별할수있다. 아이템이식별되면, 이에따라적절한액션을취할수있게된다. 50

51 메뉴아이템선택하기 (2/4) 추가 51

52 메뉴아이템선택하기 (3/4) 52

53 메뉴아이템선택하기 (4/4) 53

54 Context Menu 만들기 (1/4) PC 에서마우스오른쪽버튼과유사한기능을수행한다. oncreatecontextmenu() method에서 add() method를사용하여아이템들을등록한뒤, 원하는 view(object) 에해당컨텍스트메뉴를등록 (registerforcontextmenu()) 한다. 54

55 Context Menu 만들기 (2/4) main.xml 세번째버튼 (button03) 을만들어메뉴를등록해본다. 추가된부분 strings.xml 55

56 Context Menu 만들기 (3/4) 추가된부분 56

57 Context Menu 만들기 (4/4) Long click Click for submenu 57

58 메뉴아이템선택하기 (1/4) 메뉴아이템이선택될때, oncontextitemselected() method가콜백된다. getitemid() 를사용하여, 어떤아이템이선택되었는지를식별할수있다. 아이템이식별되면, 이에따라적절한액션을취할수있게된다. 58

59 메뉴아이템선택하기 (2/4) 추가 59

60 메뉴아이템선택하기 (3/4) 60

61 메뉴아이템선택하기 (4/4) 61

62 62