[Android] FrameLayout의 사용(안드로이드 : 프레임레이아웃의 사용)

카테고리 없음 2011. 5. 3. 18:50

[Android] FrameLayout의 사용(안드로이드 : 프레임레이아웃의 사용)

FrameLayout을 사용한 간단한 예제입니다.

우선 FrameLayout에 대한 기본적인 것들을 알아봅니다.

FrameLayout에서 알아두어야 할 2가지

- 여러 레이아웃, 위젯을 하나의 레이아웃(FrameLayout) 안에, 겹쳐서 사용할 수 있다.
- 위에서 부터 아래로 코딩되었을 때, 아래 코딩된 레이아웃, 위젯이 위에 보여진다.

겹쳐서 사용할수있다는것과, 아래 코딩된 녀석이 위에 보여진다는 것. 이 두가지만 알면 FrameLayout을 사용해서 다양한 뷰를 만들 수 있습니다.

여기서는 겹쳐진다는 것을 바탕으로 한 내용을 이야기 할 것입니다.
아래는 두개의 LinearLayout을 겹쳐놓고, 버튼의 클릭에 따라서 다른 레이아웃을 보여주는 예제입니다.

frame_layout_example_activity.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
		android:layout_width="fill_parent"
		android:layout_height="wrap_content"
		android:orientation="horizontal" >
		
		<Button
			android:id="@+id/frame_layout_example_activity_b_visible_red"
			android:layout_width="fill_parent"
			android:layout_height="wrap_content"
			android:layout_weight="1"
			android:text="빨간색 레이아웃 보이기" />
		
		
		<Button
			android:id="@+id/frame_layout_example_activity_b_visible_blue"
			android:layout_width="fill_parent"
			android:layout_height="wrap_content"
			android:layout_weight="1"
			android:text="파란색 레이아웃 보이기" />
		
	</LinearLayout>
	
	
	
	<FrameLayout
		android:layout_width="fill_parent"
		android:layout_height="fill_parent"	>
		
		<LinearLayout
			android:id="@+id/frame_layout_example_activity_ll_red"
			android:layout_width="fill_parent"
			android:layout_height="fill_parent"
			android:background="#ff0000" >
		</LinearLayout>
		
		
		<LinearLayout
			android:id="@+id/frame_layout_example_activity_ll_blue"
			android:layout_width="fill_parent"
			android:layout_height="fill_parent"
			android:background="#000cff"
			android:visibility="invisible" >
			
		</LinearLayout>
		
	</FrameLayout>
	
	
</LinearLayout>

이렇게 코딩된 레이아웃은 아래와 같이 보일것입니다.

그리고 코드와 보여지는 뷰를 매칭시켜보면 아래와 같습니다.

(가장 부모인 LinearLayout은 orientation의 값이 vertical이다.)

실제로 영역이 어떤식으로 나누어지고 어떤 값들을 주었을때, 얼마만큼의 영역을 차지하는지를 알고 있다면,
영역을 잘 설계하는 것만으로도 많은 코딩시간을 단축시킬 수 있습니다.

FrameLayoutExampleActivity.java - 액티비티의 작성

package me.croute.example.framelayout;

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

/**
 * 프레임레이아웃 사용예제
 * http://croute.me/412
 * 
 * @author croute
 * @since 2011.05.03
 */
public class FrameLayoutExampleActivity extends Activity implements OnClickListener
{
	private LinearLayout mLlRed;
	private LinearLayout mLlBlue;
	
	/* (non-Javadoc)
	 * @see android.app.Activity#onCreate(android.os.Bundle)
	 */
	@Override
	public void onCreate(Bundle savedInstanceState)
	{
		super.onCreate(savedInstanceState);
		setContentView(R.layout.frame_layout_example_activity);
		
		Button bRed = (Button)findViewById(R.id.frame_layout_example_activity_b_visible_red);
		Button bBlue = (Button)findViewById(R.id.frame_layout_example_activity_b_visible_blue);
		
		mLlRed = (LinearLayout)findViewById(R.id.frame_layout_example_activity_ll_red);
		mLlBlue = (LinearLayout)findViewById(R.id.frame_layout_example_activity_ll_blue);
		
		bRed.setOnClickListener(this);
		bBlue.setOnClickListener(this);
	}
	
	/* (non-Javadoc)
	 * @see android.app.Activity#onResume()
	 */
	@Override
	protected void onResume()
	{
		super.onResume();
		
		mLlRed.setVisibility(LinearLayout.VISIBLE);
		mLlBlue.setVisibility(LinearLayout.INVISIBLE);
	}

/* (non-Javadoc)
	 * @see android.view.View.OnClickListener#onClick(android.view.View)
	 */
	@Override
	public void onClick(View v)
	{
		switch(v.getId())
		{
		// 빨간색버튼 클릭
		case R.id.frame_layout_example_activity_b_visible_red:
			mLlRed.setVisibility(LinearLayout.VISIBLE);
			mLlBlue.setVisibility(LinearLayout.INVISIBLE);
			break;

// 파란색버튼 클릭
		case R.id.frame_layout_example_activity_b_visible_blue:
			mLlRed.setVisibility(LinearLayout.INVISIBLE);
			mLlBlue.setVisibility(LinearLayout.VISIBLE);
			break;
		}
	}
}

여기서는 화면의 뷰를 바꿔주기 위해 두가지 경우에 대해 코드를 작성했습니다.
빨간색 레이아웃 보이기 버튼과, 파란색 레이아웃 보이기 버튼입니다.

switch(v.getId())

{

// 빨간색버튼 클릭

case R.id.frame_layout_example_activity_b_visible_red:

mLlRed.setVisibility(LinearLayout.VISIBLE);

mLlBlue.setVisibility(LinearLayout.INVISIBLE);

break;

// 파란색버튼 클릭

case R.id.frame_layout_example_activity_b_visible_blue:

mLlRed.setVisibility(LinearLayout.INVISIBLE);

mLlBlue.setVisibility(LinearLayout.VISIBLE);

break;

}

visibility 는 레이아웃, 위젯의 보여지는 상태를 설정 할 수 있습니다.
값은 VISIBLE, INVISIBLE, GONE 의 세가지 입니다.

값	상태
View.VISIBLE	화면에 보여진다. 영역을 차지한다.
View.INVISIBLE	화면에서 안보인다. 영역을 차지한다.
View.GONE	화면에서 안보인다. 영역을 차지하지 않는다.

이 세가지의 값들은 매우 중요합니다. 상황에 따라서 안보이는 설정을 할때, INVISIBLE을 사용할지, GONE을 사용할지 결정해야 할때가 있습니다.

FrameLayout의 경우 보통은 INVISIBLE 만 사용해도 됩니다.
영역을 차지하던 차지하지 않던, 어차피 여러 레이아웃을 겹칠 수 있으므로 영향을 별로 미치지 않기 때문이죠.

LinearLayout내에 여러 레이아웃, 위젯들이 있는 경우엔 INVISIBLE일지, GONE일지 잘 선택해야 합니다.
각 위젯들의 영역이 화면에 보여지는데 중요한 요소라면 INVISIBLE과 GONE의 차이에 따라 치명적일 수 있습니다.

위의 경우엔 LinearLayout 두 개(빨강/파랑)를 겹쳐놓고, VISIBLE/INVISIBLE 만으로 사용해도 문제가 없습니다.
visibility의 상태가 GONE이던 INVISIBLE이던 다른 레이아웃, 위젯에 영향을 미치지 않기 때문이죠.

FrameLayout은 이외에도 여러가지 형태로 뷰를 출력하는데 사용될 수 있습니다.

- 스크린 샷 -

애플리케이션 실행 시 처음으로 보이는 화면

오른쪽에 있는 파란색 레이아웃 보이키 버튼 클릭