第2回 認証画面のレイアウトを作成する

第1回 ライブラリの設定とマニフェストの設定

今回は認証画面のレイアウトを作ります。
新規Androidプロジェクトを作成すると、res/layout/main.xml とうファイルができあがってます。
このファイルを修正します。



main.xmlを開くと
Hello World, MainActivity! と表示された黒い画面がでます。
MainActivity という文字は新規Androidプロジェクトを作成した際に、
Activity name に設定した文字ですので、人によって異なる文字になると思います。

ここにWebView とEditText , Button を配置します。
Outline ビューで作業を行います。
最初からある TextView は削除しました。赤いマイナスをクリックすると選択されている項目を削除する事ができます。
次に WebView を追加します。と思って、緑のプラスをクリックしたところ・・・WebView が見つかりません(汗

xml を直接記述しました。
 ここまでの main.xml の内容はこちら
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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:id="@+id/WebView"
    >
    </WebView>

</LinearLayout>
ここまで

ここまでで、アプリを実行すると・・・白い画面が出るだけです。
Eclipse の画面はこちら

つぎに EditTextとButtonを配置したいのですが・・・
画面の下に横に並べて配置したいので、先にLinearLayoutを追加します。
このLinearLayoutはIdは不要なので削除します。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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"
        android:id="@+id/WebView" />


    <LinearLayout  
        android:layout_height="wrap_content"
        android:layout_width="fill_parent">
       
        <EditText
            android:text="@+id/EditText01"
            android:id="@+id/EditText01"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:layout_width="fill_parent" />
           
        <Button
            android:text="@+id/Button01"
            android:id="@+id/Button01"
            android:layout_height="fill_parent"
            android:layout_width="wrap_content" />
    </LinearLayout>

</LinearLayout>
ここまでのmain.xmlです。
Eclipse の Layout をみると・・・WebViewが消えちゃってますけど気にしません。
実機でレイアウトを確認すると
上部がWebViewで下部にEditTextとButtonが表示されています。(そうなっているように見えます。)

まだ、、、不安です。なんだか不安です。大丈夫でしょうか?
私はこのレイアウトを作るのが初めてなので不安で仕方がありません。。。が進みます。
だめだったら・・・この記事は封印(ページトップにWebViewが正しく表示できているキャプチャをのせてます。ということで封印しないですみました)

false って書いてあるのが気になりますね。
これを修正します。
EditText の方は Hint として「暗証番号を入力」としときます。
Button は「送信」と表示する事にします。

直接書いてもいいんですが・・・ローカライズするかもしれないので
strings.xml に記述する事にします。
res/values/strings.xmlを開きます。


hello(String)とかいうのが見えます・・・
これいりませんので削除しちゃいます。

次に、Add を押して下記を追加します。
Add を押した後にでる 画面では String を選択

Name : send_pin_button
Value : 送信

Name : input_pin_edit
Value : 暗証番号を入力

ここで、strings.xml は閉じてしまっていいです。(保存してから)

main.xml に戻って
EditText を選択します。
Properties ビューで Text を削除
Hint の項目に @string/input_pin_edit を記述します。
次にButtonを選択します。
EditText にグレーで「暗証番号を入力」て表示されてますね
Button の Properties の Text に
@string/send_pin_button
を記述します。
これで文字も設定できました。
認証画面のレイアウトはこれで完成です。

次回は認証のためのTwitterページを表示します。
いよいよプログラムです。

main.xml ---------------------------------------------------------------------------------------

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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"
        android:id="@+id/WebView" />


    <LinearLayout  
        android:layout_height="wrap_content"
        android:layout_width="fill_parent">
       
        <EditText
            android:id="@+id/EditText01"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:layout_width="fill_parent" android:hint="@string/input_pin_edit"/>
           
        <Button
            android:id="@+id/Button01"
            android:layout_height="fill_parent"
            android:layout_width="wrap_content" android:text="@string/send_pin_button"/>
    </LinearLayout>

</LinearLayout>

0 件のコメント:

コメントを投稿