スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[Android4.0以降]画面を左右にフリップするテンプレートを作成する。



この記事の目的は?


AndroidやiPhoneでよく見る「左右フリップで画面遷移させる」ための方法を紹介します。
Android 4.0(SDK v14以降)であれば、Eclipseの新規プロジェクト作成からテンプレート選択するだけで、簡単に作成することができます。

左右フリップで画面遷移させるとは?


AndroidのYouTubeアプリなどでよくある、左右にフリップさせると画面遷移できるアレです。
なめらかに画面遷移できますし、見た目かっこいいです。

私もああいうのを作ってみたいと思っていましたが、作り方が分からず放置していましたが、Android 4.0以降(正確にはSDK v14以降)に限定すると、Eclipseから新規プロジェクト作成させるときに、なんとテンプレートとして用意されています。

ということで、今回はYouTubeアプリのように、左右フリップで画面遷移させるやり方を紹介します。

手順


1.新規プロジェクトを作成します。

スクリーンショット(2012-10-26 0.32.20)

2.[New Android Application]で各種設定を行います。

スクリーンショット(2012-10-26 0.33.28)

[Minimum Required SDK]は「API 14」以降を選択してください。そうでないと今回の方法は使えません。

3.[New Android App]でアプリのアイコン設定を行います。

スクリーンショット(2012-10-26 0.33.58)

ここは今回の説明の本質では無いので、お好みで。

4.[Create Activity]画面で、生成するアクティビティ種別を選択します。

スクリーンショット(2012-10-26 0.34.08)

重要なのは、「Create Activity」にチェックを入れるのと、「BlankActivity」を選択することです。
こうしないとテンプレートを利用できません。

5.[New Blank Activity]画面でテンプレートを選択します。

スクリーンショット(2012-10-26 0.34.18)

今回は「Swipe Views + Title Strip」を選択します。(Tabs + SwipeでもOKです)

以上で設定は完了です。「Finish」ボタンをクリックすると、自動でテンプレートコードが出力されます。

実行結果


では実行してみます。出力したコードをそのまま何も触らずに実行します。

スクリーンショット(2012-10-26 0.56.01)

まずは[SECTION 1]という画面が表示されました。右上にうっすら[SECTION 2]という表記が見えますので、フリップするとそちらへ遷移しそうです。

スクリーンショット(2012-10-26 0.56.14)

左方向にフリップすると、想定通り[SECTION 2]に遷移しました。今度は左上に[SECTION 1]、右上に[SECTION 3]が見えますので、ここからさらに左右どちらかにフリップすると、それぞれの画面へ遷移することが可能です。

これで今回の記事の目的は達成できました。

まとめ


今回はViewFlipperという左右フリップで画面を遷移するためのサンプルコードの作り方をご紹介しました。

Android 4.0以降という制約はついてしまいますが、Eclipseの新規プロジェクト作成からテンプレート出力までできてしまうのは、とても簡単だと思います。

ちょうど各キャリアの2012年冬モデルが発表されて、ほぼすべてのスマートフォンがAndroid 4.0以降だということを考えると、こちらの方法で少しかっこいいUIを提供するアプリを開発するのもアリだと思います。



テーマ : プログラミング
ジャンル : コンピュータ

コメントの投稿

非公開コメント

プロフィール

sepiablue

Author:sepiablue
組込みソフトウェアエンジニアやってます。普段はC言語使い。
趣味はプログラミング、京都旅行で神社巡り。
AndroidアプリをMacで開発中。

最新記事
スポンサードリンク
スポンサードリンク
月別アーカイブ
カテゴリ
検索フォーム
RSSリンクの表示
リンク
QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。