TextView in WebView integrieren

Brausebernd · 14. September 2012

Hallo,
habe da ein kleines Problem.
Ich habe ein Programm geschrieben, welches mittels WebView ein Image in den Hintergrund legt.
Das Image ist zoombar und verschiebbar.
Nun möchte ich über diesen Hintergrund ein TextView legen, welches genau an einer Position bleibt.
Als Hintergrundbild hab ich einen Grundriss, der sich, wie schon erwähnt, zoomen lässt.
In einem Raum von diesen Hintergrundbild möchte ich einen Text einfügen (z.B. Wohnzimmer).
Das Problem liegt darin, dass beim hereinzommen in den Grundriss der Text nicht an der bestimmten Stelle bleibt, sondern "fest" über dem Hintergrund liegt.
Ich hoffe mein Problem ist verständlich beschrieben.
Nun zu meiner Frage: Ist das überhaupt mit WebView möglich?
Wenn ja kann mir jemand weiterhelfen?

Hier mal mein Code:
Layout_wv.java (Activity):

Code

package com.example.layout_wv;


import android.os.Bundle;
import android.app.Activity;
import android.webkit.WebView;
import android.widget.TextView;


public class Layout_wv extends Activity 
{
  
 WebView webView;
 private TextView raum;


 
	@Override
	public void onCreate(Bundle savedInstanceState) 
	{
    	super.onCreate(savedInstanceState);
    	setContentView(R.layout.activity_layout_wv);
     	
    	webView = (WebView)findViewById(R.id.webView);
    	raum = (TextView) findViewById(R.id.raum);
    	raum.setText("Wohnzimmer"); 
    	
    	String bild = "file:///android_res/drawable/image.jpg";
    	webView.loadUrl(bild);
    	webView.getSettings().setBuiltInZoomControls(true);
    	webView.getSettings().setUseWideViewPort(true);
    	webView.getSettings().setLoadWithOverviewMode(true);
 
	}
 	
}

Alles anzeigen

activity_layout_wv.xml

Code

&lt;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:android1="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent" &gt;


	&lt;WebView
    	xmlns:android="http://schemas.android.com/apk/res/android"
    	android:id="@+id/webView"
    	android:layout_width="fill_parent"
    	android:layout_height="fill_parent" &gt;
	&lt;/WebView&gt;


	&lt;TextView
		android1:id="@+id/raum"
		android1:layout_width="wrap_content"
		android1:layout_height="wrap_content"
		android1:layout_alignParentLeft="true"
		android1:layout_alignParentTop="true"
		android1:layout_marginLeft="61dp"
		android1:layout_marginTop="93dp"
		android1:text="TextView" /&gt;


&lt;/RelativeLayout&gt;

Alles anzeigen

Hoffe irgendjemand kann mir helfen.
Falls noch genauere Infos benötigt werden oder irgendetwas unverständlich ist, bitte melden.

Gruß
Brausebernd

titus · 14. September 2012

Hi Brausebernd,

ich habs nicht ausprobiert aber das hier könnte dir vielleicht weiterhelfen:

Creating Floating Views in Android

Mfg Titus

Brausebernd · 14. September 2012

Hallo,
erstmal vielen Dank an titus für die Antwort. Werd das morgen gleich mal ausprobieren ob mir das weiterhilft.
Vielleicht nochmal zum Verständnis, das ganze sollte so ähnlich wie google maps funktionieren.
Also der Text soll auf einer festen Koordinate angezeigt werden, unabhängig vom Zoom und der "Verschiebung''.
Vielleicht hat ja jemand sogar nen kurzes Beispiel irgendwo rumzuliegen.
Bei einer mobilen Website ist ja auch ein Link, Button, Text an einer bestimmten Position unabhängig vom zoom etc. deswegn habe ich mir eigentlich gedacht das es mit WebView funktionieren müsste.
Gruß
Brausebernd

Brausebernd · 16. September 2012

Hallo,
der Link von titus ist leider nicht passend für emin Problem.
kann mir jemand weiterhelfen?
Ist echt wichtig.
Gruß
Brausebernd

Brausebernd · 16. September 2012

Hallo,
ich bin echt am Verzweifeln.
Habe mit hilfe des Internets einen Code zusammengebastelt der ein zoombares Imageview erstellt.
Ich möchte ein Textview an einer festen Position über dem Image haben.
Hat irgendeiner eine gute Idee oder kennt vielleicht eine brauchbare Internetseite?
Hier mal mein Code der aus 2 Activitys besteht:
Layout:

Code

package com.example.layout;




import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.widget.ImageView;


public class Layout extends Activity {
	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
    	super.onCreate(savedInstanceState);
    	Layout1 img = new Layout1(this);
   	// ImageView img = new ImageView(this);
    	Bitmap image = BitmapFactory.decodeResource(getResources(), R.drawable.image);
    	img.setImageBitmap(image);
    	img.setMaxZoom(4f);
    	setContentView(img);
	}
}

Alles anzeigen

Layout1:

Code

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Matrix;
import android.graphics.PointF;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.ScaleGestureDetector;
import android.view.View;
import android.widget.ImageView;


public class Layout1 extends ImageView {


	Matrix matrix = new Matrix();


	// We can be in one of these 3 states
	static final int NONE = 0;
	static final int DRAG = 1;
	static final int ZOOM = 2;
	int mode = NONE;


	// Remember some things for zooming
	PointF last = new PointF();
	PointF start = new PointF();
	float minScale = 1f;
	float maxScale = 3f;
	float[] m;
	
	float redundantXSpace, redundantYSpace;
	
	float width, height;
	static final int CLICK = 3;
	float saveScale = 1f;
	float right, bottom, origWidth, origHeight, bmWidth, bmHeight;
	
	ScaleGestureDetector mScaleDetector;
	
	Context context;


	public Layout1(Context context) {
    	super(context);
    	sharedConstructing(context);
	}
	
	public Layout1(Context context, AttributeSet attrs) {
 	super(context, attrs);
 	sharedConstructing(context);
	}
	
	private void sharedConstructing(Context context) {
 	super.setClickable(true);
    	this.context = context;
    	mScaleDetector = new ScaleGestureDetector(context, new ScaleListener());
    	matrix.setTranslate(1f, 1f);
    	m = new float[9];
    	setImageMatrix(matrix);
    	setScaleType(ScaleType.MATRIX);


    	setOnTouchListener(new OnTouchListener() {


        	@Override
        	public boolean onTouch(View v, MotionEvent event) {
         	mScaleDetector.onTouchEvent(event);


         	matrix.getValues(m);
         	float x = m[Matrix.MTRANS_X];
         	float y = m[Matrix.MTRANS_Y];
         	PointF curr = new PointF(event.getX(), event.getY());
        	
         	switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
last.set(event.getX(), event.getY());
start.set(last);
mode = DRAG;
break;
case MotionEvent.ACTION_MOVE:
if (mode == DRAG) {
float deltaX = curr.x - last.x;
float deltaY = curr.y - last.y;
float scaleWidth = Math.round(origWidth * saveScale);
float scaleHeight = Math.round(origHeight * saveScale);
         	if (scaleWidth &lt; width) {
deltaX = 0;
if (y + deltaY &gt; 0)
deltaY = -y;
else if (y + deltaY &lt; -bottom)
deltaY = -(y + bottom);
         	} else if (scaleHeight &lt; height) {
deltaY = 0;
if (x + deltaX &gt; 0)
deltaX = -x;
else if (x + deltaX &lt; -right)
deltaX = -(x + right);
         	} else {
if (x + deltaX &gt; 0)
deltaX = -x;
else if (x + deltaX &lt; -right)
deltaX = -(x + right);


if (y + deltaY &gt; 0)
deltaY = -y;
else if (y + deltaY &lt; -bottom)
deltaY = -(y + bottom);
}
                     	matrix.postTranslate(deltaX, deltaY);
                     	last.set(curr.x, curr.y);
}
break;


case MotionEvent.ACTION_UP:
mode = NONE;
int xDiff = (int) Math.abs(curr.x - start.x);
int yDiff = (int) Math.abs(curr.y - start.y);
if (xDiff &lt; CLICK && yDiff &lt; CLICK)
performClick();
break;


case MotionEvent.ACTION_POINTER_UP:
mode = NONE;
break;
         	}
            	setImageMatrix(matrix);
            	invalidate();
            	return true; // indicate event was handled
        	}


    	});
	}


	@Override
	public void setImageBitmap(Bitmap bm) {
    	super.setImageBitmap(bm);
    	if(bm != null) {
     	bmWidth = bm.getWidth();
     	bmHeight = bm.getHeight();
    	}
	}
	
	public void setMaxZoom(float x)
	{
 	maxScale = x;
	}
	
	private class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener {
 	@Override
 	public boolean onScaleBegin(ScaleGestureDetector detector) {
 	mode = ZOOM;
 	return true;
 	}
	
@Override
public boolean onScale(ScaleGestureDetector detector) {
float mScaleFactor = detector.getScaleFactor();
float origScale = saveScale;
saveScale *= mScaleFactor;
if (saveScale &gt; maxScale) {
saveScale = maxScale;
mScaleFactor = maxScale / origScale;
} else if (saveScale &lt; minScale) {
saveScale = minScale;
mScaleFactor = minScale / origScale;
}
     	right = width * saveScale - width - (2 * redundantXSpace * saveScale);
        	bottom = height * saveScale - height - (2 * redundantYSpace * saveScale);
     	if (origWidth * saveScale &lt;= width || origHeight * saveScale &lt;= height) {
     	matrix.postScale(mScaleFactor, mScaleFactor, width / 2, height / 2);
         	if (mScaleFactor &lt; 1) {
         	matrix.getValues(m);
         	float x = m[Matrix.MTRANS_X];
             	float y = m[Matrix.MTRANS_Y];
             	if (mScaleFactor &lt; 1) {
     	if (Math.round(origWidth * saveScale) &lt; width) {
     	if (y &lt; -bottom)
         	matrix.postTranslate(0, -(y + bottom));
     	else if (y &gt; 0)
         	matrix.postTranslate(0, -y);
     	} else {
if (x &lt; -right)
matrix.postTranslate(-(x + right), 0);
else if (x &gt; 0)
matrix.postTranslate(-x, 0);
     	}
             	}
         	}
     	} else {
         	matrix.postScale(mScaleFactor, mScaleFactor, detector.getFocusX(), detector.getFocusY());
         	matrix.getValues(m);
         	float x = m[Matrix.MTRANS_X];
         	float y = m[Matrix.MTRANS_Y];
         	if (mScaleFactor &lt; 1) {
 	if (x &lt; -right)
 	matrix.postTranslate(-(x + right), 0);
 	else if (x &gt; 0)
 	matrix.postTranslate(-x, 0);
 	if (y &lt; -bottom)
 	matrix.postTranslate(0, -(y + bottom));
 	else if (y &gt; 0)
 	matrix.postTranslate(0, -y);
         	}
     	}
return true;


}
}
	
	@Override
	protected void onMeasure (int widthMeasureSpec, int heightMeasureSpec)
	{
    	super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    	width = MeasureSpec.getSize(widthMeasureSpec);
    	height = MeasureSpec.getSize(heightMeasureSpec);
    	//Fit to screen.
    	float scale;
    	float scaleX = (float)width / (float)bmWidth;
    	float scaleY = (float)height / (float)bmHeight;
    	scale = Math.min(scaleX, scaleY);
    	matrix.setScale(scale, scale);
    	setImageMatrix(matrix);
    	saveScale = 1f;


    	// Center the image
    	redundantYSpace = (float)height - (scale * (float)bmHeight) ;
    	redundantXSpace = (float)width - (scale * (float)bmWidth);
    	redundantYSpace /= (float)2;
    	redundantXSpace /= (float)2;


    	matrix.postTranslate(redundantXSpace, redundantYSpace);
    	
    	origWidth = width - 2 * redundantXSpace;
    	origHeight = height - 2 * redundantYSpace;
    	right = width * saveScale - width - (2 * redundantXSpace * saveScale);
    	bottom = height * saveScale - height - (2 * redundantYSpace * saveScale);
    	setImageMatrix(matrix);
	}
}

Alles anzeigen

Ich weiß einfach nicht wo ich das TextView definieren muss, dass es unabhängig vom Zoom an einer entsprechenden Position angezeigt wird.
Gruß
Brausebernd

Brausebernd · 17. September 2012

Kann mir keiner helfen?
Ich müsste doch das Textview irgendwie von Zoomlevel0 auf ZommlevelX umrechnen.
Villeicht kann es ja jemand nochmal kurz in Eclipse laden und mir helfen.
Hier noch mal das Manifest:

Code

&lt;manifest xmlns:android="http://schemas.android.com/apk/res/android"
	package="com.example.layout"
	android:versionCode="1"
	android:versionName="1.0" &gt;


	&lt;uses-sdk
    	android:minSdkVersion="15"
    	android:targetSdkVersion="15" /&gt;
	&lt;uses-permission android:name="android.permission.INTERNET"/&gt;


	&lt;application
    	android:icon="@drawable/ic_launcher"
    	android:label="@string/app_name"
    	android:theme="@style/AppTheme" &gt;
    	&lt;activity
        	android:name=".Layout"
        	android:label="@string/title_activity_layout" &gt;
        	&lt;intent-filter&gt;
            	&lt;action android:name="android.intent.action.MAIN" /&gt;


            	&lt;category android:name="android.intent.category.LAUNCHER" /&gt;
        	&lt;/intent-filter&gt;
    	&lt;/activity&gt;
	&lt;/application&gt;


&lt;/manifest&gt;

Alles anzeigen

Der anderer Code ist wie oben.

Bitte helft mir.

TextView in WebView integrieren

Jetzt mitmachen!

Teilen