Sliding dock and Text Embedding on an UIimage

Swarnendu De October 18, 2013

Hello Guys, am Manish, here to give a brief introduction to build a simple iOS app containing a sliding dock, and some image manipulating features. Here we are going to learn:

• Managing Views

• UIGestureRecognizer

a. Swipe Gesture (left and right)

b. Tap gesture

  • UITextfield and UIButton
  • UIImage manipulation.
Screen Shot 2013-10-17 at 10.45.13 AM
illutration 1

Let us  first start from the basic. Open your Xcode (am showing Xcode 5.0).

Create a new project.

Screen Shot 2013-10-17 at 10.49.22 AM
illustration 2

Name your application and select target device as iphone

Screen Shot 2013-10-17 at 10.50.12 AM
illustration 3

Select your directory to save your project

Screen Shot 2013-10-17 at 10.51.10 AM
illustration 4

Finally you reach this default home page for your application. See illustration 5

 

Screen Shot 2013-10-17 at 10.51.31 AM
illustration 5

 

First open your storyboard from left pane. (the default name is MainStoryboard.storyboard)

As We are going to make one image editing application, we need to have one image view and you can do that by simply drag and drop from storyboard. Set its position as shown in the illustration 6. Drag another view and set it as shown to its left, this is going to be our sliding dock.

Sliding dockview
illustration 6

 

Drag and drop some UIButtons on the left sliding view. Also add an image for your dock (in this case i have added one translucent dock drawer image). I have introduced some other buttons below to show camera functionality, in next tutorial.

See illustration 7 below

Screen Shot 2013-10-17 at 11.23.57 AM
illustration 7

Lets now add some UIGestures, add two swipe gestures on the image view below and one on sliding dock. Set direction of one of the swipe gestures to ‘right’,and the other to left,and the one for sliding dock to left. as shown in illustration. Now we are ready with the storyboard.

Lets begin some simple coding:

  •   Go to your respective viewcontroller.m file and create outlet property for all the views and subviews and synthesize them. 
    @property (weak, nonatomic) IBOutlet UIView *slidingDockView;
@property (weak, nonatomic) IBOutlet UIImageView *imageView;
  • Create 2 more UIimage property(name them as image and temporary Image) for image manipulation and synthesize them 
    //image to be manipulated
@property (weak, nonatomic) UIImage *image;
@property (weak, nonatomic) UIImage *temporaryImage;
  •  Set some default image of your choice as the image, and set it as the background image.
  •  Set the default frame for sliding dock in extreme left so that only a part of it is seen. 
    -(void)viewDidAppear:(BOOL)animated
{

    image = [UIImage imageNamed:@"bg1.jpg"];

    // setting a default image in background
    imageView.image = image;
    slidingDockView.frame = CGRectMake(-85, 0, 100, 410); 

}

     

Add viewDidAppear manually. this method gets called just after the viewDidLoad method.

slidingDockView.frame = CGRectMake(-85, 0, 100, 410);  code sets the frame for your sliding dock in extreme left as shown in illustration. This allows only the drawer part of the dock to screen.

See illustration 8

Screen Shot 2013-10-17 at 12.09.30 PM
Illustration 8
  • ctrl-drag and create action for swipe right gesture. And add this code there. 
    - (IBAction)SwipeToAppearDock:(id)sender {
    [UIView beginAnimations:nil context:NULL]; 
    slidingDockView.frame = CGRectMake(0, 0, 100, 410); 
    [UIView commitAnimations];
    NSLog(@"swipe R8"); 
}

     

userInteraction

 

This would animate the frame inside the view, on your       swipe right gesture. The time duration can be set (i have set it as 0.3s). However this wont work   until you check ‘ user interaction enabled’ . This allows image to rrecognise any gesture on it.         This can be easily done through storyboard.

Go to storyboard> click on the background image>   check identity inspector

see illustration 9 alongside.

   N.B. No gesture would be recognised until you enable this.

 

  • ctrl-drag and create IBAction for any one left swipe gestures . Use the code below  However,            you have to open the Document outline to ctrl-drag the swipe gestures 
    - (IBAction)swipeToDisappearDock:(id)sender {
    [UIView beginAnimations:nil context:NULL]; 
    slidingDockView.frame = CGRectMake(-85, 0, 100, 410);
    [UIView setAnimationDuration:0.3]; 
    [UIView commitAnimations];
    NSLog(@"swipe left"); 
}

     

    ctrl-drag and the other left swipe gesture on ‘swipeToDisappearDock’ IBAction method.
    This makes both the left swipe to work on the same code. What happens here is, on left swipe gesture (be it on the background image or the sliding dock) would move back the dock to its initial position.

    Your Sliding Dock is ready to use. Run the program in your simulator by ctrl-r and this is the result see illustration 10

    swaping action