LoginSignup
4
3

More than 5 years have passed since last update.

@masato(SHIMIZU Masato)

Xamarin StudioとGenymotionでAndroid開発 - Part2: Hello, Android

Last updated at Posted at 2015-01-12

Windows7にインストールしたXamarinStudioを使ってXamarin.Androidのサンプルを実装します。Hello, Androidのチュートリアルを使います。手順ではプロジェクト名がPhoneword_Droidですが、Phoneword.Androidに変更してnamespaceにも使います。完成したコードはGitHubのPhoneWordのリポジトリにあります。

Getting Started

Xamarin DevelopersのGetting Startedを開きます。

Xamarin App Icons & Launch Screens set

プロジェクトに追加するアインコンのXamarin App Icons & Launch Screens setのzipファイルをダウンロードして解凍します。

PhoneWordソリューションの作成

PhoneWordソリューションを作成します。

  • New Solution... -> その他 > 空のソリューション

xamarin-studio-solution.png

PhoneWord.Androidプロジェクトの作成

新しいプロジェクトのダイアログを表示します。

  • PhoneWordソリューションのギアアインコン -> 追加 -> 新しいプロジェクトを追加

PhoneWord.Androidプロジェクトを作成します。

  • C# -> Android -> Android Applicationテンプレート

xamarin-studio-project.png

Main.axmlの編集

デザイン サーフェイスを開きます。

  • Resourcesフォルダ -> layoutフォルダ -> Main.axmlをダブルクリック

Buttonを選択して、Deleteキーを押して削除します。

Toolboxから、Text (Large) コントロールを、デザイン サーフェイスへドラッグ＆ドロップします。Text (Large) コントロールを選択して、プロパティ パッドでTextプロパティを編集します。

  • Text property: Enter a Phoneword:

Plain Text コントロールを、 デザイン サーフェイスへ、Text (Large)コントロールの下にドラッグ＆ドロップします。

  • Plain Text コントロールを選択し、Id プロパティとTextプロパティ変更する
  • Id property: @+id/PhoneNumberText
  • Text property: 1-855-XAMARIN

Toolboxから、Button コントロールを、デザイン サーフェイスへ、Plain Text コントロールの下にドラッグ＆ドロップします。

  • Buttonコントロールを選択して、 プロパティ パッドから、Id プロパティとTextプロパティ変更する
  • Id property: @+id/TranslateButton
  • Text property: Translate

Toolboxから、Button コントロールを、デザイン サーフェイスへ、TranslateButtonの下にドラッグ＆ドロップします。

  • Buttonコントロールを選択して、 プロパティ パッドから、Id プロパティとTextプロパティ変更する
  • Id property: @+id/CallButton
  • Text property: Call

ここまでの作業をCtrl + sで保存します。

xamarin-studio-Main.png

PhoneTranslator.cs の追加

PhoneTranslator.csを追加して、電話番号を英数字から数字に変換するコードを記述します。

  • PhoneWordソリューション -> PhoneWord.Android プロジェクト
  • ギアアインコン -> 追加 -> General -> 新しいファイルを追加
  • General -> 空のクラス
  • 名前: PhoneTranslator

xamarin-studio-PhoneTranslator.png

以下のようにPhoneTranslator.csを作成します。

PhoneTranslator.cs

using System.Text;
using System;

namespace PhoneWord.Android
{
    public static class PhonewordTranslator
    {
        public static string ToNumber(string raw)
        {
            if (string.IsNullOrWhiteSpace(raw))
                return "";
            else
                raw = raw.ToUpperInvariant();

            var newNumber = new StringBuilder();
            foreach (var c in raw)
            {
                if (" -0123456789".Contains(c))
                    newNumber.Append(c);
                else {
                    var result = TranslateToNumber(c);
                    if (result != null)
                        newNumber.Append(result);
                }
                // otherwise we've skipped a non-numeric char
            }
            return newNumber.ToString();
        }
        static bool Contains (this string keyString, char c)
        {
            return keyString.IndexOf(c) >= 0;
        }
        static int? TranslateToNumber(char c)
        {
            if ("ABC".Contains(c))
                return 2;
            else if ("DEF".Contains(c))
                return 3;
            else if ("GHI".Contains(c))
                return 4;
            else if ("JKL".Contains(c))
                return 5;
            else if ("MNO".Contains(c))
                return 6;
            else if ("PQRS".Contains(c))
                return 7;
            else if ("TUV".Contains(c))
                return 8;
            else if ("WXYZ".Contains(c))
                return 9;
            return null;
        }
    }
}

Ctrl + sでPhoneTranslator.csを保存します。

MainActivity.cs

PhoneWordソリューション から、MainActivity.csをダブルクリックして、ユーザーインタフェースの記述をします。以下のような状態のOnCreateメソッドに追加してコードを書いていきます。

MainActivity.cs
using System;

using Android.App;
using Android.Content;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.OS;

namespace Phoneword.Android
{
    [Activity (Label = "Phoneword.Android", MainLauncher = true)]
    public class MainActivity : Activity
    {
        protected override void OnCreate (Bundle bundle)
        {
            base.OnCreate (bundle);

            // Set our view from the "main" layout resource
            SetContentView (Resource.Layout.Main);

        }
    }
}

OnCreateメソッドにコントローラーへの参照を追加します。

MainActivity.cs
// Get our UI controls from the loaded layout
EditText phoneNumberText = FindViewById<EditText>(Resource.Id.PhoneNumberText);
Button translateButton = FindViewById<Button>(Resource.Id.TranslateButton);
Button callButton = FindViewById<Button>(Resource.Id.CallButton);

TranslateButtonのイベントリスナーを追加します。

MainActivity.cs
// Disable the "Call" button
callButton.Enabled = false;

// Add code to translate number
string translatedNumber = string.Empty;

translateButton.Click += (object sender, EventArgs e) =>
    {
        // Translate user’s alphanumeric phone number to numeric
        //translatedNumber = Core.PhonewordTranslator.ToNumber(phoneNumberText.Text);
        translatedNumber = PhoneWord.Android.PhonewordTranslator.ToNumber(phoneNumberText.Text);

        if (String.IsNullOrWhiteSpace(translatedNumber))
        {
            callButton.Text = "Call";
            callButton.Enabled = false;
        }
        else
        {
            callButton.Text = "Call " + translatedNumber;
            callButton.Enabled = true;
        }
   };

CallButtonのイベントリスナーを追加しますが、namespaceを定義しているため以下のようにusing Uri = Android.Net.Uri;を追加します。

MainActivity.cs
using Uri = Android.Net.Uri;
...
callButton.Click += (object sender, EventArgs e) =>
{
    // On "Call" button click, try to dial phone number.
    var callDialog = new AlertDialog.Builder(this);
    callDialog.SetMessage("Call " + translatedNumber + "?");
    callDialog.SetNeutralButton("Call", delegate {
           // Create intent to dial phone
           var callIntent = new Intent(Intent.ActionCall);
           //callIntent.SetData(Android.Net.Uri.Parse("tel:" + translatedNumber));
           callIntent.SetData(Uri.Parse("tel:" + translatedNumber));
           StartActivity(callIntent);
       });
    callDialog.SetNegativeButton("Cancel", delegate { });

    // Show the alert dialog to the user and wait for response.
    callDialog.Show();
};

AndroidManifest.xmlにphone callパーミッションを追加

AndroidManifest.xmlが見つからない場合は、一度ソリューションを閉じて開き直します。

  • PhoneWordソリューション -> Properties -> AndroidManifest.xml
  • Required Permissions -> Call Phone にチェック

xamarin-studio-CallPhone.png

ビルド

ビルドに成功するとXamarin Studioの上部メッセージ欄に「ビルド成功」のメッセージが表示されます。

  • メニュー -> ビルド -> すべてビルド

xamarin-studio-build.png

MainActivity.csのLabel編集

スクリーンのトップに表示されるLabelを編集します。

MainActivity.cs
namespace PhoneWord.Android
{
    [Activity (Label = "PhoneWord", MainLauncher = true)]
    public class MainActivity : Activity
    {
        ...
    }
}

AndroidManifest.xmlにアプリ名とアイコンを追加

  • Application name: Phoneword

デフォルトのIcon.pngを右クリックして削除します。

  • Resource -> drawble -> Icon.pngを右クリックして削除 -> Delete

ダウンロードして解凍したXamarin App Icons setのフォルダからアイコンをコピーします。

  • Resource -> drawbleを右クリック -> 追加 -> ファイルを追加

ダイアログでCopy the file to the directoryを選択します。

  • XamarinAppIconsAndLaunchImages -> Xamarin App Icons and Launch Images -> Android drawable -> Icon.png

drawable-* フォルダを追加

残りのdrawable-* フォルダのIcon.pngをすべてフォルダごとコピーします。

  • Resourceを右クリック -> 追加 -> Add Existing Folder

xamarin-studio-all-Icons.png

AndroidManifest.xmlにアイコンを追加します。

  • AndroidManifest.xml -> Application icon -> @drawable/iconを選択

Genymotionを起動

一覧からGoogle Nexus 4 - 4.4.4 - (API19) - 768x1280を起動します。

genymotion-list.png

エミュレータが起動しました。

genymotion-nexus4-virtual-device.png

Xamarin Studioのデバイスの選択ボックスからGenymotionのデバイスを選択します。

  • Phisical Devices -> Genymo...(API19)

Xamarin Studioの左上の再生ボタンをクリックしてDebug実行します。

genymotion-nexus4-api19.png

Genymotionのエミュレータで確認

PhoneWordアイコンをタップしてアプリを起動します。

genymotion-phoneword-initial.png

Translateボタンを押します。Callボタンがアクティブになり、数値に変換された電話番号が表示されました。

genymotion-phoneword-translate.png

Callボタンを押します。電話をかけるダイアログが表示されました。

genymotion-phoneword-call.png

Git

Version Control in Xamarin Studioを参考にして、PhoneWordソリューションディレクトリに.gitignoreを作成します。

.gitignore
#Autosave files
*~

# Build/test output
obj
bin
test-results

# VS sometimes writes these for no apparent reason
_UpgradeReport_Files
UpgradeLog.*

# Per-user data
*.DS_Store
*.sln.cache
*.suo
*.userprefs
*.usertasks
*.user

# ReSharper
*_Resharper.*
*.Resharper

# dotCover
*.dotCover

ローカルにGitのリポジトリを作成してcommitします。

> cd C:\Users\masato\Documents\Projects\PhoneWord
> git init
> git add -A
> git commit -m "initilal commit"

GitHubにリモートリポジトリを作成して追加します。

$ git remote add origin https://github.com/masato/PhoneWord.git
$ git push -u origin master
Username for 'https://github.com': masato
Password for 'https://masato@github.com':
Counting objects: 33, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (24/24), done.
Writing objects: 100% (33/33), 28.82 KiB | 0 bytes/s, done.
Total 33 (delta 4), reused 0 (delta 0)
To https://github.com/masato/PhoneWord.git
 * [new branch]      master -> master
Branch master set up to track remote branch master from origin.
4
3
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
Sign upLogin
4
3