読者です 読者をやめる 読者になる 読者になる

SIN@SAPPOROWORKSの覚書

C#を中心に、夜な夜な試行錯誤したコードの記録です。

【XamarinによるiOS超入門 】 Segmentedコントロール ( UISegmentedControl )

【 Xamarin 記事一覧 】 【XamarinによるiOS超入門 】

1 コントロールの配置

f:id:furuya02:20150206061752p:plain:w200:left
セグメンテッドコントロール(UISegmentedControl)は、複数から1つを選択するコントロールです。
このコントロールを配置する基本的なコードは次のとおりです。

 public override void ViewDidLoad() {
    base.ViewDidLoad();

    var segmentedControl = new UISegmentedControl(new object[]{"One","Two","Three"}) {
        Frame = new RectangleF(20, 50, 280, 40),//コントロールのサイズと配置
        SelectedSegment = 1,//1番目を選択状態にする
    };
    //ビューに追加
    Add(segmentedControl);
}

2 セグメントの追加と削除

InsertSegmentでセグメントを追加することができます。

void InsertSegment(string title, System.nint pos, bool animated)
void InsertSegment(UIImage image, System.nint pos, bool animated)

titleでセグメントの文字列を指定して、posで追加する位置を指定します。
第1パラメータにUIImageを指定すると画像セグメントになります。
animatedは、アニメーションの有無指定とドキュメントにありましたが、違いがよくわかりませんでした(iOS7以降)。

void RemoveAllSegments()
void RemoveSegmentAtIndex(System.nint segment, bool animated)

RemoveAllSegmentsで全てのセグメント、RemoveSegmentAtIndexで指定した位置のセグメントを削除できます。

ストーリーボードを使用している場合は、「Segments」「Segment」「Title」「Image」を使用します。
f:id:furuya02:20150206110027p:plain

次のコードは、テキストと画像のセグメントを追加しているようすです。

segmentedControl.InsertSegment(new UIImage("apple.png"), 0, true);//0番目に画像セグメントを追加
segmentedControl.InsertSegment("APPLE", 1, true);//1番目に文字列セグメントを追加
segmentedControl.InsertSegment("りんご", 2, true);//2番目に文字列セグメントを追加

f:id:furuya02:20150206114004p:plain

3 StyleとMomentary

スタイルは、いくつかの選択が可能ですが、iOS7以降は、どれを選択しても同じです。
f:id:furuya02:20150206112906p:plain

Momentaryは、選択後に選択状態を表示するかどうかの指定です。(デフォルトでfalse)
Mometary=true
f:id:furuya02:20150206061952p:plain
Mometary=false
f:id:furuya02:20150206061817p:plain

ストーリーボードを使用している場合は、下記を使用します。
f:id:furuya02:20150206112957p:plain

4 コントロールの外観

図に示すプロパティやメソッドで、コントロールの外観を変更できます。
f:id:furuya02:20150206150301p:plain

「Content Offset」や「Tint」などの一部外観は、ストーリーボードからも変更可能です。

5 有効無効と選択状態

SetEnabledで有効無効、SelectedSegmentで選択状態を設定できる。

segmentedControl.SetEnabled(false,1);//1番目のセグメントを無効にする
segmentedControl.SelectedSegment = 0;//0番目のセグメントを選択状態にする

ストーリーボードからは「Behavior」を使用する。
f:id:furuya02:20150206154052p:plain

※1つのセグメントしか選択状態にすることはできないので、最後に設定したものが有効になる。

6 イベント

各種のイベントが処理できますが、最も利用されるのはValueChangedでしょう。
f:id:furuya02:20150206153003p:plain

segmentedControl.ValueChanged += (s, a) => {
    var index = segmentedControl.SelectedSegment;
    (new UIAlertView("",string.Format("index={0}",index), null, "OK")).Show();
};

f:id:furuya02:20150206152716p:plain

7 参考にさせて頂いたページ

UIKit User Interface Catalog: Segmented Controls
iOS 7 から始める UIKit 入門 コントロール編 #5 Segmented Control | Developers.IO
Segmented Button Control | Xamarin


【 Xamarin 記事一覧 】 【XamarinによるiOS超入門 】