投稿日:

[Xamarin.iOS] 02.Labelコントロールとプロパティ操作

今回は単一ビューアプリプロジェクトでLabelコントロールを使用する方法についてみていきます。

環境

Visual Studio for Mac Community バージョン7.4(build 1033)

ターゲットOS：iOS11.2以上

Labelコントロールとは

Labelコントロールは、ページ上に文字列を表示するためのコントロールです。

表示する文字列はプロパティウィンドウから設定することができます。

また、コードから編集することも可能です。

Labelコントロールの配置

単一ビューアプリプロジェクトを作成したら、ソリューションエクスプローラーからMain.storyboardを開きます。

プロジェクトの作成方法は「[Xamarin.iOS] 01.XamarinでiOSアプリを開発してみよう」の記事を参照してください。

 

Main.storyboardを開くとページが1つ表示されているので、ツールボックスからLabelコントロールをドラッグアンドドロップして配置します。配置したら任意の大きさに変更してください。

プロパティパッドからLabelの文字列を設定する

プロパティパッドを使用して、Labelに表示する文字列を直接変更することができます。

ページに貼り付けたLabelをクリックして選択状態にしたら、プロパティパッドでTextプロパティの入力欄を任意の文字列に変更します。ここでは「My Label」と入力しています。すると下図のようにページ上のLabelコントロールのテキストが変更されます。

コードからLabelの文字列を設定する

コードからLabelの文字列を変更するには、Labelに任意の名前を付けてあげる必要があります。コードからは、この名前を使ってLabelコントロールを操作することができます。

まずは、Labelに名前を付けてみましょう。

Main.storyboardのページに貼り付けたLabelを選択し、プロパティパッドでName欄に、任意の名前を入力します。ここでは「myLabel」とします。

今後、コード上からこのLabelコントロールを操作するときは「myLabel」で参照することができるようになります。

コードからLabelの文字列を変更する

コードからLabelを操作する準備ができました。実際にLabelの文字列を設定するコードを書いてみましょう。

ソリューションエクスプローラーからViewController.csをダブルクリックして開きます。

ViewDidLoadというメソッドがあるので以下のように編集します（5行目のコードを追加）。

public override void ViewDidLoad()
{
    base.ViewDidLoad();
    // Perform any additional setup after loading the view, typically from a nib.
    myLabel.Text = "Hello World!";
}

ViewDidLoad()メソッドはページが読み込まれた時に、自動で実行されるメソッドです。今回は、この中にmyLabel.textに”Hello World!”の文字列を設定しています。よって実行するとLabelコントロールに「Hello World!」の文字列が表示されます。

実行例

実行例を以下に示します。

投稿日:

[Xamarin.iOS] 01.XamarinでiOSアプリを開発してみよう

通常、iOSアプリを開発するにはXcodeという開発環境を使用しますが、Microsoftが提供するXamarinを使用すればC#を使用して開発することができます。

今回からの連載では、Xamarinを使用してiOSのネイティブアプリ開発について解説していきます。

今回は、Xamarinを使用してどのようなアプリが開発できるのかと、Single View Applicationプロジェクトの作成方法について説明します。

なお、Xamarinのインストール方法については説明しませんので、各自で準備してください。

作成可能なアプリケーション

以下はVisual Studio for MacのCommunity版バージョン7.4(build 1033)で作成可能なアプリケーションの一覧です。

  • 単一ビューアプリ
    単純な1ページを持つアプリケーション。
  • マスター-詳細アプリ
    項目の一覧を表示するアプリケーション。マスターと詳細を表示することができます。
  • タブ付きアプリ
    タブバーで複数ページを切り替えることができるアプリケーション。
  • ページベースアプリ
    ページベースのアプリケーションです。
  • WebViewアプリ
    HTMLを表示することができるアプリケーションです。
  • SpriteKitゲーム
    主に2Dベースのゲームアプリケーションを作成します。
  • SceneKitゲーム
    2D/3Dのゲームアプリケーションを作成します。
  • Metalゲーム
    Metalというライブラリを使用して3Dグラフィックアプリを作成します。
  • OpenGLゲーム
    OpenGLを使用したゲームアプリを作成します。

Windows 版 Visual Studioも同様です。以下にスクリーンショットを掲載します。

上記の他にもtvOSやApple Watchのアプリ開発も可能です。またVS for MacであればOS X用のアプリ開発も可能です。

単一ビューアプリプロジェクトの作成

それでは、iOSアプリの中でももっともシンプルな単一ビューアプリのプロジェクトを作成してみましょう。

すでに説明した通り、単一ビューアプリは単純な1ページを持つアプリケーションです。後から必要なだけページを増やすことも可能ですし、タブバー付きアプリやマスター詳細アプリにすることもできます。

以下VS for Macのスクショのみ掲載しますが、Windows版も概ね手順は同じです。

はじめに、Visual Studioから新規プロジェクトの作成で単一ビューアプリを選択します。

続いて作成するアプリの構成設定を入力します。

  • アプリ名：実際にアイコンに表示されるアプリの名称を入力
  • 組織の識別子：通常は自身のURLを逆から入力します。URLがhiros-dot.netの場合はnet.hiros-dotとなります。
  • チーム：Apple Developperに登録しているアカウントを選択します。
  • ターゲット：作成するアプリがサポートする、iOSの最低限のバージョンを選択します。

アプリの構成設定

次にプロジェクト名と保存先を設定します。

Gitでソース管理をしたい場合は「バージョンコントロールにGitを使用する」にチェックを付けます。

以上でプロジェクトの作成は完了です。

ソリューションの構成

続いてソリューションの構成をみてみましょう。

様々なファイルで構成されていますが、よく使用するのはMain.storyboardとViewController.csの2つです。それ以外のファイルについては、今後の連載の中で必要に応じて説明をします。

  • Main.storyboard：ページのデザインをするためのファイル
  • ViewController.cs：ページに対する操作を実装するためのファイル

iOSデザイナーの構成

ページのデザインを行うにはMain.storyboardをダブルクリックして開きます。

Main.storyboardを開くと、以下のようにiOSデザイナーが表示されます。上がVS for Macで下がWindows版Visual StudioでのiOSデザイナーです。

  • デザイン画面：iOSのページをデザインするための画面です。ユーザーインターフェースを視覚的に作成することができます。
  • 制約ツールバー：iOSのアプリは、ユーザーが使用するデバイスによって画面サイズが異なります。このため配置するUI部品に制約をつけることで、画面サイズが変更されても、デザインが崩れないようにすることができます。
  • ツールボックス：ページ上に配置可能なUI部品が表示されます。ここからページにUI部品をドラッグアンドドロップしてページをデザインします。
  • プロパティパッド：ページに配置したUI部品にIDを付けたり、サイズや色などの要素の設定を行います。
  • ボトムツールバー：iOSデザイナー上に表示されるデバイスを変更することができます。作成するアプリケーションのデザインをデバイスを変更して確認することができます。

UI部品を配置する

UI部品を配置するには、ツールボックスから必要な部品をページにドラッグアンドドロップします。

今回はLabelを配置することとします。

ツールボックスからLabelをページにドラッグアンドドロップします。このときページ上でLabelを動かすと青い点線が表示される位置があります。青い点線を目印にすると、縦横の中央に配置することが可能です。

次に、配置したLabelをクリックして選択状態にしてテキストを変更してみます。テキストを変更するには、プロパティパッドのTextプロパティを変更します。ここでは「Hello World!」に変更してみましょう。

全ての文字が表示されない場合は、ページ上のラベルを操作して幅を広げてください。

実行してみよう

実行するには、Visual Studioの実行ボタンをクリックします。このとき、実行するシミュレータは変更することができます。また、実機を接続している場合は、実機を選択して実行することも可能です。

最後に、iPhone8のシミュレータで実行した際のスクリーンショットを掲載します。

 

 

投稿日:

[Xamarin] 軽量データベースRealmを使用する(2)　～データの読み書き～

前回に引き続き、今回はRealmによるデータの読み書きをみていきます。

使用したRealmのバージョンは2.1.0です。

モデルの準備

今回は、以下のモデルを準備して、データの読み書きを行うこととします。

public class Person : RealmObject
{
    public string Name { get; set; }
    public string Manager { get; set; }
}

Realmインスタンスの取得

Realmによるデータの読み書きをするには、以下のようにしてインスタンスを取得しておく必要があります。

var realm = Realm.GetInstance();

データの書き込み

インスタンスを取得したら、以下のようにしてWriteメソッドを使用してデータを追加します。

この例では２件のデータを追加しています。

var realm = Realm.GetInstance();

realm.Write(() =>
{
    realm.Add(new Person{ Name = "HIRO", Manager = "Bill" });
    realm.Add(new Person{ Name = "Jim", Manager = "Steve" });
});

データの読み取り

全データを取得したい場合は以下のようにします。

var p = realm.All<Person>();

条件を指定してデータを取得したい場合は、以下のようにWhereを使用します。

この場合はNameが「HIRO」のデータを取得します。

var p = realm.All<Person>().Where(d => d.Name == "HIRO");

データの件数を取得する

データ件数を取得したい場合はCount()メソッドを使用します。

全データ件数を取得したい場合は以下のようにします。

var count = realm.All<Person>().Count();

指定したデータの件数を取得したい場合は以下のようにします。

var count = realm.All<Person>().Where(d => d.Name == "HIRO").Count();

データの更新

データを更新するには、取得したデータのプロパティを書き換えます。データの書き込み同様にWriteメソッドを使用します。

例えばNameが「HIRO」のManagerを「Someone」に書き換えたい場合は、以下のようにします。

データを取得する際に.First()としているのは、先頭の1件に対して書き換えたいためです。

var p = realm.All<Person>().Where(d => d.Name == "HIRO").First();

realm.Write(() =>
{
    p.Manager = "Someone";
});

データの削除

データを削除するには、RealmインスタンスのRemoveメソッドを使用します。

以下はNameが「HIRO」のデータを削除します。

var realm = Realm.GetInstance();

var p = realm.All<Person>().Where(d => d.Name == "HIRO").First();

realm.Write(() =>
{
    realm.Remove(p);
});

データベースを削除する

モデルの内容が変更になったりして、最初からデータベースを作り直したい場合があります。このような場合は、以下のようにDeleteRealmメソッドを使用します。

var config = new RealmConfiguration();
Realm.DeleteRealm(config);