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

実行例

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

[Tips][Label] ラベルテキストの末尾に省略記号を表示する

本記事はWindowsアプリケーションのTipsです。


ラベルのテキストに、そのラベルの幅よりも長いテキストを設定すると、コントロールに入りきらなかったテキストはカットされてしまします。
ラベルテキストがボタンの幅よりも長い場合に省略記号(「…」)を表示するには、AutoSizeプロパティにfalse、AutoEllipsisプロパティにtrueを設定します。

サンプルでは、「このラベルのテキストは長すぎます」というテキストをlabel1とlabel2に設定しています。label1には省略記号が表示されるように設定してあります。

ラベルにテキストを表示する例

VBの例

Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    Dim strMsg As String = "このラベルのテキストは長すぎます"
    Label1.Text = strMsg
    Label2.Text = strMsg

    Label1.AutoSize = False
    Label1.AutoEllipsis = True
End Sub

C#の例

private void Form1_Load(object sender, EventArgs e)
{
    string strMsg = "このラベルのテキストは長すぎます";
    label1.Text = strMsg;
    label2.Text = strMsg;

    label1.AutoSize = false;
    label1.AutoEllipsis = true;
}

[Tips][Label] テキストの配置を取得・設定する

本記事はWindowsアプリケーションのTipsです。


Labelコントロールのテキストの配置を取得・設定するには、TextAlignプロパティを使用します。

下記はTextAlignプロパティを使用する例です。

VBの例

Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    'テキストの表示位置をコントロール内の中段右端にする
    Label1.TextAlign = ContentAlignment.MiddleRight
    'テキストを表示
    Label1.Text = "テキストを表示"
End Sub

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
    Dim strAlignment As String

    'テキストの配置を確認する
    Select Case Label1.TextAlign
        Case ContentAlignment.TopLeft
            strAlignment = "上段左端"
        Case ContentAlignment.TopCenter
            strAlignment = "上段中央"
        Case ContentAlignment.TopLeft
            strAlignment = "上段右端"
        Case ContentAlignment.MiddleLeft
            strAlignment = "中段左端"
        Case ContentAlignment.MiddleCenter
            strAlignment = "中段中央"
        Case ContentAlignment.MiddleRight
            strAlignment = "中段右端"
        Case ContentAlignment.BottomLeft
            strAlignment = "下段左端"
        Case ContentAlignment.BottomCenter
            strAlignment = "下段中央"
        Case ContentAlignment.BottomRight
            strAlignment = "下段右端"
        Case Else
            strAlignment = ""
    End Select

    MessageBox.Show("現在テキストは「" & strAlignment & "」に配置されています。")
End Sub

C#の例

private void Form1_Load(object sender, EventArgs e)
{
    // テキストの表示位置をコントロール内の中段右端にする
    label1.TextAlign = ContentAlignment.MiddleRight;
    // テキストを表示
    label1.Text = "テキストを表示";
}
 
private void button1_Click(object sender, EventArgs e)
{
    string strAlignment = "";

    // テキストの配置を確認する
    switch (label1.TextAlign)
    {
        case ContentAlignment.TopLeft:
            strAlignment = "上段左端";
            break;
        case ContentAlignment.TopCenter:
            strAlignment = "上段中央";
            break;
        case ContentAlignment.TopRight:
            strAlignment = "上段右端";
            break;
        case ContentAlignment.MiddleLeft:
            strAlignment = "中段左端";
            break;
        case ContentAlignment.MiddleCenter:
            strAlignment = "中段中央";
            break;
        case ContentAlignment.MiddleRight:
            strAlignment = "中段右端";
            break;
        case ContentAlignment.BottomLeft:
            strAlignment = "下段左端";
            break;
        case ContentAlignment.BottomCenter:
            strAlignment = "下段中央";
            break;
        case ContentAlignment.BottomRight:
            strAlignment = "下段右端";
            break;
    }

    MessageBox.Show("現在テキストは「" + strAlignment + "」に配置されています。");
}