Android – Day 1

화면 크기, 해상도(세로, 가로)의 변화에 맞추어 화면을 구성하는 것.

레이아웃

텍스트뷰

이미지뷰

. . . .

사용자와 상호작용하는 요소.

위젯

뷰(View)

위젯 등 화면을 구성하는 요소인 객체들을 자식으로

갖는다.

자세한 내용은 아래 링크 참조 http://croute.me/391 http://powerhan.tistory.com/107

메시지

콘솔 창에 출력할 수 없는 안드로이드 환경에서 개발자 임의대로 로그를 출력하고 그러한 로그를 잡아 보

여주는 기능

자바스크립트의 console.log와 유사

로그캣(Log, Logcat)

http://developer.android.com/reference/android/util/Log.html

로그캣

출력할 메시지 태그 로그 종류

• Log.e() - 오류 기록

• Log.w() - 경고 기록

• Log.i() - 메시지 기록

• Log.d() - 디버그 기록

• Log.v() - 상세 메시지 기록

알림을 잠깐 동안 띄워주는 메시지 박스 (다이얼로그, Notification의 축소판)

자바스크립트의 alert와 유사

토스트(Toast)

토스트(Toast)

토스트를 표시할 시간

Toast.LENGTH_SHORT Toast.LENGTH_LONG

토스트로 띄워줄 텍스트

(문자열 리소스,

문자열 모두 가능)

Context(= OS의…)

주로 클래스명.this로 씀

토스트를 화면에 띄워주기!

print

토스트(Toast)

사용자를 위한 메시지 기능

로그(캣, Logcat)

개발자를 위한 메시지 기능

위젯 (Widget)

프로젝트 생성 기본 화면

기본 세팅 되어 있는 Xml 소스파일 전체를 지워줍니다.

저장한 후, 다시 레이아웃 에디터로 돌아오면 위와 같은 화면을 볼 수 있습니다.

Drag

버튼을 가지고 기본 구성요소를 설명

각각의 기본 구성요소 (크기) - 설정

오른쪽 메뉴에서 간단히 설정 가능

각각의 기본 구성요소 (크기) - 샘플

Width가“match_parent(= fill_parent)” 일 때

Width가 “wrap_content” 일 때

현재 뷰의 최대 크기로 자동 조절 내용(문자열 ‘button’)을 감싸게 함.

부모 뷰의 최대 크기로 자동 조절

각각의 기본 구성요소 (크기) - Xml

“wrap_content” => 현재 뷰의 최대 크기로 자동 조절 (내용을 감싸게) “match_parent” => 부모 뷰까지의 최대 크기로 자동 조절 (=“fill_parent”, 같은 기능이지만 API 8 이후부터 지원되는 match_parent를 사용하는 것이 권장사항임.)

각각의 기본 구성요소 (치수) - 비교

각각의 기본 구성요소 (치수) - 비교

해상도 : 1280 x 800

해상도 : 480 x 800

아이콘, 이미지 등 원하는 컨텐츠가 해상도에 따라서 가변적인 크기를 가질 수 있어야 함.

각각의 기본 구성요소 (치수)

http://developer.android.com/guide/topics/resources/more-resources.html#Dimension http://javacan.tistory.com/233

자세한 내용은 아래 링크 참조

• 수치 단위 정의 • 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 화면에서 픽셀 하나에 해당하는 값이다.

각각의 기본 구성요소 (치수) – px, dp

1280 x 800 480 x 800

1 : 1 비율로 비교함

각각의 기본 구성요소 (치수) – px, dp

1280 x 800 480 x 800

각각의 기본 구성요소 (치수) – px, dp

1280 x 800

480 x 800

각각의 기본 구성요소 (치수) – px, dp

1280 x 800 480 x 800

각각의 기본 구성요소 (치수) – px, dp

1280 x 800 480 x 800

각각의 기본 구성요소 (치수) - 설정

Properties에서 직접 치수 입력 가능

각각의 기본 구성요소 (치수) - Xml

각각의 기본 구성요소 (여백)

윤지수 교수님 HCJ수업 3주차 CSS기본 강의 자료에서 발췌

각각의 기본 구성요소 (여백)

마진 O, 패딩 X 마진 O, 패딩 O 마진 X, 패딩 O

각각의 기본 구성요소 (여백) - 샘플

마진(margin)의 영역 설정은 녹색 영역(실제로는 투명)의 크기 변화를, 패딩(padding)의 영역 설정은 백색 영역(투명)의 크기 변화를 가져온다.

Button

paddingBottom

marginRight

Layout

각각의 기본 구성요소 (여백) - 설정

Properties의 해당 속성을 통해 여백을 줄 수 있다.

마진이나 패딩 중 하나만 적용해도 대부분의 원하는 레이아웃을 구성할 수 있다.

각각의 기본 구성요소 (여백) - Xml

android:layout_margin marginLeft marginRight marginTop marginBottom

android:_padding paddingLeft paddingRight paddingTop paddingBottom

layout_없음!

패딩 마진

Button

소스 코드 기본 양식

Button

기본 소스

자동완성됨

android:id를 findViewByID를 이용해서 버튼 할당(연결).

자동으로 주소를 할당해, R.Java 소스에 자동으로 기록하고 이를 ADT가 id값을 통해 자동으로 연결해줌

클릭을 호출한 뷰의 id를 잡아준다.

ImageButton

ImageButton

ImageButton

기본 소스

ImageButton

ImageButton

ImageButton

ImageButton

ImageButton

이미지를 버튼으로 사용 가능. 그 외에 버튼(button)과 기능은 동일.

TextView

소스 코드 기본 양식

TextView

TextView

TextView

android:id를 findViewByID를 이용해서 텍스트뷰 할당(연결).

TextView

앞에 생성한 버튼에 TextView의 getText, setText 기능을 할당함

(소스 수정)

TextView

Properties의 Text항목을 수정하여 기본 텍스트 항목값을 바꿀 수 있음.

EditText

EditText

EditText

사용자가 직접 수정할 수 있음. 이외에 텍스트뷰(TextView)와 기능은 동일.

소스 코드 기본 양식

EditText

EditText

EditText

EditText

EditText

마찬가지로 Properties의 Text항목을 수정하여 기본 텍스트 항목값을 바꿀 수 있음.

ImageView

ImageView

소스 코드 기본 양식

ImageView

Asset에 이미지뷰에 보여줄 이미지 파일을 삽입

ImageView

ImageView

ImageView

ImageView

OnClick

InputStream을 선언하고 이미지 주소를 통해 가져온 이미지를 Drawable로 만든 뒤,

이미지 뷰에 표시한다.

레이아웃 (Layout) LinearLayout

LinearLayout

Vertical Horizontal

. . .

새로 컨텐츠가 추가될 때마다 아래 방향으로 늘어섬

새로 컨텐츠가 추가될 때마다 오른쪽 방향으로 늘어섬

. . .

Orientation

LinearLayout

Properties Orientation을 통해 직접 조작 가능

Vertical

Horizontal

Orientation

LinearLayout

android:orientation=“horizontal” or “vertical“ 뷰들을 수직으로(vertical) 배치하느냐, 수평으로(horizontal) 배치하느냐를 속성으로 줌.

Orientation

LinearLayout

같은 컨텐츠지만, 차지하는 비율을 다르게 설정함

weight

LinearLayout

android:layout_weight= “1”, “2”, Etc… 뷰들간의 배치 비율을 정해주는 것으로, 서로의 비율을 바탕으로 레이아웃이 그려지게 됨.

1 : 2

weight

LinearLayout weight

배치하는 컨텐츠의 길이는 wrap_content로 작성하면 되나요?

반드시 0(dp)으로 설정해주어야 함!

LinearLayout weight

화면의 크기가 충분히 크면 상관이 없으나..

Width - wrap_content Height - match_parent Weight - 1 7개의 컨텐츠를 위와 같이 설정함.

화면의 크기가 컨텐츠가 모두 들어가지 못할 정도로 작을 경우… (Width, Height, Weight는 앞과 동일)

wrap_content를 먼저 적용한 후, weight값으로 조정되기 때문에

컨텐츠 크기에 따라 레이아웃이 제멋대로 구성됨.

따라서, 고정해줄 값(Height)은 match_parent로 두고, Weight값을 적용해줄 값(Width)은0(dp)으로 설정하여 Width를 설정한 Weight 값대로 적용할 수 있게 해준다.

Width : 0dp Height : match_parent Weight : 1

LinearLayout weight

LinearLayout

컨텐츠 끼리 Weight을 통해 비율을 결정할 수 있음.

Weight 값을 주려는 수치(Width or Height)를 0(dp)로 처리해줘야 Weight이 제대로 작동함.

weight

LinearLayout weight

레이아웃 안에서 컨텐츠들의 기본 위치를 설정해주는 것

LinearLayout gravity

Properties에서 컨텐츠 Gravity 설정가능

LinearLayout gravity

LinearLayout

bottom일 때 center일 때

LinearLayout gravity

LinearLayout

android:gravity="center“, “top”, “bottom”, Etc… 뷰 내부의 개체들을 어떻게 배치(정렬)할 것인지를 정함. ( 바(|, bar)를 가지고 2개로 플래그를 지정하는 것도 가능함)

gravity

LinearLayout

Properties에서 여러 조건으로도 Gravity 설정가능

gravity

LinearLayout gravity 복수 조건

center_horizontal | top일 때 bottom | right일 때

center_vertical | right일 때

LinearLayout gravity 복수 조건

간단한 실습 예제

사용할 색들의 코드표

RED – #FF0000 ( = #F00) ORANGE – #FFA500 YELLOW – #FFFF00 ( = #FF0) GREEN – #00FF00 ( = #0F0) BLUE – #0000FF ( = #00F) INDIGO – #4B0082 VIOLET – #EE82EE Etc BLACK – #000000 ( = #000)

– #FFFFFF ( = #FFF)

과제

LinearLayout으로 완성해보기