Shulou(Shulou.com)06/03 Report--

This article is about how iOS uses UICollectionView to achieve horizontal scrolling of photos. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Train of thought

1. Interface building

The construction of the interface is very simple, just use UICollectionView and custom cell to build.

The macros and global variables used under / ViewController.m// are # define ScreenW [UIScreen mainScreen] .bounds.size.width # define ScreenH [UIScreen mainScreen]. Bounds.size.heightstatic NSString * const cellID = @ "cellID"; / / the code to create the collectionView-(void) setupCollectionView {/ / use the flow layout (inherited from UICollectionViewLayout) UICollectionViewFlowLayout * layout = ({UICollectionViewFlowLayout * layout = [UICollectionViewFlowLayout alloc] init]; / / the size of each cell layout.itemSize = CGSizeMake (180,180) / / horizontal scrolling layout.scrollDirection = UICollectionViewScrollDirectionHorizontal; / / the spacing between the cell layout.minimumLineSpacing = 40; / / the first cell and the last cell are displayed in the center (here I forgot to change the size of the data cell to 180 in my Demo) CGFloat margin = (ScreenW-180) * 0.5; layout.sectionInset = UIEdgeInsetsMake (0, margin, 0, margin); layout;}) / / when using UICollectionView, you must set the UICollectionViewLayout attribute UICollectionView * collectionView = ({UICollectionView * collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:layout]; collectionView.center = self.view.center; collectionView.bounds = CGRectMake (0,0, ScreenW, 200); collectionView.backgroundColor = [UIColor brownColor]; / / remember where to write in interface here! CollectionView.dataSource = self; [collectionView setShowsHorizontalScrollIndicator:NO]; [self.view addSubview:collectionView]; collectionView;}); / / implement registration cell, where PhotoCell is my custom cell, inherited from UICollectionViewCell UINib * collectionNib = [UINib nibWithNibName:NSStringFromClass ([PhotoCell class]) bundle:nil]; [collectionView registerNib:collectionNib forCellWithReuseIdentifier:cellID];} / UICollectionViewCellDataSource- (NSInteger) collectionView: (UICollectionView *) collectionView numberOfItemsInSection: (NSInteger) section {return 10 }-(_ _ kindof UICollectionViewCell *) collectionView: (UICollectionView *) collectionView cellForItemAtIndexPath: (NSIndexPath *) indexPath {PhotoCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellID forIndexPath:indexPath]; / / the picture name is 0-9 cell.imageName = [NSString stringWithFormat:@ "% ld", (long) indexPath.row]; return cell;}

/ / the interface is a xib file, and an ImageView is dragged in the cell. The constraint is 10max up and down / the picture name is the number 0-9 imageName;// PhotoCell.m@interface PhotoCell / PhotoCell.h@property (nonatomic, strong) NSString * imageName;// PhotoCell.m@interface PhotoCell () @ property (weak, nonatomic) IBOutlet UIImageView * imageView;@end@implementation PhotoCell- (void) awakeFromNib {[super awakeFromNib]; / / Initialization code}-(void) setImageName: (NSString *) imageName {_ imageName = imageName Self.imageView.image = [UIImage imageNamed:imageName];}

At this point, the most basic effect is achieved, a set of cell images of the same size.

two。 The size change has been achieved in the middle.

Because the UICollectionViewFlowLayout of the system does not achieve the effect I want, I rewrite some of the methods in this class. There are two comments in UICollectionViewLayout:

1. Methods in this class are meant to be overridden and will be called by its collection view to gather layout information. The method in this class means that it is overridden and will be called by its collection view to collect layout information

2. To get the truth on the current state of the collection view, call methods on UICollectionView rather than these. To get the truth about the current state of collection view, call the methods on UICollectionView instead of explaining that the x and y of collectionView's bounds are actually the x and y of collectionView's content view. On this point, please see the explanation of a blog post I wrote: iOS bounds learning notes and some of the functions of imitating UIScrollView

/ / MyFlowLayout.h#import / / attention! Inherits from UICollectionViewFlowLayout because it inherits from UICollectionViewLayout. Interface TWLayout: UICollectionViewFlowLayout// MyFlowLayout.m/** * The default implementation of this method returns NO. Subclasses can override it and return an appropriate value based on whether changes in the bounds of the collection view require changes to the layout of cells and supplementary views. The default implementation of this method returns NO. The subclass can override it and return the appropriate values depending on whether the changes in collection view's bounds require changing the layout of cells and supplementary views (supplementary views). * If the bounds of the collection view change and this method returns YES, the collection view invalidates the layout by calling the invalidateLayoutWithContext: method. If the bounds of collection view changes and this method returns YES, collection view updates the layout by calling the invalidateLayoutWithContext: method. @ param newBounds The new bounds of the collection view. @ return YES if the collection view requires a layout update or NO if the layout does not need to change. * /-(BOOL) shouldInvalidateLayoutForBoundsChange: (CGRect) newBounds {return YES;} / * * Returns the layout attributes for all of the cells and views in the specified rectangle. Returns the layout properties of all cells and views in the specified rectangle. @ param rect * The rectangle (specified in the collection view's coordinate system) containing the target views. A rectangle containing the target view (specified in the coordinate system of the collection view). @ return * An array of UICollectionViewLayoutAttributes objects representing the layout information for the cells and views. The default implementation returns nil. An array of UICollectionViewLayoutAttributes objects that represents the layout information for cell and view. The default implementation returns nil. * /-(NSArray *) layoutAttributesForElementsInRect: (CGRect) rect {/ / get collectionView's broadband CGFloat collectionW = self.collectionView.bounds.size.width; / / get layout attributes array NSArray * attrs = [super layoutAttributesForElementsInRect:self.collectionView.bounds]; for (int I = 0; I < attrs.count; iTunes +) {UICollectionViewLayoutAttributes * attr = attrs [I] / / the distance from the center of each displayed cell CGFloat margin = fabs ((attr.center.x-self.collectionView.contentOffset.x)-collectionW * 0.5); / / the zoom ratio: (margin / (collectionW * 0.5)) the conclusion is equal to 0 ~ 1. We need it to scale from 1 to 0.65, so that is (1-0) ~ (1-0.35) CGFloat scale = 1-(margin / (collectionW * 0.5)) * 0.35; attr.transform = CGAffineTransformMakeScale (scale, scale);} return attrs;} / * Returns the point at which to stop scrolling. * with regard to this method, the final offset is not determined by the offset of the finger. If the finger slides faster, the view scrolls a little longer after the finger slides; if the finger slides slowly, it stops wherever it goes. The point suggested by @ param proposedContentOffset (in the coordinate space of the content view of the collection view) is used for the upper-left corner of the visible content. This means that the collection view is calculated as the value that is most likely to be used at the end of the animation. The current scrolling speed of @ param velocity along the horizontal and vertical axes. The value is in points per second. The content offset to be used by @ return. The default implementation of this method returns the value in the proposedContentOffset parameter. * /-(CGPoint) targetContentOffsetForProposedContentOffset: (CGPoint) proposedContentOffset withScrollingVelocity: (CGPoint) velocity {/ / get the width of collectionView CGFloat collectionW = self.collectionView.bounds.size.width; / / get the current content offset CGPoint targetP = proposedContentOffset; / / get the array of layout properties that display cell, scroll horizontally, so only consider horizontal x and width, not NSArray * attrs = [super layoutAttributesForElementsInRect:CGRectMake (targetP.x, 0, collectionW, MAXFLOAT)] / / the distance between the cell closest to the center point (the middle cell is the closest, the value can be positive or negative) CGFloat minSpacing = MAXFLOAT; for (UICollectionViewLayoutAttributes * attr in attrs) {/ / offset from the center point CGFloat centerOffsetX = attr.center.x-targetP.x-collectionW * 0.5; / / fabs (): CGFloat absolute value if (fabs (centerOffsetX) < fabs (minSpacing)) {minSpacing = centerOffsetX;}} targetP.x + = minSpacing; return targetP;}

Finally, remember to change UICollectionViewFlowLayout to your custom FlowLayout object!

Thank you for reading! This is the end of this article on "how iOS uses UICollectionView to achieve horizontal scrolling photo effect". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.