• 1나루토매니아
  • 2뱅이
  • 3푸타코타
  • 4완벽그자체
  • 5해삼
  • 1뱅이
  • 2나루토매니아
  • 3알짜배기
  • 4뱅이
  • 5빙그레우유
안드로이드 강좌 4 - 액티비티(Activity), 뷰(View), 레이아웃(Layout)
연속출석 :
1일 랭킹 : 399위 중장7
45%
45% (1541 /3455)
  • 댓글 0 |
  • 추천 1 |
  • 조회 5012 |
  • 2012-08-09 (목) 16:30
    이번 강좌에서는 액티비티(Activity), 뷰(View), 레이아웃(Layout)에 대한 이해와 실제 XML 레이아웃 파일을 변경하는 것까지 실습해보도록 하겠습니다.

    안드로이드 강좌 4 - 액티비티(Activity), 뷰(View), 레이아웃(Layout)
    액티비티, 뷰 그리고 레이아웃
    액티비티(Activity)
    액티비티는 안드로이드 어플리케이션을 구성하는 가장 기본적인 빌딩블록입니다. 보통의 경우 한 화면을 차지하면서 뷰(View)로 구성된 유저 인터페이스를 화면에 표시하고 사용자의 입력을 처리하는 역할을 합니다.보통의 어플리케이션은 여러 다른 화면을 가지고 있고, 각각의 화면은 다른 액티비티로 구현되어있습니다. 그러므로 화면의 전환이 이루어지게되면 새로운 액티비티가 실행되어 처리하게 됩니다. 어떤 경우는 액티비티 간에 데이터를 서로 주고 받을 수도 있습니다. 새로운 화면이 생성되며 기존의 화면은 스택에 놓여집니다. 각각의 액티비티는 스택을 통해 관리되며 현재 액티비티를 종료하면 그 이전 화면의 액티비티로 돌아가게 됩니다.
    뷰(View)
    뷰는 화면상에서 유저 인터페이스를 구성하는 기본 빌딩블록입니다. 예를 들어 버튼, 그림, 텍스트, 에디트, 라디오 버튼, 체크박스 등의 기본적인 화면 구성 요소들이 뷰에 포함됩니다. 또한 웹, 맵, 비디오등을 표시하는 고급 구성 요소들도 모두 뷰에 포함됩니다. 뷰의 리스너(Listener) 설정을 통해 이벤트가 발생했을 경우를 처리할 수 있습니다. 예를 들어 버튼이 클릭되었을때 등록된 OnClickListener가 호출되어 처리됩니다.
    레이아웃(Layout)
    각각의 뷰들을 화면상에 배치하고 구성해주는 것을 레이아웃이라고 합니다. 레이아웃은 보통의 경우 XML을 이용하여 구성합니다. 이전 강좌에서도 리소스(res) 아래의 layout에 myactivity.xml파일을 생성해 준 적이 있지요.
    레이아웃 XML

    01.<?xml version="1.0" encoding="utf-8"?>
    02.<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    03. android:orientation="vertical"
    04. android:layout_width="fill_parent"
    05. android:layout_height="fill_parent"
    06. >
    07.<TextView
    08. android:layout_width="fill_parent"
    09. android:layout_height="wrap_content"
    10. android:text="안녕하세요 모바일 플레이스 안드로이드 강좌 수강생 여러분"
    11. />
    12.</LinearLayout>
    (예제 4-1)


    (그림 4-1)
    먼저 기본으로 생성되는 형태의 레이아웃 XML인 (예제 4-1)을 분석해보겠습니다.
    XML파일은 <?xml version="1.0" encoding="utf-8"?> 으로 시작합니다. 그리고 첫번째 태그에는 xmlns:android="http://schemas.android.com/apk/res/android" 라는 XML Namespace가 들어가야 합니다. 레이아웃 XML의 각각의 태그 (LinearLayout, TextView)는 하나의 뷰를 나타내며 연결되는 자바 클래스를 가지고 있습니다. 뷰는 크게 두가지 형태가 존재하는데 버튼, 그림과 같이 실제 기능을 가지고 화면에 표시되는 뷰와 다른 뷰를 포함하고 배치하는 역할을 하는 레이아웃이 있습니다. 레이아웃은 하는 역할은 약간 다르지만 View 클래스를 상속하는 일종의 뷰라고 할 수입니다. 레이아웃 XML의 최상위에는 하나의 뷰만 존재할 수 있습니다. 보통 레이아웃이 들어가서 트리 형태로 다른 뷰들을 배치하고 구성하지만 일반 뷰 하나만 들어있는 레이아웃 XML도 작성할 수 있습니다.
    흔히 많이 쓰이는 뷰와 레이아웃은 다음과 같습니다.
    뷰 : TextView, Button, ImageView, ListView, EditText, ...
    레이아웃 : LinearLayout, RelativeLayout, FrameLayout, AbsoluteLayout, ...
    (예제 4-1)은 LinearLayout이 하나의 TextView를 자식으로 가지고 있는 형태입니다. 레이아웃 태그 사이에는 자식 뷰들이 여러 개 들어갈 수 있으며 레이아웃이 레이아웃을 자식으로 가지고 있는 형태도 가능합니다.
    View Attribute
    XML에서 각각의 뷰가 가지는 속성을 Attribute로 지정해할 수 있습니다. 모든 View가 공통적으로 가지고 있는 Attribute에 대해서 먼저 설명하도록 하겠습니다.
    layout_width, layout_height
    뷰의 넓이와 높이를 지정합니다. 값으로 fill_parent, wrap_content 혹은 절대적인 수치를 가질 수 있습니다. fill_parent는 컨테이너 즉 부모가 가지는 길이를 모두 채울때 사용하고, wrap_content는 해당 뷰가 그려질 수 있게 필요한 길이만 차지한다는 것을 나타냅니다. 절대적인 값도 넣을 수 있는데 픽셀의 경우 "100px", "100dp", "100sp" 처럼 수치와 단위를 써서 지정해줍니다. 사용할 수 있는 단위는 px, in, mm, pt, dp, sp등이 있는데 주로 dp, sp, px이 주로 쓰입니다. px는 픽셀을 나타내고, dp는 Density-independent Pixel이라고 화면의 밀도의 변화에 독립적으로 1dp는 160dpi의 화면에서의 1px에 대응됩니다. sp는 Scale-independent Pixel 이라고 하여 사용자의 폰트 선호도에 따라 크기가 달라지며 주로 폰트 사이즈 설정에 사용됩니다.
    background
    배경색 혹은 그림을 지정해줍니다. 색은 #RGB, #ARGB, #RRGGBB, #AARRGGBB 의 포맷으로 지정해 줄 수 있는데 저는 통일성있게 #AARRGGBB포맷만을 주로 사용합니다. 제일 앞에 AA는 투명도를 의미하고 나머지 부분은 RGB값을 의미합니다. 투명도인 AA는 00이 완전 투명, FF가 불투명이 됩니다. 예를 들어 android:background="#FFFF0000"로 지정해주면 빨간색으로 배경을 칠하게 됩니다. 배경그림을 지정해줄 수도 있는데 android:background="@drawable/background_image" 와 같은 형태로 사용가능합니다. 배경 그림은 리소스에 들어있는 jpg, png등의 그림을 배경으로 지정할 때 사용합니다.

    visibility
    뷰가 화면에 보이게 할지 안보이게 할지를 설정합니다. visible, invisible, gone의 값을 가질 수 있습니다. visible 화면에 보임, invisible 화면에 보이지 않으나 공간은 차지함, gone 화면에 보이지도 않고 공간도 차지 하지 않음.
    id
    코드에서 해당 뷰를 찾아올 수 있도록 id를 지정합니다. id에 사용에 대해서는 자바코드와 연결하는 부분에서 자세하게 다루도록 하겠습니다.
    myactivity.xml을 수정해보면서 각 속성값이 어떻게 실제 화면에 영향을 주는지 확인해보도록 하겠습니다.
    01.<?xml version="1.0" encoding="utf-8"?>
    02.<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    03. android:orientation="vertical"
    04. android:layout_width="fill_parent"
    05. android:layout_height="fill_parent"
    06. android:background="#FF888888"
    07. >
    08.<TextView
    09. android:layout_width="fill_parent"
    10. android:layout_height="wrap_content"
    11. android:text="파랑"
    12. android:background="#FF0000FF"
    13. />
    14.</LinearLayout>
    (예제 4-2)

    (그림 4-2)
    자 그럼 속성값들을 변경해보도록 하겠습니다. 먼저 배경색을 지정하여 실제 뷰가 차지하는 영역을 살펴보도록 하겠습니다. (예제4-2)에서 LinearLayout은 width, height를 각각 fill_parent로 화면 전체를 채우고 있으며, TextView는 width는 fill_parent로 부모의 길이만큼 모두 차지하지만 height를 wrap_content로 하여 자신이 차지하는 부분만을 높이로 가지는 것을 볼수 있습니다.
    01.<?xml version="1.0" encoding="utf-8"?>
    02.<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    03. android:orientation="vertical"
    04. android:layout_width="fill_parent"
    05. android:layout_height="fill_parent"
    06. >
    07.<TextView
    08. android:layout_width="fill_parent"
    09. android:layout_height="wrap_content"
    10. android:text="빨강"
    11. android:background="#FFFF0000"
    12. />
    13.<TextView
    14. android:layout_width="wrap_content"
    15. android:layout_height="50dp"
    16. android:text="녹색"
    17. android:background="#FF00FF00"
    18. />
    19.<TextView
    20. android:layout_width="fill_parent"
    21. android:layout_height="wrap_content"
    22. android:text="파랑"
    23. android:background="#FF0000FF"
    24. />
    25.</LinearLayout>
    (예제 4-3)

    (그림 4-3)
    자 이번에는 (예제 4-3)에 TextView를 두개 더 추가하여 배경색을 빨강, 녹색, 파랑으로 칠하고 가운데 있는 TextView의 width를 wrap_content로 height를 50dp로 지정해 보았습니다.

    (그림 4-4)

    (그림 4-5)

    (그림 4-4)와 (그림 4-5)는 각각 두번째 TextView에 android:visibility="invisible", android:visibility="gone"으로 설정하여 화면에 보일때와 안보일 때 그리고 영역을 차지 하지 않을 때의 차이를 살펴보실 수 있습니다.
    이번 강좌는 여기서 마치겠습니다.


    [이 게시물은 더어플님에 의해 2016-07-12 15:23:56 개발 꿀팁에서 복사 됨]
    댓글을 작성하시려면 로그인을 하셔야지만 작성가능합니다. [로그인하기] [회원가입하기]
    공지글 이거슨 꿀팁!! 작성 가이드 v1.1 (2013-11-13) +174 더어플 13/03/12 140452
    젤리빈 로그캣 변경점
    조회 4321
    추천 1
    댓글 0
    12.08.10 17:14
    GNCkorea
    삼성 AdHub SDK 심각한 버그 있네요.
    조회 3677
    추천 1
    댓글 0
    12.08.10 17:10
    GNCkorea
    구글 넥서스 OTA 끄기 - 루팅 필요
    조회 4118
    추천 0
    댓글 0
    12.08.10 17:02
    GNCkorea
    구글 넥서스 수신된 sms/mms 저장경로 아시는 분계신가…
    조회 6686
    추천 2
    댓글 0
    12.08.10 17:00
    GNCkorea
    MS 스마트폰 가능성 보인 Zune HD, 그리고 마무리
    조회 1770
    추천 0
    댓글 0
    12.08.10 16:40
    GNCkorea
    이제 Round1, MS에게도 스마프폰의 기회는 있었다
    조회 1844
    추천 0
    댓글 0
    12.08.10 16:38
    GNCkorea
    MS와 다른 시선의 Apple 스마트폰
    조회 3501
    추천 0
    댓글 0
    12.08.10 16:37
    GNCkorea
    MS가 생각하는 Smart Phone
    조회 1554
    추천 0
    댓글 0
    12.08.10 16:34
    GNCkorea
    윈도우모바일의 침몰과 아이폰의 성공 그 원인을 분석-1…
    조회 2616
    추천 0
    댓글 0
    12.08.10 16:33
    GNCkorea
    윈도우모바일의 침몰과 아이폰의 성공 그 원인을 분석하다
    조회 1600
    추천 0
    댓글 0
    12.08.10 16:30
    GNCkorea
    베가 S5에 탑재된 1300만 화소 카메라 품질은?
    조회 12057
    추천 3
    댓글 4
    12.08.10 01:11
    GNCkorea
    베가 S5 하드웨어 성능 및 배터리 시간 테스트
    조회 9896
    추천 0
    댓글 1
    12.08.10 01:10
    GNCkorea
    미니 윈도우가 포함된 베가 S5 특화 기능들
    조회 7528
    추천 0
    댓글 0
    12.08.10 01:08
    GNCkorea
    베가 레이서2보다 발전된 FLUX UX 적용
    조회 8252
    추천 0
    댓글 0
    12.08.10 01:06
    GNCkorea
    한 손에 들어오는 5인치 LTE 스마트폰! 스카이 베가 S5
    조회 3730
    추천 1
    댓글 1
    12.08.10 01:04
    GNCkorea
    윈도우8과 함께 등장한 윈도우 스토어, 자유와 통제의 …
    조회 3078
    추천 0
    댓글 0
    12.08.10 01:02
    GNCkorea
    포켓PC, 옴니아…영욕의 윈도우폰
    조회 3542
    추천 1
    댓글 1
    12.08.10 00:42
    GNCkorea
    안드로이드 강좌 6 - Java 코드(Code)에서 뷰(View) 다…
    조회 2960
    추천 0
    댓글 0
    12.08.09 16:32
    GNCkorea
    안드로이드 강좌 5 - XML에서의 TextView, ImageView, L…
    조회 5065
    추천 1
    댓글 0
    12.08.09 16:31
    GNCkorea
    안드로이드 강좌 4 - 액티비티(Activity), 뷰(View), 레…
    조회 5013
    추천 1
    댓글 0
    12.08.09 16:30
    GNCkorea
    안드로이드 강좌 3 - 프로젝트 실행과 디버깅 그리고 단…
    조회 3567
    추천 0
    댓글 0
    12.08.09 16:30
    GNCkorea
    안드로이드 강좌 2 - 이클립스 개발환경 사용법 및 프로…
    조회 3951
    추천 1
    댓글 0
    12.08.09 16:29
    GNCkorea
    안드로이드 프로그램이 죽는 경우 디버깅 방법
    조회 4714
    추천 1
    댓글 0
    12.08.09 10:12
    GNCkorea
    윈도우즈 개발환경 구성 - Eclipse 3.6.1 (Helios), ADT…
    조회 3617
    추천 1
    댓글 0
    12.08.09 10:09
    GNCkorea
    Android Virtual Device(AVD) 사용법
    조회 6375
    추천 1
    댓글 0
    12.08.09 10:08
    GNCkorea
    안드로이드 프로젝트 생성 및 실행
    조회 2381
    추천 0
    댓글 0
    12.08.09 10:06
    GNCkorea
    안드로이드 강좌 1 - 어플리케이션 개발 시작하기. SDK …
    조회 3428
    추천 1
    댓글 0
    12.08.09 10:05
    GNCkorea
    잼있게 따라해보는 옵티머스 LTE2 테마박스
    조회 2830
    추천 0
    댓글 0
    12.08.09 09:58
    GNCkorea