안드로이드(Android) 두개의 사용자정의 View 를 FrameLayout 으로 표현하기

안드로이드(Android) 두개의 사용자정의 View 를 FrameLayout 으로 표현하기

 

환경 : Eclipse Mars, Android 4.2.2

 

이번에는 View 위젯을 상속받아 만든 사용자정의 View 2개를 FrameLayout 으로 메인화면에 표현해 봅니다. FrameLayout 의 사용법에 대해 간단히 알아볼 수 있는 샘플입니다.

 

 

▼ 이전에 작성했던 Bitmap 을 표현하는 View 와 사각형을 그리는 View 두개를 만들어 봅니다. 첫번째 View 는 터치 이벤트가 있을 때 Canvas 에 Paint 객체로 원을 그립니다.

 

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class FrameView1 extends View {

	private Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
	float cx = 0, cy = 0;
	boolean draw = false;

	public FrameView1(Context context) {
		super(context);
		init();
	}

	public FrameView1(Context context, AttributeSet attrs) {
		super(context, attrs);
		init();
	}

	public FrameView1(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		init();
	}

	private void init() {
		paint.setStyle(Paint.Style.STROKE);
		paint.setStrokeWidth(3);
		paint.setColor(Color.BLUE);
		setFocusable(true);
	}

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		setMeasuredDimension(MeasureSpec.getSize(widthMeasureSpec), 
				MeasureSpec.getSize(heightMeasureSpec));
	}

	@Override
	protected void onDraw(Canvas canvas) {
		if (draw) {
			canvas.drawCircle(cx, cy, 3, paint);
		}
	}

	@Override
	public boolean onTouchEvent(MotionEvent event) {
		int action = event.getAction();

		if (action == MotionEvent.ACTION_DOWN) {
			cx = event.getX();
			cy = event.getY();
			draw = true;
			invalidate();
		}else{
			performClick();
		}
		return true;
	}
	
	@Override
	public boolean performClick() {
		return super.performClick();
	}
}

 

▼ 두번째 View는 비트맵 이미지를 그립니다. Canvas 를 이용해 drawBitmap() 함수호출해서 그려 주면 됩니다.

 

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.View;

public class FrameView2 extends View {
	private Bitmap myBitmap;
	
	public FrameView2(Context context) {
		super(context);
	}

	public FrameView2(Context context, AttributeSet attrs) {
		super(context, attrs);
		myBitmap = BitmapFactory.decodeResource(
				getResources(), R.drawable.view02);
	}

	public FrameView2(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
	}

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		setMeasuredDimension(MeasureSpec.getSize(widthMeasureSpec), 
				MeasureSpec.getSize(heightMeasureSpec));
	}

	@Override
	protected void onDraw(Canvas canvas) {
		canvas.drawBitmap(myBitmap, 0, 0, null);
	}
}

 

▼ 이렇게 두개의 FrameView1, FrameView2 클래스를 메인 레이아웃 xml 로 구성해서 한 화면에 표현이 가능합니다. Xml 요소를 구성할 때 View 클래스의 패키지 주소를 입력하면 위젯을 쓰는 것과 동일하게 적용이 가능합니다. 기능은 각 View 마다 독립적으로 구현이 가능하죠. 원을 그리는 View를 클릭해보시면 알수 있습니다.

 

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <com.example.samplebooksearchapi.FrameView1
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

    <com.example.samplebooksearchapi.FrameView2
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

</FrameLayout>