2009年10月10日土曜日

iPhone:タブバーのアイコンの作成方法

タブバーに表示するためのアイコンを作成するのに少し苦労しましたのでメモします。
今回、以下のようなアイコンを無事(センスはともかく)作成しました。


タブバーのアイコンについて調べると、
・サイズ30×30のpngファイル
・アルファチャネルだけが有効
とのことです。アルファチャネルとは何でしょう。透明度とのことです。

調べた結果、アルファチャネルの編集が可能なドットエディタとしてSimpleDotXを使用させていただきました。作者様ありがとうございました。

以下、手順を示します。

[1]新規ファイル作成
 SimpleDotXで新規画像を作成します。
 サイズは30×30で、32bitカラーで作成します。
[2]アルファチャネルで描くための設定をする
1. 表示をアルファチャネルに切り替える
2.パレットの表示もアルファチャネルに切り替える
3.パレットを作成する
 初期のパレットにある色は全てアルファ値255(不透明)になっています。
 何色かAのスライダーをいじってアルファ値のグラデーションを作成します。
4.描く
 iPhoneはアイコンを表示するときに、自動的にグラデーションをかけます。
 そのため、作成する絵にはあまりがんばってグラデーションをつけない方がいいように思います。あまり色をたくさん使わず、シンプルにしておいた方がiPhoneでみると見栄えがよくなるような気がします。作成した下の絵は4色しか使ってないのっぺりした絵ですが、最初のキャプチャを見てください。iPhoneがそれらしく加工して表示してくれます。
[3]保存
 png形式で保存します。

[4]Projectに組み込む
 できたファイルをXCodeでリソース登録し、IBでタブバーのアイコンに設定します。



 


iPhone:支出管理アプリケーションを開発開始

iPhoneアプリケーション開発の勉強も一段落して、9月から最初のアプリを作り始めました。
最初のお題として簡単な家計簿アプリを作ることにしました。
支出管理に的を絞って、手軽に使えるものにすることにしました。
収入や残高は対象にしません。

以下のような機能を予定しています。
・記入モード
 当月の支出項目をリスト表示
 新規項目の作成/編集/削除 
  (とにかく少ないステップで簡単に入力できるようにする)
・グラフ
 日ごとの支出総額の推移 折れ線グラフ
  (支出増加のペースを確認できるように)
 カテゴリごとの内訳 円グラフ
 月ごとの支出の推移 棒グラフ
  (過去の月や予算との比較 月末の振り返り、予算の見直しのために)
・表
 横軸=月 縦軸=カテゴリの集計表を表示する
・設定
 操作設定
 カテゴリ、カテゴリごとの予算の設定
 CSVファイルをメール送信
  (データのバックアップ、PCでデータ処理のため)
4つのモードをタブバーで切り替えられるようにします。

勉強しなければならないことは

・マルチビュー
 タブ+ナビゲーション
・カスタムビュー(入力を簡単にするために)
・データベース操作(SQLite3)
・グラフィック(グラフ、表)
・ファイル操作、メール

等々、膨大です。