만들면서 배우는 Android 세미나1. 곱셈 계산기 만들기

SPARCS 11KAIST 11최낙현 (bbashong)

잠깐

AVD 메니저를 켜자

새로운 AVD 를 만들자

device 는 nexus s, target 은 4.x.x 로

만든뒤에 start 시키자 .

세미나의 목적

일단 만들고 보자

일단 만들고 보자

일단 만들고 보자

팁

이클립스의 사용에 능숙해지면 개발속도가 엄청나게 상승한다 . 이클립스 사용법을 숙지하자 . 세미나 중간중간 알려주는 사용법을 잊지말 것 !

안드로이드는 유난히 정말로 될거같은데 안 될 때가 많다 . 그럴땐 googling…

developer.android.com 을 애용하자 . 모든게 다 나와있다 .

이번 세미나의 최종 목표

곱셈 계산기

Layout

open layout -> article_main.xml

다음과 같이 수정하자

자동완성을 반드시 사용할 것 큰 도움이 된다 .(ctrl + space)

Layout

실행해보자

what are we doing? - 1

우리가 방금 고친게 뭔가요 ? 안드로이드에선 어플리케이션의 겉모습을 미리 정의 할 수 있다 . (

디자인과 프로그래밍의 분리 ) 그 겉모습을 Layout 이라고 하며 xml 형식으로 정의할 수 있다 .

LinearLayout 이 뭔가요 ? Layout 은 FrameLayout, RelativeLayout, AbsoulteLayout, LinearLayout 으로

나뉜다 . 주로 RelativeLayout 을 이용하지만 간단한 레이아웃은 LinearLayout 을 이용한다 .

LinearLayout 은 layout 내의 내용물들을 직선형으로 배치한다 . 결과적으로 실행화면에서 각각의 element 가 직선형으로 배치되 있는 것을

확인할 수 있다 .

xmlns: blahblah.. 가 뭔가요 ? xml 형식에서 사용되는데 , root element 에 이 속성을 줘야 이 xml 이

안드로이드 layout 을 나타내는 xml 입니다 라고 말할 수 있음 .

ctd

match_parent 가 뭔가요 ? view 의 가로길이나 세로길이를 부모 view 의 길이와 똑같이 맞추겠다는

뜻이다 . 비슷 한 예로 fill_parent, wrap_content 가 있다 . fill_parent : match_parent 와 같고 deprecated 되었다 . wrap_content : view 안의 컨테츠의 크기에 맞추겠다는 뜻이다 . 부모 view 는 wrap_content, 자식 view 는 match_parent 로 설정하는 실수를

하지 말자 .

그럼 View 는 뭔가요 ? All user interface elements in an Android app are built using View and

ViewGroup objects. A View is an object that draws something on the screen that the user can interact with. A ViewGroup is an object that holds other View (and ViewGroup) objects in order to define the layout of the interface.-from developer.android.com

즉 view 는 UI 를 구성하는 기본적인 단위이고 , viewgroup 은 view 를 포함하는 view 이다 . layout 은 viewgroup 의 한 예 이다 .

ctd

sp? dp? dp 는 안드로이드에서 길이를 나타내는 단위 sp 는 글자의 크기를 나타내는 단위 여기까지만 알아두자 .. 우리의 목표는 일단 만드는거니까

기타 자잘한 설명 EditText : 수정할 수 있는 텍스트 박스 ( 브라우저의

주소창 처럼 ) hint : editText 에 text 를 입력하기전에 흐리게 나와있는

text TextView : 단순하게 텍스트를 담고있는 View

Question

result 를 나타내 주는 textView 가 다른 view 와 같은 줄에 있는데 , 아래 텅텅빈 공간에 이 TextView 를 넣고싶다 . 어떻게 해야할까 ? linearLayout 안에 또다른 LinearLayout 을 넣자 . viewgroup 도 view 이기때문에 viewgroup 에

포함될 수 있다 . 다음 슬라이드를 보자

result

잠깐

ems=“4” 가 뜬금없이 왜 들어가나요 ? editText 에 글자를 입력하면 입력하는대로 editText

가 늘어나버린다 . 이를 방지하기위해 editText 의 폭이 글자수 4

개만큼만 늘어나도록 하였다 .

꾸며보자

문제점이 있다 . 너무 못생겼다

배경화면 , margin, padding, gravity 등을 넣어서 예쁘게 꾸며보자

꾸며보자 - 1

가장 바깥쪽 LinearLayout 에서 android:background="#424242” android:padding="10dp” 추가

모든 EditText 에 android:textColor="#eeeeee” android:textColorHint="#888888" 추가

꾸며보자 - 2

“X” 를 나타내는 TextView 에서 android:layout_height="match_parent” android:layout_marginLeft="10dp” android:layout_marginRight="10dp” android:textColor="#eeeeee" 추가 / 수정

꾸며보자 - 3

Button 에 역시 텍스트컬러 #eeeeee 추가

result 를 나타내는 TextView 에 android:textSize="50sp” android:layout_gravity="center” android:layout_marginTop="50dp” android:textColor="#eeeeee"

Result

what are we doing?

textSize, textColor, textColorHint, margin, padding 설명안해도 뭔지 알죠 ?

gravity vs layout_gravity TextVIew 에서 TextView 안의 text 를 가운데로

정렬하려는 목적으로 gravity 를 사용하였고 LinearLayout 안에서 textview 자체를 가운데로

정렬하려는 목적으로 layout_gravity 를 사용하였다 . 즉 gravity 는 view 안의 내용물을 정렬 ,

layout_gravity 는 view 자체를 부모 viewgroup내에서 정렬

RelativeLayout

RelativeLayout

LinearLayout 의 문제점 LinearLayout 은 간편하게 View 를 일렬로 배열할 수

있다는 장점이 있다 . 하지만 복잡한 layout 을 구현할 때 , depth 가 너무

깊어진다 .( 부모안의 자식안의 자식안의 자식안의… )

예를 들어 방금 우리가 만든 layout 의 depth 는 2이다 .

depth 가 깊어질 수록 layout 을 “ inflate” 하는데 드는 시간이 많아진다 . 즉 depth 는 작을수록 좋다 .

RelativeLayout

RelativeLayout View 들을 view 간의 상대적인 위치로 배열한다 . 위치를 잡기위해 다른 view 를 참조하려면 view 의

id 가 필요 . @+id/[viewid] 는 새로운 id 를 만들 때 @id/[viewid] 는 만들어진 id 를 참조할때 이 두가지는 기억하고 다음슬라이드의 코드를 보자 .

RelativeLayout이런식으로 배열이 이루어진다 .

what are we doing?

간단한 속성 설명 자세한내용은 자동완성을 쓰면 javadoc 의 설명이

자세히 나와있음 이름들이 전부 직관적으로 되어있기 때문에

부가적인 설명은 생략

ctd

값으로 boolean 을 받는 것과 , reference 를 받는 것을 잘 구분하자 .

“X” 를 나타내는 TextView 에 무슨 짓을 한건가요 ? lhs 와 alignTop, alignBottom 을 동시에 걸어주면

lhs높이만큼 TextView 가 늘어난다 . 늘어난 상태에서 gravity=“center” 로 정렬을 해주면

X 가 정 가운데에 위치한다 .( 이게 목적 )

계산을 해보자

실제로 버튼을 누르면 계산이 이루어지도록 코딩을 해보자 .

open src -> 프로젝트명 -> MainActivity.java

꼭 자동완성을 사용하자 !!! (ctrl + Space bar) 자동완성을 사용하면 override 해야하는 함수까지

전부 이클립스가 만들어준다 .

ctrl + shift + o 로 자동 import 를 할 수 있다 .

참 쉽죠 ?

결과

What are we doing?

설명하기 이전에 Activity 에 대해서 알아보자

Activity

application 을 구성하는 기본 단위

일반적으로 한 화면은 한 Activity 라고 생각하면 된다 .

유저와 interact 할 수 있는 화면을 제공한다 .

Activity LifeCycle

What are We doing?

setContentView 이 Activity 의 화면을 구성할 View 로 우리가 여태껏 만든

layout 을 사용하겠다는 의미이다 . layout 도 결국 View 라고 이미 언급한 바 있다 . setContentView 함수는 xml파일을 파싱한뒤 , inflate

라는 과정을 통해 view객체를 만들어준다 . 그리고 이 view 를 activity 에 등록한다 .

findViewById 아까 우리가 RelativeLayout 을 만들면서 명명한 id 를

이용해 activity 에서 view 를 찾을 수 있다 . 찾은 view 를 알맞은 type 으로 캐스팅하여 사용한다 .

ctd

OnClickListener? View 가 클릭되었을때 불려지는 함수를 담고있는 객체이다 .

OnClickListener 자체는 Interface 이기 때문에 OnClick 이라는 함수를 override 해주어야 한다 .

이후 button.setOnClickListenr 라는 메소드로 listener 를 등록할 수 있다 .

등록후엔 button 이 눌렸을때 listner.onClick 이라는 메소드가 실행된다 .

HomeWork

계산기 만들기 !

계산기 example 다행히도 곱하기만 구현하면 됩니다 .

실행 예

HomeWork

다음 세미나 전까지 반드시 숙제를 완료하셔야 합니다 .

숙제를 하지 않으면 다음 세미나에서 매점을 쏘셔야 합니다 .

무조건 해오셔야 합니다 .

반드시 해오셔야 합니다 .

안드로이드는 직접 해보는게 배우는데 중요합니다 . 세미나만 들어서는 코드한줄도 짤 수 없습니다 .

Home

정 못하겠다 하시는분께 1, 2, 3…0 번 숫자버튼만 구현해보세요 ( 곱하기 구현

X)