darjjeelling apps website



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

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

ic_launcher明るさ変更機能の追加

前回ではズーム表示の機能を作りましたが、今回は画面の明るさを変更できる機能を追加してみましょう。

と、説明に入る前にいきなり余談ですが。
実はここは最大の鬼門でした。この機能をどうコーディングするかが分からずに1日くらい無駄にしてしまいました。

Androidでスマホの画面の明るさを指定するには、こんな感じで書けばいいですよね。

LayoutParameterクラスnewしてscreenBrightnessに好きな明るさの値を入れて、あとはgetWindow()でとったWindowにセットしてやります。

なので、これに対応するAPIを公式ドキュメントで探してみるわけです。
Android/iOS API互換100%をうたうXamarinですから、あるはずですよ!
そして近いのを見つけました。
これ↓
https://developer.xamarin.com/api/type/Android.Views.WindowManagerLayoutParams/
このWindowManagerLayoutParamsを使ってgetWindow()に対して指定してやればいいはず。
が、しかし、、、

getWindow()に対応するAPIがない!( ;´Д`)

なんじゃこりゃあ?絶対あるはずだ〜?でも検索に引っかからない、サンプルコードにもないし!?
もうパニックになりつつ迷って、これは誰かに聞くしかないか。と思った瞬間、フォーラムを探すのを忘れていたことに気づきました。
そしたら案の定、同じく悩んでた人がいるじゃないですか。

答えはバッチリここにありました。。。
http://forums.xamarin.com/discussion/comment/144246#Comment_144246

これをもとに書いた明るさを変えるコードがこちら。

うーん、言われてみれば、ActivityのWindowにSetAttributeって自然な流れのようにも見えますが。。。Androidの流儀とは全く違いますよねえ。Androidをもとに探してたらわかりませんよ。

Xamarinの罠にかかった、と思った瞬間でした。。。

さて、前置き長くなりましたが、さっきのChangeBrightness()を画面の明るさを変えるためのメソッドとして作り、これを画面上のボタンを押すたびに呼ばれるようにしていきましょう。
ボタンは例によって「+」「−」の二つを後で用意しますので、それぞれ押すと呼ぶ関数をここで作っておきます。
それがこちらです。

Lighten()が明るくするボタンを押された時に呼ぶ、Darken()は逆です。それぞれの関数内で先ほどのChangeBrightness()を呼んでますよね。これらのメソッドはMirrorFragmentクラス内に作ります。

さて、説明をスルーしてきましたが、MirrorControllerクラスに明るさ値を変更し、それを読み出せるようなメソッドを作っておきます。それを呼んでいるコードが上記に出てくる、
MirrorController.GetInstance().GetBrightness();
MirrorController.GetInstance().Lighten();
MirrorController.GetInstance().Darken();
なのです。
中身も一応見ておきましょう。MirrorController.csファイルを見てください。

明るさ値を保存する変数mBrightnessを用意して、1から5の範囲で値が変えられるようにします。GetBrightness()で返す値は、0〜1.0の値にするため5で割っています。

以上でメソッドの準備は終わり。
続いてfragment_mirror.xmlをいじって、ボタンを画面上に追加しましょう。
これは、前回のズームボタンとやり方は同じです。もう分かりますよね。

こちらのXMLファイルを見てみてください。
https://github.com/darjjeelling/mirrorapp/blob/master/Droid/Resources/layout/fragment_mirror.xml
これで、こんな画面イメージになります。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-08-27-19-16-47

そして、ボタンを押された時に先のLighten()/Darken()を呼ぶよう、MirrorController.csのOnClick()のSwitch文に追加すればOKです。

あとはボタンのリスナー登録もお忘れなく。
ここまで出来れば明るさ変更機能の完成です。

ic_launcherタップでストップ」機能の追加

さて、鏡アプリによくある機能でもうひとつ。それは、

画面を一時停止する機能。

使ったことありませんか?
横顔とか、後ろ髪とか、ふつうの鏡使っても自分の目でなかなか見えない場所。スマホをその辺りに向けて画面タップして一時停止してあげます。そのあと画面を見れば、見えない場所も自分で確認できるというものです。
まあ、簡易的なカメラ機能ですね。
これが、「タップでストップ」機能です。

それでは、画面をタップした時に一時停止を行えるようにしましょう。
まずは画面をタップしたことを検知するリスナーの登録。MirrorFragment.csに以下のように書きます。

View.IOnTouchListenerをクラス宣言に追加して、OnTouch()リスナー内に呼び出しコードを書きます。
ここではStopCapture()を呼ぶようにしています(8行目)
そのメソッドの中で画面を一時停止しますが、このように書きます。

7行目のmPreviewSession.StopRepeating();が肝です。
mPreviewSession変数はCameraCaptureSessionクラスで、これはカメラから流れてくる映像ストリーミングの制御するためのクラスです。
ミラー機能を実現するために、ふだんは前面カメラからリアルタイムに流れるストリーミングは垂れ流しで画面上に表示され続けます。この表示を開始するのがSetRepeatingRequest()メソッド。
これをMirrorFragmentクラスのUpdatePreview()内で呼んでいました。
ですが、今回は逆にこれを止めたい。
そのためのメソッドがStopRepeating()です。

上記のコードでは4行目でStopRepeating()つまり一時停止、と、表示の再開、つまりSetRepeatingRequest()もといUpdatePreview()を切り替えています。

そのフラグ切り替えのためのコードは例によってMirrorContorollerクラス内に作ります。

これで、画面をタップするたびに画面上の映像が止まったり再開したりする、「タップでストップ」機能が出来上がりました。

ic_launcher情報画面の追加

さて、ここまでで鏡アプリとして作っておきたい機能は作り終わりました!
ですが、最後に情報画面を追加してみましょう。
いわゆるPreferenceです。

Androidと同様に、以下の場所にXMLファイルを生成します。
Resources/Xml/preferences.xml

スクリーンショット 4-1.png

この中に、アプリのバージョン情報やサポートリンクなどを書きます。
さらに、このXML定義を使って画面を作るActivityクラスファイル(SettingsActivity.cs)も用意します。
この方法はAndroidで作る時と同様ですので解説を省きます。
出来上がりはこちらの2つのファイルです。
https://github.com/darjjeelling/mirrorapp/blob/master/Droid/Resources/Xml/preferences.xml
https://github.com/darjjeelling/mirrorapp/blob/master/Droid/SettingsActivity.cs

あと、情報画面を開くためのボタンを追加します。
それが、Resources/layout/fragment_mirror.xml内の以下の部分です。

画面の右上に出るようにレイアウトしています。
ボタン画像ファイルはmipmap-xhdpi/settings.pngを用意しました。

そして、ボタンを押された時に情報画面を表示するためのコードは、いつもの場所、MirrorFragmentクラス内のOnClick()に追加しましょう。

以上の手順を終えたら、画面右上のボタンを押して、情報画面が開くようになっていることを確認してみてください。

ic_launcher日本語化

ところで、これまでアプリ名やらToast表示やらは全部、英語表記のままでした。
これを日本語化しておきましょう。

やり方は、Resources/valuesフォルダと同列に、Resources/values-jaフォルダを作り、そこにStrings.xmlを作って日本語定義を書いてやります。
#これもAndroid開発の場合と同じですね。

こんな感じです。
https://github.com/darjjeelling/mirrorapp/blob/master/Droid/Resources/values-ja/Strings.xml

ic_launcherこれでおわり?

さてさて、ここまでおつかれさまでした。
これで鏡アプリとして作りたい機能はできました。めでたくアプリが完成!
、、、と言いたいところですが、まだやることは残っています。よね。

ともあれ今回はここまで。
つづきは次回最終回にて!

<この記事で作るアプリ>
鏡ミラー
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
Xamarin Studio for Macでアプリを作ってストア公開してみた5


コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中

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