만들면서 배우는 Android 세미나

1. 만들면서 배우는 Android 세미나 1. 곱셈 계산기 만들기 SPARCS 11 KAIST 11 최낙현(bbashong)

2. 잠깐 • AVD메니저를 켜자 • 새로운 AVD를 만들자 • device는 nexus s, target은 4.x.x로 • 만든뒤에 start시키자.

3. 세미나의 목적 • 일단 만들고 보자 • 일단 만들고 보자 • 일단 만들고 보자

4. 팁 • 이클립스의 사용에 능숙해지면 개발속도가 엄청나게 상승한다. 이클립스 사용법을 숙지하자. • 세미나 중간중간 알려주는 사용법을 잊지말 것! • 안드로이드는 유난히 정말로 될거같은데 안 될 때가 많다. 그럴땐 googling… • developer.android.com을 애용하자. 모든게 다 나와있다.

5. 이번 세미나의 최종 목표 • 곱셈 계산기

6. Layout • open layout -> article_main.xml • 다음과 같이 수정하자 • 자동완성을 반드시 사용할 것 큰 도움이 된다.(ctrl + space)

8. Layout • 실행해보자

9. what are we doing? - 1 • 우리가 방금 고친게 뭔가요? • 안드로이드에선 어플리케이션의 겉모습을 미리 정의 할 수 있다.( 디자인과 프로그래밍의 분리) • 그 겉모습을 Layout이라고 하며 xml형식으로 정의할 수 있다. • LinearLayout이 뭔가요? • Layout은 FrameLayout, RelativeLayout, AbsoulteLayout, LinearLayout으로 나뉜다. 주로 RelativeLayout을 이용하지만 간단한 레이아웃은 LinearLayout을 이용한다. • LinearLayout은 layout내의 내용물들을 직선형으로 배치한다. • 결과적으로 실행화면에서 각각의 element가 직선형으로 배치되 있는 것을 확인할 수 있다. • xmlns: blahblah..가 뭔가요? • xml형식에서 사용되는데,rootelement에 이 속성을 줘야 이 xml이 안드로이드 layout을 나타내는 xml입니다 라고 말할 수 있음.

10. 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의 한 예 이다.

11. ctd • sp? dp? • dp는 안드로이드에서 길이를 나타내는 단위 • sp는 글자의 크기를 나타내는 단위 • 여기까지만 알아두자.. 우리의 목표는 일단 만드는거니까 • 기타 자잘한 설명 • EditText : 수정할 수 있는 텍스트 박스 (브라우저의 주소창 처럼) • hint : editText에 text를 입력하기전에 흐리게 나와있는 text • TextView : 단순하게 텍스트를 담고있는 View

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

14. result

15. 잠깐 • ems=“4”가 뜬금없이 왜 들어가나요? • editText에 글자를 입력하면 입력하는대로 editText가 늘어나버린다. • 이를 방지하기위해 editText의 폭이 글자수 4개만큼만 늘어나도록 하였다.

16. 꾸며보자 • 문제점이 있다. 너무 못생겼다 • 배경화면,margin, padding, gravity 등을 넣어서 예쁘게 꾸며보자

17. 꾸며보자 -1 • 가장 바깥쪽 LinearLayout에서 • android:background="#424242” • android:padding="10dp” 추가 • 모든 EditText에 • android:textColor="#eeeeee” • android:textColorHint="#888888" 추가

18. 꾸며보자 -2 • “X”를 나타내는 TextView에서 • android:layout_height="match_parent” • android:layout_marginLeft="10dp” • android:layout_marginRight="10dp” • android:textColor="#eeeeee" 추가/수정

19. 꾸며보자 -3 • Button에 • 역시 텍스트컬러 #eeeeee추가 • result를 나타내는 TextView에 • android:textSize="50sp” • android:layout_gravity="center” • android:layout_marginTop="50dp” • android:textColor="#eeeeee"

20. Result

21. what are we doing? • textSize, textColor, textColorHint, margin, padding • 설명안해도 뭔지 알죠? • gravity vslayout_gravity • TextVIew에서 TextView안의 text를 가운데로 정렬하려는 목적으로 gravity를 사용하였고 • LinearLayout안에서 textview자체를 가운데로 정렬하려는 목적으로 layout_gravity를 사용하였다. • 즉 gravity는 view 안의 내용물을 정렬,layout_gravity는 view 자체를 부모 viewgroup내에서 정렬

22. RelativeLayout

23. RelativeLayout • LinearLayout의 문제점 • LinearLayout은 간편하게 View를 일렬로 배열할 수 있다는 장점이 있다. • 하지만 복잡한 layout을 구현할 때,depth가 너무 깊어진다.(부모안의 자식안의 자식안의 자식안의…) • 예를 들어 방금 우리가 만든 layout의 depth는 2이다. • depth가 깊어질 수록 layout을 “inflate”하는데 드는 시간이 많아진다. 즉 depth는 작을수록 좋다.

24. RelativeLayout • RelativeLayout • View들을 view간의 상대적인 위치로 배열한다. • 위치를 잡기위해 다른 view를 참조하려면 view의 id가 필요. • @+id/[viewid] 는 새로운 id를 만들 때 • @id/[viewid]는 만들어진 id를 참조할때 • 이 두가지는 기억하고 다음슬라이드의 코드를 보자.

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

28. what are we doing? • 간단한 속성 설명 • 자세한내용은 자동완성을 쓰면 javadoc의 설명이 자세히 나와있음 • 이름들이 전부 직관적으로 되어있기 때문에 부가적인 설명은 생략

29. ctd • 값으로 boolean을 받는 것과,reference를 받는 것을 잘 구분하자. • “X”를 나타내는 TextView에 무슨 짓을 한건가요? • lhs와 alignTop, alignBottom을 동시에 걸어주면 lhs높이만큼 TextView가 늘어난다. • 늘어난 상태에서 gravity=“center”로 정렬을 해주면 X가 정 가운데에 위치한다.(이게 목적)

30. 계산을 해보자 • 실제로 버튼을 누르면 계산이 이루어지도록 코딩을 해보자. • open src -> 프로젝트명 ->MainActivity.java • 꼭 자동완성을 사용하자!!!(ctrl + Space bar) • 자동완성을 사용하면 override해야하는 함수까지 전부 이클립스가 만들어준다. • ctrl + shift + o 로 자동 import를 할 수 있다.

31. 참 쉽죠?

32. 결과

33. What are we doing? • 설명하기 이전에 Activity에 대해서 알아보자

34. Activity • application을 구성하는 기본 단위 • 일반적으로 한 화면은 한 Activity라고 생각하면 된다. • 유저와 interact할 수 있는 화면을 제공한다.

35. Activity LifeCycle

36. What are We doing? • setContentView • 이 Activity의 화면을 구성할 View로 우리가 여태껏 만든 layout을 사용하겠다는 의미이다. • layout도 결국 View라고 이미 언급한 바 있다. • setContentView함수는 xml파일을 파싱한뒤,inflate라는 과정을 통해 view객체를 만들어준다. 그리고 이 view를 activity 에 등록한다. • findViewById • 아까 우리가 RelativeLayout을 만들면서 명명한 id를 이용해 activity에서 view를 찾을 수 있다. • 찾은 view를 알맞은 type으로 캐스팅하여 사용한다.

37. ctd • OnClickListener? • View가 클릭되었을때 불려지는 함수를 담고있는 객체이다. • OnClickListener자체는 Interface이기 때문에 OnClick이라는 함수를 override해주어야 한다. • 이후 button.setOnClickListenr라는 메소드로 listener를 등록할 수 있다. • 등록후엔 button이 눌렸을때 listner.onClick이라는 메소드가 실행된다.

38. HomeWork • 계산기 만들기!

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

40. 실행 예

41. HomeWork • 다음 세미나 전까지 반드시 숙제를 완료하셔야 합니다. • 숙제를 하지 않으면 다음 세미나에서 매점을 쏘셔야 합니다. • 무조건 해오셔야 합니다. • 반드시 해오셔야 합니다. • 안드로이드는 직접 해보는게 배우는데 중요합니다. 세미나만 들어서는 코드한줄도 짤 수 없습니다.

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