Tuesday, 1 May 2012

Display text on a specified location in a custom View


Last exercise "Get color on a specified location from ImageView's background bitmap" display text in a TextView on a fixed location. It's modified to display the text on a separated custom View on the touched location.

Display text on a specified location in a custom View


Create a new custom View, InfoView.java. It's used to display the text.
package com.exercise.AndroidDetechTouch;

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

public class InfoView extends View {

String info = "";
float x = 0; //init value
float y = 0; //init value

public InfoView(Context context) {
super(context);
// TODO Auto-generated constructor stub
}

public InfoView(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
}

public InfoView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
// TODO Auto-generated constructor stub
}

@Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);

Paint paint = new Paint();
paint.setStyle(Paint.Style.FILL_AND_STROKE);
paint.setColor(Color.WHITE);
paint.setStrokeWidth(2);
paint.setTextSize(30);

canvas.drawCircle(x, y, 5, paint);
canvas.drawText(info, x, y, paint);

}

public void updateInfo(String t_info, float t_x, float t_y){
info = t_info;
x = t_x;
y = t_y;
invalidate();
}

}


Modify TouchView.java
package com.exercise.AndroidDetechTouch;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.drawable.BitmapDrawable;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.ImageView;

public class TouchView extends ImageView {

Bitmap bitmap;
double bmWidth, bmHeight;

String touchInfo;
float touchX, touchY;

public TouchView(Context context) {
super(context);
// TODO Auto-generated constructor stub
init();
}

public TouchView(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
init();
}

public TouchView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
// TODO Auto-generated constructor stub
init();
}

private void init(){
bitmap = ((BitmapDrawable)getBackground()).getBitmap();
bmWidth = (double)bitmap.getWidth();
bmHeight = (double)bitmap.getHeight();
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// TODO Auto-generated method stub
setMeasuredDimension(MeasureSpec.getSize(widthMeasureSpec),
MeasureSpec.getSize(heightMeasureSpec));
}

@Override
public boolean onTouchEvent(MotionEvent event) {
// TODO Auto-generated method stub

switch(event.getAction()){
case MotionEvent.ACTION_DOWN:
case MotionEvent.ACTION_MOVE:
touchX = event.getX();
touchY = event.getY();

touchInfo = "Touched@"
+ String.valueOf(touchX) + " : " + String.valueOf(touchY);

((AndroidDetechTouchActivity)getContext()).updateMsg(touchInfo, touchX, touchY);

break;
case MotionEvent.ACTION_UP:
touchX = event.getX();
touchY = event.getY();

touchInfo = "UnTouched@\n"
+ String.valueOf(touchX) + " : " + String.valueOf(touchY);

((AndroidDetechTouchActivity)getContext()).updateMsg(touchInfo, touchX, touchY);
break;
}

return true;
}

/*
private int getColor(float x, float y){

if ( x < 0 || y < 0 || x > (float)getWidth() || y > (float)getHeight()){
return 0; //Invalid, return 0
}else{
//Convert touched x, y on View to on Bitmap
int xBm = (int)(x * (bmWidth / (double)getWidth()));
int yBm = (int)(y * (bmHeight / (double)getHeight()));

return bitmap.getPixel(xBm, yBm);
}
}
*/

}


Modify main activity, AndroidDetechTouchActivity.java.
package com.exercise.AndroidDetechTouch;

import android.app.Activity;
import android.os.Bundle;

public class AndroidDetechTouchActivity extends Activity {

TouchView touchView;
InfoView infoView;

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

touchView = (TouchView)findViewById(R.id.touchview);
infoView = (InfoView)findViewById(R.id.infoview);

}

public void updateMsg(String t_info, float t_x, float t_y){

infoView.updateInfo(t_info, t_x, t_y);

}

}


Modify main.xml, to place the InfoView over TouchView.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello" />
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<com.exercise.AndroidDetechTouch.TouchView
android:id="@+id/touchview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/ic_launcher"
/>
<com.exercise.AndroidDetechTouch.InfoView
android:id="@+id/infoview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
</FrameLayout>
</LinearLayout>


Download the files.

Next:
- Map the touch position with a mask

No comments:

Post a Comment