03. XMLファイルへの移行

2022/10/13：見た目を修正しましたが、内容が古すぎてアレですね…。

レイアウトが複雑になってくるので、レイアウトファイルの定義（XML作成）をするようにしていきます。

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.linearlayout);

WebView webview = (WebView) findViewById(R.id.webview);

webview.loadUrl("http://www.yahoo.co.jp");

webview.getSettings().setJavaScriptEnabled(true);

webview.getSettings().setBuiltInZoomControls(true);

}

文字色が反転しているところ、これまではwebviewを直指定していたのをやめて、linearlayout.xmlというファイルを指定するようにします。このファイルは、Eclipseのディレクトリで、res/layout 以下に生成します。そして、次の行のWebView生成のところ。ここも書き方が変わります。

以下は「res/layout/linearlayout.xml」で、Eclipseの「新規」→「Android XMLファイル」でダイアログを表示させて、

リソースタイプ：レイアウト
ファイル：linearlayout.xml

として、下の選択肢からLinearLayoutを選んで生成しましょう。ここでは、２段構成でレイアウトを定義しています。

LinearLayout（縦向き）
- WebView
- LinearLayout（横向き） …①
  - EditText
  - Button
- </LinearLayout>
</LinearLayout>

LinearLayoutは、指定した向き（orientation）にしたがって、オブジェクトをポンポン置いていくレイアウトになります。vertical指定なら縦方向に、horizontal指定なら横方向に。ここでは、縦画面を想定し、

縦にWebView画面
その下に検索文字列を入れるところと、OKボタンを置くところ …①

を構成します。まずは縦に並べたいので、上位のLinearLayoutはvertical指定です。①は、横に並べたいので、またLinearLayoutでくるんでいます。どの定義も、「layout_width」と「layout_height」は設定を忘れないように。意味不明なエラーに巻き込まれてしまいます。コードで生成しているWebViewは、このレイアウトファイルのWebViewなので、WebView定義にある「id」名 = webviewをコード側で指定しています。

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical" >

<WebView

android:id="@+id/webview"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_weight="1" />

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:orientation="horizontal">

<EditText

android:id="@+id/addressbar"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_weight="1"

android:lines="1"

android:hint="検索キーワード" />

<Button

android:id="@+id/ok_button"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="実行" />

</LinearLayout>

ここで実行すると、画面の下に「検索キーワード」と「実行」ボタンが表示された状態で、上にウェブページが表示されるはずです。理解しておいてほしいのは、レイアウトのXMLファイルについて

共通
- layout_width / layout_heightの指定値は（必須）
  - fill_parent 親を埋めるサイズ
  - wrap_content コンテンツを覆うサイズ
  - match_parent 親の指定値に合わせる
- layout_weight ：重み付け（必要に応じて）
- @+id/xxxxx ： idを付加します。付加したidは、Relative Layoutや、コード上でWebViewやButtonを指定するのに使います。
LinearLayout
- orientation
  - リニアレイアウトは、orientationに指定した値の方向に、コンテンツを置いていきます。
  - vertical / horizontal
EditText
- lines ：編集可能なテキストの行数を決めます。他のサイトをみると、細かく説明が見つかります。
- hint ：フィールドが空のときに、表示しておく文字列を指定します。なくてもいいです。
Button
- text ：ボタンに表示する文字列を指定します。@stringから呼び出してもいいですが、手抜きするなら直接書いてしまいましょう。