2010-03-25 14 views
5

Recentemente ho faticato con un layout Android apparentemente semplice: volevo un WebView sopra un Button. Ha funzionato bene con i seguenti parametri:LinearLayout di una WebView e un pulsante

WebView: 
    Height: wrap-content 
    Weight: unset (by the way, what is the default?) 

Button: 
    Height: wrap-content 
    Weight: unset 

Tuttavia, se la pagina Web è diventata troppo grande, si è riversata sul pulsante. Ho provato varie combinazioni di pesi e altezze, e tutti tranne uno nascondono completamente il pulsante o lo coprono parzialmente. Questo è quello che funziona (copiato da http://code.google.com/p/apps-for-android/source/browse/trunk/Samples/WebViewDemo/res/layout/main.xml):

WebView: 
    Height: 0 
    Weight: 1 

Button: 
    Height: wrap-content 
    Weight: unset 

Se si modifica una di queste, ad esempio, dare un peso a un pulsante o modificare l'altezza di WebView in modo che non funzioni. La mia domanda è: perché? Qualcuno può per favore spiegare che cosa sta pensando il sistema di layout Android?

risposta

2

Qualcosa come il seguente dovrebbe darti quello che vuoi. La chiave è layout_height = "fill_parent" e layout_weight = "1" per WebView.

<LinearLayout android:orientation="vertical" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"> 
     <WebView android:layout_width="fill_parent" 
      android:layout_height="fill_parent" 
      android:layout_weight="1" /> 

     <Button android:layout_width="fill_parent" 
       android:layout_height="wrap_content" /> 
</LinearLayout> 


Edit: Ops, ho frainteso la tua domanda. È il layout_weight che non fa traboccare il pulsante (o la textview nel tuo esempio). Non sono sicuro del motivo per cui ciò accade, ma se c'è un elemento "fill_parent" nel tuo LinearLayout, oltre a uno o più elementi "wrap_content", devi specificare un peso_spedizione per l'elemento "fill_parent", o ci vorrà oltre lo spazio per il resto dei widget.

+3

'fill_parent' occupa tutto lo spazio rimanente in un' LinearLayout', quindi non è possibile avere i widget dopo di esso. Nel complesso, per i layout come questo, raccomando un 'RelativeLayout', in quanto le regole sono più esplicite e quindi più facili da mantenere (non devi ricordare i trucchi magici' layout_weight'). Basta avere il 'Button' come' alignParentBottom' e avere 'WebView' come' alignParentTop e sopra il 'Button'. – CommonsWare

+0

Per quanto riguarda i casi in cui sono presenti 4 o 5 widget, i primi due sono "wrap_content", il terzo è "fill_parent" e gli ultimi due sono "Wrap_content". Questo sarebbe un problema da mantenere con RelativeLayout, specialmente se si aggiunge un altro widget tra due degli altri widget. Con un LinearLayout, devi già ricordarti di dare il widget "coltivabile" "fill_parent". Devi solo ricordarti di dargli anche il trucco "layout_weight". – synic

+0

'RelativeLayout' non sarà difficile neanche per quel caso. Il widget in alto sarebbe 'alignParentTop', il secondo sarebbe' layout_below' il primo e il secondo in basso sarebbero fatti allo stesso modo ma allineati al fondo. Il widget medio "coltivabile" dovrebbe semplicemente 'layout_below' il widget inferiore nel gruppo in alto e' layout_above' il widget nel gruppo in basso. – jqpubliq

-1

è possibile specificare l'altezza del vostro WebView in pixel

android:layout_heigth = " 70px" 

ad esempio

Speranza che aiuta

-1

Si può provare qualcosa di simile:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="match_parent" > 

     <WebView 
       android:id="@+id/wv" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:layout_above="@+id/btn" /> 

     <Button 
      android:id="@+id/btn" 
      android:layout_alignParentBottom="true" /> 
</RelativeLayout> 
-1

Ok, ecco il codice per fare questo:

WebView with Options Menu on Top and Bottom

L'immagine sopra ha 2 file di pulsanti: uno in alto e uno in basso. Nel mezzo c'è la WebView. Ecco il mio conto GitHub dove u possibile scaricare il codice sorgente: https://github.com/GeneChuang1/Android/tree/Android

In caso contrario, ecco la ripartizione App:

Java Code (AndroidMobileAppSampleActivity.java):

package com.gene; 

import android.app.Activity; 
import android.os.Bundle; 
import android.view.View; 
import android.webkit.WebSettings; 
import android.webkit.WebView; 
import android.webkit.WebViewClient; 

import com.gene.R; 

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

     WebView mainWebView = (WebView) findViewById(R.id.webcontent); 

     WebSettings webSettings = mainWebView.getSettings(); 
     webSettings.setJavaScriptEnabled(true); 

     mainWebView.setWebViewClient(new MyCustomWebViewClient()); 
     mainWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY); 

     mainWebView.loadUrl("http://www.google.com"); 
    } 

    private class MyCustomWebViewClient extends WebViewClient { 
     @Override 
     public boolean shouldOverrideUrlLoading(WebView view, String url) { 
      view.loadUrl(url); 
      return true; 
     } 
    } 
} 

ho 2 layout XML. Uno per la pagina Web principale, l'altro è un menu predefinito che ho nella pagina principale. L'XML Layout “app_page.xml”:

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical"> 
    <LinearLayout 
     android:id="@+id/page_weekly_items_options_menu" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:background="#d4dbe1" 
     android:gravity="center" 
     android:orientation="horizontal"> 

     <ImageView 
      android:id="@+id/share" 
      android:layout_width="60dp" 
      android:layout_height="50dp" 
      android:background="@drawable/icon" 
      android:clickable="true" 
      android:onClick="userClickedShare"></ImageView> 

     <ImageView 
      android:id="@+id/left_arrow" 
      android:layout_width="60dp" 
      android:layout_height="50dp" 
      android:background="@drawable/icon" 
      android:clickable="true" 
      android:onClick="userClickedLeftArrow"></ImageView> 

     <ImageView 
      android:id="@+id/right_arrow" 
      android:layout_width="60dp" 
      android:layout_height="50dp" 
      android:background="@drawable/icon" 
      android:clickable="true" 
      android:onClick="userClickedRightArrow"></ImageView> 

     <ImageView 
      android:id="@+id/notifications_pageweeklyitem" 
      android:layout_width="60dp" 
      android:layout_height="50dp" 
      android:background="@drawable/icon" 
      android:clickable="true" 
      android:onClick="userClickedNotificationsPageWeeklyItem"></ImageView> 

     <ImageView 
      android:id="@+id/favorites_pageweeklyitem" 
      android:layout_width="60dp" 
      android:layout_height="50dp" 
      android:background="@drawable/icon" 
      android:clickable="true" 
      android:onClick="userClickedFavoritesPageWeeklyItem"></ImageView> 

    </LinearLayout> 

    <RelativeLayout 
     android:id="@+id/webcontent_container" 
     android:layout_width="wrap_content" 
     android:layout_height="match_parent" 
     android:layout_below="@id/page_weekly_items_options_menu"> 

     <WebView 
      android:id="@+id/webcontent" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_above="@+id/menu" 
      ></WebView> 
     <include 
      android:id="@+id/menu" 
      layout="@layout/bottom_menu" 
      android:layout_height="wrap_content" 
      android:layout_width="match_parent" 
      android:layout_alignParentBottom="true" 
      android:gravity="bottom" 
      android:layout_weight="1" 
      /> 


    </RelativeLayout> 

</RelativeLayout> 

L'altro schema XML è “bottom_menu.xml”:

<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/bottom_scroll_menu" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_gravity="bottom" > 
    <!-- This layout is used by activity_main.xml. 
    It is part of the main home page --> 
    <LinearLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:background="#17528c" 
     android:orientation="horizontal" > 

     <ImageView 
      android:id="@+id/Weekly" 
      android:layout_width="60dp" 
      android:layout_height="50dp" 
      android:background="@drawable/icon" 
      android:clickable="true" 
      android:onClick="userClickedWeekly" > 
     </ImageView> 

     <ImageView 
      android:id="@+id/Search" 
      android:layout_width="60dp" 
      android:layout_height="50dp" 
      android:background="@drawable/icon" 
      android:clickable="true" 
      android:onClick="userClickedSearch" > 
     </ImageView> 

     <ImageView 
      android:id="@+id/Favorites" 
      android:layout_width="60dp" 
      android:layout_height="50dp" 
      android:background="@drawable/icon" 
      android:clickable="true" 
      android:onClick="userClickedFavorites" > 
     </ImageView> 

     <ImageView 
      android:id="@+id/Notifications" 
      android:layout_width="60dp" 
      android:layout_height="50dp" 
      android:background="@drawable/icon" 
      android:clickable="true" 
      android:onClick="userClickedNotifications" > 
     </ImageView> 

     <ImageView 
      android:id="@+id/Profile" 
      android:layout_width="60dp" 
      android:layout_height="50dp" 
      android:background="@drawable/icon" 
      android:clickable="true" 
      android:onClick="userClickedProfile" > 
     </ImageView> 

     <ImageView 
      android:id="@+id/About" 
      android:layout_width="60dp" 
      android:layout_height="50dp" 
      android:background="@drawable/icon" 
      android:clickable="true" 
      android:onClick="userClickedAbout" > 
     </ImageView> 
    </LinearLayout> 

</HorizontalScrollView> 

L'Android Manifest (solo in caso qualcuno si dimentica il permesso internet):

<?xml version="1.0" encoding="utf-8"?> 
<manifest xmlns:android="http://schemas.android.com/apk/res/android" 
     package="tscolari.mobile_sample" 
     android:versionCode="1" 
     android:versionName="1.0"> 
    <uses-sdk android:minSdkVersion="10" /> 

    <uses-permission android:name="android.permission.INTERNET"/> 

    <application android:icon="@drawable/icon" android:label="@string/app_name"> 
     <activity android:name=".AndroidMobileAppSampleActivity" 
        android:label="@string/app_name"> 
      <intent-filter> 
       <action android:name="android.intent.action.MAIN" /> 
       <category android:name="android.intent.category.LAUNCHER" /> 
      </intent-filter> 
     </activity> 

    </application> 
</manifest> 

Ancora una volta, ecco il mio conto GitHub dove u possibile scaricare il codice sorgente: https://github.com/GeneChuang1/Android/tree/Android

-Gene Chuang

1

Beh, da allora ho capito questo. Il modo in cui funziona il sistema di layout Android:

  1. Tutte le cose sono disposte in base alla loro altezza/larghezza specificata.
  2. Qualsiasi rimanente il peso è distribuito tra le visualizzazioni in base al loro peso.

(Ovviamente questo non viene mai spiegato.)

Quindi per farlo funzionare si desidera che il tasto sia wrap-contenuti, il che lo rende altrettanto grande come deve essere, e il WebView a essere altezza zero (poiché può ridursi a zero). Dopo il punto 1 avrai il pulsante corretto, e quindi la webview zero-height.

Quindi si imposta il peso del pulsante su 0 e la ponderazione del web su 1, in modo che lo spazio rimanente venga assegnato alla vista Web, ad esempio si espande per riempire lo schermo.

Ha perfettamente senso quando si conosce l'algoritmo.

Problemi correlati