スキップしてメイン コンテンツに移動

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

コメント

このブログの人気の投稿

Android ロックアプリを作る -調査編 -

Android 端末のスクリーンがOFFになると端末がロックされて、
スクリーンがONになるとロック画面が表示されます。

ロック画面は指の軌跡かパスワードを入力することで解除できます。

このロック画面をアプリとして作ってみたいと思い調査を始めることにしました。

調査の方針としては


色々なロックアプリをダウンロードしてみる。それぞれのパーミッションを見てみる。

という感じです。


色々なアプリをダウンロードしてみる。

まずはロックアプリ特集とかを探してみます。

Google 先生に聞いてみよう > Android ロックアプリ
結構出てきますね。


WidgetLocker LockscreenLockBot ProFロックスクリーン



それぞれのパーミッションを見てみる。

WidgetLocker Lockscreen



android.permission.VIBRATEandroid.permission.DISABLE_KEYGUARDandroid.permission.RECEIVE_BOOT_COMPLETEDandroid.permission.EXPAND_STATUS_BARandroid.permission.GET_TASKSandroid.permission.REORDER_TASKSandroid.permission.SET_PREFERRED_APPLICATIONSandroid.permission.WRITE_SETTINGSandroid.permission.WAKE_LOCKandroid.permission.CALL_PHONEandroid.permission.READ_SYNC_SETTINGSandroid.permission.GET_ACCOUNTSandroid.permission.READ_LOGSandroid.permission.SYSTEM_ALERT_WINDOWandroid.permission.WRITE_EXTERNAL_STORAGEandroid.permission.INTERNETandroid.permission.ACCESS_NETWORK_STATEandroid.permission.ACCESS_WIFI_STATEcom.android.vending.CHECK_LICENSE
LockB…

携帯電話、タブレットの判定にピクセルではなくインチを使う

色々な案件に関わっていると、スマートフォンなのかタブレットなのかの判定をするためにピクセルを使用しているソースを見ることが多くあります。

幅、高さのそれぞれのピクセル数がある値を超えたらタブレットと判定する。


これはだめですよね

HTC j butterfly  はタブレットと判定されることが多くあります。




ディスプレイは約5インチ
w x h : 1080px x 1920px

5インチなので画面サイズが大きいということでタブレットという判定でもいいかもしれない・・・と思ったりしますが7インチ以上をタブレットと判定したい。。。




ピクセル数は画面のサイズ(インチ)とは違います。1080px x 1920px は5インチであるとは限りません。

i9220++ スマートフォン Android 4.0 3G GPS 5.2 インチ800万画素携帯(ブラック)

5.2インチ 画面解像度:960 x 540 pixels QHD screen


HTC j butterfly よりも画面サイズ(インチ)は大きいけれど、ピクセル数は少なくなってます。


ピクセル数で判定するのではなく、インチで判定したほうが正確ですね。



プログラムで画面サイズ(インチ)を計算してみましょう。

ディスプレイ情報を取得する ピクセル数(width, height)を取得するdpi (xdpi, ydpi) を取得する1インチあたりのピクセル数(dot per inch なのでドット数?) インチ(width, height) を計算する画面サイズ(インチ)を計算する
こんな流れになります。他に簡単に取得できる方法があれば教えていただけるとうれしいです。

Activity#onCreateに書きました

// ディスプレイ情報を取得する
final DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);

// ピクセル数(width, height)を取得する
final int widthPx = metrics.widthPixels;
final int heightPx = metrics.heightPixels;

// dpi (xdpi, yd…

Mac の ターミナルから アプリをアンインストールする adb uninstall

ant uninstall でもいいんだけれど、ant プロジェクトじゃないこともあるのでメモ

adb uninstall パッケージ名
cVolume next をターミナルからアンインストールする場合
パッケージ名は jp.caldroid.cvolume40 なので

adb uninstall jp.caldroid.cvolume40
となる