[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!」の文字列が表示されます。

実行例

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