Xamarin.iOS at VisualStudio #4 -その他のコントロール その1-

昨日の続き。

Experimentation

1. UISlider

まずは、MonoTouch.UIKit.UISliderを追加します。
これは .NET でいう System.Windows.Forms.TrackBarになります。
また、UISliderの現在値を表示するMonoTouch.UIKit.UILabelも一緒に追加します。
これは .NET でいう System.Windows.Forms.Labelになります。

public class MyViewController : UIViewController
{
    UIButton button;
    UISlider slider; // ADD
    UILabel label; // ADD
    int numClicks = 0;
    float buttonWidth = 200;
    float buttonHeight = 50;

    public MyViewController()
    {
    }

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

        View.Frame = UIScreen.MainScreen.Bounds;
        //View.BackgroundColor = UIColor.White;
        View.BackgroundColor = UIColor.Black;
        View.AutoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleHeight;

        button = UIButton.FromType(UIButtonType.RoundedRect);

        button.Frame = new RectangleF(
            View.Frame.Width / 2 - buttonWidth / 2,
            View.Frame.Height / 2 - buttonHeight / 2,
            buttonWidth,
            buttonHeight);

        button.BackgroundColor = UIColor.White; // Add
        button.SetTitle("Click me", UIControlState.Normal);

        button.TouchUpInside += (object sender, EventArgs e) =>
        {
            button.SetTitle(String.Format("clicked {0} times", numClicks++), UIControlState.Normal);
        };

        button.AutoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleTopMargin |
            UIViewAutoresizing.FlexibleBottomMargin;

        View.AddSubview(button);

        // ADD
        slider = new UISlider();
        slider.Frame = new RectangleF(
            View.Frame.Width / 2 - buttonWidth / 2,
            button.Frame.Bottom + 10,
            buttonWidth,
            buttonHeight);
        slider.MaxValue = 100;
        slider.MinValue = 0;
        slider.Value = 50;
        slider.ValueChanged += (sender, args) =>
        {
            label.Text = slider.Value.ToString();
        };

        View.AddSubview(slider);

        label = new UILabel();
        label.Frame = new RectangleF(
            View.Frame.Width / 2 - buttonWidth / 2,
            slider.Frame.Bottom + 10,
            buttonWidth,
            buttonHeight);
        label.TextColor = UIColor.White;
        label.TextAlignment = UITextAlignment.Center;
        label.Text = slider.Value.ToString();

        View.AddSubview(label);
    }

}

ボタンの上にUISliderが追加されました。
あと、 ビルド実行するとこうなります。

スライダーを動かすと、スライダーの位置に応じてラベルの数値が変化します。

2. UIAlertView

次はMonoTouch.UIKit.UITextViewを追加します。
これは .NET でいう System.Windows.Forms.MessageBoxです。
iOSの世界ではアラートビューですね。
サンプルを修正します。

public class MyViewController : UIViewController
{
    UIButton button;
    UISlider slider; // ADD
    UILabel label; // ADD
    int numClicks = 0;
    float buttonWidth = 200;
    float buttonHeight = 50;

    public MyViewController()
    {
    }

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

        View.Frame = UIScreen.MainScreen.Bounds;
        //View.BackgroundColor = UIColor.White;
        View.BackgroundColor = UIColor.Black;
        View.AutoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleHeight;

        button = UIButton.FromType(UIButtonType.RoundedRect);

        button.Frame = new RectangleF(
            View.Frame.Width / 2 - buttonWidth / 2,
            View.Frame.Height / 2 - buttonHeight / 2,
            buttonWidth,
            buttonHeight);

        button.BackgroundColor = UIColor.White; // Add
        button.SetTitle("Click me", UIControlState.Normal);

        button.TouchUpInside += (object sender, EventArgs e) =>
        {
            //button.SetTitle(String.Format("clicked {0} times", numClicks++), UIControlState.Normal); // DEL
            // ADD
            using (var alert = new UIAlertView("Notify", string.Format("Slider Value is {0}", slider.Value), null, "OK", null))
            {
                alert.Show();
            }
        };

        button.AutoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleTopMargin |
            UIViewAutoresizing.FlexibleBottomMargin;

        View.AddSubview(button);

        // ADD
        slider = new UISlider();
        slider.Frame = new RectangleF(
            View.Frame.Width / 2 - buttonWidth / 2,
            button.Frame.Bottom + 10,
            buttonWidth,
            buttonHeight);
        slider.MaxValue = 100;
        slider.MinValue = 0;
        slider.Value = 50;
        slider.ValueChanged += (sender, args) =>
        {
            label.Text = slider.Value.ToString();
        };

        View.AddSubview(slider);

        label = new UILabel();
        label.Frame = new RectangleF(
            View.Frame.Width / 2 - buttonWidth / 2,
            slider.Frame.Bottom + 10,
            buttonWidth,
            buttonHeight);
        label.TextColor = UIColor.White;
        label.TextAlignment = UITextAlignment.Center;
        label.Text = slider.Value.ToString();

        View.AddSubview(label);
    }

}

ビルドして、ボタンを押下すると、スライダーの値をユーザにアラートビューで通知します。

3. UISwitch

最後はMonoTouch.UIKit.UISwitchを追加します。
これは .NET でいう System.Windows.Forms.CheckBoxです。
iOSの世界ではスイッチコントロールですね。
**中間値(Indeterminate)**は対応しているんでしょうか? サンプルを修正します。

public class MyViewController : UIViewController
{
    UIButton button;
    UISlider slider; // ADD
    UILabel label; // ADD
    UISwitch switch1; // ADD
    int numClicks = 0;
    float buttonWidth = 200;
    float buttonHeight = 50;

    public MyViewController()
    {
    }

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

        View.Frame = UIScreen.MainScreen.Bounds;
        //View.BackgroundColor = UIColor.White;
        View.BackgroundColor = UIColor.Black;
        View.AutoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleHeight;

        button = UIButton.FromType(UIButtonType.RoundedRect);

        button.Frame = new RectangleF(
            View.Frame.Width / 2 - buttonWidth / 2,
            View.Frame.Height / 2 - buttonHeight / 2,
            buttonWidth,
            buttonHeight);

        button.BackgroundColor = UIColor.White; // Add
        button.SetTitle("Click me", UIControlState.Normal);

        button.TouchUpInside += (object sender, EventArgs e) =>
        {
            //button.SetTitle(String.Format("clicked {0} times", numClicks++), UIControlState.Normal); // DEL
            // ADD
            using (var alert = new UIAlertView("Notify", string.Format("Slider Value is {0}", slider.Value), null, "OK", null))
            {
                alert.Show();
            }
        };

        button.AutoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleTopMargin |
            UIViewAutoresizing.FlexibleBottomMargin;

        View.AddSubview(button);

        // ADD
        slider = new UISlider();
        slider.Frame = new RectangleF(
            View.Frame.Width / 2 - buttonWidth / 2,
            button.Frame.Bottom + 10,
            buttonWidth,
            buttonHeight);
        slider.MaxValue = 100;
        slider.MinValue = 0;
        slider.Value = 50;
        slider.ValueChanged += (sender, args) =>
        {
            label.Text = slider.Value.ToString();
        };

        View.AddSubview(slider);

        label = new UILabel();
        label.Frame = new RectangleF(
            View.Frame.Width / 2 - buttonWidth / 2,
            slider.Frame.Bottom + 10,
            buttonWidth,
            buttonHeight);
        label.TextColor = UIColor.White;
        label.TextAlignment = UITextAlignment.Center;
        label.Text = slider.Value.ToString();

        View.AddSubview(label);

        switch1 = new UISwitch();
        switch1.Frame = new RectangleF(
            View.Frame.Width / 2 - buttonWidth / 2,
            label.Frame.Bottom + 10,
            buttonWidth,
            buttonHeight);
        switch1.SetState(false, true);
        switch1.TintColor = UIColor.Blue;
        switch1.ValueChanged += (sender, args) =>
        {
            label.TextColor = switch1.On ? UIColor.Red : UIColor.White;
        };

        View.AddSubview(switch1);
    }

}

ビルドするとスイッチコントロールが追加されています。

スイッチを動かすと、ラベルの色が赤に変化します。

Conclusion

今回は、

• System.Windows.Forms.Labelに対応するMonoTouch.UIKit.UILabel
• System.Windows.Forms.TrackBarに対応するMonoTouch.UIKit.UISlider
• System.Windows.Forms.MessageBoxに対応するMonoTouch.UIKit.UIAlertView
• System.Windows.Forms.CheckBoxに対応するMonoTouch.UIKit.UISwitch

を使用しました。
あくまで、対応するというのは私の偏見ですが、どういうものに似ているか、という認識は取っつきにくさを解消するための方便だと思います。

まだ、紹介していないコントロールは次回に回します。