Android UI 구현
학습목표 교육목표 Android application 구성요소 Activity Layout UI 설계 Linear Layout 구현
Android application 구성요소 (1) () Application 구성요소 AndroidManifest.xml
Android application 구성요소 (2) 구성요소 기능 Activity Application 의프리젠테이션계층 UI component 를화면에표시 Windows application 의 Form 과동일기능 Intent Receiver Service Content Provider 메시지전달 framework Event handler 기능 UI 와관계없이오랫동안존재하면서실행되는코드 background 로실행 ( 예 : Mediaplayer) Application data 공유 DB(SQLite) 연동
Android application 구성요소 (3) AndroidManifest.xml
Activity y() (1) Activity 1. 화면정지및 history stack에저장 1. 클릭 2. 선택 Activity 1 Activity 2 Activity 1 2. history stack 에저장된초기화면으로복귀
Activity y( (2) Activity Life Cycle Activity Starts OnCreate() User navigates back to your Activity OnStart() OnResume() OnRestart() Process is Killed Activity is Running New Activity is started Your Activity it comes to the foreground Other applications need memory OnPause() Your Activity is no longer visible OnStop() Your Activity comes to the foreground OnDestroy() Activity is Shut down
Activity y( (3) Activity Method 구성요소 기능 Activity 가생성될때처음호출 OnCreate( ) 리소스초기화 findviewbyid(int) 메소드호출 : Widget 검색 setcontentview(int) 메소드호출 : Widget 화면출력 OnStart ( ) OnResume () OnPause () OnStop ( ) OnDestroy ( ) Activity 화면출력시호출 Activity stack 의 Top 에위치 Activity 화면출력및입력처리시호출 Activity 1 -> Activity 2 : Activity 1 의내용저장 데이터저장, animation 중지, CPU 점유작업중단등수행 더이상 Activity 가 stack 의 Top 에위치하지않으므로 Activity 출력안됨 시스템에서 Activity 제거
Welcome.java Activity y( (4)
Activity y( (5) Foreground activity 최상위화면의 activity 로가장중요한프로세스 메모리부족시마지막으로제거 Visible activity 화면에보이는 activity 로 foreground activity 가아닌 activity Background activity 화면에보이지않고 stop 상태의 activity 메모리부족시 foreground, visible activity 보다먼저제거 onsaveinstancestate(bundle savedinstancestate) method 호출 - savedinstancestate : 중요데이터저장 oncreate( ) method 에서 savedinstancestate parameter 를 이용하여 Background activity 제거전의상태로복귀가능 Empty Process Service, Broadcast Receiver er 클래스와같이 activity, it application component 도없는프로세스 메모리부족시즉시제거
Layout (1) Layout 기능 분류 화면구성 FrameLayout LinearLayout TableLayout AbsoluteLayout RelativeLayout
Layout (2) View 클래스 기능 직사각형형태의 layout 과각종정보저장 화면크기조절, Layout 구성, draw, focus 변화 Scrolling, key 처리 Widget 의 base class Widget Text, EditText, Button, RadioButton, Checkbox, ScrollView 등과같이 화면에컴포넌트처럼동작하는것 Widget 을이용하면 UI 를빠르게구현
Layout (3) View 크기지정단위 px (pixels) dip (device independent pixels) sp (scaled pixels best for text size) pt (points) in (inches) mm (millimeters)
Layout (4) ViewGroup View 집합체 Class FrameLayout LinearLayout TableLayout AbsoluteLayout RelativeLayout Gallery GridView 설명 단일객체를표현하기위한 View frame 기능 2개이상의객체를표현할때는마지막으로그린객체화면출력 수평 / 수직으로구성요소배치 창의길이가화면길이를초과하면 scrollbar 자동생성 Table 행 : 가장큰구성요소크기에맞게설정 셀테두리 : hidden 객체의위치를좌표값 (x, y) 으로지정 하나의구성요소를기준으로 Up/Down, Left/Right 로상대적위치지정 image 를수평으로 scroll 하면서보여주는클래스 눈금구조를보여주는클래스 ListView scrolling 되는 column list 를보여줌 ScrollView 수직으로구성요소의열을 scrolling
Layout (5) ViewGroup Spinner Class SurfaceView 설명 1 line textbox 에 list item 을하나씩출력 그리기전용표면에직접접근가능 점과 line 을직접 draw 하는 low-level coding 에사용 TabHost click 에반응하는 Tab 목록제공 Tab 클릭시 application 변경 ViewFlipper ViewSwitcher 한번에 1 개의 item 출력 slider show 와같이주기적으로 item 변경출력 ViewFlipper 와동일기능
Layout (6) Tree 구조의 User Interface ViewGroup View ViewGroup View View View View
LayoutParams 클래스 기능 Layout (7) View 객체를그리기위한정보를부모객체에전송 각객체의 Width, Height 설정 WRAP_CONTENT : 필요한최소크기 FILLPARENT : 부모객체와여백을제외한모든공간 Width = Fill_Parent Height = Wrap_Content Width = Wrap_Content Height = Wrap_Content
Layout (8) LayoutParams subclass 설정 자식객체 부모객체의속성에맞는 LayoutParams 지정 LinearLayout View RelativeLayout View LinearLayout. L LinearLayout. L LinearLayout. L LayoutParams LayoutParams LayoutParams RelativeLayout. LayoutParams View View View RelativeLayout. LayoutParams RelativeLayout. LayoutParams
UI 설계 UI 설계 방법 1 XML 프로그래밍 \res\layout\main.xml Element 방법 2 Java 프로그래밍 Attribute t \src\*.java
Linear Layout 구현 (1) () Android 프로젝트생성 프로젝트명 : Android_LinearLayout 1. 클릭
Linear Layout 구현 (2) 2. Android_LinearLayout 입력 3. 클릭 4. Android_LinearLayout 입력 5. com.inhatc.android_linearlayout 입력 6. Android_LinearLayout 입력 7. 클릭
UI 설계 Linear Layout 구현 (3) LinearLayout 01 TextView01 TextView02 TextView03 LinearLayout 02 TextView04
Linear Layouts Linear Layout 구현 (4) TextView 삭제 8. 클릭 9. 클릭 10. 클릭
Linear Layout 구현 (5) LinearLayout 추가 11. 클릭 12. 클릭 13. 클릭
Linear Layout 구현 (6) LinearLayout 01 속성지정 컨트롤 속성지정 id="@+id/linearlayout01" LinearLayout01 layout_width= width= fill_parent" layout_height="fill_parent" layout_weight="1" orientation="horizontal"
Linear Layout 구현 (7) TextView 추가 14. 클릭 15. 클릭 16. 클릭
Linear Layout 구현 (8) TextView 01 ~ 03 속성지정 컨트롤 속성지정 TextView01 TextView02 TextView03 id="@+id/textview01" layout_width="wrap_content" layout_height="fill_parent" h " text="red" gravity="center_horizontal" id="@+id/textview02" layout_width="wrap_content" layout_height="fill_parent" text= Green" gravity="center_horizontal" id="@+id/textview03" layout_width="wrap_content" t t" layout_height="fill_parent" text= Blue" gravity="center center_horizontal horizontal" layout_weight="1" background="#ff0000" textcolor="#ffffff" textstyle="bold" layout_weight="1" background="#00ff00" textcolor="#ffffff" textstyle="bold" layout_weight="1" background="#0000ff" textcolor="#ffffff" textstyle="bold"
Linear Layout 구현 (9) TextView 속성지정결과
Linear Layout 구현 (10) LinearLayout 추가 17. 클릭 18. 클릭 19. 클릭
Linear Layout 구현 (11) LinearLayout02 속성지정 컨트롤 속성지정 id="@+id/linearlayout02" LinearLayout02 layout_width= width= fill_parent" layout_height="fill_parent" layout_weight="1" orientation= vertical"
Linear Layout 구현 (12) LinearLayout02 속성지정결과 20. 클릭후속성지정
Linear Layout 구현 (13) TextView 추가 21. 클릭 22. 클릭 23. 클릭
Linear Layout 구현 (14) TextView 04 속성지정 컨트롤 속성지정 id="@+id/textview04" layout_width="fill_parent" layout_height="twrap_content" TextView04 typeface="normal" text="textview 04 in LinearLayout 02" gravity="center_horizontal" layout_weight="1" background="#ffffff" textsize="12pt" tsi t" textcolor="#0000ff" textstyle="bold
Linear Layout 구현 (15) TextView04 속성지정결과 25. 클릭후속성지정
Linear Layout 구현 (16) Main.xml 저장 26. 클릭 27. 클릭
Main.xml Linear Layout 구현 (17) 28. XML code 추가확인
Linear Layout 구현 (18) Android 프로젝트실행 29. 클릭 30. 클릭 31. 클릭
실행결과 Linear Layout 구현 (19) 32. 클릭 33. 결과확인
Linear Layout 구현 (20) Home 에서 Android 애플리케이션실행하기 1. 클릭 2. 클릭
실습 1 : XML 로 Linear Layout 구현 (1) Android_LinearLayout 프로젝트 ( 실습시간 : 20 분 ) main.xml 파일을프로그래밍하여아래그림과같이구현하시오. 단계 1 : LinearLayot01의 Blue TextView 오른쪽에 Grey TextView05 추가 단계 2 : LinearLayot02의 TextView04 아래에 TextView06 추가
실습 1 : XML 로 Linear Layout 구현 (2) Solution Main.xml
실습 1 : XML 로 Linear Layout 구현 (3) TextView05 XML Code TextView06 XML Code
학습요약 Android application 구성요소 Activity Layout UI 설계 Linear Layout 구현