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

SIN@SAPPOROWORKSの覚書

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

【XamarinによるiOS超入門 】 スライダーコントロール (UISlider)

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

1 コントロールの配置

f:id:furuya02:20150217055108p:plain:w200:left
スライダーコントロールは、一定範囲の値を選択するためのコントロールです。



このコントロールを配置する基本的なコードは次のとおりです。
(デフォルトでは、最大値1、最小値0になっています)

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

    var label = new UILabel(new RectangleF(60, 50, 100, 40));
    Add(label);

    //スライダーの生成
    var slider = new UISlider(new RectangleF(10, 150, 300, 40));
    slider.ValueChanged += (s, a) => {
        //スライダーの値が変化した時、その値をラベルに表示する            
        label.Text = slider.Value.ToString();
    };
    //ビューに追加
    Add(slider);
}


外観

図に示す、プロパティやメソッドでスライダーの外観を設定できます。

f:id:furuya02:20150217055203p:plain:w600

ストーリーボードでも、一部は設定可能です。
f:id:furuya02:20150217055215p:plain
※「Thumb Tint」「ThumbTintColor」は、iOS7以降では無効のようです

最大値・最小値・現在値

MaxValue/MinValue/Valueプロパティで、それぞれ最大値/最小値/現在値が指定できます。

    slider.MaxValue = 100;
    slider.MinValue = 0;
    slider.Value = 30;

ストーリーボードでも、「Value」で設定可能です。
f:id:furuya02:20150217055226p:plain

最大・最小のイメージ

f:id:furuya02:20150217055230p:plain

MaxValueImage及び、MinValueImageで最大と最小のイメージを設定できます。

slider.MaxValueImage = UIImage.FromFile("MaxImage.png");
slider.MinValueImage = UIImage.FromFile("MinImage.png");

ストーリーボードでも設定可能です。
f:id:furuya02:20150217055236p:plain

イベント

f:id:furuya02:20150217055241p:plain
各種のイベントが処理可能ですが、通常は、ValueChangedを使用することになるでしょう。

slider.Continuous = false;//スライダーから手を放すまでイベントが発生しない
slider.ValueChanged += (s, a) => {
    //スライダーの値が変化した時の処理
};

また、Continuousプロパティにfalseをセットすると、スライダーから手を離したときだけイベントが発生するようになります。
(デフォルトではtrueとなっており、値が変化するとすぐにイベントが発生します)

ストーリーボードでは、「continue update」で設定します。
f:id:furuya02:20150217055246p:plain

ストーリーボードで公開されているイベントは、次のとおりです。
f:id:furuya02:20150217055251p:plain

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

iOS 7 から始める UIKit 入門 コントロール編 #7 Slider | Developers.IO
UIKit User Interface Catalog: Sliders
UISlider - iPhoneアプリ開発の虎の巻


【 Xamarin 記事一覧 】

【XamarinによるiOS超入門 】