Création d'un système type "Google Maps"

Version imprimable

Bonjour !

Je dois réaliser une application proche du système Google Maps, mais en utilisant des fonds de carte personnalisés (crées par ma boite, ces derniers au format SVG)

Afin de garder les interactions Javascript du SVG, je dois donc passer par des WebView (Stoppez moi si je me trompe ! ^^)

Mon problème est le suivant :

Comment gérer facilement plusieurs niveaux de zoom dans une WebView ? Pour cela, j'ai testé de faire un appel a "loadUrl()" une fois un certain niveau de zoom atteint et calculer le scroll effectué sur la vue actuelle afin de replacer la nouvelle comme il le faut, mais sans succès ... Le nouveau SVG chargé se mets en (0, 0) avant de se déplacer au mauvais endroit (problème de calcul mais ce n'est pas tellement le sujet du problème)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 @Override public boolean onTouchEvent(MotionEvent event) { if(event.getAction() == MotionEvent.ACTION_UP) { //Log.i("Scale", Float.toString(getScale())); // Calcul des scrolls ... if(getScale() > 4.0) { loadUrl("file:///android_asset/zoom4.svg"); } } return super.onTouchEvent(event); }
Je suis ici dans une classe perso héritant de WebView, afin de redéfinir les TouchEvents.

Si quelqu'un aurait une idée de comment bien procéder pour faire cela, je suis preneur d'avis !

Merci à tous

PS : Pour ce qui est du "getScale()" dans le code, je sais qu'il est deprecated, seulement, pour mes tests cela m'est plus rapide que de le calculer manuellement

28/02/2013, 09h38
thiphariel

Bonjour !

J'ai testé une petite idée que j'ai eu (un peu dégueulasse je dois avouer...) qui est d'instancier 4 de mes vues perso (4 étant le nombre de niveau de zoom voulu) afin de les rendre visible/invisible selon le retour de "getScale()".

Etant donné que je ne peux (que je n'arrive pas ?) à faire un "setContentView()" en dehors du "onCreate" d'une Activity, cette idée s'envole à son tour...

Je suis toujours preneur d'une solution ! ;-)
Merci

Je reviens au nouvelles, avec quelque chose de plutôt fonctionnel (en phase alpha si je puis dire ...)

J'ai donc créé une classe qui étends WebView :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
 
enum ZoomLevel {
	LEVEL_1,
	LEVEL_2,
	LEVEL_3,
	LEVEL_4
}
 
public class TouchWebView extends WebView {
 
	private Point _scroll;
	private float _scale;
	private ZoomLevel _zoom;
	//private static final float RATIO = 2.46f;
 
	public TouchWebView(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
		_scroll = new Point(0,0);
		_scale = 2.0f;
		_zoom = ZoomLevel.LEVEL_2;
 
		setWebViewClient(new WebViewClient() {
			@Override
			public void onPageStarted(WebView view, String url, Bitmap favicon) {
				view.setAlpha(0.1f);
			}
 
			@Override
			public void onPageFinished(final WebView view, String url) {
				Log.i("FINISHED", ":)");
				view.scrollTo(_scroll.x, _scroll.y);
				view.setAlpha(1f);
			}
		});
	}
 
	@Override
	public boolean onTouchEvent(MotionEvent event) {
		_scale = getScale(); //Pas beau, à corriger plus tard
 
		if(getAlpha() < 1.0f) {
			return false;
		}
 
		switch(event.getAction()) {
		case MotionEvent.ACTION_MOVE:
			if(event.getPointerCount() > 1) {
				switch(_zoom) {
				case LEVEL_2:
					if(_scale >= 4.0) {
						doZoom(ZoomLevel.LEVEL_3, 400, "file:///android_asset/zoom3.svg");
						event.setAction(MotionEvent.ACTION_CANCEL);
					}
					break;
				case LEVEL_3:
					if(_scale < 2.5) {
						doZoom(ZoomLevel.LEVEL_2, 250, "file:///android_asset/zoom2.svg");
						event.setAction(MotionEvent.ACTION_CANCEL);
					}
					if(_scale > 6.5) {
						doZoom(ZoomLevel.LEVEL_4, 650, "file:///android_asset/zoom4.svg");
						event.setAction(MotionEvent.ACTION_CANCEL);
					}
					break;
				case LEVEL_4:
					if(_scale < 4.0) {
						doZoom(ZoomLevel.LEVEL_3, 400, "file:///android_asset/zoom3.svg");
						event.setAction(MotionEvent.ACTION_CANCEL);
					}
					break;
				}
			}
			break;
		}
 
		return super.onTouchEvent(event);
	}
 
	private void doZoom(ZoomLevel level, int scale, String url) {
		_scroll.x = (int) (getScrollX());
		_scroll.y = (int) (getScrollY());
		Log.i("SCROLL",_scroll.x + " / " + _scroll.y);
		_zoom = level;
		setInitialScale(scale);
		loadUrl(url);
	}
}

Alors, mon souci, déjà je pense que ça peut être améliorer, mais je vais m'en occuper au fur et à mesure, ensuite, au niveau des "setAlpha()", je les ai mit car cela me permet de voir le comportement de la WebView chargée : Elle se recharge totalement au appel des "loadUrl()" (Ce qui est tout à fait normal avec ce code actuel je le comprends)

Ce qu'il me faudrait actuellement, c'est un moyen de charger les différents niveau de zoom au lancement de l'application, mais je ne sais malheureusement pas comment faire avec mon code actuel.

Quelqu'un aurait-il une idée ?

Merci !

J'ai ajouté un ProgressBar pour "camoufler" la transition (longue..) entre les chargement des SVG :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
progress = new ProgressDialog(getContext());
progress.setMessage("Chargement ...");
 
setWebViewClient(new WebViewClient() {
			@Override
			public void onPageStarted(WebView view, String url, Bitmap favicon) {
				progress.show();
 
				super.onPageStarted(view, url, favicon);
 
				view.setAlpha(0f);
			}
 
			@Override
			public void onPageFinished(final WebView view, String url) {
				super.onPageFinished(view, url);
 
				if(_justBooted) {
					view.scrollTo((webviewContentWidth - MainActivity.width / 2), (int) (view.getContentHeight() - MainActivity.height / 2));
					_justBooted = false;
				}
				else {
					view.scrollTo(_scroll.x, _scroll.y);
				}
 
				view.setAlpha(1f);
 
				if (progress != null && progress.isShowing())
		        {
					progress.dismiss();
		        }
			}
		});

Par contre, après plusieurs essais de préchargement des WebView (donc document SVG), toujours aucun succès...

La je n'ai vraiment plus aucunes idées. Si quelqu'un pouvait m'éclairer la dessus, ça serait impecc ^^

Merci

Bonjour.

Mon problème est quasiment résolu.

Il fallait en fait charger les SVG dans l'activity contenant la WebView.
Voici le code de mon activity :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
 
public class MainActivity extends Activity {
 
	private TouchWebView _map;
	private Context _activity;
	private ProgressDialog _progress;
	public static int height;
	public static int width;
 
	@SuppressLint("SetJavaScriptEnabled")
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		_activity = this;
		_progress = new ProgressDialog(this);
 
		DisplayMetrics dm = new DisplayMetrics();
		getWindowManager().getDefaultDisplay().getMetrics(dm);
 
		height = dm.heightPixels;
		width = dm.widthPixels;
		Log.i("Size", width + " / " + height);
 
		_map = (TouchWebView) findViewById(R.id.map);
		_map.getSettings().setJavaScriptEnabled(true);
		_map.getSettings().setDomStorageEnabled(true);
		_map.getSettings().setBuiltInZoomControls(true);
		_map.getSettings().setDisplayZoomControls(false);
 
		_map.loadUrl("file:///android_asset/zoom4.svg");
		_map.loadUrl("file:///android_asset/zoom3.svg");
		_map.loadUrl("file:///android_asset/zoom2.svg");
 
		mChargement();
	}
 
	private void mChargement(){ 
		_progress.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);
		_progress.setMessage(this.getString(R.string.chargement));
		_progress.setTitle(R.string.titre_chargement);
		_progress.setMax(100);
		_progress.show();
 
		_map.setWebChromeClient(new WebChromeClient() {
			public void onProgressChanged(WebView view, int progress) {
				_progress.setProgress(progress);
 
				if (progress >= 100){
					_progress.dismiss();
					_map.setVisibility(View.VISIBLE);
				}
			}
		});
 
		//Au cas où il y ai une erreur, pour eviter le Force Close
		_map.setWebViewClient(new WebViewClient() {
			public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
				Toast.makeText(_activity, "Une erreur est survenue pendant le chargement :(" + description, Toast.LENGTH_LONG).show();
			}
		});
	}
 
	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}
 
	@Override
	public boolean onOptionsItemSelected (MenuItem item) {
		switch(item.getItemId()) {
		case R.id.action_prefs:
			//Préférences
			startActivityForResult(new Intent(this, PrefsActivity.class), 1);
			return true;
		}
		return super.onOptionsItemSelected(item);
	}
 
	@Override
	protected void onActivityResult(int requestCode, int resultCode, Intent data) {
		if(requestCode == 1) {
			Toast.makeText(this, "Préférences sauvegardées", Toast.LENGTH_SHORT).show();
		}
 
		super.onActivityResult(requestCode, resultCode, data);
	}
}

Le problème restant maintenant est de pouvoir replacer les SVG après un changement de zoom, car avant vu que ça chargeait assez longtemps, j'avais le temps de mettre un "scrollTo(x, y)" mais maintenant il va falloir réfléchir un peu :)