使用图像行创建UIScroll视图 [英] Creating UIScroll view with rows of images

问题描述

我想在滚动视图上显示我的数据库中存在的图像。同时我想在一行中显示4个图像，然后在下一行显示下4个图像。因此滚动视图将只显示2行，滚动后垂直地，用户将能够滚动显示在数据库中的所有图像。任何人建议任何适当的措施，这样做或提供任何示例演示或代码为此。任何帮助将不胜感激。

I want to display the images present in my database on the Scroll view.Also i want to display 4 images in a row then next 4 in next row and so on.Initially the scroll view will show only 2 rows and after scrolling vertically the user will be able to scroll through all the images present in the database.Can anyone suggest any suitable measures to do this or provide any sample demo or code for this.Any help will be appreciated.

我使用这个代码以水平方式获取图像。我可以在垂直方式，在一行中5个图像之后。我的代码： -

I am using this code to get images in horizontal fashion .How can i do it in vertical fashion after 5 images in a row.My code:-

 - (void)layoutScrollImages
 {

     UIImageView *view = nil;
    NSArray *subviews = [scrollView1 subviews];
    CGFloat curXLoc = 40;
// reposition all image subviews in a horizontal serial fashion

//CGFloat curYLoc = 0;
for (view in subviews)
{
    //if ([view isKindOfClass:[UIImageView class]] && view.tag > 0)
    if(view)
    {
        CGRect frame = view.frame;
        frame.origin = CGPointMake(curXLoc, 40);
        view.frame = frame;
        curXLoc += (kScrollObjWidth);           

    }
}

     // set the content size so it can be scrollable
     [scrollView1 setContentSize:CGSizeMake((20 * kScrollObjWidth),[scrollView1 bounds].size.height)];
     //[self layoutScrollLabels];
 }

在视图中，我创建的滚动视图为： -

And in view did load i created scroll view as:-

scrollView1 = [[UIScrollView alloc] initWithFrame:CGRectMake(25,48,630,180)];
[scrollView1 setBackgroundColor:[UIColor lightGrayColor]];
[scrollView1 setCanCancelContentTouches:NO];
//scrollView1.indicatorStyle = UIScrollViewIndicatorStyleWhite;
//scrollView1.clipsToBounds = YES;      // default is NO, we want to restrict drawing within our scrollview
scrollView1.scrollEnabled = YES;
scrollView1.pagingEnabled=YES;
scrollView1.showsVerticalScrollIndicator = YES;
//scrollView1.showsHorizontalScrollIndicator = YES;
//scrollView1.alwaysBounceVertical = YES;
//scrollView1.alwaysBounceHorizontal = NO;

    [self.view addSubview:scrollView1];

感谢，
Christy

Thanks, Christy

推荐答案

------更新-------

- (void)layoutScrollImages
{
    //Considered your Image width & height as 50

    int i; //Variable to keep count per line;
    CGFloat curXLoc = 10; //Variable to keep X Location track
    CGFloat curXLoc = 0; //Variable to keep Y Location track
    for (UIImageView *tmpImgView in [scrollView1 subviews])
    {
        if(tmpImgView)
        {
            CGRect frame = view.frame;
            frame.origin.x = curXLoc;
            frame.origin.y = curYLoc;
            view.frame = frame;

            curXLoc = curXLoc + 55; // Adding 55 for next photo X position

            if(i!=1 && i%5 == 0)
            {
                curXLoc = 10; //Reset X Location so that it will start from left again;
                curYLoc = curYLoc + 55; // Adding 55 for next photo Y position if 5 photos are placed in one row
            }
        }
        i++;
    }

    // set the content size so it can be scrollable
    [scrollView1 setContentSize:CGSizeMake(yourScrollViewWidth,curYLoc+100)];
}

-----更新完成 -

-----Updated Finished-------

这里是

-(void)setImagesInScrollView
{
    scrollView.delegate = self;

    int i=1;
    CGFloat cx = 0;
    CGFloat cy = 0;

    for(UIImageView *yourImgView in yourImgArray)
    {
        //Create Image
        UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 100, 80)];
        imgView.contentMode = UIViewContentModeCenter;
        imgView.image = yourImgView.image;

        CGRect rect = imgView.frame;
        rect.size.height = imgView.frame.size.height;
        rect.size.width = imgView.frame.size.width;
        rect.origin.x += cx;
        rect.origin.y += cy;
        imgView.frame = rect;

        cx+=imgView.frame.size.width + 60;
        [scrollView addSubview:imgView];

        if(i!=1 && i%6==0)
        {
            cx=62;
            cy+=155;
        }

        [imgView release];
        i++;
    }

    [scrollView setContentSize:CGSizeMake(1024, cy+150)];
    [scrollView setFrame:CGRectMake(scrollView.frame.origin.x, scrollView.frame.origin.y, 1024, 630)];
    [scrollView setContentSize:CGSizeMake(1024, cy+150)];
    [scrollView setContentOffset:CGPointMake(0.0, 0.0)];
}

80宽度&高度。 。 cx和cy变量用于跟踪定位下一个图像。在1行这里6可能的图像（风景模式）。根据您的要求修改代码。

Above code was for iPad setting Images with 100 & 80 width & height respectively. . cx and cy variables are used to keep track for positioning next image. In 1 line here 6 Images are possible (Landscape mode). Modify code for the same as per your requirement.

如果您需要更多帮助，请发表评论。

If you need further help please leave a comment.

希望这有助于。

这篇关于使用图像行创建UIScroll视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！