Simple Way to Custom UIView

2017-10-16

Create UIViewController SubClass

create two file : AlterViewController.h and AlterViewController.m. .h file is the head file like C style. we can create class and declare property. .m file is is the implementation file it implement method and create instance object.

create AlterViewController.h file

We should import UIKith to head file and then inherit from UIViewController

1
2
3

#import <UIKit/UIKit.h>
@interface AlterViewController : UIViewController
@end

create AlterViewController.m file

create implementation of AlterViewController. We should import AlterViewController.h and then implementation AlterViewController and override viewDidLoad method and so on .

#import <Foundation/Foundation.h>
#import "AlterViewController.h"
@interface AlterViewController()
@end
@implementation AlterViewController
- (void)viewDidLoad{
  #statement 
}
@end

Define UIView property

UIView is flexible and easy to customize We can use iOS API to set its propety.We can set frame（position,size）、background color、gesture… etc. let’s look at the details.

Init UIView

UIView *alterView = [[UIView alloc]init];
in objective-c we can get an instance object use grammar like
Object *property = [[ Object alloc]init]
alloc return a new instance and initialized to a data structrue that describes the class memory for all other instance variables is set to 0;

set UIView Position and size

In the first pleace we should have a concept of view coordinator system in UIKit .The default coordinate system has its origin in the top-left corner and has axes that extend down and to the right from the origin point .Firgure 1 show this concept
Figure 1

We can set UIView postion and size with frame rectangle. It create a rectangle return from CGRectMake Function that can define the position of rectangle

CGFloat screenWidth = [UIScreen mainScreen].bounds.size.width;
CGFloat screenHeight = [UIScreen mainScreen].bounds.size.height;
NSLog(@"screenWidth:%0.2f,screenHeight:%0.2f",screenWidth,screenHeight);
alterView.frame = CGRectMake(15, screenHeight - 175, screenWidth - 30, 160);

CGRectMake have four arguments: x,y rectangle width and height
CGRect CGRectMake(CGFloat x, CGFloat y, CGFloat width, CGFloat height);
you should get x,y-coordinate depends the origin point (0,0) at the top-left corner
For the example, I want to set UIView height with 160 and width with screenwidth -30
Why subtract 30 ? because the X is 15 I want the UIView have a same safe area to the phone border The Firure 2 show the description .
Figure 2

The height same as the above. set height is 160 so I should subtract the View height and margin that’s why Y = screenHeight - 175 (175 = 160 +15)

For this section we set the UIView position and size completed.

Add UIView to view that is receiver

We already create View and set the view position. we should add the view to the SuperView now
background: When we create view and want to display it add a view to the end of the receiver’s list of subviews is necessary. we can use ddSubviewmethod
From the Apple API description:
the method establishes a strong reference to view and set its next responder to the receiver,which is its new superview. Views can have only one superview.If view already has a superview and that view is not receiver,this method removes the privious superview before making the receiver its new superview.

Add sub view method:

1	[self.view addSubview:alterView];

self.view rpresents the current view not the view we just created. alterView will be presented soon.

Add Gesture Recognizer(optional)

If you want to listener the tap action we should add tap recognizer to the View.For example you want to dismiss the UIView when to tap the point out of UIView.

1 2	UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(dismissVC:)]; [self.view addGestureRecognizer:tap];

UITapGestureRecognizer object have a action of selector you should define the selector,eg: we can dismiss our UIView.

1
2
3

-(void) dismissVC:(id) sender{
    [self dismissViewControllerAnimated:YES completion:nil];
}

Display the UIView

Now we can display the UIView on the other View.

import AlterViewController.h file
#import "AlterViewController.h"
create instance of AlterViewController
#import "AlterViewController.h"
set presentation style
alter.modalPresentationStyle = UIModalPresentationOverCurrentContext;
present view
[self presentViewController:alter animated:YES completion:nil];

Explain: when we present the view we the the modal style. you can found the guide from here
https://developer.apple.com/library/content/featuredarticles/ViewControllerPGforiPhoneOS/PresentingaViewController.html

UIModalPresentationOverCurrentContext result like figure 3

Figure 3 The current context presentation style

Full source file

Source file https://github.com/shuiqingliu/IOS_Dev/tree/master/Assignment1/Assignment1

Credit

@xizhou help me to understand the concepte of UITapGestureRecongnizer.