Androidプログラミングに挑戦2!(19)単位変換アプリを作る−アプリのアイコンを作る

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

    それでは今回はアプリのアイコンを作っていきましょう。
    といってもデザインの講義ができるわけではないので、お話は主にそのサイズ、寸法的な話になります。

    スマートフォンのホーム画面やドロワー内に表示される、タップするとそのアプリが立ち上がるあのアイコンを「プロダクトアイコン」とか「ランチャーアイコン」等と呼びます。ランチャー=起動する、という意味ですね。このアイコン、アプリの起動に必要なアイコンですから、今まで作っていたUnitConverterにも当然ありました。これです。

    このドロイド君は、Android Studioのデフォルトのランチャーアイコンなんですね。ですから何も設定しないとこのアイコンでアプリが作られるわけです。でもGooglePlayに打って出ようというわけです、いつまでもデフォルトのアイコンではいけません。新しくオリジナルのアイコンを作ってみよう、というのが今回のテーマなわけです。

    ということで早速始めたいわけですが、いきなり問題にぶち当たりました。
    いったいどんな大きさでアイコンを作ってやればいいのでしょう?
    形から入る理系の私としてはそこら辺がはっきりしないとなかなか始めるに始められません。
    ちょっと調べてみました。
    まず今まで作ったアプリのデフォルトのアイコンのサイズを確認してみました。するとびっくり、アイコンは1つではありませんでした。
    app>res>mipmap、の下にmipmap-mdpi,-hdpi,-xhdpi,-xxhdpi,-xxxhdpiの5つのフォルダがあり、それぞれの中にic_launcher.pngというファイルがあるのです。どれも開くと同じ画像に見えます。いや、少し違いました。大きさが違うのです。
    小さい方から順に、48×48ピクセル、72×72ピクセル、96×96ピクセル、144×144ピクセル、192×192ピクセルとなっています。これはスマートフォンの端末の解像度に応じて一番きれいなアイコンを表示できるように、あらかじめ準備してあるということなのです。

    ではそれぞれの大きさで一つ一つアイコン画像を描いてやらなくてはいけないのでしょうか?いえそんなことはありません。これより大きめの画像を1つ作って、それを元に縮小して切り出してやればいいのです。
    以前のアンドロイドアプリのデザインガイドには864×864ピクセルで画像を準備して、これを縮小・切り出してゆくことが推奨されていました。今回はこの864×864ピクセルの枠で画像を準備してみようと思います。

    まずはこれで枠が決まりました。でも枠のなかいっぱいにみちみちでアイコンを作るのは無粋というものです。適度にマージンを取って描いてやるとスマートなアイコンになります。ではどのくらいのマージンがいいでしょう?
    これは現在のアンドロイドアプリのデザインガイド(英文)に推奨サイズが載っていました。
    曰く、
    基本を48×48ピクセルとし、4倍スケール(192×192)でデザインする場合、正方形であれば152×152ピクセル
    これを目安とすると良いとあります。
    私の場合18倍スケールの864×864ピクセルでやっていますので、684×684ということになります。

    線の幅は、48×48ピクセルに縮小したときに1ピクセル幅となるように、18倍スケールなので18ピクセル幅の線で描画します。
    アイコンの四隅の角は丸くすることにします。曲げ半径は3D、つまり線の直径の3倍くらいがすっきりするので、18×3で半径54ピクセルで描かせました。
    更に、アイコンの右と下に1ピクセル(18倍スケールなら18ピクセル)の影を付けます。これで背景からアイコンが浮き上がって見えて、識別しやすくなります。
    枠だけでこんな感じになりました。



    図の白い部分が864×864ピクセルのエリアになります。
    この上に単位変換アプリをイメージする絵を描いていくことになります。

    と、ここで、私は絵心が無いから、というあなた、安心してください、私もありません。
    こんな時は文字で行きましょう。
    kgとか、lbとか、mとかの単位が踊っている感じです。
    ちょっと斜めにして文字を貼り付けてやって、ちょっと影なんか付けてやって、
    ちょいちょい、というかんじで、できました。こんなんです。



    どうでしょう?テーマカラーも何もない、原色バリバリでガチャガチャなアイコンですが、これ以上は本当に絵心がないんで、勘弁してください。

    さてこの864×864ピクセルの画像を、縮小しつつ切り出してゆくわけです。Illustratorであれば、ファイル>Web用に保存、というメニューからサイズと出力フォーマットを指定して出力することができます。
    その他のアイコン作成ツール6選こちらのサイトにまとめられていますので、これもご参照ください。

    こうして出来上がったアイコンは、所定のフォルダに収めておけば自動的に適用されます。
    所定のフォルダとは、先ほどのmipmapフォルダと、古い機種でアイコンが保管されていたdrawableフォルダです。
    具体的には、Android Studioのプロジェクトフォルダを開き、
    app>src>main>res
    のフォルダの下にmipmap-mdpi,-hdpi,-xhdpi,-xxhdpi,-xxxhdpi、それから、drawable-mdpi,-hdpi,-xhdpi,-xxhdpiの合計9つのフォルダを作って、それぞれ前に挙げた対応するサイズの画像を保存してやればOKです。drawableフォルダは古いバージョンとの互換性を保つために残しているだけなので、最新の-xxxhdpiまでは不要、と私は解釈しています。

    さあ、これでエミュレータを起動し、アプリが起動したらおもむろにホームボタンを押し、ドロワーをクリックすると、見事、自作のアイコンがその他のアイコンに並んで表示されました。



    余談ですが、このエミュレータ(Nexus 5)で見る限り、アプリ名称は日本語で6文字以内にした方が良いようです。先ほど試しに「シンプル単位変換」というアプリ名にしてみたところ、ドロワーでの表示が「シンプル単…」になってしまいましたので。

    以上でアイコンづくりの回は終了です。
    次回は、もう少し見た目をいじるか、広告を入れてみるか、ちょっと考えます。
    ではでは。


    Androidプログラミングに挑戦2!(18)単位変換アプリを作る−多言語化する

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

      今回はアプリの多言語化です。
      この多言語化、実はやることは単純です。
      ・多言語化したいリソースをstrings.xml等に定義する。
      ・strings.xml等の入ったフォルダ「values」をコピーし「values-ja」とする。
      ・valuesの中の表記を英語に、values-ja内の表記を日本語にする。

      といった流れになります。私の場合、単位スピナーの表示アイテムをjavaの中に書き込んでいたので、これをxmlから読み出してセットするようにします。読み出し方は前回の単位コメント文を読みだしたときと一緒です。

      準備ができましたら、valuesフォルダをコピーしてvalues-jaフォルダを作ります。するとこんな感じにvaluesフォルダ内に日本語用と英語用の2つのxmlファイルができます。


      私はこれまで日本語ベースで作ってきましたから、ここで、(ja)ではない方のstrings.xmlを英語仕様にしてやることで英語対応ができる、ということになります。

      ここからはひたすら頑張って英訳作業です。

      ・・
      ・・・・
      ・・・・・・・・
      英訳作業完了です!

      エミュレータの言語設定を変えて確かめてみましょう。
      現在はデフォルトのEnglishになっているので、表示はこんな感じになります。


      ここで、画面下の○印、ホームボタンをクリックすると、スマホのホーム画面が表示されます。



      今度は○印の上、白○に点が6つついているドロワーアイコンをクリックしてください。インストールされているアプリ一覧がひょじされます。



      その中に、歯車マークの「Setting」というアイコンがあるはずなので、探してくクリックします。
      この画面では一番左上にあるやつです。
      クリックすると設定メニューが表示されますので、PersonalカテゴリーのLanguage & inputを探し出してクリックしてください。



      表示されたメニューの一番上に「Language」というのがありますこれをクリックして下さい。



      一覧の中から「日本語」を選んでクリックします。多分一番最後にあります。



      すると、メニューが全て日本語に変わりました。改めてホームボタン(○印)をクリックしてください。



      同様にドロワーを開いて、ドロイドアイコンのUnitConverterの中で最新のものを見つけてクリックしてください。



      すると、どうでしょう、見事日本語表示に切り替わりました☆




      今回はここまで。次回はちょっと趣向を変えて、アプリのアイコンを作っていきたいと思います。


      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
          12345
        6789101112
        13141516171819
        20212223242526
        2728293031  
        << October 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

        楽天ブックス

        楽天