[NEXT] Android 개발 경험 프로젝트 1일차 (Widget, Linear Layout)

4,210 views
3,913 views

Published on

Written by 양지웅
Reviewed, Designed by 손영수

Published in: Technology
1 Comment
23 Likes
Statistics
Notes
No Downloads
Views
Total views
4,210
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
187
Comments
1
Likes
23
Embeds 0
No embeds

No notes for slide

[NEXT] Android 개발 경험 프로젝트 1일차 (Widget, Linear Layout)

  1. 1. Android – Day 1
  2. 2. 레이아웃 화면 크기, 해상도(세로, 가로)의 변화에 맞추어 화면을 구성하는 것.
  3. 3. 위젯 사용자와 상호작용하는 요소. 이미지뷰 텍스트뷰 ....
  4. 4. 뷰(View) 위젯 등 화면을 구성하는 요소인 객체들을 자식으로 갖는다. 자세한 내용은 아래 링크 참조 http://croute.me/391 http://powerhan.tistory.com/107
  5. 5. 메시지
  6. 6. 로그캣(Log, Logcat) 콘솔 창에 출력할 수 없는 안드로이드 환경에서 개발 자 임의대로 로그를 출력하고 그러한 로그를 잡아 보 여주는 기능 자바스크립트의 console.log와 유사 http://developer.android.com/reference/android/util/Log.ht ml
  7. 7. 로그캣 로그 종류 • • • • • 태그 출력할 메시지 Log.e() - 오류 기록 Log.w() - 경고 기록 Log.i() - 메시지 기록 Log.d() - 디버그 기록 Log.v() - 상세 메시지 기록
  8. 8. 토스트(Toast) 알림을 잠깐 동안 띄워주는 메시지 박스 (다이얼로그, Notification의 축소판) 자바스크립트의 alert와 유사
  9. 9. 토스트(Toast) Context(= OS의…) 주로 클래스명.this로 씀 토스트로 띄워줄 텍스트 토스트를 표시할 시간 (문자열 리소스, 문자열 모두 가능) Toast.LENGTH_SHORT Toast.LENGTH_LONG 토스트를 화면에 띄워주기! print
  10. 10. 토스트(Toast) 사용자를 위한 메시지 기능 로그(캣, Logcat) 개발자를 위한 메시지 기능
  11. 11. 위젯 (Widget)
  12. 12. 프로젝트 생성 기본 화면
  13. 13. 기본 세팅 되어 있는 Xml 소스파일 전체를 지워줍니다.
  14. 14. 저장한 후, 다시 레이아웃 에디터로 돌아오면 위와 같은 화면을 볼 수 있습니다.
  15. 15. Drag
  16. 16. 버튼을 가지고 기본 구성요소를 설명
  17. 17. 각각의 기본 구성요소 (크기) - 설정 오른쪽 메뉴에서 간단히 설정 가능
  18. 18. 각각의 기본 구성요소 (크기) - 샘플 현재 뷰의 최대 크기로 자동 조절 내용(문자열 ‘button’)을 감싸게 함. Width가 “wrap_content” 일 때 부모 뷰의 최대 크기로 자동 조절 Width가“match_parent(= fill_parent)” 일 때
  19. 19. 각각의 기본 구성요소 (크기) - Xml “wrap_content” => 현재 뷰의 최대 크기로 자동 조절 (내용을 감싸게) “match_parent” => 부모 뷰까지의 최대 크기로 자동 조절 (=“fill_parent”, 같은 기능이지만 API 8 이후부터 지원되는 match_parent를 사용하는 것이 권장사항임.)
  20. 20. 각각의 기본 구성요소 (치수) - 비교
  21. 21. 각각의 기본 구성요소 (치수) - 비교 해상도 : 1280 x 800 해상도 : 480 x 800 아이콘, 이미지 등 원하는 컨텐츠가 해상도에 따라서 가변적인 크기를 가질 수 있어야 함.
  22. 22. 각각의 기본 구성요소 (치수) • 수치 단위 정의 • DPI, DIP(DP) 개념 http://www.kmshack.kr/282 • px (Pixel, 픽셀) • 화면 위의 하나의 점을 나타내는 단위, 안드로이드에서는 픽셀 대신 DIP를 사용한다 • dpi (Dots Per Inch) • 1인치(2.54cm)에 들어 있는 픽셀(Pixel, PX)의 수(밀도)이다. • dp, dip (Device Independent Pixel) • 어떠한 해상도에서도 독립적인 크기를 나타낼 수 있도록 하는 단위이다. • 1dp는 160-DPI 화면에서 픽셀 하나에 해당하는 값이다. 자세한 내용은 아래 링크 참조 http://developer.android.com/guide/topics/resources/more-resources.html#Dimension http://javacan.tistory.com/233
  23. 23. 각각의 기본 구성요소 (치수) – px, dp 1280 x 800 1 : 1 비율로 비교함 480 x 800
  24. 24. 각각의 기본 구성요소 (치수) – px, dp 1280 x 800 480 x 800
  25. 25. 각각의 기본 구성요소 (치수) – px, dp 1280 x 800 480 x 800
  26. 26. 각각의 기본 구성요소 (치수) – px, dp 1280 x 800 480 x 800
  27. 27. 각각의 기본 구성요소 (치수) – px, dp 1280 x 800 480 x 800
  28. 28. 각각의 기본 구성요소 (치수) - 설정 Properties에서 직접 치수 입력 가능
  29. 29. 각각의 기본 구성요소 (치수) - Xml
  30. 30. 각각의 기본 구성요소 (여백) 윤지수 교수님 HCJ수업 3주차 CSS기본 강의 자료에서 발췌
  31. 31. 각각의 기본 구성요소 (여백)
  32. 32. 각각의 기본 구성요소 (여백) - 샘플 마진 O, 패딩 X 마진 O, 패딩 O 마진 X, 패딩 O Layout Button marginRight paddingBottom 마진(margin)의 영역 설정은 녹색 영역(실제로는 투명)의 크기 변화를, 패딩(padding)의 영역 설정은 백색 영역(투명)의 크기 변화를 가져온다.
  33. 33. 각각의 기본 구성요소 (여백) - 설정 Properties의 해당 속성을 통해 여백을 줄 수 있다. 마진이나 패딩 중 하나만 적용해도 대부분의 원하는 레이아웃을 구성할 수 있다.
  34. 34. 각각의 기본 구성요소 (여백) - Xml android:layout_margin marginLeft marginRight 마진 marginTop marginBottom android:_padding paddingLeft paddingRight layout_없음! paddingTop 패딩 paddingBottom
  35. 35. Button 소스 코드 기본 양식
  36. 36. Button
  37. 37. 기본 소스
  38. 38. 자동완성됨
  39. 39. android:id를 findViewByID를 이용해서 버튼 할당(연결).
  40. 40. 자동으로 주소를 할당해, R.Java 소스에 자동으로 기록하고 이를 ADT가 id값을 통해 자동으로 연결해줌
  41. 41. 클릭을 호출한 뷰의 id를 잡아준다.
  42. 42. ImageButton
  43. 43. ImageButton
  44. 44. ImageButton 기본 소스
  45. 45. ImageButton
  46. 46. ImageButton
  47. 47. ImageButton
  48. 48. ImageButton
  49. 49. ImageButton 이미지를 버튼으로 사용 가능. 그 외에 버튼(button)과 기능은 동일.
  50. 50. TextView 소스 코드 기본 양식
  51. 51. TextView
  52. 52. TextView
  53. 53. TextView android:id를 findViewByID를 이용해서 텍 스트뷰 할당(연결).
  54. 54. TextView 앞에 생성한 버튼에 TextView의 getText, setText 기능을 할당함 (소스 수정)
  55. 55. TextView Properties의 Text항목을 수정하여 기본 텍스트 항목값을 바꿀 수 있음.
  56. 56. EditText
  57. 57. EditText
  58. 58. EditText 소스 코드 기본 양식 사용자가 직접 수정할 수 있음. 이외에 텍스트뷰(TextView)와 기능은 동일.
  59. 59. EditText
  60. 60. EditText
  61. 61. EditText
  62. 62. EditText
  63. 63. EditText 마찬가지로 Properties의 Text항목을 수정하여 기본 텍스트 항목값을 바꿀 수 있음.
  64. 64. ImageView
  65. 65. ImageView 소스 코드 기본 양식
  66. 66. ImageView Asset에 이미지뷰에 보여줄 이미지 파일을 삽입
  67. 67. ImageView
  68. 68. ImageView
  69. 69. ImageView
  70. 70. ImageView OnClick InputStream을 선언하고 이미지 주소를 통해 가져온 이미지를 Drawable로 만든 뒤, 이미지 뷰에 표시한다.
  71. 71. 레이아웃 (Layout) LinearLayout
  72. 72. LinearLayout Orientation ... ... Vertical 새로 컨텐츠가 추가될 때마다 아래 방향으로 늘어섬 Horizontal 새로 컨텐츠가 추가될 때마다 오른쪽 방향으로 늘어섬
  73. 73. LinearLayout Orientation Horizontal Vertical Properties Orientation을 통해 직접 조작 가능
  74. 74. LinearLayout Orientation android:orientation=“horizontal” or “vertical“ 뷰들을 수직으로(vertical) 배치하느냐, 수평으로(horizontal) 배치하느냐를 속성으로 줌.
  75. 75. LinearLayout weight 같은 컨텐츠지만, 차지하는 비율을 다르게 설정함
  76. 76. LinearLayout weight android:layout_weight= “1”, “2”, Etc… 뷰들간의 배치 비율을 정해주는 것으로, 서로의 비율을 바탕으로 레이아웃이 그려지게 됨. 1 : 2
  77. 77. LinearLayout weight 배치하는 컨텐츠의 길이는 wrap_content로 작성하면 되나요? 반드시 0(dp)으로 설정해주어야 함!
  78. 78. LinearLayout weight 화면의 크기가 충분히 크면 상관이 없으나.. Width - wrap_content Height - match_parent Weight -1 7개의 컨텐츠를 위와 같이 설정함.
  79. 79. 화면의 크기가 컨텐츠가 모두 들어가지 못할 정도로 작을 경우… (Width, Height, Weight는 앞과 동일) wrap_content를 먼저 적용한 후, weight값으로 조정되기 때문에 컨텐츠 크기에 따라 레이아웃이 제멋대로 구성됨.
  80. 80. LinearLayout weight Width : 0dp Height : match_parent Weight : 1 따라서, 고정해줄 값(Height)은 match_parent로 두고, Weight값을 적용해줄 값(Width)은0(dp)으로 설정하여 Width를 설정한 Weight 값대로 적용할 수 있게 해준다.
  81. 81. LinearLayout weight Weight 값을 주려는 수치(Width or Height)를 0(dp)로 처리해줘야 Weight이 제대로 작동함. 컨텐츠 끼리 Weight을 통해 비율을 결정할 수 있음.
  82. 82. LinearLayout weight
  83. 83. LinearLayout gravity 레이아웃 안에서 컨텐츠들의 기본 위치를 설정해주는 것
  84. 84. LinearLayout gravity Properties에서 컨텐츠 Gravity 설정가능
  85. 85. LinearLayout gravity center일 때 bottom일 때
  86. 86. LinearLayout gravity android:gravity="center“, “top”, “bottom”, Etc… 뷰 내부의 개체들을 어떻게 배치(정렬)할 것인지를 정함. ( 바(|, bar)를 가지고 2개로 플래그를 지정하는 것도 가능함)
  87. 87. LinearLayout gravity Properties에서 여러 조건으로도 Gravity 설정가능
  88. 88. LinearLayout gravity 복수 조건 center_horizontal | top일 때 center_vertical | right일 때 bottom | right일 때
  89. 89. LinearLayout gravity 복수 조건
  90. 90. 간단한 실습 예제
  91. 91. 사용할 색들의 코드표 RED ORANGE YELLOW GREEN BLUE INDIGO VIOLET – #FF0000 – #FFA500 – #FFFF00 – #00FF00 – #0000FF – #4B0082 – #EE82EE ( = #F00) ( = #FF0) ( = #0F0) ( = #00F) Etc BLACK – #000000 ( = #000) – #FFFFFF ( = #FFF)
  92. 92. 과제 LinearLayout으로 완성해보기

×