Webサイトをダイアログに表示する | WebView on Dialog | Android

スポンサーリンク

スポンサーリンク

WebViewの準備

アプリのヘルプ画面や更新情報をHTMLページで作成し、ダイアログ表示する方法について説明します。

まずはManifestでINTERNET接続ができるように設定を行います。お馴染みの、

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

です。

次にWebViewを準備することになるのですが、activityのレイアウトとは別にDialog用のレイアウトを別に用意します。

次のように。

<?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:background="#00000000"
    android:id="@+id/allFirst">
    <WebView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/firstWeb"
        android:layout_above="@+id/firstBottom"
        />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true"
        android:layout_gravity="center_horizontal|center_vertical"
        android:gravity="center_horizontal|center_vertical"
        android:id="@+id/firstBottom"
        android:background="#00000000"
        >
        <Space
            android:layout_width="0dp"
            android:layout_height="40dp"
            android:layout_weight="1" />
        <TextView
            android:layout_width="70dp"
            android:layout_height="25dp"
            android:gravity="center_horizontal|center_vertical"
            android:text="OK"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:id="@+id/okFirst"/>
        <Space
            android:layout_width="0dp"
            android:layout_height="40dp"
            android:layout_weight="1" />
    </LinearLayout>
</RelativeLayout>

下にダイアログの確認(ダイアログ消す)のためにOKボタンを用意しました。あまり良い方法ではありませんが、TextViewで。実際はButtonを使ってください。

DialogにWebサイトを表示する

では実際に表示するにはどうすればよいでしょうか。

public class MainActivity extends AppCompatActivity {
    private Dialog dialog;
    private Button button;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        dialog = new Dialog(this);
        button = (Button)findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                showDialog();
            }
        });
       //activity_mainに設定したbuttonをタップした場合にshowDialog()を実行
    }
    private void showDialog(){
        dialog.setContentView(R.layout.dialog);
        WebView firstWeb = (WebView) dialog.findViewById(R.id.firstWeb);
        firstWeb.loadUrl(getResources().getString(R.string.dialogUrl));
        TextView okFirst = (TextView) dialog.findViewById(R.id.okFirst);
        dialog.show();
        okFirst.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                dialog.dismiss();
            }
        });
    }
}

忘れがちな設定が  dialog = new Dialog(this); です。onCreateに。

showDialog()内に、dialog.setContentView(R.layout.dialog);でdialogのレイアウトを設定します。

その上で、dialogのR.id.firstWebをwebViewのfirstWebとして定義。

このあたりの書き方がをマスターするとレイアウトは自由自在です。

dialog.show()で表示、okFirstをタップすればdialogを消します。

これで完成です。

ダイアログのタイトルを表示しない方法

Androidのバージョンによってはダイアログのタイトル欄が表示されることがあります。表示しないためには以下のコードを追加します。

dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
  //setContentViewより前に記述します
dialog.setContentView(R.layout.dialog);