로그인 바로가기 하위 메뉴 바로가기 본문 바로가기
난이도
심화

안드로이드 앱 프로그래밍

임시 이미지 정재곤
http://www.boostcourse.org/mo316/notice/2585
좋아요 1436 수강생 20099

아래의 글은 BOOSTER 서포터즈로 활동했던 뮤긴(iraira7***)님이
작성한 부스트코스 후기입니다.
여러분들의 성원에 더 노력하는 부스트코스가 되겠습니다.
감사합니다.
******************************************
1)링크: https://blog.naver.com/iraira7777/221809323905
2)작성날짜: 20/02/14
<본문작성>
이번주는 너무나도 바빴다. 조금 쉴 수 있을 줄 알았지만, 약속이 다 이 주에 밀려있을 줄은 누가 알았겠어.ㅋㅋ

결론부터 말하자면, 이번주는 강의를 많이 듣지 못했다ㅠㅠ 프로젝트 하기도 바쁘다보니 강의 듣는 것을 게을리 하게 된 것 같다.

강의는 점점 사용자와 상호작용이 가능한 기능을 설명하고 있다. 이번에 강의한 내용은 무엇이 있는지 필자와 함께 알아보자.

- Contents -

Table Layout/Scroll View/Event

*해당 포스팅은 아래 강좌를 기반으로 작성되었습니다*

https://www.edwith.org/boostcourse-android/joinLectures/13159

[부스트코스] 안드로이드 프로그래밍 2. 이벤트와 리스트뷰 : edwith

- 부스트코스

www.edwith.org

1. Table Layout, 테이블 레이아웃

분명 저번 포스팅에서는 사람들이 가장 많이 사용하는 레이아웃은 제약 레이아웃, 리니어 레이아웃, 상대 레이아웃과 프레임 레이아웃으로 한정된다고 말했었다. 저 4개의 레이아웃만 있어도 모든 화면 구성이 가능할 것 같은데, 왜 또 다른 레이아웃이 존재하는 것일까? 같이 테이블 레이아웃에 대해서 알아보자.

테이블 레이아웃은 행(Row)와 열(Column)으로 이루어져있다. (출처: 안드로이드 프로그래밍 강의 내용 中)

테이블 레이아웃은 격자 형태의 화면 구성이 가능하다. 각 행(Row)<TableRow>라는 태그로 결정되며, 행 안에 들어가 있는 뷰와 위젯들이 열(Column)의 수를 결정한다. 또한 stretchColumns라는 테이블 레이아웃의 메소드를 활용하여 각 행의 공간 분할을 할 수 있다. (메소드와 함수는 비슷한 말이니, 메소드라는 말이 어색한 사람은 함수로 이해하자!)

예시 XML 코드를 봐보자.

<TableLayout android:layout_width="match_parent" android:layout_height="match_parent" android:stretchColumns="0,1,2">//1. stretchColumns 메소드<TableRow android:layout_width="match_parent" android:layout_height="match_parent"><TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_span="0" android:text="Blabla"/><Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_span="1" android:text="Button"/>//2. layout_span 메소드</TableRow>

예를 들어, <TableLayout>의 태그 안의

android:stretchColumns = “0,1,2”

은 행을 0,1과 2, 즉 3등분을 하겠다는 이야기이며, 각 뷰와 위젯 안의

android:layout_span = "2"

은 인덱스 값의 '2'인 공간, 즉 3등분을 한 공간 중 제일 완쪽의 공간에 해당 뷰와 위젯을 할당하겠다는 뜻이 된다. 테이블 레이아웃은 격자 모양의 레이아웃을 만들 때에 용이하게 사용된다. 물론 리니어 레이아웃을 사용하여도 격자 모양의 레이아웃을 만드는 것이 가능하긴 하다. 하지만 리니어 레이아웃은 마진값과 배치등을 고려해야 한다는 단점이 있다. 그 반면, 테이블 레이아웃을 사용하면 위의 내용들을 고려할 필요 없이 더욱 쉽고 예쁘게 격자 모양의 화면 구조를 만들 수 있다는 장점이 있다.

2. Scroll View, 스크롤 뷰

핸드폰의 화면이 아무리 커도, 한 화면에 담을 수 있는 정보의 양은 한정적이다. 한 화면에 많은 양의 정보를 담을 수 있는 방법은 무엇일까?

가장 간단한 방법은 전체 화면의 일부분만을 보이게 한 뒤, 스크롤(Scroll)을 활용하여 화면을 이동할 수 있게 하는 것이다. 이 방법은 거의 모든 앱에서 사용하고 있는 방식이며, 스크롤 뷰(Scroll View)는 이러한 방법이 가능하게 한다.

스크롤 뷰를 활용하여 더 많은 정보를 담을 수 있다. (출처: 안드로이드 프로그래밍 강의 내용 中)

스크롤 뷰를 활용하여 스크롤 뷰를 만드는 방법은 간단하다! 스크롤 뷰 안에 들어갈 뷰와 위젯들을 넣기만 하면 완성이다. 뷰와 위젯들을 스크롤 뷰로 감싸주면 스크롤 뷰가 뷰의 전체 영역을 계산하게 되고, 화면 영역을 넘어간 부분에 대해서는 저절로 스크롤이 생기게 된다.

예시 XML 코드를 봐보자.

<ScrollView android:layout_width="match_parent" android:layout_height="match_parent" > <ImageView android:id = "@+id/image" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </ScrollView>

스크롤 뷰 태그 안에 여러 뷰와 위젯들을 담은 것 뿐이다. 위와 같이 간단한 구조 만으로도 스크롤을 만들 수 있다!

3. Event, 이벤트

지금까지 우리가 배운 것은 레이아웃과 뷰, 즉 앱상 화면 구조와 디자인에 대해서만 배웠지, 상호작용에 대해서는 이야기를 하지 않았다. 앱의 목적은 사용자에게 즐거움과 편리함을 가져다 주기 위함이니, 사용자와의 상호작용이 되는 것은 필수이다. 버튼이 눌리면 원하는 기능이 실행되고, 기기를 수평으로 돌리면 자동으로 화면이 넓어지는 것 과 같은 상호작용 말이다. 이제 이러한 기능들의 기본이 되는 이벤트(Event)에 대해서 알아보자.

당신이 한 앱에 들어갔는데 화면에 버튼이 놓여져 있다. 당신은 누르고 싶은 충동을 참지 못하고 버튼을 눌러버린다. 자, 방금 상호작용이 일어났다. 당신이 버튼을 누르는 순간에 이벤트가 발생하게 된 것이다. 이벤트의 종류는 다양하다. 버튼이 눌리는 것, 기기 화면이 가로로 바뀌는 것, 특정한 키가 눌리는 것, 화면을 슬라이드 하는 것 등, 이벤트의 종류는 다양하다.

버튼을 누름으로써 발생한 이벤트는 곧장 버튼에 내장된 리스너(Listener)에게 전달된다. 리스너는 버튼내에 등록되어 이벤트를 전달받는 역할을 하며, 특정 이벤트에 해당하는 메소드가 호출되게 된다. 해당 메소드는 웹페이지를 오픈하는 메소드였으며, 당신은 앱에서 켜진 인터넷의 화면을 보게 된다.

자, 정리해보자. 버튼을 누름으로써 발생하는 이벤트는 버튼내에 등록된 리스너에게 전달되고, 리스너는 전달된 이벤트에 알맞는 메소드를 호출하게 된다. 위와 같은 과정을 거치면서 앱의 사용자와 앱 간의 상호작용이 성립되게 된다.

4. Wrap-up

앱 개발의 기본적인 원리는 간단하다! 레이아웃을 활용하여 화면 구조를 만들고, 뷰와 위젯을 활용하여 원하는 화면을 구성하고, 이벤트와 리스너를 활용하여 상호작용을 하는 앱을 만들면 앱 개발의 끝이다!

하지만 이를 구현하는 과정은 결코 쉽지 않다. 다음 포스팅에서는 이러한 이벤트를 전달받는 리스너 클래스와 이를 구현하는 소스코드에 대해서 알아보자! 다음 포스팅부터 난이도가 급상하니, 필자도 그렇고 이 글을 읽는 여러분도 그렇고 더욱 열심히 공부를 해야겠다.

만약 이 포스팅을 보고도 이해가 안되는 점이 있다면 바로 부스트코스 안드로이드 프로그래밍 무료강의를 듣자! 필자보다 설명력이 1,000배는 좋은 강사분이 친절하게 하나 둘 다 가르쳐준다. 그 강의를 듣고 이 포스팅을 보면 색다른 느낌이 들지 않을까 싶다.

 

*********************************************