现在的位置: 首页 > 综合 > 正文

自定义 UIPopoverController

2013年09月02日 ⁄ 综合 ⁄ 共 5785字 ⁄ 字号 小 中 大 ⁄ 评论关闭

Popovers are very common within the iPad user interface but you were restricted to the design provided by Apple. With iOS 5 came a little known class called UIPopoverBackgroundView which
allows you to provide a custom border and arrow for the popover.

The popover

The UIPopoverController is
the class that facilitates the popover view. It takes a custom view controller and then displays it with a neat border and arrow, where the arrow points to its origin. It is ideal for displaying contextual information. The popover user interface is essentially
made of three main parts: the border, content, and arrow.

UIPopoverController

Images

Before we look at the UIPopoverBackgroundView you
will need two images to customize your popover. One image for the border and
the other for the arrow.

DISSECTING THE BACKGROUND IMAGE

When designing the background image it is important to note that the image will be stretched. UIImageallows
you to create a stretchable image by defining cap insets. These caps define portions of the image that will not be rescaled whereas the rest of the image is easily tiled when stretched. As seen in the image below the dark area is what will be tiled and the
colored corners will not.

Subclassing UIPopoverBackgroundView

The UIPopoverBackgroundView is
an abstract class which has no implementation. We need to subclass it and provide implementations for all its methods and properties. You can read the Apple documentation on all its properties and methods. What is not in the documentation is how to layout
the border and arrow using the method layoutSubviews.

First let’s start by creating an Interface and
subclassing the UIPopoverBackgroundView.

1
2
3
4
5
6
7
8
9
10

#import <UIKit/UIPopoverBackgroundView.h>
 
@interface CustomPopoverBackgroundView : UIPopoverBackgroundView {
    UIImageView *_borderImageView;
    UIImageView *_arrowView;
    CGFloat _arrowOffset;
    UIPopoverArrowDirection _arrowDirection;
}
 
@end

Make sure to specify your import statement or else the code will not compile. An explanation for each of the instance variables:

  • _borderImageView:
    contains the image for the border
  • _arrowView:
    contains the image for the arrow
  • _arrowOffset:
    used for the property arrowOffset specified
    in the Interface forUIPopoverBackgroundView.
    We will see later how this value is used to calculate the position for the arrow.
  • _arrowDirection:
    used for the property arrowDirection specified
    in the Interface forUIPopoverBackgroundView

Let’s fill out the implementation, starting with the designated initializer

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

#import "CustomPopoverBackgroundView.h"
 
#define CONTENT_INSET 10.0
#define CAP_INSET 25.0
#define ARROW_BASE 25.0
#define ARROW_HEIGHT 25.0
 
@implementation CustomPopoverBackgroundView
 
 
-(id)initWithFrame:(CGRect)frame{
    if (self = [super initWithFrame:frame]) {
        _borderImageView = [[UIImageView alloc] initWithImage:[[UIImage imageNamed:@"popover-bg.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(CAP_INSET,CAP_INSET,CAP_INSET,CAP_INSET)]];
 
        _arrowView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"arrow.png"]];
 
        [self addSubview:_borderImageView];
        [self addSubview:_arrowView];
 
    }
    return self;
}

Basically we are allocating and initializing the two views and adding them as subviews. Notice how the background image is defined with cap insets. Next, let’s implement all the required methods including the getters and setters for the properties.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

 
- (CGFloat) arrowOffset {    
    return _arrowOffset;    
}
 
- (void) setArrowOffset:(CGFloat)arrowOffset {    
    _arrowOffset = arrowOffset;
}
 
- (UIPopoverArrowDirection)arrowDirection {    
    return _arrowDirection;    
}
 
- (void)setArrowDirection:(UIPopoverArrowDirection)arrowDirection {    
    _arrowDirection = arrowDirection;
}
 
 
+(UIEdgeInsets)contentViewInsets{
    return UIEdgeInsetsMake(CONTENT_INSET, CONTENT_INSET, CONTENT_INSET, CONTENT_INSET);
}
 
+(CGFloat)arrowHeight{
    return ARROW_HEIGHT;
}
 
+(CGFloat)arrowBase{
    return ARROW_BASE;
}

The above methods are fairly straightforward with the exception of contentViewInsets.
This method determines the thickness of your border. The higher the number the thicker your border. Finally, the method that lays out our two subviews in their appropriate sizes and location.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

 
-  (void)layoutSubviews {
    [super layoutSubviews];
 
    CGFloat _height = self.frame.size.height;
    CGFloat _width = self.frame.size.width;
    CGFloat _left = 0.0;
    CGFloat _top = 0.0;
    CGFloat _coordinate = 0.0;
    CGAffineTransform _rotation = CGAffineTransformIdentity;
 
 
    switch (self.arrowDirection) {
        case UIPopoverArrowDirectionUp:
            _top += ARROW_HEIGHT;
            _height -= ARROW_HEIGHT;
            _coordinate = ((self.frame.size.width / 2) + self.arrowOffset) - (ARROW_BASE/2);
            _arrowView.frame = CGRectMake(_coordinate, 0, ARROW_BASE, ARROW_HEIGHT);            
            break;
 
 
        case UIPopoverArrowDirectionDown:
            _height -= ARROW_HEIGHT;
            _coordinate = ((self.frame.size.width / 2) + self.arrowOffset) - (ARROW_BASE/2);
            _arrowView.frame = CGRectMake(_coordinate, _height, ARROW_BASE, ARROW_HEIGHT); 
            _rotation = CGAffineTransformMakeRotation( M_PI );
            break;
 
        case UIPopoverArrowDirectionLeft:
            _left += ARROW_BASE;
            _width -= ARROW_BASE;
            _coordinate = ((self.frame.size.height / 2) + self.arrowOffset) - (ARROW_HEIGHT/2);
            _arrowView.frame = CGRectMake(0, _coordinate, ARROW_BASE, ARROW_HEIGHT); 
            _rotation = CGAffineTransformMakeRotation( -M_PI_2 );
            break;
 
        case UIPopoverArrowDirectionRight:
            _width -= ARROW_BASE;
            _coordinate = ((self.frame.size.height / 2) + self.arrowOffset)- (ARROW_HEIGHT/2);
            _arrowView.frame = CGRectMake(_width, _coordinate, ARROW_BASE, ARROW_HEIGHT); 
            _rotation = CGAffineTransformMakeRotation( M_PI_2 );
 
            break;
 
    }
 
    _borderImageView.frame =  CGRectMake(_left, _top, _width, _height);
 
 
    [_arrowView setTransform:_rotation];
 
}
 
@end

The switch statement determines the direction of the arrow and then calculates the location of the arrow and its rotation. Our default arrow image points upwards so we need to change its rotation using an affine transform which takes in radians. The arrowOffset is
calculated and set by theUIPopoverController which
essentially tells us the distance of the arrow from the center of content view. We also have to adjust the height and width of our border view to account for the arrow.

Using the CustomPopoverBackgroundView

Now that we have created the CustomPopoverBackgroundView we
need to set it when creating an instance of the UIPopoverController

1
2
3

UIPopoverController *popoverController = [









														
							
			

				返回
			

			

			
			
			
		
		

			
			
		

                

		





















			

		

	
	




	
	


		
						
		

			【上篇】
【下篇】			
			
			
			
		

		
								
		

		

			

				


				

				

				

					
作者: 

				

			

			
				
			
			
			
			

		

		

			
			
		

		
	

	
			
		
抱歉!评论已关闭.

							






	
	

	返回首页

		
	





	Copyright © 2013-2018 学步园  保留所有权利.

	软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）