Archive for 2月, 2011

iDOFの使い方

木曜日, 2月 24th, 2011
このエントリーを含むはてなブックマークはてなブックマーク - iDOFの使い方

*この記事はAppBank様に寄稿させていただいた記事の一部を抜粋&変更して使用しております。詳しい説明はこちらを御覧ください。

 

iDOFの特徴

iDOFは、iPhoneで撮影した画像を一眼レフカメラで撮影されたような写真に加工することができるアプリです。

iDOFでは、一眼トイカメラやTiltShift Generatorと違い、ピントをあわせる部分とぼかす部分を手動で選択できるため、より自然な写真を作成することが出来ます。

 

iDOFの使い方

この画像をiDOFで処理してみたいと思います。


 
 
画像を読み込むと、読み込んだ画像が画面に表示されるので、焦点を当てたい部分を指でなぞっていきます。すると選択された範囲に赤いマスクがかかります。また、Paintボタンをタップするとペンの太さなどが変更できます。操作を取り消したい場合は右上のUndoボタンを利用してください。


 
 
 
細かい部分を選択したい場合、画面上でピンチイン・アウトのジェスチャを行うことで画像の拡大縮小ができます。また、ConfigボタンやColorボタンでぼかしの強さや焦点サイズ、画像の色調補正などが行えます。
 

 
 
右端のPreviewボタンを押すと結果が表示されます。気に入った場合はSaveボタンを、修正したい場合は各操作に戻ってください。結果はこのようになりました。
 

 
 

Tips: ミニチュア風写真の作成方法

ぼかしを少し弱めて焦点サイズを最大にし、彩度とコントラストをプラス、明度をマイナスにすることでミニチュア風の写真へと加工することができます。
 
 
 
 
 

ご購入はこちらから

iDOFを購入したい方は下の画像をクリックしていただくと、iTunesのページへジャンプすることが出来ます。

UITabBarで吹出しメニューを実装

木曜日, 2月 3rd, 2011
このエントリーを含むはてなブックマークはてなブックマーク - UITabBarで吹出しメニューを実装

 

UITabBarを使って、上の図のような吹出しメニューを作る方法を説明します。動作は次のようになります。TabBarItemを選択すると対応するメニューが出現し、もう一度押すと消えます。また、べつのTabBarItemを選択すると、現在のメニューが消えて対応するメニューが出現します。
 
 

親画面を作成する

まずはプロジェクトを作成します。今回もView-Based Applicationのテンプレートを使用します。プロジェクト名はTestにしました。


 
 
プロジェクトが作成できたら親画面を作成するため、TestViewController.xibファイルをダブルクリックしてInterface Builderを起動します。次にViewにライブラリからUITabBarをD&Dし、そのUITabBarにUITabBarItemをD&Dし、タブを3つ作成します。
 

吹出しメニュー画面を作成する

次に、各メニュー画面を作成します。メニュー画面1つに対して、1つのxibファイルを作成します。まずはResourceフォルダ上で「メニュー」→「追加」→「新規追加」を選択し、空のxibファイルを選択します。今回は3つのメニュー画面をつくるため、それぞれtab0.xib, tab1.xib, tab2.xibという名前でxibファイルを作成しました。

まずは、xibファイルにViewを配置するため、ライブラリからViewコンポーネントをD&Dしてきます。

つぎに、配置したViewをカスタマイズしていきます。Viewを選択肢た状態でインスペクタで高さを410(画面の高さからTabBarの高さを引いたもの)に設定します。また、Backgroundの背景色を透明に、OpaqueとUser Interaction Enabledのチェックを外します。ここまでで、透明なViewが完成しました。

 

つぎに、作成したView上にImageVIewを配置し、そこに吹出しの画像をのせます。下図の白い部分がimageViewを配置した場所になります。

このようなxibファイルを、メニューごとに3つ作成します。
 

メニュー画面をプログラムから呼び出す

ヘッダファイルではUITabBarへのアウトレットと吹出しメニュー用のviewを3つ宣言しています。UITabBarのアウトレットはIBを使って接続しておいてください。

TestViewController.h

@interface TestViewController : UIViewController
<UITabBarDelegate>{
	IBOutlet UITabBar *tabBar;
	UIView *views[3];
}

 
 
viewDIdLoad内では、作成した3つのxibファイルをロードしてviewsの配列にそれぞれ格納し、同時にaddSubViewで親画面に吹出しメニュー画面を登録しています。ただ、alpha値を0.0に設定しているため、画面上には表示されません。

tabBar:didSelectItem:メソッドでタブバーが押されたときの処理を行っています。このメソッドでは押されたタブによって、吹出しメニューの表示・非表示を制御しています。

TestViewController.m

- (void)viewDidLoad {
    [super viewDidLoad];
	
	tabBar.delegate = self;
	
	for(int i = 0; i < 3; ++i){
		NSString *nibName = &#91;NSString stringWithFormat:@"tab%d", i&#93;;
		views&#91;i&#93; = &#91;&#91;&#91;NSBundle mainBundle&#93; loadNibNamed:nibName owner:self options:nil&#93; objectAtIndex:0&#93;;	
		views&#91;i&#93;.alpha = 0.0f;
		&#91;self.view addSubview:views&#91;i&#93;&#93;;		
	}
}


- (void)tabBar:(UITabBar *)tabBar didSelectItem:(UITabBarItem *)item
{	
	for(int i = 0; i < 3; i++){
		if( i != item.tag ){
			views&#91;i&#93;.alpha = 0.0;
		} else {
			views&#91;i&#93;.alpha = 1.0 - views&#91;i&#93;.alpha;
		}
	}
}
&#91;/cpp&#93;
 
 
<h3>メニュー上のコントロールに対応する</h3>

最後に吹出しメニュー画面上のコントロール(ボタンやスライダ)のイベントをひろえるようにしましょう。まずはボタンが押された際に呼び出される関数を作成します。ヘッダファイルにも忘れず宣言を書いておいてください。

<b>TestViewController.m</b>
[cpp]
-(IBAction)buttonPressed:(id)sender
{
	NSLog(@"button pressed!");
}

次に、Interface Builderを使ってtab0.xibを開き、吹出しメニュー上にボタンを配置します。

通常でしたら、このボタンとFile’s OwnerのIBActionを接続して終わりなのですが、作成したtab0.xibファイルではFile’s OwnerがNSObjectに設定されているため、接続することが出来ません。

そこで、File’s Ownerを選択した状態でインスペクタを使ってFile’s OwnerのクラスをTestViewControllerクラスへと変更します。

クラスを変更すれば、Interface Builderから、ソースファイルで設定したIBOutletとIBActionが見えるようになるので接続を行ってください。
 
ソースファイル一式をココにおいておくので参考にしてください。
参考ソースファイル