안드로이드 커스텀 탭 예제
간단한 커스텀 탭 뷰를 작성하여 xml 레이아웃파일에 설정하고 탭이 눌릴 때마다 탭의 색상이 토글되도록 하였고,
이벤트는 결국 Activity클래스에 전달되어 onClick()핸들러가 실행되도록 하였다.
MyView.java (커스텀 콤포넌트로 사용될 클래스)
package com.dearpeople.android.test.custom;
import java.util.ArrayList;
import android.content.Context;
import android.graphics.*;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;
/*
* 사각형 3개를 그리고 사각형을 누를 때마다 눌린 사각형만 회색으로 변경되고,
* 다른 사각형은 흰색으로 설정하는 예제
* 이 클래스를 좀더 확장하여 커스텀 탭으로 사용할 수도 있겠다.
* 이 뷰를 화면에 다수개 출력하려면 레이아웃 xml 파일에 다수개를 선언해 주면 된다.
*/
public class MyView extends View{
int onColor = Color.WHITE; //사각형의 바탕색을 설정할 때 사용됨
// 이 클래스의 객체가 다수개 생성되어 사용될 때 아래의 컬렉션에 참조를 저장해 두면
// 각 객체의 바탕색을 일괄적으로 설정할 수 있기 때문에 커스텀 탭을 구현할 때 응용할 수 있다.
static ArrayList<MyView> aList;
public MyView(Context context) {
super(context);
if(aList==null) aList = new ArrayList<MyView>();
aList.add(this);
}
/* xml 레이아웃파일에서 이 뷰를 사용하려면 이 생성자가 반드시 필요함*/
public MyView(Context context, AttributeSet attrs) {
super(context, attrs);
if(aList==null) aList = new ArrayList<MyView>();
aList.add(this);
}
/* 버튼으로 사용할 사각형을 그린다 */
@Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(onColor);//바탕색 설정
Paint paint = new Paint();
paint.setStyle(Paint.Style.STROKE); //Paint.Style.FILL(속을 채운다)
paint.setColor(Color.RED);
paint.setStrokeWidth(1);
canvas.drawRect(0, 0, 100, 20, paint);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
setMeasuredDimension(100, 20);
}
/* 사각형을 누를 때마다 눌린 사각형은 회색으로, 다른 사각형은 흰색으로 설정한다 */
@Override
public boolean onTouchEvent(MotionEvent event) {
//Toast.makeText(this.getContext(), "터치이벤트", Toast.LENGTH_SHORT).show();
onColor = Color.GRAY;
this.invalidate();
for(int i=0;i<aList.size();i++){
MyView v = aList.get(i);
if(v!=this){
v.onColor = Color.WHITE;
v.invalidate();
}
}
// 아래 라인에서 true를 리턴하면 Activity 클래스에 이벤트(onClick)가 전달된다
return super.onTouchEvent(event);
}
}
main.xml (레이아웃파일)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_horizontal"
android:gravity="center">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center">
<com.dearpeople.android.test.custom.MyView
android:id="@+id/myview1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"/>
<com.dearpeople.android.test.custom.MyView
android:id="@+id/myview2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"/>
<com.dearpeople.android.test.custom.MyView
android:id="@+id/myview3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"/>
</LinearLayout>
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center">
</TextView>
</LinearLayout>
CustomUITest.java
package com.dearpeople.android.test.custom;
import android.app.*;
import android.content.*;
import android.graphics.*;
import android.os.*;
import android.view.*;
import android.widget.*;
public class CustomUITest extends Activity implements View.OnClickListener{
/** Called when the activity is first created. */
TextView tv;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
tv = (TextView)this.findViewById(R.id.textView);
MyView mv01 = (MyView) this.findViewById(R.id.myview1);
MyView mv02 = (MyView) this.findViewById(R.id.myview2);
MyView mv03 = (MyView) this.findViewById(R.id.myview3);
mv01.setOnClickListener(this);
mv02.setOnClickListener(this);
mv03.setOnClickListener(this);
}
@Override
public void onClick(View v) {
//Toast.makeText(v.getContext(), "탭눌림", Toast.LENGTH_SHORT).show();
int id = v.getId();
if(id==R.id.myview1) tv.setText("탭 1 눌림");
if(id==R.id.myview2) tv.setText("탭 2 눌림");
if(id==R.id.myview3) tv.setText("탭 3 눌림");
}
}