Android WebView с рядом кнопок под ним

Question

Я схожу с ума, пытаясь понять, как заставить работать этот простой макет.Я хочу веб-вид сверху ряда центрированных кнопок.Если я укажу определенный дп, например, 400 дп, я смогу увидеть веб-вид сверху и кнопки внизу экрана.Тем не менее, это не хорошо масштабируется для нескольких размеров экрана.Если я использую «fill_parent», то я никогда не вижу кнопок под веб-представлением.

Я просто хочу макет, который всегда будет размещать кнопки в нижней части экрана (не прокручиваться за пределы экрана) и иметь веб-просмотрзанять оставшееся пространство над ним.Я использую относительную компоновку в целом, потому что я хочу, чтобы индикатор прогресса находился в центре экрана во время загрузки веб-просмотра.

Вот мой код:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>

<ProgressBar android:id="@+id/progressbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
style="@android:style/Widget.ProgressBar.Inverse"
/>

<WebView android:layout_width="fill_parent" 
        android:id="@+id/webview"
        android:layout_alignParentTop="true"
         android:layout_height="400dp"
         android:layout_weight="1"> 
</WebView>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_below="@+id/webview"
>

<Button android:text="Browse"
        android:id="@+id/btnBrowse"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_weight="1.0"
        android:layout_alignParentBottom="true"
        android:drawableTop="@drawable/brouse"
        android:textSize="9dp"
        />

<Button android:text="Account"
        android:id="@+id/btnAccount"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_weight="1.0"
        android:layout_alignParentBottom="true"
        android:drawableTop="@drawable/account"
        android:layout_toRightOf="@+id/btnBrowse"
        android:textSize="9dp"
        />

<Button android:text="Contact"
        android:id="@+id/btnContact"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_weight="1.0"
        android:drawableTop="@drawable/contact"
        android:layout_toRightOf="@+id/btnAccount"
        android:textSize="9dp"
        />

<Button android:text="Quote"
        android:id="@+id/btnQuote"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_weight="1.0"
        android:layout_alignParentBottom="true"
        android:drawableTop="@drawable/custom"
        android:layout_toRightOf="@+id/btnContact"
        android:textSize="9dp"
        />
        </LinearLayout>     
</RelativeLayout>

ОБНОВЛЕНИЕ:

Я попробовал еще кое-что поэкспериментировать и получил почти то, что хотел, за исключением кнопок, которые почему-то находятся в верхней части экрана!WTF?В любом случае, я скоро попробую несколько предложений ваших парней!Спасибо!

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<ProgressBar android:id="@+id/progressbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
style="@android:style/Widget.ProgressBar.Inverse"
/> 

<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">


<WebView  
    android:id="@+id/webview"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_weight="9.0" 
    android:layout_alignParentTop="true"> 
</WebView>


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="0px"
android:layout_weight="1"
android:layout_alignParentBottom="true"
>

<Button android:text="Browse"
    android:id="@+id/btnBrowse"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:layout_weight="1.0"
    android:layout_alignParentBottom="true"
    android:drawableTop="@drawable/brouse"
    android:textSize="9dp"
    />

<Button android:text="Account"
    android:id="@+id/btnAccount"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:layout_weight="1.0"
    android:layout_alignParentBottom="true"
    android:drawableTop="@drawable/account"
    android:textSize="9dp"
    />

<Button android:text="Contact"
    android:id="@+id/btnContact"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_weight="1.0"
    android:drawableTop="@drawable/contact"
    android:textSize="9dp"
    />

<Button android:text="Quote"
    android:id="@+id/btnQuote"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:layout_weight="1.0"
    android:layout_alignParentBottom="true"
    android:drawableTop="@drawable/custom"
    android:textSize="9dp"
    />

    </LinearLayout>     

</LinearLayout>

Answer 1

1. Поместите LinearLayout с кнопками в нижней части экрана.
2. Поместите WebView над LinearLayout.

---

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <ProgressBar android:id="@+id/progressbar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        style="@android:style/Widget.ProgressBar.Inverse" />

    <LinearLayout
        android:id="@+id/button_panel"
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true">

        <Button ... />
        <Button ... />
        <Button ... />
        <Button ... />
    </LinearLayout>

    <WebView
        android:layout_width="fill_parent"
        android:id="@+id/webview"
        android:layout_above="@id/button_panel"
        android:layout_alignParentTop="true"
        android:layout_height="fill_parent" />
</RelativeLayout>

Answer 2

Просто нужно настроить ответ от Проблема с макетом Android с помощью кнопок под WebView .

Я понимаю, что WebView необходимо настроить относительно LinearLayout, потому что кнопки имеют предопределенный размер, а WebView может угадать, какое место осталось. Если вы хотите сделать обратное (кнопки относительно WebView), WebView начинается с захвата всего экрана, а затем кнопки больше никуда не уходят.

Для ясности я включил только соответствующие биты макета. Ключ должен использовать android:layout_above на WebView вместо android:layout_below на LinearLayout:

<WebView android:layout_width="fill_parent" 
    android:id="@+id/webview"
    android:layout_above="@id/buttons"
    android:layout_height="fill_parent"> 
</WebView>

<LinearLayout
    android:orientation="horizontal"
    android:id="@+id/buttons"
    android:layout_alignParentBottom="true"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">

    <Button android:text="Browse"
        android:id="@+id/btnBrowse"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_weight="1.0"
        android:layout_alignParentBottom="true"
        android:textSize="9dp"/>

    <!-- more buttons ... -->

</LinearLayout> 

Answer 3

Хорошо, вот код, чтобы сделать это:

На картинке выше есть 2 ряда кнопок: один сверху и один снизу. В середине находится WebView. Вот моя учетная запись GitHub, где вы можете скачать исходный код: https://github.com/GeneChuang1/Android/tree/Android

В противном случае, вот разбивка приложения:

Java-код (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;
        }
    }
}

У меня есть 2 макета XML. Один для главной веб-страницы, другой представляет собой готовое меню, которое я на главной веб-странице. XML-формат «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>

Другой формат 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>

Манифест Android (только если кто-то забудет интернет-разрешение):

<?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>

Опять же, вот моя учетная запись GitHub, где вы можете скачать исходный код: https://github.com/GeneChuang1/Android/tree/Android

Answer 4

TQvm to jkhouw1, Получил помощь от вашего кода, и я хотел бы поделиться со всем макетом, который я сделал; Полный код здесь - http://blog.kerul.net/2012/01/layout-webview-on-top-of-buttons-in.html

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:background="@drawable/islamicbg"
android:layout_height="fill_parent">

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="fill_parent"
    android:layout_height="wrap_content" android:layout_alignParentBottom="true"
    android:id="@+id/buttonlayout">

    <ImageButton android:id="@+id/btnprev"
        android:layout_height="wrap_content" android:layout_width="wrap_content"
        android:layout_weight="1.0" android:layout_alignParentBottom="true"
        android:src="@drawable/prevpage"/>

    <ImageButton  android:id="@+id/btnplay"
        android:layout_height="wrap_content" android:layout_width="wrap_content"
        android:layout_weight="1.0" android:layout_alignParentBottom="true"
        android:src="@drawable/play" android:layout_toRightOf="@+id/btnprev"
        />

    <ImageButton  android:id="@+id/btnpause"
        android:layout_height="wrap_content" android:layout_width="wrap_content"
        android:layout_alignParentBottom="true" android:layout_weight="1.0"
        android:src="@drawable/pause" android:layout_toRightOf="@+id/btnplay"
        />

    <ImageButton  android:id="@+id/btnstop"
        android:layout_height="wrap_content" android:layout_width="wrap_content"
        android:layout_weight="1.0" android:layout_alignParentBottom="true"
        android:src="@drawable/stop" android:layout_toRightOf="@+id/btnpause"
        />
    <ImageButton android:id="@+id/btnnext"
        android:layout_height="wrap_content" android:layout_width="wrap_content"
        android:layout_weight="1.0" android:layout_alignParentBottom="true"
        android:src="@drawable/nextpage" android:layout_toRightOf="@+id/btnstop"
        />
</LinearLayout>

<WebView android:layout_width="fill_parent" android:id="@+id/webview"
    android:layout_above="@id/buttonlayout" 
    android:layout_height="fill_parent" />
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/title"
    android:background="#ffffff">
        <TextView android:text="m-Mathurat" android:id="@+id/lbltitle" 
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1.0" 
            />
    </LinearLayout>
</RelativeLayout>

Answer 5

Поместите веб-представление относительно линейного макета следующим образом:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <ProgressBar android:id="@+id/progressbar"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        style="@android:style/Widget.ProgressBar.Inverse" />


    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="horizontal" android:layout_width="fill_parent"
        android:layout_height="wrap_content" android:layout_alignParentBottom="true"
        android:layout_below="@id/webview" android:id="@+id/buttonLayout">

        <Button android:text="Browse" android:id="@+id/btnBrowse"
            android:layout_height="wrap_content" android:layout_width="wrap_content"
            android:layout_weight="1.0" android:layout_alignParentBottom="true"
            android:drawableTop="@drawable/brouse" android:textSize="9dp" />

        <Button android:text="Account" android:id="@+id/btnAccount"
            android:layout_height="wrap_content" android:layout_width="wrap_content"
            android:layout_weight="1.0" android:layout_alignParentBottom="true"
            android:drawableTop="@drawable/account" android:layout_toRightOf="@+id/btnBrowse"
            android:textSize="9dp" />

        <Button android:text="Contact" android:id="@+id/btnContact"
            android:layout_height="wrap_content" android:layout_width="wrap_content"
            android:layout_alignParentBottom="true" android:layout_weight="1.0"
            android:drawableTop="@drawable/contact" android:layout_toRightOf="@+id/btnAccount"
            android:textSize="9dp" />

        <Button android:text="Quote" android:id="@+id/btnQuote"
            android:layout_height="wrap_content" android:layout_width="wrap_content"
            android:layout_weight="1.0" android:layout_alignParentBottom="true"
            android:drawableTop="@drawable/custom" android:layout_toRightOf="@+id/btnContact"
            android:textSize="9dp" />
    </LinearLayout>


    <WebView android:layout_width="fill_parent" android:id="@+id/webview"
        android:layout_above="@id/buttonLayout" android:layout_height="fill_parent" />

</RelativeLayout>