RSS

MonoTouch Tip #3 – Moving the View

12 May

Following on from Tip #2, this tip describes how to move the view to ensure that when a user touches down on a text box it will remain visible. By default the Keyboard uses up about half the screen area. If your text box was positioned within this area it would automatically become covered by the Keyboard. To avoid this first set up the TextFieldShouldReturn event in the ViewDidLoad OverRide. This code assumes you have a textbox called txtBox on your view placed in the bottom half of your view to show the scrolling effect.

//Add these variables to your view class...
float scrollamount = 0.0f;
float bottomPoint = 0.0f;
bool moveViewUp = false;

//Modify the ViewDidLoad OverRide...
public override void ViewDidLoad ()
{
base.ViewDidLoad ();

this.txtBox.ShouldReturn += TextFieldShouldReturn;
}

private bool TextFieldShouldReturn (UITextField tf)
{
tf.ResignFirstResponder ();
if (moveViewUp) { ScrollTheView(false); }
return true;
}

I have kept the TextFieldShouldReturn function generic so it can handle any text box in the view. To calculate and scroll up the view we need to add code to the Keyboard Notification handler we created in Tip #2.


private void KeyboardUpNotification (NSNotification notification)
{
ResetTheView();

RectangleF r = UIKeyboard.BoundsFromNotification(notification);

if(this.txtBox.IsEditing)
{
//Calculate the bottom of the Texbox
//plus a small margin...

bottomPoint = (this.txtBox.Frame.Y + this.txtBox.Frame.Height + yOffset);

//Calculate the amount to scroll the view
//upwards so the Textbox becomes visible...
//This is the height of the Keyboard -
//(the height of the display - the bottom
//of the Texbox)...

scrollamount = (r.Height - (View.Frame.Size.Height - bottomPoint));
}

//Check to see whether the view
//should be moved up...

if (scrollamount > 0)
{
moveViewUp = true;
ScrollTheView(moveViewUp);
}
else moveViewUp = false;
}

private void ResetTheView()
{
UIView.BeginAnimations(string.Empty, System.IntPtr.Zero);
UIView.SetAnimationDuration(0.3);

RectangleF frame = View.Frame;
frame.Y = 0;
View.Frame = frame;
UIView.CommitAnimations();
}

So what’s going on here. In the KeyboardUpNotification handler we call the ResetTheView method to ensure the view is always reset to the default position on the screen. We then get the Keyboard bounds to calculate the scroll amount for the text box which is in editing mode. Next we need to create the ScrollTheView method to increase or decrease the Y axis of the view and animate the scroll.

private void ScrollTheView(bool movedUp)
{
//To invoke a views built-in animation behaviour,
//you create an animation block and
//set the duration of the move...
//Set the display scroll animation and duration...

UIView.BeginAnimations(string.Empty, System.IntPtr.Zero);
UIView.SetAnimationDuration(0.3);

//Get Display size...
RectangleF frame = View.Frame;

if (movedUp) {
//If the view should be moved up,
//subtract the keyboard height from the display...

frame.Y -= scrollamount;
}
else {
//If the view shouldn't be moved up, restore it
//by adding the keyboard height back to the original...

frame.Y += scrollamount;
}

//Assign the new frame to the view...
View.Frame = frame;

//Tell the view that your all done with setting
//the animation parameters, and it should
//start the animation...

UIView.CommitAnimations();

}

This code assumes you have a textbox called txtBox on your view placed in the bottom half of your view to show the scrolling effect.

Advertisements
 
2 Comments

Posted by on May 12, 2010 in MonoTouch

 

2 responses to “MonoTouch Tip #3 – Moving the View

  1. DennisH

    January 15, 2011 at 12:29 am

    Nice post. Really helpful. I didn’t realize how involved this process was until I actually had the problem. Your solution all worked great except for one problem. I have two TextFields (txt1,txt2). txt1 is out of view of the keyboard and doesn’t ever require scrolling, however, txt2 is at the bottom and gets covered by the keyboard. The problem is that when I click on the txt2 and then goto edit txt1, the view scrolls to the txt2. In debugging it’s because the scrollamount is still greater than 0. Also, I added a class variable for the yOffset. Thanks again for the posting your efforts.

     
    • petercustance

      January 15, 2011 at 11:34 am

      Thanks Dennis, You can place elements into table rows which then handle all this moving about automatically but this is sometimes an overkill for simple interfaces.

       

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: