Диалог загрузки контента в WebView

| 05.01.2015

От одного из клиентов поступила задачка: на одном из экранов в процессе загрузки контента в WebView должно отображаться попап окно с сообщением «Идет загрузка, подождите…». Сообщение должно исчезать, как только контент будет загружен на 100%. Выглядит это примерно так:

Диалог загрузки контента в WebView

Как это удалось реализовать.

Макет экрана — res/layout/activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <WebView
        android:id="@+id/webV"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"></WebView>

</LinearLayout>

Здесь элемент WebView, в который мы, собственно, и загружаем веб-контент.

Строковые ресурсы:

<?xml version="1.0" encoding="utf-8"?>
<resources>
 
    <string name="app_name">WebViewProgress</string>
    <string name="action_settings">Settings</string>
    <string name="loading">Loading, please wait ...</string>
 
</resources>

Создаем верстку для диалогового окна. Тут мы добавляем два элемента: ProgressBar и TextView. Элемент ProgressBar формирует нам «крутящееся колесико».

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingLeft="20dp"
    android:gravity="center_vertical">

    <ProgressBar
        android:id="@+id/progressBar1"
        style="?android:attr/progressBarStyleLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:text="@string/loading"/>

</LinearLayout>

Создаем фрагмент, отвечающий за создание диалога.

package ru.androiddocs.webviewprogress;

import android.app.AlertDialog;
import android.app.Dialog;

import android.os.Bundle;
import android.support.v4.app.DialogFragment;
import android.view.LayoutInflater;

public class LoadingDialog extends DialogFragment {

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
        LayoutInflater inflater = getActivity().getLayoutInflater();

        builder.setView(inflater.inflate(R.layout.dialog, null));

        return builder.create();
    }
}

Ну и, наконец, MainActivity.java

package ru.androiddocs.webviewprogress;

import android.support.v4.app.FragmentManager;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.webkit.WebChromeClient;
import android.webkit.WebView;

public class MainActivity extends ActionBarActivity {

    WebView mWebView;
    LoadingDialog dialog;

    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWebView = (WebView) findViewById( R.id.webV );
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.loadUrl("http://androiddocs.ru");

        FragmentManager fm = getSupportFragmentManager();
        dialog = new LoadingDialog();
        dialog.show(fm, "my_tag");

        mWebView.setWebChromeClient(new WebChromeClient() {

            public void onProgressChanged(WebView view, int progress) {
                // если прогресс = 100%, диалог скрываем
                if(progress == 100) {
                    dialog.dismiss();
                }
            }
        });
    }
}

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*