LoginSignup
1
1

More than 5 years have passed since last update.

XamarinでAndroid WearのWatch Faceアプリを作ってみよう!(Vol.1x : プロジェクト作成編(Xamarin Studio向け))

Last updated at Posted at 2016-03-17

◆ おしらせ
近日、この記事も更新します。

こんにちはー!ニアです。
今回はXamarin.AndroidとXamarin Studioを使って、Android Wearアプリのプロジェクトを作成し、Watch Faceアプリ用にカスタマイズする方法を紹介していきます。

1. 環境

本記事では、以下の環境で作成しました。

  • Xamarin.Android : Ver. 6.0.2.1
  • Android SDK : Ver. 5.0.1(API Level 21)とVer. 6.0(API Level 23)
  • Android SDK Tools : Ver. 24.4.1
  • Xamarin Studio : 5.0.13

2. プロジェクトの作成

Xamarin Studioを起動し、新しいプロジェクトを作成します。

新しいプロジェクトのダイアログにあるインストール済みテンプレートから、「Android」 → 「App」 → 「Wear App」を選択し、Nextボタンをクリックします。

Wear Appプロジェクトの作成1

App Nameにアプリの名前を、Organization Identiferに組織の名前を入力し、Nextボタンをクリックします。

※パッケージ名は「[組織の名前].[アプリの名前]」(但し、小文字に変換されます)となります。

Wear Appプロジェクトの作成2

プロジェクト名とソリューション名を入力し、作成ボタンをクリックして、プロジェクトを作成します。

Wear Appプロジェクトの作成3

3. Android Manifestの編集

プロジェクトを作成したら、AndroidManifest.xmlを編集しましょう。

プロジェクトのPropertiesフォルダーからAndroidManifest.xmlを開きます。

Android Manifestの編集1

AndroidManifest.xmlの下部にあるタブから「Source」(日本語版では何故か「ソ」になってますが・・・)を選択します。

Android Manifestの編集2

Q. なぜApplicationタブから項目を設定するのではなく、Sourceタブからxmlファイルを直接編集する必要があるのですか?

この章で編集する項目の中に、Applicationタブからカスタマイズできないものがあるためです。

AndroidManifest.xml(プロジェクト作成直後の時)
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" android:versionCode="1" android:versionName="1.0" package="chronoir.net.watchfacetest">
    <uses-sdk />
    <application android:allowBackup="true" android:icon="@mipmap/icon" android:label="@string/app_name">
    </application>
</manifest>

3.1. アプリ名とパッケージ名の設定

アプリ名とパッケージ名を編集する場合、manifest要素にあるpackage属性にパッケージ名を、manifest要素内のapplication要素にあるlabel属性にアプリ名を設定します。

アプリ名とパッケージ名の設定
<manifest package="[パッケージ名]">
...
    <application android:label="[アプリ名]">
    ...
    </application>
...
</manifest>

アプリ名を「@string/app_name」とした場合、プロジェクトのvalueフォルダー → string.xml内の「<string name="app_name">[アプリ名]</string>」要素の値となります。

3.2. ターゲットにするAndroidのバージョンの設定

manifest要素内にuses-sdk要素を追加し、使用するAndroid SDKのバージョンを設定します。

Watch Face APIを利用するには、Android 5.0(API Level 21)以上が必要なので、minSdkVersion属性にAPI Level番号の21を設定します。

最小のSDKバージョンの指定
<manifest>
...
    <uses-sdk android:minSdkVersion="21" />
...
</manifest>

3.3. アプリを使用するデバイスの種類を宣言

manifest要素内にuses-feature要素を追加し、name属性に「android.hardware.type.watch」を設定して、Android Wearデバイスで使用することを宣言します。

AndroidWearデバイスで使用することを宣言
<manifest>
...
    <uses-feature android:name="android.hardware.type.watch" />
...
</manifest>

3.4. パーミッションの設定

Watch Faceは「PROVIDE_BACKGROUND」と「WAKE_LOCK」のパーミッション宣言が必要となります。

manifest要素内に、uses-permission要素を2つ追加し、それぞれのname属性に「android.permission.WAKE_LOCK」と「com.google.android.permission.PROVIDE_BACKGROUND」を設定します。

PROVIDE_BACKGROUNDとWAKE_LOCKのパーミッション宣言
<manifest>
...
    <uses-permission android:name="android.permission.WAKE_LOCK" />
    <uses-permission android:name="com.google.android.permission.PROVIDE_BACKGROUND" />
...
</manifest>

3.5. application要素の編集

manufest要素内のapplication要素に、以下の3つの属性を追加します。

  • allowBackup属性 : バックアップのサポートを利用するかどうかを表します。
  • supportsRtl属性 : 右から左方向へのレイアウトをサポートするかどうかを表します(アラビア語など、右から左方向へ文字を書く言語をサポートするためです)。
  • theme属性 : アプリケーションで使用するテーマを表します。
application要素に追加する属性
<application ...
             android:allowBackup="true"
             android:supportsRtl="true"
             android:theme="@android:style/Theme.DeviceDefault">
</application>

Q. Service要素は追加しないのですか?

Android StudioなどでWatch Faceアプリを開発する時、application要素の中にWatch Faceのサービスの構成を定義するservice要素を追加します。
Xamarinの場合、AndroidManifest.xmlに記述する代わりに、Watch Face用のクラスの属性としてサービスの構成を定義します。ビルド時にAndroidManifest.xmlと統合して1つのマニフェストファイルが自動生成されます。

3.6. 編集後のAndroidManifest.xml

この章で編集した後のAndroidManifest.xmlを以下に示します。

AndroidManifest.xml(編集後)
<?xml version="1.0" encoding="utf-8"?>
<!-- manifest要素は、マニフェストの構成を定義します。
     package属性は、アプリのパッケージ名( Google PlayでのURLで使用します )を表します。
     versionCode属性は、Google Playで管理するためのバージョン番号(整数)を表します。
     versionName属性は、Google Playで表示するアプリのバージョンを表します。 -->
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="[パッケージ名]"
          android:versionCode="1" android:versionName="1.0"
          android:installLocation="auto">

    <!-- uses-sdk要素は、Android SDKのバージョンを表します。
         minSdkVersion属性は、ターゲットにするAndroid SDKの最小バージョンを表します。
         ※ Watch Face API は Android SDK 5.0(API Level 21)以上が必要です。
         ※ 単位はAPI Levelです。 -->
    <uses-sdk android:minSdkVersion="21" />

    <!-- user-feature要素は、アプリケーションで使用している機能や、使用するデバイスの種類を宣言します。
         Watch Faceアプリの場合、name属性に「android.hardware.type.watch」を設定します。 -->
    <uses-feature android:name="android.hardware.type.watch" />

    <!-- uses-permission要素は、アプリケーションがユーザーに許可を要求する機能を宣言します。
         Watch Faceアプリの場合、「WAKE_LOCK」と「PROVIDE_BACKGROUND」が必要です。 -->
    <uses-permission android:name="android.permission.WAKE_LOCK" />
    <uses-permission android:name="com.google.android.permission.PROVIDE_BACKGROUND" />

    <!-- application要素は、アプリケーションの構成を定義します。
         label属性は、アプリのタイトル名を表します。
         icon属性は、アプリケーションのアイコンを表します。
         allowBackup属性は、バックアップサポートを利用するかどうかを表します。
         supportsRtl属性は、右から左方向へのレイアウトをサポートするかどうかを表します(アラビア語など、右から左方向へ文字を書く言語をサポートするためです)。
         theme属性は、アプリケーションで使用するテーマを表します。 -->
    <application android:label="@string/app_name"
                 android:icon="@mipmap/icon"
                 android:allowBackup="true"
                 android:supportsRtl="true"
                 android:theme="@android:style/Theme.DeviceDefault">
    </application>
</manifest>

このコードを直接コピー&ペーストしてもOKです([パッケージ名]は、アプリのパッケージ名に変更してください)。

4. プロジェクトの中身を構成

Wear Appプロジェクトの作成後の中身は、以下のような構成になっています。

プロジェクトの中身を構成1-1

4.1. 不要なファイルをプロジェクトから除外

Watch Faceアプリに不要なファイルをプロジェクトから除外しましょう。

MainActivity.cs」及びResourcesフォルダー内の「layout」フォルダーを右クリックし、メニューから「削除」を選択します。

プロジェクトの中身を構成1-2

確認ダイアログが現れたら、「プロジェクトから削除」をクリックします。

プロジェクトの中身を構成1-3

4.2. NuGetパッケージを追加・アップデート

プロジェクトにインストールされているNuGetパッケージを最新版にアップデートしましょう。

パッケージフォルダーを右クリックし、メニューから「更新」を選択します。

プロジェクトの中身を構成2-1

このプロジェクトで使用するNuGetパッケージは以下の5つです。

  • Xamarin Android Support Library - v13
  • Xamarin Android Support Library - v4
  • Xamarin Android Support Library - v7 RecyclerView
  • Xamarin Android Wear Support Libraries
  • Xamarin.Insights

足りないパッケージは、パッケージマネージャーからインストールしましょう。

パッケージフォルダーを右クリックし、メニューから「Add Package」を選択します。

プロジェクトの中身を構成2-2

NuGetパッケージマネージャーのダイアログが現れたら、パッケージソースを「nuget.org」を選択し、追加するパッケージを選択して、Add Packageボタンをクリックします。
(右上の検索ボックスに「xamarin」で始まるキーワードを入力して検索すると、見つかりやすいです。)

プロジェクトの中身を構成2-3

このプロジェクトで扱っている5つのNuGetパッケージのバージョンは以下の通りです。

  • Xamarin Android Support Library - v13 : Ver. 23.1.1.1
  • Xamarin Android Support Library - v4 : Ver. 23.1.1.1
  • Xamarin Android Support Library - v7 RecyclerView : Ver. 23.1.1.1
  • Xamarin Android Wear Support Libraries : Ver. 1.3.0.3
  • Xamarin.Insights : Ver. 1.11.4

4.3. watch_face.xmlの追加

Resourcesフォルダー内にxmlフォルダーを追加しましょう。

Resourcesフォルダーを右クリックし、メニューバーから「追加」→「新しいフォルダ」を選択します。

プロジェクトの中身を構成3-1

作成したフォルダーの名前を「xml」にします。

プロジェクトの中身を構成3-2

xmlフォルダーを右クリックし、メニューから「追加」→「新しいファイル」を選択します。

プロジェクトの中身を構成3-3

新しいファイルのダイアログが現れたら、左のリストボックスから「XML」を、中央のリストボックスから「空のXMLファイル」を選択し、名前欄に「watch_face」と入力して、Newボタンをクリックします。

プロジェクトの中身を構成3-4

作成したwatch_face.xmlに、以下の2文を追加します。

watch_face.xml
<?xml version="1.0" encoding="UTF-8"?>
<wallpaper xmlns:android="http://schemas.android.com/apk/res/android" />

4.4. プレビュー用の画像を追加

次にプレビュー画面で表示する画像をリソースに追加しましょう。

プロジェクトの中身を構成4-1

※プレビュー画面で表示する画像は四角形(preview)丸形(preview.circular)の2種類を用意する必要があります。

プレビュー用の画像が手元にない場合、こちらの2つをどうぞ。

preview_analog.png

preview_analog_circular.png

まず、Resourcesフォルダー内に「drawable-nodpi」フォルダーを作成します。

プロジェクトの中身を構成4-2

エクスプローラーなどで、drawable-nodpiフォルダーの中にプレビュー画面で表示する画像を入れます。

プロジェクトの中身を構成4-3

※ここではファイル名を「preview_analog」、「preview_analog_circular」としています。

drawable-nodpiフォルダー(Resourcesフォルダーでも大丈夫です)を右クリックし、メニューから「追加」→「Add Files from Folder...」を選択します。

プロジェクトの中身を構成4-4

フォルダー選択ダイアログが現れたら、drawable-nodpiフォルダーを選択します。

プロジェクトの中身を構成4-5

ファイル追加のダイアログでは、プレビュー用の画像ファイルにチェックを入れて、OKボタンをクリックします。

プロジェクトの中身を構成4-6

4.5. ソースファイルの追加

今度は、Watch Faceアプリのプログラムを記述するためのファイルを追加しましょう。

プロジェクトを右クリックし、メニューから「追加」→「新しいファイル」を選択します。

プロジェクトの中身を構成5-1

新しいファイルのダイアログが現れたら、左のリストボックスから「General」を、中央のリストボックスから「空のクラス」を選択し、名前欄にファイル名(※ここでは「MyWatchFace」とします)を入力して、Newボタンをクリックします。

プロジェクトの中身を構成5-2

5. Next

今回は、Xamarin StudioでAndroid Wearアプリのプロジェクト作成し、Watch Faceアプリ用に構成しました。次回(「Vol. 2 : プログラム作成編」)はWatch Faceアプリのプログラムをコーディングしていきます。

それでは、See you next!

参考サイト

「XamarinでAndroid WearのWatch Faceアプリを作ってみよう!」シリーズ一覧

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1