投稿日:

[Xamarin.iOS] 03.Labelプロパティ Tips

前回の記事「02.Labelコントロールとプロパティ操作」でLabelの操作方法がわかりましたので、今回はLabelのプロパティについて見ていくこととします。

ラベルテキストの色を変えるには？

ラベルのテキストを変えるには、Colorプロパティを使用します。

コードから変更したい場合はTextColorプロパティを使用します。プロパティパッドでは「Color」プロパティですが、コードではTextColorプロパティとなるので注意が必要です。

TextColorにはUIColorクラスが持つ色プロパティ（Red, Blue, Purple）を直接指定するかFromRGBメソッドかFromRGBAメソッドを使用して、色を作り出して指定します。

// 紫（Purple）を設定
lblTitle1.TextColor = UIColor.Purple;

// Red, Green, Blueの値を0から255の範囲で指定
// 以下はGreenを255に設定しているので緑が設定される
lblTitle2.TextColor = UIColor.FromRGB(0, 255, 0);

// Red, Green, Blue, Alphaの値を0から255の範囲で指定
// Alphaは透明度を表し、0が透明, 255が不透明
// 以下はRedを255に設定しているので赤が設定される
lblTitle3.TextColor = UIColor.FromRGBA(255,0,0,255);

Labelに影を付けるには？

Labelのテキストには影を付けることができます。

影を付けるには、ShadowプロパティとShadow Offsetプロパティの値を設定します。

Shadowは影の色を、Shadow Offsetは影の位置を表します。ShadowにLight Gray Colorを、Shadow Offsetの幅に2、高さに2を設定する例を以下にに示します。

続いてコードから影を設定する方法を見てみましょう。コードから設定するには、ShadowColorプロパティで影の色を、ShadowOffsetプロパティで影の位置を指定します。

// コードから影を設定する
lblShadow.ShadowColor = UIColor.Gray;
lblShadow.ShadowOffset = new CoreGraphics.CGSize(new CoreGraphics.CGPoint(3.0, 3.0));

フォントを設定する

フォントを設定するには、はじめにAttributeを選択します。Attributeを選択しておくことで、より多くのフォントの種類の中から選択をすることができます。

続いて使用したいフォントとサイズを選択します。

続いてコードからフォントを設定する例を見てみましょう。コードからフォントを設定するにはFontプロパティを使用します。また設定値にはUIFont.FromNameの値を指定します。第1引数はフォントファミリ名を、第2引数はフォントサイズを指定します。

// コードからフォントを選択する
lblFont.Font = UIFont.FromName("Times New Roman", 16f);
投稿日:

[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のシミュレータで実行した際のスクリーンショットを掲載します。