iphone开发我的新浪微博客户端-用户登录自定义弹出窗口篇(1.2)
本篇的目的是开发一个自定义的弹出对话窗口组件,就是上面图6中半透明的信息提示窗口,其实系统类库中已经有UIActionSheet、UIAlertView能做到这样的功能组件,但是显示外观不怎么美观而且跟我的这个设计不怎么配,同时这2个组件的外观自定义性很差几乎改变不了显示外观,所以决定自己开发一个组件。实现的思路是这样的,做一个继承自UIWindow组件的组件的对象,这样这个组件也就是一个UIWindow了然后在这个UIWindow中添加相应的半透明View达到显示效果的目的,当我们需要显示弹出窗口只需要把这个UIWindow设置为主显示窗口即可,比如执行代码:[self makeKeyAndVisible]。实现的思路很简单了,现在开始具体动手。
一、用Xcode打开上一篇完成的工程然后新建名为UIDialogWindow的Objective-C class类型的文件,这个UIDialogWindow里有3个从上到下的UIView组件和1个UIImageView构成,分别是作为根View的superView,作为遮罩view的backgroundView,作为半透明的圆角背景图view的backgroundImage,作为窗口显示内容view的view,关于这个内容view有点特别,这个由使用这个UIDialogWindow时候才进行提供,因为每个地方使用弹窗呈现的内容肯定是大不相同了,只有这样才能提高组件的灵活性。
二、打开UIDialogWindow.h文件,具体代码如下,在这个文件中定义了上面提到的4个view,并且一个初始化方法,一个显示窗口方法,一个关闭显示窗口方法这些方法基本上能完成一个弹出窗口的功能任务了。
#import <Foundation/Foundation.h>
#import <QuartzCore/QuartzCore.h>
#import "Global.h"
@interface UIDialogWindow : UIWindow {
UIView *view;
UIView *superView;
UIView *backgroundView;
UIImageView *backgroundImage;
BOOL isClose;
}
@property (nonatomic,retain)UIView *view;
@property (nonatomic,retain)UIView *superView;
@property (nonatomic,retain)UIView *backgroundView;
@property (nonatomic,retain)UIImageView *backgroundImage;
-(UIDialogWindow *)initWithView:(UIView *)aView;
-(void)show;
-(void)close;
@end
二、打开UIDialogWindow.m文件,首先我们来完成初始化方法的编写,初始化方法就是把上面提到的4个view按照一定的顺序添加到window中,具体代码如下,在这里需要注意的是这个弹出窗口的显示大小右内容view的尺寸决定,在初始化方法中会先获取内容view的尺寸,然后根据这个尺寸调整其他3个view的尺寸。
-(UIDialogWindow *)initWithView:(UIView *)aView
{
if (self=[super init]) {
//内容view
self.view=aView;
[self setFrame:[[UIScreen mainScreen]bounds]];
self.windowLevel=UIWindowLevelStatusBar;
self.backgroundColor=[UIColor colorWithRed:0 green:0 blue:0 alpha:0.1];
//根view
UIView *sv=[[UIView alloc] initWithFrame:[self bounds]];
self.superView=sv;
[superView setAlpha:0.0f];
[self addSubview:superView];
[sv release];
CGFloat d=-7.0f;
UIView *bv=[[UIView alloc] initWithFrame:CGRectInset(CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height),d,d)];
self.backgroundView=bv;
//圆角图片背景view
UIImageView *bi=[[UIImageView alloc] initWithImage:[[Global pngWithPath:@"dialog_bg2"]stretchableImageWithLeftCapWidth:13.0 topCapHeight:9.0]];
self.backgroundImage=bi;
[backgroundImage setFrame:[backgroundView bounds]];
[backgroundView insertSubview:backgroundImage atIndex:0];
[backgroundView setCenter:CGPointMake(superView.bounds.size.width/2, superView.bounds.size.height/2)];
[superView addSubview:backgroundView];
CGRect frame=CGRectInset([backgroundView bounds], -1*d, -1*d);
//显示内容view
[backgroundView addSubview:self.view];
[self.view setFrame:frame];
isClose=NO;
[bv release];
[bi release];
}
return self;
}
三、当初始化方法把这些view添加到window时同时设置了根view的为透明([superView setAlpha:0.0f]),这样我们还是看不到显示的这个弹出窗口了因为透明了,这个时候我们在编写一个显示弹出窗口的方法,这个代码的实现非常的简单了,其实还可以考虑加入一定的动画效果,使得显示的过程更加的具有弹出的动态过程效果,具体代码如下:
//显示弹出窗口
-(void)show
{
[self makeKeyAndVisible];
[superView setAlpha:1.0f];
}
-(void)dialogIsRemoved
{
isClose=YES;
[view removeFromSuperview];
view=nil;
[backgroundView removeFromSuperview];
backgroundView=nil;
[superView removeFromSuperview];
superView=nil;
[self setAlpha:0.0f];
[self removeFromSuperview];
self=nil;
}
-(void)close
{
[UIView setAnimationDidStopSelector:@selector(dialogIsRemoved)];
[superView setAlpha:0.0f];
}
五、到这里就差不多完成了主要的工作了,剩下的就是dealloc方法进行内存的释放工作了。
六、关于如何使用这个组件,提供如下的示例代码,可以参考,具体的在下一篇中会有具体的应用案例讲解。
infoViewController=[[InfoViewController alloc] init];
dialog=[[UIDialogWindow alloc]initWithView:infoViewController.view];
[infoViewController setDelegate:self onClick:@selector(startAuth:)];
[dialog show];
总体来说这样的实现思路非常的简单明了,这个组件能完全替代UIAlertView组件了,并且这个具有很强的自定义性,无论是外观和功能,虽然在使用方面没有UIAlertView这样的简单,但是实现的效果非常不错了,这样只是完成了组件的开发,在下一篇中我们将实现上面图6的效果功能,就是这个组件的具体应用了,请关注了。