Androidプログラミングに挑戦2!(17)単位変換アプリを作る(その8)

0
    JUGEMテーマ:プログラミング

    今回のテーマは、単位の説明を表示する、です。
    まずは単位の名称を表示するようにしてみましょう。

    作ったレイアウトはこちらです。



    単位スピナーの下あたりに少し小さい文字で「メートル」とあります、ここに単位の名称を表示します。小さめの文字なので少し暗い名前が長くてもOK。何ならちょっとした解説も書ける、と言う訳です。ここは画面幅いっぱいに、幅指定はmatch_parentにしてやります。
    この単位名称・説明を追加したことで、入力/出力エリアが各2行になりましたので、少しでも見やすいようにとおもい仕切り線を入れました。この仕切り線が結構面倒でした。

    先にこの仕切り線を説明しておきたいと思います。
    androidにはHTML/CSSのようにパラメータ1つで簡単に下線を引く方法がありません。4辺全部を囲った枠線を引く機能ならあります。そこでこの機能を使って領域の一番下に線のある図形を作ってこれを背景に指定してやる方法がとられます。
    背景となる図形は、次のようにxmlで指示します。

    drawable/underline.xml
    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
        <!-- 枠線付き長方形 -->
        <item>
            <shape android:shape="rectangle">
                <solid android:color="#FAFAFA"/>
                <stroke android:width="1dp" android:color="#AAAAAA" />
            </shape>
        </item>
        <!-- 1dp分の padding を設定した枠線なし長方形 -->
        <item android:bottom="1dp">
            <shape android:shape="rectangle">
                <solid android:color="#FAFAFA"/>
            </shape>
        </item>
    </layer-list>
    
    リスト中にコメントで書いてありますが、前半で枠付きの長方形を作ります。次に後半で枠無しの長方形を、下側に1dpのpaddingを持たせて重ねてやります。これで、隙間から1dpの下線が除いているイメージになります。
    これを、カテゴリーを選択するLinerLayout(Horizontal)と、今回追加したコメント用のTextViewに対してbackgroundに設定してやります。上記xmlファイルをdrawableフォルダに置いたうえで、backgroundに「@drawable/underline」と指定してやればOKです。


    次に、コメント文です。
    これは、カテゴリー毎にコメント文をまとめてString-ArrayとしてString.xmlに保存しておき、単位スピナーを切り替えた時に、選ばれた単位に対応するコメント文を取り出して表示することにしました。
    変更する場所は、入出力それぞれのスピナーのOnItemSelectedListnerです。

    冒頭部分を書き出します。
    unitSpinnerInput.setOnItemSelectedListener(new OnItemSelectedListener() {
        // アイテムが選択された時
        public void onItemSelected(AdapterView<?> parent, View viw, int arg2, long arg3) {
            idxi = unitSpinnerInput.getSelectedItemPosition();
            commentArrayInput = new String[30];
            if (categoryNumber==0) {    // 長さ
                commentArrayInput = getResources().getStringArray(R.array.unitCommentLength);
                textView3.setText(commentArrayInput[idxi]);
                switch(idxi){
                    case 0: // m
                        convRatioInput = 1.0;
                        break;
                    case 1: // km
    (以下省略)
    

    まず5行目、コメント一覧を読み込む配列を宣言しています。
    次に7行目、コメント一覧を読み込みます。unitCommentLengthというのが「長さ」カテゴリーのコメントをまとめたString-Arrayの名前です。
    そして8行目、入力側のコメントテキストを表示するTextViewに4行目で取得したポジションのコメント文を表示します。
    これを入出力すべてのカテゴリーに対して追記してやればOKです。

    出来上がりはこんな画面になります。


    いい感じです。


    ということで今回はここまで。次回は多言語対応についてです。

     


    コメント
    コメントする








       

    calendar

    S M T W T F S
         12
    3456789
    10111213141516
    17181920212223
    24252627282930
    << November 2019 >>

    アクセスカウンタ

    合計:
    今日:
    昨日:

    selected entries

    categories

    archives

    recent comment

    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      てちくん
    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      てちくん
    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      小田きく江
    • ロリポブログでGoogleにサイトマップを登録する際の注意事項
      てちくん
    • ロリポブログでGoogleにサイトマップを登録する際の注意事項
      suraugi
    • いそべぇのペーパークラフトを作る(初級編)(12)
      てちくん
    • いそべぇのペーパークラフトを作る(初級編)(12)
      だべえ
    • noomでマイナス12kgのダイエットに成功!
      Yoko

    recommend

    recommend

    recommend

    ドール デザートメーカー ヨナナス901
    ドール デザートメーカー ヨナナス901 (JUGEMレビュー »)

    結構高いんです、でも欲しいんです!

    links

    profile

    書いた記事数:173
    最近の更新日:2017/01/30

    search this site.

    others

    mobile

    qrcode

    powered

    無料ブログ作成サービス JUGEM

    Google Adsense

    楽天ブックス

    楽天