Layout 중첩 - Multi Page

 레이아웃 중첩이란 말 그대로 레이아웃 안에 레이아웃을 넣는 방법을 말한다. 앞서 말했듯이 꼭 써야하는 경우에는 써야하지만 최대한 레이아웃은 최소화 하는것이 프로그램 퍼포먼스 상승에 도움이 된다는 것을 잊지말자.

 이제까지 배운 레이아웃들을 한데 모아 버튼을 누를때마다 페이지가바뀌는 프로그램을 만들어보자. 물론 진정한 의미로의 새로운 창을 메모리에 올리는 개념이 아니라(이 부분은 나중에 ACTIVITY 클래스에대해 자세히 배우게 될것이다.) 모든 레이아웃을 처음에 메모리에 올리지만 하나의 레이아웃만 Visibility를 "visible"로 고 나머지는 "invisible"로 설정하여 화면에만 안나타나게 하는 것이다. 이를 위해서 앞에서 FrameLayout에 대해 알아 보았었다. 

▧ 레이아웃이 정의된 frame.xml을 살펴보자. 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="fill_parent" android:layout_height="fill_parent">
<LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="horizontal"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content">
    <Button android:text="Page1" android:id="@+id/btnp1" 
    android:layout_width="wrap_content" android:layout_height="wrap_content" />
    <Button android:text="Page2" android:id="@+id/btnp2" 
    android:layout_width="wrap_content" android:layout_height="wrap_content" />
    <Button android:text="Page3" android:id="@+id/btnp3" 
    android:layout_width="wrap_content" android:layout_height="wrap_content" />
</LinearLayout>  

<FrameLayout android:layout_width="fill_parent" android:layout_height="fill_parent" >
<LinearLayout android:id="@+id/page1" android:layout_width="fill_parent" 
			  android:layout_height="fill_parent" 
	  		  android:background="#00ff00" android:orientation="vertical"	>
	<TextView  android:layout_width="fill_parent"  android:layout_height="wrap_content"
			   android:textColor="#000000" android:text="기본 아이콘이요~!" />
	<ImageView android:layout_height="wrap_content" android:src="@drawable/icon" 
			   android:id="@+id/img" android:layout_width="wrap_content"/>
</LinearLayout>

<RelativeLayout android:id="@+id/page2" android:visibility="invisible"
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent" android:padding="5px"
  android:background="#ffffff"
  android:layout_height="wrap_content">
  
    <ImageView android:layout_height="wrap_content" android:src="@drawable/icon" 
    android:id="@+id/picture" android:layout_width="wrap_content"
    android:layout_alignParentLeft="true" android:layout_marginRight="5px" />
    
    <Button android:text="Del" android:id="@+id/button1" android:layout_below="@id/picture"
    android:layout_width="wrap_content" android:layout_height="wrap_content" />
    
    <TextView android:text="아폴로딸기맛" android:id="@+id/name" android:textColor="#000000"
    android:textSize="12pt" android:layout_alignParentTop="true" 
    android:layout_toRightOf="@id/picture" android:layout_width="wrap_content" 
    android:layout_height="wrap_content" />
    
    <TextView android:text="123-456-7890" android:id="@+id/call" android:textColor="#0000ff"
    android:textSize="6pt"  android:layout_alignParentRight="true"
    android:layout_alignBaseline="@id/name" android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
     
    <TextView android:text="아폴로 딸기맛은 맛있다. 원래 몸에 안좋은게 맛있는거다." 
    android:id="@+id/description" android:textColor="#000000" 
    android:textSize="6pt" android:layout_below="@id/name"
    android:layout_alignLeft="@id/name" android:layout_width="wrap_content" 
    android:layout_height="wrap_content" />
</RelativeLayout>

<TableLayout android:id="@+id/page3"   android:orientation="vertical"
    android:layout_width="fill_parent" android:layout_height="fill_parent" 
    android:visibility="invisible" android:stretchColumns="1"
    >
    <TableRow>
    	<TextView android:text="국어" android:padding="3dip" />
    	<TextView android:text="영어" android:padding="3dip" 
    			  android:background="#fff"/>
    	<TextView android:text="수학" android:padding="3dip" />
    </TableRow>
    <TableRow>
    	<TextView android:text="90" android:padding="3dip" />
    	<TextView android:text="91" android:padding="3dip" />
    	<TextView android:text="92" android:padding="3dip" />
    </TableRow>
</TableLayout>
</FrameLayout>
</LinearLayout>

 위의 코드에서 역시 중요한 개념은 FrameLayout 내부의 View 객체들은 모두 왼쪽 상단에 겹쳐서 그려지기 때문에 Visibility가 모두 visible인 상태에서는 가장 먼저 생성된 3페이지만 보이게 될 것이다.(물론 페이지 객체 모두가 한 화면을 가득 채울정도로 크다면, 아니면 샌드위치를 위에서 처다본 것 처럼 될것이다.)

▧ 다음으로 자바 코드는 특별할게 없다. (역시 안드로이드를 하려면 어느정도 자바가 선행 되어야 할 것같다. ) 버튼에 대한 클릭 이벤트 처리만 해주면된다. 

package com.example.MultiPageAndroid;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MultiPageAndroid extends Activity {
	View mPage1, mPage2, mPage3;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.frame);
        mPage1 = findViewById(R.id.page1);
        mPage2 = findViewById(R.id.page2);
        mPage3 = findViewById(R.id.page3);
        findViewById(R.id.btnp1).setOnClickListener(mClickListener);
        findViewById(R.id.btnp2).setOnClickListener(mClickListener);
        findViewById(R.id.btnp3).setOnClickListener(mClickListener);
    }
    //anonymous class 선언.
    Button.OnClickListener mClickListener = new Button.OnClickListener(){
		@Override
		public void onClick(View v) {
			mPage1.setVisibility(View.INVISIBLE);
			mPage2.setVisibility(View.INVISIBLE);
			mPage3.setVisibility(View.INVISIBLE);
			
			switch(v.getId()){
			case R.id.btnp1 : mPage1.setVisibility(View.VISIBLE); break;
			case R.id.btnp2 : mPage2.setVisibility(View.VISIBLE); break;
			case R.id.btnp3 : mPage3.setVisibility(View.VISIBLE); break;
			}
		}
    };
}

 위의 코드에서 유심히 볼 것은 xml내부의 속성을 자바 코드로도 접근할 수 있다는 것이다. 다음 시간에 더 자세히 알아 보기로 하고, 출력 결과를 살펴보자. 

1. 정상적인 출력결과.
   

   1페이지	2페이지	3페이지

     
2. 위에서 잠깐 언급했는데 모든 페이지의 속성을 visible로 주었을 때 출력결과를 살펴보았다.
   
   
   
   

3. 정말로 샌드위치가 되어서 출력되었다. 1page는 2page에 가려서 배경색만 나오고있고, 3page는 배경색이 없는 부분은 2page의 내용과 겹쳐서보이고 배경색이있는 영어 부분으로 3page가 가장 위에있다는 것을 확인 할 수 있다.

  이상 Multipage 예제로 android의 layout에 대해 알아보았다.