Neo's Programming

앱솔루트레이아웃.. 그냥 말 그대로 원하는 좌펴에 찍어주는 것이다. 좌표는 layout_x, layout_y 를 이용하여 픽셀 계산한다.

다음은 한번 보고 갈 예제이다.

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
     >
   
 <TextView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:id="@+id/btn1"
     android:text="first"
     android:layout_x="50px"
     android:layout_y="50px"
 />
 <TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:id="@+id/btn2"
  android:text="second"
  android:layout_x="150px"
     android:layout_y="150px"
 />
 <TextView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:id="@+id/btn3"
     android:text="third"
     android:layout_x="250px"
     android:layout_y="250px"
 />
</AbsoluteLayout>

관계형 레이아웃이다. 모두 접두어에 layout_ 이 붙어 있고 다음이 그 관련된 설명이다

속성	설명
layout_above	~의 위에
layout_below	~의 아래에
layout_toLeftOf	~의 왼쪽에
layout_toRightOf	~의 오른쪽에
layout_alignLeft	~의 왼쪽 변을 맞춘다
layout_alignTop	~의 위쪽 변을 맞춘다
layout_alignRight	~의 오른쪽 변을 맞춘다
layout_alignBottom	~의 아래쪽 변을 맞춘다
layout_alignParentLeft	true 면 부모와 왼쪽 변 맞춘다
layout_alignParentTop	true 면 부모와 위쪽 변 맞춘다
layout_alignParentRight	true 면 부모와 오른쪽 변 맞춘다
layout_alignParentBottom	true 면 부모와 아래쪽 변 맞춘다
layout_alignBaseline	~와 베이스라인 맞춘다
layout_alignWithParantIfMissing	속성에 앵커가 발생하지 않을 경우 부모를 앵커로 인지한다
layout_aligncenterHorizontal	true 면 부모의 수평 중앙에
layout_aligncenterVertical	true 면 부모의 수직 중앙에
layout_aligncenterInParent	true 면 부모의 수평 중앙에

샘플은 다음과 같이 해서 확인해보면 알 수 있을 것이다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
     >    
 <TextView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:id="@+id/btn1"
     android:text="first"
     android:layout_marginRight="15px"
 />
 <TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:id="@+id/btn2"
  android:text="second"
  android:layout_toRightOf="@id/btn1"
 />
 <TextView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:id="@+id/btn3"
     android:text="third"
     android:layout_below="@id/btn2"
 />
</RelativeLayout>

Java에서 FlowLayout과 동일한 형태이다. 단 좀 다른게 있다면, 안드로이드는 가로 세로 형태를 지정 할 수가 있다.

수정 방법은 maili.xml 에서

android:orientation="horizontal/vertical/wrap_content"  속성 중 하나 골라서 그 내용을 확인하면 된다.

아래에 다음과 같은 코드를 넣고 속성 값만 바꿔보자.

<Button
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:id="@+id/btn1"
     android:text="first"
     />
 <Button
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:id="@+id/btn2"
     android:text="second"
     />
 <Button
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:id="@+id/btn3"
     android:text="third"
     />

horizontal의 경우 나란히 들어 갈 것이고

vertical 경우 세로로 나란히, wrap_caontent 경우에는 각기 가진 폭만큼 표시가 될 것이다.

또한 gravity를 이용하여 정렬도 가능하다. 기본적으로 left, right, top, bottom, fill, center 이 있고 여기에 fill_ 또는 center_ 를 붙여서 적용해보면 그 결과를 확인 할 수 있을 것이다.

또한 | 를 이용하여 두개의 속성을 같이 쓸 수가 있다.

android:gravity="center_vertical|right" 형식으로 쓰면 된다.

또한 layout_gravity 라는 것이 있는데 이것은 뷰 자체를 부모의 어디에 둘 것인가를 결정한다.

또한 baselineAligned 는 디폴트로 true의 값을 가진다. 이것을 각기 다르게 값을 넣어서 한다면 텍스테 대한 베이스 정렬에 대해 확인 할 수가 있다.

android:layout_weight 속성 값은 부모 레이아웃에 대해 자식 레이아웃끼리 비율을 정해서 차지 할 수 있다.

위 코드에서 android:layout_weight="1/2/3"을 각 부분에 넣고 확인하면 20:60:20 의 비율로 각기 공간을 차지 하고 있음을 확인 가능하다. orientation 속성은 vertical로 하고 확인해야 한다.

또한 마진과 패딩이라는 것이 있다. 마진의 경우 뷰와 부모사이, 패딩의 경우 뷰와 내용물 사이의 간격을 조절한다.

즉, 안쪽과 바깥쪽 여백이라는 것이다.

android:layout_margin = '10px" 또는 android:layout_padding="10px" 를 적용시켜서 테스트 해 보면 결과를 알 수가 있다.

버튼은 알다시피 이벤트를 발생 시킬 수가 있다.

단순한 텍스트를 올려서 버튼만 나타나는 것이 아니라 EditText와 함께 이용 하는 것을 살펴보면 다음과 같다.

main.xml에 다음을 추가하고

<EditText
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:id="@+id/edit"
     android:text="input"
     />
 <Button
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:id="@+id/btn"
     android:text="click"
     />

java 파일에서

Button btn =(Button)findViewById(R.id.btn);
        btn.setOnClickListener(new Button.OnClickListener(){
         
   @Override
   public void onClick(View arg0) {
    // TODO Auto-generated method stub
    EditText edit = (EditText)findViewById(R.id.edit);
          String str = edit.getText().toString();
          Toast.makeText(Class명.this, str, Toast.LENGTH_SHORT).show();          
   }         
   });

다음을 추가한다. 단 여기서 자세히 보면 Toast라는 놈이 보인다. 이놈은 안드로이드에서 제공하는 것 같은데..

잘은 모르겠지만 View 형태로 나타난다. 실행해보면 Toast 위에 EditText에 입력한 글들이 찍혀서 나온다.

여기서 makeText인자를 보면 처음에 Class명.this 라고 한 놈이 보인다.

서적에서나 이런 곳에선 막연하게 따라하게 유도하는데 저곳은 반드시 Class명을 집어 넣도록 하자!!

이미지 뷰는 말 그대로 이미지를 표시한다. 안드로이드는 png 확장자를 가진 파일을 추천하며 아래는 속성에 대한 내용이다.

src - 출력 속성이다. 이것에 데이터를 넣지 않으면 나타나지 않고 리소스에 이미지 넣은 뒤 ID 지정하여 사용
adjustViewBounds - 가로 세로를 맞추기 위한 것을 지정. true/false 이용
cropToPadding - 위젯 내의 여백 맞추기 위해 이미지 조절
tint - 이미지 위에 색상 적용
scaleType - 이미지 크기와 다르게 출력 시 적용.

리소스에 이미지를 등록하고 나면 R.java를 열어보면 자동으로 ID가 지정되어 있다.

또한 프로젝트 구조에 보면 3가지 형태로 나와있는데 l,m,h 로 시작하는 것은 말 그대로 저해상,중해상,고해상을 말하는 것이다.

다음은 필자가 해 본 예제 코드이다.

<ImageView
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"    
     android:src="@drawable/calendar"    
     android:maxWidth="120px"
     android:maxHeight="120px"
     android:adjustViewBounds="true"
     android:tint="#4000ff00"   />

새삼 별 반 다를 것은 없다. 하지만 오타 내버리면.. 에뮬레이터에서 에러를 띄운다.
(사실.. VI라고 쳐놓고 버그 생겨서 뭐지 하고 한참을 고민했다;; ㅠ_ㅠ)

이곳에는 문자열을 정의 하는 곳이다.

strings.xml 파일을 열어보면 <string name="idvalue"> 식으로 시작 되는 것이 있다.

idvalue 이것이 바로 id 값이다. 쉽게 생각하면 변수 명이라고 생각을 하면 된다.

안드로이드 어플리케이션 상에서 문자열들은 이곳에 정의하고 이용을 한다.

테스트를 해 보자면 strings.xml 부분에

<string name="first">First</string>
 <string name="second">Second</string>
 <string name="third">Third</string>

추가를 하고

main.xml 부분에
<TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/first" />
    

안드로이드 런타임은 JVM이 아닌 DVM(달빅가상머신)에서 돌아간다.

달빅은 자바 클래스를 바로 사용 할 수 없으며 dex 포멧으로 변환하여야만 동작 한다.

예전에 자바를 좀 만져봤지만.. 조금 이질적인 느낌을 많이 받는다.

또한 안드로이드 실행 파일은 같은 패키지에 속한 자바 클래스와 리소스 집합으로 프로세스와 반드시 대응되지 않는다.

즉, 응용 프로그램끼리 서로 기능을 공유할 수 있고 다른 프로그램의 구성 요소를 불러 같은 주소 공간에서 실행할 수도 있다.

안드로이드는 다음과 같은 4개의 컴포넌트를 이용한다.

1. 액티비티 - 사용자 인터페이스를 구성하는 기본 단위
2. 서비스 - 백그라운드에서 무한히 실행되는 컴포넌트
3. 브로드캐스트리시버(BR) - 시스템으로부터 전달되는 방송을 대기하고 신호 전달시 수신하는 역할
4. 콘텐트 제공자 - 다른 프로그램을 위해 자신이ㅡ 데이터 제공(데이터 베이스, 주소록 CP로 전달)

위 4가지는 서로 독립적으로 동작하며 상호 통신위해 인텐트(컴포넌트간 통신 수단으로 메세지에 대한 정보 가짐)가 필요하다.

안드로이 프로젝트 구성은 다음과 같다.

AndroidManifest.xml - 프로젝트 버전, 이름, 구성등의 정보를 가짐
src/Android.java - 응용 프로그램 동작 기술
gen/R.java - 프로젝트내의 개체에 접근하는 ID 정의, 이는 절대 편집 금지
Android Library 폴더 - 안드로이드 기본 라이브러리
assets - 각종 미디어 파일 저장
res/drawable - 이미지 저장
res/layout/main.xml - 응용프로그램 디자인
res/values/string.xml - 문자열 정의
default.properties - 빌드 타깃 명시

피봇 어플리케이션을 보면.. 딱 드는 생각은 C#에서의 Tab과 같은 형국이다.

단 차이가 있다면 활성화 된 탭 내용이 처음에 나온다는 것.(C#에서는 탭 인덱스가 바뀌어 그 부분이 활성화되지만 여기에선 마치 현재 화면의 탭이 제일 처음에 있는 것으로 확인)

프로젝트를 생성하고 보면 파노라마와 비슷한 형태를 확인 할 수 있다.

controls:PivotItem 에서부터 시작하는 화면이 하나의 페이지라고 생각을 하면 된다.

실행 화면은 생략하고 여지껏 해 본 기본적인 내용들을 여기에 접목 시켜 테스트 해 보는 것도 나쁘지 않을 듯 하다.

파노라마는 Navigation의 진보한 매체이다.

현재 스마트 폰을 쓰는 사람들은 이미 그 파노라마 효과를 보고 있다.

대표적인 것으로 안드로이드의 경우에 보면 하나의 큰 화면을 옆으로 넘기면서 그 배경을 확인한다.

그것이 바로 파노라마 라는 것이다.

파노라마 프로젝트를 열어서 보면 ImageBruch라는 부분이 있다. 그것이 기본적으로 배경화면을 나타낸 것인데 이것을 바꾸어서 확인해보아도 좋다.

그리고 controls:PanoramaItem 부터 시작하는 부분이 가져다 붙이는 한 화면당 처리 내용이다.

이것을 원하는 만큼 화면을 구성해서 쓸 수가 있다.

실행 화면은 생략하고 여지껏 해 본 기본적인 내용들을 여기에 접목 시켜 테스트 해 보는 것도 나쁘지 않을 듯 하다.