• 1나루토매니아
  • 2뱅이
  • 3푸타코타
  • 4완벽그자체
  • 5해삼
  • 1뱅이
  • 2나루토매니아
  • 3알짜배기
  • 4뱅이
  • 5빙그레우유
안드로이드 강좌 4 - 액티비티(Activity), 뷰(View), 레이아웃(Layout)
연속출석 :
1일 랭킹 : 399위 중장7
45%
45% (1541 /3455)
  • 댓글 0 |
  • 추천 1 |
  • 조회 5064 |
  • 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 개발 꿀팁에서 복사 됨]
    댓글을 작성하시려면 로그인을 하셔야지만 작성가능합니다. [로그인하기] [회원가입하기]
    번호 제목 글쓴이 추천 조회 작성일
    104 갤럭시 S2 체크하나로 "해제하려면.." 문구 제거 GNCkorea 0 4350 12/08/08
    103 안드로이드 기초 프로그램 1개 실습 및 작성 방법의 설명 GNCkorea 1 4356 12/08/10
    102 향상된 500만 화소 iSight 카메라 기능 GNCkorea 0 4358 12/08/02
    101 젤리빈 로그캣 변경점 GNCkorea 1 4396 12/08/10
    100 갤투 cm9 (aosp/aokp) 등등에서 자이로센서 문제 해결방… GNCkorea 0 4418 12/08/04
    99 아이폰 5, 왜 NFC가 빠졌나? +4 GNCkorea 0 4480 12/09/16
    98 Mac에서 ICS 스마트폰을 이동식디스크로 연결하는 방법! GNCkorea 0 4504 12/08/08
    97 최고의 웹앱 개발 프레임워크 GNCkorea 1 4523 12/08/10
    96 베가 레이서2 카메라 기능 살펴보기 +2 GNCkorea 2 4553 12/08/01
    95 [삼성] 갤럭시 SⅢ 숨겨진 기능 11가지 +5 GNCkorea 1 4569 12/09/16
    94 모든 스마트폰의 데이터싱크와 충전을 하나로! 아이베츠… +14 GNCkorea 6 4635 13/03/18
    93 갤플 순정펌웨어에서 시스템 파일 추출하기. GNCkorea 0 4661 12/08/08
    92 옵티머스 LTE2에 들어간 스냅드래곤 S4 성능은? +1 GNCkorea 1 4681 12/07/31
    91 베가 NO.6 V 터치 기능 +22 GNCkorea 8 4689 13/03/24
    90 넥서스7 루팅하기 (아무것도 없이 따라만 오세요) +1 GNCkorea 0 4742 12/08/07
    89 안드로이드 프로그램이 죽는 경우 디버깅 방법 GNCkorea 1 4772 12/08/09
    88 논란의 뉴아이패드 vs 아이패드2 게임 그래픽 정리 +1 GNCkorea 1 4785 12/08/01
    87 Image 파일이 저장되는 리얼경로 알려주기. GNCkorea 0 4809 12/08/10
    86 갤럭시S II, 테이크 야누스, 이보 4G+, 아트릭스 - 모바… +1 GNCkorea 1 4881 12/08/01
    85 안드로이드 초보를 위한 DVR 사용법(2) GNCkorea 0 4951 12/07/25
    84 스마트폰, 구글 기본 서비스 110% 활용하기 +17 GNCkorea 6 4998 13/03/18
    83 GPS 휴대폰, 활용하는 방법 +15 GNCkorea 4 5034 13/03/18
    82 갤럭시S3 LTE SKT 대기상태표기버그 수정본 + 소프트키 … GNCkorea 0 5063 12/08/08
    81 안드로이드 강좌 4 - 액티비티(Activity), 뷰(View), 레… GNCkorea 1 5069 12/08/09
    80 안드로이드 개발 시, Selector XML을 편하게 만들어봅시… GNCkorea 1 5071 12/08/10
    79 데이터 네트워크(3G, 4G)로 셀프 업그레이드 하는 방법 +14 GNCkorea 5 5086 13/03/18
    78 안드로이드 강좌 5 - XML에서의 TextView, ImageView, L… GNCkorea 1 5120 12/08/09
    77 윈도우에서 사진스트림 업로드가 안되는 이유와 간단한 … +3 GNCkorea 1 5122 12/07/29