• 1나루토매니아
  • 2뱅이
  • 3푸타코타
  • 4완벽그자체
  • 5해삼
  • 1뱅이
  • 2나루토매니아
  • 3알짜배기
  • 4뱅이
  • 5빙그레우유
안드로이드 강좌 4 - 액티비티(Activity), 뷰(View), 레이아웃(Layout)
연속출석 :
1일 랭킹 : 399위 중장7
45%
45% (1541 /3455)
  • 댓글 0 |
  • 추천 1 |
  • 조회 5013 |
  • 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 개발 꿀팁에서 복사 됨]
    댓글을 작성하시려면 로그인을 하셔야지만 작성가능합니다. [로그인하기] [회원가입하기]
    번호 제목 글쓴이 추천 조회 작성일
    132 넥서스7 루팅방법 (따라하기) +1 GNCkorea 1 4054 12/08/09
    131 OS X 10.8 마운틴 라이온을 손쉽게 USB 드라이브 또는 D… +1 GNCkorea 1 5358 12/07/27
    130 포켓PC, 옴니아…영욕의 윈도우폰 +1 GNCkorea 1 3542 12/08/10
    129 갤럭시S2 - 기기정보 +1 GNCkorea 1 2553 12/07/27
    128 갤럭시S3 LTE - 그래픽 및 배터리 시간 테스트 +2 GNCkorea 1 5272 12/07/31
    127 갤럭시S II, 테이크 야누스, 이보 4G+, 아트릭스 - 듀얼… +1 GNCkorea 1 8542 12/08/01
    126 안드로이드 강좌 1 - 어플리케이션 개발 시작하기. SDK … GNCkorea 1 3428 12/08/09
    125 폰의 하드웨어 제어관련 혹은 하드웨어접근관련 앱 제작… GNCkorea 1 5240 12/08/10
    124 옵티머스 LTE2와 스마트TV 연동하기 +1 GNCkorea 1 6573 12/07/29
    123 갤럭시S3 LTE - 동영상 및 전면 카메라 기능 보기 +1 GNCkorea 1 5995 12/07/31
    122 갤럭시S II, 테이크 야누스, 이보 4G+, 아트릭스 - 디스… +1 GNCkorea 1 8699 12/08/01
    121 한 손에 들어오는 5인치 LTE 스마트폰! 스카이 베가 S5 +1 GNCkorea 1 3730 12/08/10
    120 윈도우즈 개발환경 구성 - Eclipse 3.6.1 (Helios), ADT… GNCkorea 1 3617 12/08/09
    119 안드로이드 해상도별 좌표+ 이미지 크기 수정하기(변종… GNCkorea 1 13258 12/08/10
    118 안드로이드 초보를 위한 DVR 사용법(2) GNCkorea 0 4922 12/07/25
    117 삼성 포럼 이용 방법 - 단축키 s GNCkorea 0 2179 12/08/07
    116 베가 레이서2보다 발전된 FLUX UX 적용 GNCkorea 0 8252 12/08/10
    115 재클린 케이스 갤럭시S3 설치방법 및 사용방법 +4 GNCkorea 0 3592 12/09/16
    114 맥에서 아이포토 실행없이 사이드바나 파인더에서 포토… GNCkorea 0 2494 12/07/27
    113 비슷하면서도 많이 달라진 애플 뉴 아이패드 GNCkorea 0 3388 12/08/02
    112 iOS6 메탈 아이콘 변화 영상 GNCkorea 0 2389 12/08/12
    111 아이폰4 수신률확인 +1 GNCkorea 0 1628 12/08/13
    110 안드로이드 프로젝트 생성 및 실행 GNCkorea 0 2382 12/08/09
    109 옵티머스lte2 배경화면 각각 다르게 지정하기 GNCkorea 0 6764 12/07/29
    108 옵티머스뷰로 블로그 업로드하기 GNCkorea 0 2145 12/08/07
    107 Mac에서 ICS 스마트폰을 이동식디스크로 연결하는 방법! GNCkorea 0 4458 12/08/08
    106 미니 윈도우가 포함된 베가 S5 특화 기능들 GNCkorea 0 7528 12/08/10
    105 갤럭시S3 사용자를 위한... 주요기능 5가지 +6 GNCkorea 0 3645 12/09/16