IOS开发之---自定义dialog加载框

转自http://blog.csdn.net/pjk1129/article/details/6665603

这里介绍一下网友开源的MBProgressHUD类,实现等待框,


一、网上下载  MBProgessHUD 类文件,直接导入到工程即可

https://github.com/jdg/MBProgressHUD.git

二、示例分析

在我的工程中示例如下:

1)在ShowImageViewController.h头文件代码如下:

#import <UIKit/UIKit.h>

#import "MBProgressHUD.h"


@interface ShowImageViewController : UIViewController<MBProgressHUDDelegate> {

    NSString        *_picUrlString;

    UIImageView     *_imageView;    

    MBProgressHUD    *_progressHUD;

}

@property (nonatomic, copy) NSString       *picUrlString;

@property (nonatomic, retain) IBOutlet UIImageView *imageView;

@property (nonatomic, retain) MBProgressHUD    *progressHUD;

//请求图片资源

-(void)imageResourceRequest;


//显示图片信息

-(void)displayImage:(UIImage *)image;


- (IBAction)dismissModealView:(id)sender;

-(void)removeModalView;

@end


2)在ShowImageViewController.m实现文件代码如下:

#import "ShowImageViewController.h"

#import <QuartzCore/QuartzCore.h>


@implementation ShowImageViewController

@synthesize picUrlString = _picUrlString;

@synthesize imageView = _imageView;

@synthesize progressHUD = _progressHUD;


- (void)viewDidLoad

{

    [super viewDidLoad];

    // Do any additional setup after loading the view from its nib.

    self.view.backgroundColor = [UIColor grayColor];

    self.view.alpha = 0.8;

    

    //设置图片为圆角

    self.imageView.backgroundColor = [UIColor clearColor];

  self.imageView.layer.borderColor = [UIColor lightGrayColor].CGColor;

  self.imageView.layer.borderWidth = 5.0;

    self.imageView.layer.masksToBounds = YES; 

    self.imageView.layer.cornerRadius = 10.0; 

}


-(void)viewWillAppear:(BOOL)animated

{

    [super viewWillAppear:animated];

    //当进入视图时,重新设置imageView

    [self.imageView setImage:nil];

    [self.imageView setFrame:CGRectMake(160, 200, 0, 0)];

    //显示加载等待框

    self.progressHUD = [[MBProgressHUD alloc] initWithView:self.view];

[self.view addSubview:self.progressHUD];

[self.view bringSubviewToFront:self.progressHUD];

self.progressHUD.delegate = self;

self.progressHUD.labelText = @"加载中...";

[self.progressHUD show:YES];

    

    //开启线程,请求图片资源

    [NSThread detachNewThreadSelector:@selector(imageResourceRequest) toTarget:self withObject:nil];

}

//请求图片资源

-(void)imageResourceRequest

{

    NSAutoreleasePool   *pool = [[NSAutoreleasePool alloc] init];

    //根据网络数据,获得到image资源

    NSData  *data = [[NSData alloc] initWithContentsOfURL:[NSURL URLWithString:self.picUrlString]];

    UIImage *image = [[UIImage alloc] initWithData:data];

    [data release];

    //回到主线程,显示图片信息

    [self performSelectorOnMainThread:@selector(displayImage:) withObject:image waitUntilDone:NO];

    [image release];


    [pool release];

}

//显示图片信息

-(void)displayImage:(UIImage *)image

{

    //self.progressHUD为真,则将self.progressHUD移除,设为nil

    if (self.progressHUD){

        [self.progressHUD removeFromSuperview];

        [self.progressHUD release];

        self.progressHUD = nil;

    }

    

    //图片慢慢放大动画效果

    [self.imageView setImage:image];

    [UIView beginAnimations:nil context:nil];

[UIView setAnimationDuration:0.5];

[self.imageView setFrame:CGRectMake(40, 100, 240, 160)];

[UIView commitAnimations];

        

}

- (void)viewDidUnload

{

    [self setImageView:nil];

    [super viewDidUnload];

    // Release any retained subviews of the main view.

    // e.g. self.myOutlet = nil;

}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation

{

    // Return YES for supported orientations

    return (interfaceOrientation == UIInterfaceOrientationPortrait);

}


- (IBAction)dismissModealView:(id)sender {   

    //设置定时器,当动画结束时,子视图从父视图中移除

    [NSTimer scheduledTimerWithTimeInterval:0.5 target:self selector:@selector(removeModalView) userInfo:nil repeats:NO];

    

    [UIView beginAnimations:nil context:nil];

[UIView setAnimationDuration:0.5];

[self.imageView setFrame:CGRectMake(160, 200, 0, 0)];

[UIView commitAnimations];

    

}

-(void)removeModalView

{

    [self.view removeFromSuperview];

}

#pragma mark -

#pragma mark MBProgressHUDDelegate methods

- (void)hudWasHidden:(MBProgressHUD *)hud {

NSLog(@"Hud: %@", hud);

    // Remove HUD from screen when the HUD was hidded

    [self.progressHUD removeFromSuperview];

    [self.progressHUD release];

    self.progressHUD = nil;

}

- (void)dealloc

{

    [_picUrlString release];

    [_imageView release];

    [super dealloc];

}

@end


三、效果展示


四、总结

利用MBProgressHUD实现加载等待框,视觉效果大大提高

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以使用 `uni-popup-dialog` 组件来自定义上传功能。下面是一个示例代码,展示了如何使用 `uni-popup-dialog` 实现自定义上传功能: ```html <template> <view> <uni-popup-dialog ref="popup" :show="showPopup" :title="popupTitle" :buttons="popupButtons" :content="popupContent" @buttonclick="onPopupButtonClick" ></uni-popup-dialog> <button @click="showUploadDialog">打开上传对话</button> </view> </template> <script> export default { data() { return { showPopup: false, popupTitle: '上传文件', popupButtons: [ { text: '取消', type: 'default', value: 'cancel' }, { text: '确定', type: 'primary', value: 'confirm' } ], popupContent: '', }; }, methods: { showUploadDialog() { this.showPopup = true; this.popupContent = '<input type="file" accept="image/*" @change="onFileChange">'; }, onFileChange(event) { // 处理文件上传逻辑 const file = event.target.files[0]; console.log('上传文件:', file); }, onPopupButtonClick(value) { if (value === 'cancel') { this.showPopup = false; } else if (value === 'confirm') { // 执行确定按钮的逻辑 this.showPopup = false; } }, }, }; </script> ``` 在上述示例中,我们使用了 `uni-popup-dialog` 组件来创建一个自定义的上传对话。当点击 "打开上传对话" 按钮时,会弹出一个对话,其中包含一个文件选择。选择文件后,会触发 `onFileChange` 方法,您可以在该方法中处理文件上传的逻辑。 请注意,上述示例中使用的是 `uni-popup-dialog` 组件,这是基于uni-app架的一个组件。如果您使用的是其他架,可以根据对应架的弹窗组件进行相应的替换。同时,您还需要根据您的具体需求进行适当的修改和调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值