Webview in zwei Bereiche aufteilen und einen bestimmten Bereich am Anfang anzeigen

  • Antworten:16
Thomas Ronge
  • Forum-Beiträge: 8

10.09.2012, 09:10:03 via Website

Hallo,

ich habe das Problem, dass die Navigation auf meiner Website im Webview zu viel Platz verbraucht.
Nun möchte ich, dass wenn die Seite geladen wird nur der Content angezeigt wird aber die Navigation soll sich links ausserhalb des Screens befinden.
Ich habe das so gelöst, dass wenn die Website fertig geladen ist, die Website um die Breite der Navigation nach links rutscht, aber das passiert erst wenn die
Website fertig geladen ist, und das dauert je nach Verbindung sehr lange.
Kann man sowas mit Gridlayout lösen und nur den Grid mit dem Content anzeigen, bevor die Seite fertig geladen hat, oder gibt es andere, bessere Lösungen?

P.S.:
Die Website ist mit Typo3 erstellt und ich rufe ein Template auf, welches für die Ansicht im Handy optimiert ist.
Die Navigation könnte ich z.B. auf eine extra URL legen und diese gesondert aufrufen.

Antworten
Florian B.
  • Forum-Beiträge: 284

10.09.2012, 09:52:24 via Website

Also das was du vor hat, ist sicherlich machbar, allerdings hört sich das für mich sehr aufwändig an. Du bräuchtest praktisch zwei Templates für deine Website, eins, dass nur den Content anzeigt und eins, das nur die Navigation anzeigt. Vor allem stelle ich mir das Durchschleifen der Click-Events zur jeweils anderen WebView recht umständlich vor. Letztendlich musst du das gesamte Verhalten der Webseite nachbauen.

Ich denke, dass man da eher das mobile Template der Webseite optimieren und das ganze dort lösen sollte.

Just my 2 cents.

— geändert am 10.09.2012, 09:54:57

Antworten
Thomas Ronge
  • Forum-Beiträge: 8

10.09.2012, 10:27:34 via Website

Kann man den zwei WebViews auf einer Seite anzeigen?
Wenn ja, dann könnte ich mir doch z.B. eine XML-Datei von der Navigation erzeugen und diese dann im linken Webview anzeigen.
Vielleicht kann man ja dann die Links mit so einem Art Target-Link auf die zweite Webview versehen?

Antworten
Florian B.
  • Forum-Beiträge: 284

10.09.2012, 11:30:49 via Website

Ja, man kann sicherlich zwei WebViews in einer Activity anzeigen, wie gesagt, die Frage ist nur, ob sich der Aufwand lohnt, diese beiden Views dann logisch zu verknüpfen. Du musst deine App dann jedes mal anpassen, wenn du auch die Webseite anpasst.

Antworten
Thomas Ronge
  • Forum-Beiträge: 8

10.09.2012, 12:24:11 via Website

Ich meinte das so:
- in der linken WebView zeige ich die Navigation von der Website an (mit "webView.loadUrl")
- in der rechten WebView zeige ich den Content an (mit "webView.loadUrl")
- wenn jemand in der Navi-WebView auf einen Link klickt, dann verändert sich nur die WebView mit dem Content

Meine Frage ist, ob ich zwei WebViews anlegen kann und ob ich der einen WebView sagen kann, dass die Links nur in der WebView mit dem Content geöffnet werden dürfen.

Antworten
Florian B.
  • Forum-Beiträge: 284

10.09.2012, 12:48:21 via Website

Wie gesagt, das geht durchaus. Du kannst Click-Events die in einer WebView gemacht werden abfangen und dann damit machen was du willst, in deinem Fall würdest du die geklickte URL auslesen und sie in der Content WebView laden.

Du könntest allerdings ein Problem bekommen, wenn sich die Navigation je nach angezeigtem Content ändert.

Antworten
Thomas Ronge
  • Forum-Beiträge: 8

10.09.2012, 12:58:17 via Website

Florian B.
Wie gesagt, das geht durchaus. Du kannst Click-Events die in einer WebView gemacht werden abfangen und dann damit machen was du willst, in deinem Fall würdest du die geklickte URL auslesen und sie in der Content WebView laden.

Du könntest allerdings ein Problem bekommen, wenn sich die Navigation je nach angezeigtem Content ändert.
Die Navigation bleibt immer gleich, weil ich das im Typo3-System trenne (zwei verschiedene Templates, eines nur Navi und das andere nur Content, welche mit einer speziellen URL aufgerufen werden).

Antworten
Florian B.
  • Forum-Beiträge: 284

10.09.2012, 13:42:40 via Website

Ich zweifel zwar immer noch daran, dass das von der Usability gescheit funktionieren wird, lasse mich aber gerne eines Besseren belehren und wünsche dir viel Erfolg. ;)

Antworten
Thomas Ronge
  • Forum-Beiträge: 8

10.09.2012, 15:40:39 via Website

Florian B.
Ich zweifel zwar immer noch daran, dass das von der Usability gescheit funktionieren wird, lasse mich aber gerne eines Besseren belehren und wünsche dir viel Erfolg. ;)
Habe jetzt aber noch keine Antwort auf die Frage: "Webview in zwei Bereiche aufteilen und einen bestimmten Bereich am Anfang anzeigen".
Weißt Du, wie ich den Aufruf dazu starte und wie ich zwei Webviews einbaue?

Antworten
Florian B.
  • Forum-Beiträge: 284

10.09.2012, 16:55:38 via Website

Ah sorry. Ja total vergessen vor lauter diskutieren. ;)

Du musst einfach ein Layout mit zwei WebView erstellen, jeweils eine eindeutige ID vergeben und diese dann im Code auch separat ansprechen. Du kannst dann in der onCreate() methode deiner Activity ja schon mal in jeder WebView die entsprechende Seite laden. Also in der einen deine Navi und in der anderen die den Content der Einstiegsseite der Webseite.

Um die Interaktion zwischen den WebViews hin zu bekommen, musst du dir einen WebViewClient implementieren, den du dann an die WebView mit der Navigation übergibst. Das geht dann z.B. mit

1mWebView.setWebViewClient(new MyWebViewClient());

Im WebViewClient musst du dann die Methode shouldOverrideUrlLoading() überschreiben. Dort kannst du dann festlegen was passieren soll, wenn eine URL geladen werden soll. In deinem Fall würdest du das Laden in der eigentlichen WebView abbrechen und die URL stattdessen in der zweiten WebView laden.

Eine Implementierung würde in etwa so aussehen. Ich hab das jetzt nur aus dem Kopf geschrieben, und nicht getestet.

1public class MyWebViewClient extends WebViewClient {
2
3 WebView mWebView;
4
5 public MyWebViewClient(WebView contentWebView){
6 mWebView = contentWebView;
7 }
8
9 @Override
10 public boolean shouldOverrideUrlLoading(WebView view, String url) {
11 // URL nehmen und an zweite WebView übergeben
12 mWebView.loadUrl(url);
13 return true;
14 }
15}

Antworten
Thomas Ronge
  • Forum-Beiträge: 8

10.09.2012, 19:26:22 via Website

Also irgendwie habe ich schon das Problem die beiden webviews in das Layout zu packen.
Wenn ich bei "onCreate" dies einsetze, wird nur die zuletzt angegebene URL geladen:
1// content
2setContentView(R.layout.webview_content);
3webView_content = (WebView) findViewById(R.id.webview);
4webView_content.getSettings().setJavaScriptEnabled(true);
5webView_content.setWebViewClient(new WebViewClient());
6webView_content.loadUrl("http://192.168.2.100/index.php?type=70");
7
8// navigation
9setContentView(R.layout.webview_nav);
10webView_nav = (WebView) findViewById(R.id.webview_nav);
11webView_nav.getSettings().setJavaScriptEnabled(true);
12webView_nav.setWebViewClient(new WebViewClient());
13webView_nav.loadUrl("http://192.168.2.100/index.php?type=70&id=witze");
Fehlermeldungen gibt es keine.

Antworten
Florian B.
  • Forum-Beiträge: 284

10.09.2012, 22:52:58 via Website

Wie hast du die Views denn im Layout definiert? Kannst du mal das xml posten.

Antworten
San Blarnoi
  • Forum-Beiträge: 2.545

10.09.2012, 23:54:10 via Website

Spielt das eine Rolle?
In Zeile 8 wird alles zunichte gemacht, was in den Zeilen 2-6 geschaffen wurde.
Wen wundert es da, wenn das Ziel nicht erreicht wird?

Antworten
Thomas Ronge
  • Forum-Beiträge: 8

11.09.2012, 07:37:51 via Website

Hier mal die erste .java-Datei:
1public class MainActivityDoni extends Activity {
2
3 private WebView webView_content;
4 private WebView webView_nav;
5
6 @Override
7 public void onCreate(Bundle savedInstanceState) {
8 super.onCreate(savedInstanceState);
9
10 // content
11 //setContentView(R.layout.webview_content);
12 setContentView(R.layout.activity_main_activity_doni);
13 webView_content = (WebView) findViewById(R.id.webview_content);
14 webView_content.getSettings().setJavaScriptEnabled(true);
15 webView_content.setWebViewClient(new WebViewClient());
16 webView_content.loadUrl("http://192.168.2.100/index.php?type=70");
17
18 // navigation
19 //setContentView(R.layout.webview_nav);
20 webView_nav = (WebView) findViewById(R.id.webview_nav);
21 webView_nav.getSettings().setJavaScriptEnabled(true);
22 webView_nav.setWebViewClient(new WebViewClient());
23 webView_nav.loadUrl("http://192.168.2.100/index.php?type=70&id=witze");
...usw.

Die zweite .java-Datei:
1public class NavWebViewClient extends WebViewClient {
2 WebView webview_nav;
3
4 public NavWebViewClient(WebView webView_content) {
5 webview_nav = webView_content;
6 }
7
8 @Override
9 public boolean shouldOverrideUrlLoading(WebView view, String url) {
10 // URL nehmen und an zweite WebView übergeben
11 webview_nav.loadUrl(url);
12 return true;
13 }
14
15}

Und in dieser XML-Datei lege ich das Layout fest:
1<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2android:layout_width="fill_parent"
3android:layout_height="fill_parent"
4android:orientation="vertical" >
5
6<WebView xmlns:android="http://schemas.android.com/apk/res/android"
7 android:id="@+id/webview_content"
8 android:layout_width="wrap_content"
9 android:layout_height="fill_parent"
10/>
11
12<WebView xmlns:android="http://schemas.android.com/apk/res/android"
13 android:id="@+id/webview_nav"
14 android:layout_width="wrap_content"
15 android:layout_height="fill_parent"
16/>
17
18</RelativeLayout>

Antworten
San Blarnoi
  • Forum-Beiträge: 2.545

11.09.2012, 09:29:52 via Website

Schon besser, aber jetzt wirst du trotzdem nur ein WebView sehen, weil die beiden im RelativeLayout nicht zueinander positioniert wurden und daher übereinander liegen.

Da beide volle Höhe haben vermute ich mal, das du die Views eigentlich nebeneinander liegen haben möchtest?

Antworten
Florian B.
  • Forum-Beiträge: 284

11.09.2012, 09:57:33 via Website

and dev
Spielt das eine Rolle?
In Zeile 8 wird alles zunichte gemacht, was in den Zeilen 2-6 geschaffen wurde.
Wen wundert es da, wenn das Ziel nicht erreicht wird?

Ah, das hab ich total übersehn. Da hast du natürlich vollkommen recht.

Antworten
Thomas Ronge
  • Forum-Beiträge: 8

11.09.2012, 17:23:16 via Website

Also, erst mal danke für Eure Hilfe und Zeit!!!
Ich habe das jetzt so gelöst:
- Ein Webview erstellt, welches eine Seite in meinem Typo3 aufruft, die ein eigenes Template hat
- In der Webview habe ich noch ein Optionsmenü mit drei Links eingebaut
- dann habe ich noch eine Subdomain "iphone" für die Mac-Leute erstellt (das ist dann der selbe Link wie in der Android-App)
- und wer sich das mal anschauen will (hier ist auch eine Beschreibung für die User): app.sv-stadtschwarzach.de

Ich werde mir die Geschichte mit der App-Programmierung mal genauer anschauen. Denke, da kann man bestimmt viele interessante Apps mit erstellen.

Antworten