darjjeelling apps website



Xamarin Studio for Macでアプリを作ってストア公開してみた3

(2016/9)
(この記事は、Xamarin Studio for Macでアプリを作ってストア公開してみた2 のつづきです)

ic_launcher「相手から見たモード」機能の追加

さて前回、インカメラからの映像を画面上に表示させるところまでやりました。
ここにもう少し鏡アプリらしい機能を追加していきましょう。

ち、な、み、に、

みなさん鏡アプリって使ったことありますか?
昔から数多く出ていますが、その中でも特に日本製アプリでよく見かける機能があるんですが、なにか分かりますか?

そう、「相手から見たモード」です!

普通にインカメラに映る自分の姿は、鏡を見ているのと同じ左右状態になっています。
これを左右反転して表示させると、相手から見た自分の姿が見える。(例えば、相手から見て左側は自分から見て右側)
これが相手から見たモード。この機能を追加していきましょう。

まずMirrorController.csファイルを新規追加します。
後でこのクラスを呼び出す関係でSingletonにします。
C#ではこんな感じで書けばいいようですね。

続いてこのクラス内に、現在どちらのモード(相手から見たモード?通常の鏡モード?)かを保存するフラグmMirrorFlipと、それを返す関数GetMirrorFlip()を用意します。
さらに、後でボタンを用意しますので、ボタンを1回押すごとにフラグを反転させるトグルスイッチの役目になる関数ToggleMirrorFlip()も追加します。
その結果がこちら。

ここまでできたら、画面にボタンを追加していきましょう。
弄るファイルはこちらです。
Resources/layout/fragment_mirror.xml

こんな形でXMLを編集して、画面全体の下の真ん中にボタンを配置するようにします。
ボタンの画像は、Resources/mipmap-xhdpi/flip.png に用意しました。
その結果がこちら。

スクリーンショット3-01

なお、mirror.Droid.AutoFitTextureView(上の5行目)がインカメラの映像が表示されるViewですが、この上に重ねてボタンを表示したかったので、FrameLayoutを使いました。
ボタンの領域を専用で確保してしまうとミラー表示部分が狭くなってしまいますので、見にくくなってしまいますよね。#ちょっとユーザビリティを考えたりしてますよ。

こんな感じでAndroidのレイアウトファイル、リソースファイルを編集しました。
このあたりはAndroid Studioでの開発と同じ感覚でいけますね。

さて次は、ボタンを押された時に実行する処理を書いていきます。
MirrorFragment.csの中のOnClick()のcase文にResource.Id.flipを追加して、
さらに新しい関数FlipImage()を追加、これを呼ぶようにします。
またOnViewCreated()内で、ボタンへのリスナー登録も行います。

FlipImage()関数内では先ほどのMirrorControllerクラスからフラグを取得し、Toast表示しています。

そして本題の画面を左右反転する処理は、AutoFitTextureView.csの中に作っていきます。

サンプルコード中のクラス内のOnMeasure()関数内にSetMeasuredDimension()を呼ぶコードがありました。これが画面表示の描画サイズや位置(Dimension)を決定しているようです。
なので、この前に表示を左右反転してやる処理を入れれば良いことがわかります。

そして、左右反転するということは、XY方向を逆転する。これをMatrixを使って行います。
これが上の10〜24行目に該当します。

肝になるのは15行目の mat.PostScale((float)-1.0, (float)1.0); で、XY方向を反転させています。
ただその前に14行目で、中心位置を画面の真ん中の位置(width/2,newHeight/2)に持ってきてあげます。そうしないと、画面の左上を中心にして左右反転してしまい、表示がおかしくなります。
反転が終わった後の16行目で元の位置に戻します。

これらの処理を、7行目でMirrorControllerクラスから取得したフラグを見て「相手から見たモード」(mMirrorFlip=true)の場合にのみ実施します。

以上で、「相手から見たモード」が作れました。
ボタンを押すたびに表示が左右反転することを確認してみてください。

ic_launcherズーム機能の追加

次は、ズーム機能を作っていきましょう。

これも鏡アプリにはよくある便利機能です。
目元や口元を細かくチェックできるように、表示をズームするものですね。

さて、ズームのためのUIですが、だいたいSliderが使われているアプリが多いようです。
ただSliderではどうしても両手での操作が必要になってくるので、個人的には片手で操作できるような+ーボタンの方がいいと思っています。
そんなわけで、このアプリでは二つボタンを用意していきます。#これもユーザビリティ

Resources/layout/fragment_mirror.xml をこう書きます。

長くなりました。が、今回関係あるのは26〜52行目です。
この部分で3つのImageButtonをLinearLayoutで縦方向に並ばせつつ画面右下に配置しています。
結果を見たほうが早いですね。

こちらです!
スクリーンショット 3-02
オレンジ枠部分が追加されました。

なおイメージファイルは3つ
Resources/mipmap-xhdpi/arror_up.png
Resources/mipmap-xhdpi/zoom.png
Resources/mipmap-xhdpi/arror_down.png
を用意しました。

さて、「相手から見たモード」の時と同じようにトグルスイッチの役目になる処理をMirrorController.csに追加します。

mZoomRatioがズーム値で、今回は1〜4(倍)の値になるようにします。
ZoomIn()でmZoomRatioをインクリメントしていきますが、最大4までになるよう抑えています。
ZoomOut()でも同様に1より小さくならないようにします。

次はボタンを押された時に実行する処理です。
MirrorFragment.csの中のOnClick()のcase文にResource.Id.zoom_in, Resource.Id.zoom_outを追加して、
さらに新しい関数ZoomIn(),ZoomOut()を追加、これらを呼ぶようにします。リスナーも追加します。

ZoomIn(),ZoomOut()の中では、先ほどのMirrorControllerクラスのメソッドを呼び、mTextureView.RequestLayout();を呼んでいます。

このRequestLayout()ですがこれを呼ぶと、先ほど出てきたAutoFitTextureViewクラスのOnMeasure()が呼ばれるそうです。
ここに先ほどはMatrixを使って左右反転させましたね。
今回も同じ場所をいじって画面表示をズームさせます。

そのコードがこちら。

先ほどの左右反転のコードも混じっていますよ!
今回のキモは16、21行目です。PostScaleにズーム値を掛けているだけです。単純ですね。

これでズーム機能も作れました。
上下のボタンを押して、きちんとズームされているか確認してみてください。

ic_launcherちなみに

ちなみに、なぜMirrorControllerクラスにわざわざ分離したのかな?と思われる方もいるかもしれません。
そうですね、MirrorFragmentクラス内に処理を書いてもいいと思います。
でもせっかくのクロスプラットフォーム開発環境Xamarinを使っているので、iOS開発時でも使える共通コードがあるとうれしいかな?と思って切り出してみました。
#ほんのちょっとですけど

それから、今回は簡単だったので全てXML編集でやってしまいましたが、AndroidのUIをエディタ使ってがっつりいじりたい場合は、こちらの記事が参考になると思います。
http://www.buildinsider.net/mobile/xamarintips/0002

以上で今回の記事は終わりです。
ちょっと長くなりましたかね。
次もまだ機能追加していきますよ!!#全5回で終わらせられるのかな?
それではまた!

<この記事で作るアプリ>
鏡ミラー
https://play.google.com/store/apps/details?id=com.darjjeelling.app.mirror
Get it on Google Play

<アプリのソース>
https://github.com/darjjeelling/mirrorapp

<記事一覧>
Xamarin Studio for Macでアプリを作ってストア公開してみた
Xamarin Studio for Macでアプリを作ってストア公開してみた2
Xamarin Studio for Macでアプリを作ってストア公開してみた3
Xamarin Studio for Macでアプリを作ってストア公開してみた4


コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。