• 1나루토매니아
  • 2뱅이
  • 3푸타코타
  • 4완벽그자체
  • 5해삼
  • 1뱅이
  • 2나루토매니아
  • 3알짜배기
  • 4뱅이
  • 5빙그레우유
안드로이드 강좌 4 - 액티비티(Activity), 뷰(View), 레이아웃(Layout)
연속출석 :
1일 랭킹 : 399위 중장7
45%
45% (1541 /3455)
  • 댓글 0 |
  • 추천 1 |
  • 조회 4939 |
  • 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 더어플 42 134855 13/03/12
    4455 알뜰폰 1Mbps 3Mbps 무제한요금제 최저가2개 iamgood 0 241 24/05/03
    4454 알뜰폰 쓸 때 인터넷과 결합하려면 iamgood 0 1949 24/04/15
    4453 해외여행 갈 때 데이터로밍 간편하고 싸게 쓰는방법 iamgood 0 2329 24/04/08
    4452 기프티콘은 컬쳐랜드 쿠폰거래소에서 이용하는 게 좋아요 리메인2 0 2439 24/04/05
    4451 클리오 루즈힐 블룸 다이아 립스틱 5종 홈쇼핑 예정 리하린 0 2711 24/04/03
    4450 데이터 10GB+1Mbps 무제한 6,500원부터 쓸수있네요 iamgood 0 2744 24/04/01
    4449 3월 알뜰폰 가성비 평생요금제 2가지 6GB 6천원과 10GB … iamgood 0 3607 24/03/18
    4448 컬쳐랜드에 쿠폰거래소가 새롭게 생겼어요 리하린 0 4026 24/03/12
    4447 3Mbps 속도 데이터무제한 최저가 검색 iamgood 0 4111 24/03/11
    4446 컬쳐랜드로 호텔 예약하면 좀 더 싸게 갈 수 있어요 리하린 0 4848 24/02/27
    4445 해외여행 데이터로밍 일본 태국 대만 최저가보장 iamgood 0 5195 24/02/19
    4444 기간통신사가 운영하는 데이터센터 MDC iamgood 0 4771 24/02/13
    4443 밀리의서재 무료 구독권 kt알뜰폰 2,200원 무제한요금제 iamgood 0 4959 24/02/02
    4442 KT 갤럭시S24 사전예약(~1/25) 라이브컬러 0 5400 24/01/25
    4441 LG유플러스 인터넷 결합 가능한 알뜰폰 iamgood 0 5420 24/01/18
    4440 데이터 20GB 추가제공이벤트 좋네요 iamgood 0 5939 24/01/08
    4439 1월 추천요금제 데이터 6기가0원과 데이터무제한 6,600… iamgood 0 5673 24/01/02
    4438 아이폰 쓰면 해외여행때 굳이 현지유심 쓸 필요없어요 iamgood 0 6894 23/12/11
    4437 넷플릭스 광고형 스탠다드 KT결제 매달 1,000원 할인 달팽ee 0 6668 23/12/11
    4436 데이터10기가 990원부터 3Mbps무제한 9,000원 iamgood 0 6954 23/12/01
    4435 아싸컴에서 천만원 이벤트 하는 거 찾았다 +1 리하린 1 7169 23/11/20
    4434 skt망 알뜰 통화 데이터 무제한 요금 7개월 5,500원부터 iamgood 0 6834 23/11/15
    4433 우체국에서 판매1위했던 알뜰폰 요금제 iamgood 0 6946 23/11/08
    4432 알리익스프레스 프로모션 기대해보세요! 최대 50% 할인! 베스토 0 6325 23/11/04
    4431 통화 데이터무제한 7개월할인 최저가 13,000원 iamgood 0 6234 23/11/02
    4430 알뜰폰 데이터10GB 12개월간 무약정 990원 iamgood 0 6297 23/10/24
    4429 스마트폰 평생 2,000원 요금제와 태블릿전용 6,560원요… iamgood 0 6023 23/10/16
    4428 skt 알뜰폰 무제한 요금제 3종 2,200원부터 1,000명 한… iamgood 0 5446 23/10/11