滚动后无法在滚动视图中设置子视图的框架

Question

I have an Horizontal-only UIScrollView. it contains several UIImageViews and a borderView for indicating which one is selected.

borderView is a UIView with border and no content.

what I want to do：

when the user tap the imageView, I wish the borderview can move to and overlay on the tapped imageView for indicating.

what I did in my code:

1.Add imageViews with UITapgesture event and borderView to the scrollView

-(void)setStaticFilterToBar
{
    _filterList = [APIHelper getStaticFilterList:_originBackgroundImage];
    filterScrollView.contentSize = CGSizeMake(320,filterScrollView.contentSize.height);
    filterScrollView.backgroundColor = [[UIColor blackColor]colorWithAlphaComponent:0.7f];
    int xAis = 64;
    for(int i=0; i<_filterList.count; i++)
    {
        UIImageView *filter = [[UIImageView alloc]initWithImage:[_filterList objectAtIndex:i]];
        [filter setUserInteractionEnabled:YES];
        [filter setFrame:CGRectMake(i * xAis,5,60,60)];
        [filter setTag:i];
        UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self 
action:@selector(filterElementTapToApplyFilter:)];
        [tap setDelegate:self];
        [filter addGestureRecognizer:tap];
        [filterScrollView addSubview:filter];
        if((i+1) * xAis > 320)
        {
            filterScrollView.contentSize = CGSizeMake(filterScrollView.contentSize.width + xAis,
                                               filterScrollView.contentSize.height);
        }
    }

    //add borderview
    UIView *borderView = [[UIView alloc]init];
    borderView.layer.borderColor = [UIColor redColor].CGColor;
    borderView.layer.borderWidth = 3.0f;
    borderView.layer.cornerRadius = 6;
    [filterScrollView addSubview:borderView];
}

-(void)filterElementTapToApplyFilter:(UITapGestureRecognizer *) recognizer
{
    //apply filter
    [self applyFilterByUIView:recognizer.view];

    //move the borderview to the tapped imageView
    [self selectSubViewsFromScrollView:filterScrollView TargetFrame:recognizer.view.frame];
}

2.Tap the imageview to change the borderview's frame value to that of imageView's. (no matter using animationwithDuration:animations:completion: or set the frame directly)

-(void)selectSubViewsFromScrollView:(UIScrollView *)scrollView TargetFrame:(CGRect)targetFrame
{
    //borderView is the last subview.
    UIView *borderView = [scrollView.subviews objectAtIndex:scrollView.subviews.count-1];

    NSLog(@"Before: borderView.frame:(%d,%d,%d,%d)",(int)borderView.frame.origin.x,
                (int)borderView.frame.origin.y,
                (int)borderView.frame.size.width,
                (int)borderView.frame.size.height);
    //1
    borderView.frame = targetFrame;

    //2 for animation
    //[UIView animateWithDuration:0.3 animations:^{
    //    borderView.frame = targetFrame;
    //}];
    NSLog(@"After: borderView.frame:(%d,%d,%d,%d)",(int)borderView.frame.origin.x,
                (int)borderView.frame.origin.y,
                (int)borderView.frame.size.width,
                (int)borderView.frame.size.height);
}

The problem I have:

it works just fine as I predicted for beginning.

But after scrolling the filterScrollView, click on imageview and the borderview won't change its position anymore.but still apply the right filter correctly.

the value of borderview's frame is changed, but the position in screen didn't change.

what happened here? Did I miss anything? Any help would be appreciated.

Note. I use storyboard and use No autolayout for all views.

Answer 1

We can use Collection View ,collection view also internally work same as scroll view and also we can handle selecting items easily .

in cellforItemAtIndexPath method add selected and normal cells like below

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView        cellForItemAtIndexPath:(NSIndexPath *)indexPath
     {

     UICollectionViewCell *cell = [collectionView     dequeueReusableCellWithReuseIdentifier:@"collectionViewCell" forIndexPath:indexPath];

  if (cell.selected) {
    cell.backgroundColor = [UIColor blueColor]; // highlight selection 
   }
   else
  {
    cell.backgroundColor = [UIColor clearColor]; // Default color
   }
 return cell;
 }

//once it is selected add the color

  -(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath  *)indexPath  {

       UICollectionViewCell *datasetCell =[collectionView cellForItemAtIndexPath:indexPath];
       datasetCell.backgroundColor = [UIColor blueColor]; // highlight selection
     }  

//when deselected make it as normal style

 -(void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath {

      UICollectionViewCell *datasetCell =[collectionView cellForItemAtIndexPath:indexPath]; 
      datasetCell.backgroundColor = [UIColor ClearColor]; // Default color
  }