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

Question

我有一个 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]; 


}

Answer 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.contentSize = CGSizeMake(XPosition, YCordinate);

当有人点击任何图像时，它将进入下面的事件。

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

如果我错过了什么或者您不明白，请告诉我。希望这会有所帮助。

Answer 2

您可以将 UITapGestureRecognizer 添加到每个图像：

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

Answer 3

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

button = [UIButton buttonWithType:UIButtonTypeCustom];

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

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