如何在滚动视图中的图像视图的每个图像上添加UIButton?

时间:2011-07-22 05:55:03

标签: iphone xcode uiview uiscrollview uiimageview

我有一个iPhone应用程序,其中我有几个图像。这些图像添加在图像视图中。该图像视图使用滚动视图添加子视图。现在我想在每个图像上添加一个透明按钮。我怎样才能做到这一点?我在下面显示了我的代码:

    - (void)layoutScrollImages{
    UIImageView *view = nil;
    NSArray *subviews = [scrollView1 subviews];

    // reposition all image subviews in a horizontal serial fashion
    CGFloat curXLoc = 0;
    for (view in subviews)
    {
        if ([view isKindOfClass:[UIImageView class]] && view.tag > 0)
        {
            CGRect frame = view.frame;
            frame.origin = CGPointMake(curXLoc, 0);
            view.frame = frame;

            curXLoc += (kScrollWidth);
        }
    }

    // set the content size so it can be scrollable
    [scrollView1 setContentSize:CGSizeMake((kNoImages * 500), 700)];
}





    - (void)viewDidLoad{
    self.view.backgroundColor = [UIColor viewFlipsideBackgroundColor];

    // 1. setup the scrollview for multiple images and add it to the view controller
    //
    // note: the following can be done in Interface Builder, but we show this in code for clarity
    [scrollView1 setBackgroundColor:[UIColor blackColor]];
    [scrollView1 setCanCancelContentTouches:NO];
    scrollView1.indicatorStyle = UIScrollViewIndicatorStyleWhite;
    scrollView1.clipsToBounds = YES;        // default is NO, we want to restrict drawing within our scrollview
    scrollView1.scrollEnabled = YES;

    //imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image0.jpg"]];
    [scrollView1 addSubview:imageView];
    [scrollView1 setContentSize:CGSizeMake(500,700)];
    scrollView1.minimumZoomScale = 1;
    scrollView1.maximumZoomScale = 3;
    scrollView1.delegate = self;
    [scrollView1 setScrollEnabled:YES];

    // pagingEnabled property default is NO, if set the scroller will stop or snap at each photo
    // if you want free-flowing scroll, don't set this property.
    scrollView1.pagingEnabled = YES;

    // load all the images from our bundle and add them to the scroll view
    NSUInteger i;
    for (i = 1; i <= kNoImages; i++)
    {
        NSString *imageName = [NSString stringWithFormat:@"page-%d.jpg", i];
        UIImage *image = [UIImage imageNamed:imageName];
        UIImageView *ImageView = [[UIImageView alloc] initWithImage:image];

        // setup each frame to a default height and width, it will be properly placed when we call "updateScrollList" 
        CGRect rect = ImageView.frame;
        rect.size.height = kScrollHeight;
        rect.size.width = kScrollWidth;
        ImageView.frame = rect;
        ImageView.tag = i;    // tag our images for later use when we place them in serial fashion
        UIButton *btnView2= [UIButton buttonWithType:UIButtonTypeCustom];
        [btnView2 setTitle:@"view" forState:UIControlStateNormal];
        [btnView2 addTarget:self action:@selector(View:)forControlEvents:UIControlEventTouchDown];
        [btnView2 setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        btnView2.frame=CGRectMake(0,0,460,460 );
        [scrollView1 addSubview:btnView2];

     scrollView1.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin;

        [scrollView1 addSubview:ImageView];

        [ImageView release];
    }

    [self layoutScrollImages];    // now place the photos in serial layout within the scrollview
}



    -(IBAction)View:(id)sender{

    NSURL *imgUrl=[[NSURL alloc] initWithString:@"http://farm4.static.flickr.com/3567/3523321514_371d9ac42f.jpg"];                 
    NSData *imgData = [NSData dataWithContentsOfURL:imgUrl];
    UIImage *img = [UIImage imageWithData:imgData];
    UIImageView *imgView = [[UIImageView alloc] initWithImage:img];
    [self.view addSubview:imgView];
    //[self.navigationController pushViewController:ivc animated:YES];

    [imgUrl release]; 


}

3 个答案:

答案 0 :(得分:1)

而不是在Imageview上添加Imageview和透明按钮。您可以在滚动视图中添加UIButton自定义类型并将按钮图像设置为图像。没有必要同时使用imageview和UIButton。只需要使用UIButton和setImage就可以了。我试着从我的应用程序中给出下面的示例代码。请根据您的需要进行修改。我认为这是你需要的。

首先在全局文件中取所有常量。我把它放在en.lproj中。如下。

"TotalThumbnailCount"="6";
"Coloumn"="2";
"ThumbnailHeight"="151";
"ThumbnailWidth"="151";

//Marging between two images

"MarginX" = "6";
"MarginY" = "6";

然后从全局变量初始化所有本地变量。如下所示

 -(void)PopulateVariables{
TotalThumbnail = [NSLocalizedString(@"TotalThumbnailCount",nil) intValue];
Colomn = [NSLocalizedString(@"Coloumn",nil) intValue];
ThumbnailHeight = [NSLocalizedString(@"ThumbnailHeight",nil) intValue];
ThumbnailWidth = [NSLocalizedString(@"ThumbnailWidth",nil) intValue];
MarginX = [NSLocalizedString(@"MarginX",nil) intValue];
MarginY= [NSLocalizedString(@"MarginY",nil) intValue];
}

现在,您应该使用以下功能中的UIButton启动缩略图图像。

-(void)PopulateThumbnails
{
NSAutoreleasePool *pool = [[NSAutoreleasePool alloc] init];
XCordinate=MarginX;
YCordinate = MarginY;file:
for(int i=1; i <=TotalThumbnail;i++){
    UIButton *btnMenu = [UIButton buttonWithType:UIButtonTypeCustom];
    //NSData *data =UIImageJPEGRepresentation(, 1);
    [btnMenu setBackgroundImage:[UIImage imageNamed:[NSString stringWithFormat:@"%d.png",i]] forState:UIControlStateNormal];
    CGRect frame = btnMenu.frame;
    frame.size.width=ThumbnailWidth;
    frame.size.height=ThumbnailHeight;
    frame.origin.x=XCordinate;
    frame.origin.y=YCordinate;
    btnMenu.frame=frame;
    btnMenu.tag=i;
    btnMenu.alpha = 1;
    [btnMenu addTarget:self action:@selector(btnSelected:) forControlEvents:UIControlEventTouchUpInside];
    [scrollView addSubview:btnMenu];
    XCordinate = btnMenu.frame.origin.x + btnMenu.frame.size.width + MarginX;

    if(i%Colomn==0)
    {
        XPosition = XCordinate;
        YCordinate = btnMenu.frame.origin.y + btnMenu.frame.size.height + MarginY;
        XCordinate = MarginX;
    }
}
[pool release];
}

然后设置您的scrollview内容化

scrollView.contentSize = CGSizeMake(XPosition, YCordinate);

当有人点击任何图片时,它会进入下面的事件。

-(IBAction)btnSelected:(id)sender{
UIButton *btnSelected = sender;
switch (btnSelected.tag) {
}

让我知道如果我错过任何事情,如果你不明白..希望这有帮助。

答案 1 :(得分:1)

您可以为每张图片添加UITapGestureRecognizer:

UITapGestureRecognizer *tapGesture = [[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapAction:)] autorelease];
[imageView addGestureRecognizer:tapGesture];
[self.view addSubview:imageView];

答案 2 :(得分:0)

创建图像视图时,创建一个uibutton并将其作为子视图添加到imageview。 将按钮的属性设置为自定义类型。同时将按钮的框架设置为与图像视图的框架相同。

button = [UIButton buttonWithType:UIButtonTypeCustom];

Google如何以编程方式创建一个uibutton。然后,您可以添加必要的选择器来处理按钮事件。

或者您可以在Interfacebuilder中创建一个元素。一个自定义类,具有uiimageview和清晰的uibutton。然后,您可以使用此元素添加到您的uiscrollview。