IOS development-horizontal flow layout implementation, ios-horizontal layout

IOS development-horizontal flow layout implementation, ios-horizontal layout

Due to time, I seldom explain easy-to-understand algorithm ideas. Here, I will first show the dynamic image effect, and then I will go directly to the key source code.

Effect display chart;

Source Baidu cloud disk download link: http://pan.baidu.com/s/1eQOOixc password: duu8

Source code:

1 // PhotoCell. h 2 // custom streamline layout 3 // 4 // Created by xmg on 16/1/15. 5 // Copyright©2016 HeYang. all rights reserved. 6 // 7 8 # import <UIKit/UIKit. h> 9 10 @ interface PhotoCell: UICollectionViewCell11 12 @ property (nonatomic, strong) UIImage * image; 13 14 @ end15 16 17 // 18 // PhotoCell. m19 // custom flow layout 20 // 21 // Created by xmg on 16/1/15.22 // Copyright©2016 HeYang. all rights reserved.23 // 24 25 ======================= the watershed between the two files ================ ===== 26 27 # import "PhotoCell. h "28 29 @ interface PhotoCell () 30 @ property (weak, nonatomic) IBOutlet UIImageView * imageView; 31 @ end32 33 @ implementation PhotoCell34 35-(void) awakeFromNib {36 // Initialization code37} 38 39-(void) setImage :( UIImage *) image40 {41 _ image = image; 42 43 _ imageView. image = image; 44 45} 46 47 @ end

1 // 2 // PhotoLayout. h 3 // custom streamline Layout 4 // 5 // Created by xmg on 16/1/15. 6 // Copyright©2016 HeYang. all rights reserved. 7 // 8 9 # import <UIKit/UIKit. h> 10 11 @ interface PhotoLayout: UICollectionViewFlowLayout 12 13 @ end 14 15 16 =================== the watershed between the two files ================ = 17 18 // 19 // PhotoLayout. m 20 // custom flow layout 21 // 22 // Created by xmg on 16/1/15. 23 // Copyright©2016 HeYang. all rights reserved. 24 // 25 26 # import "PhotoLayout. h "27 # define XMGScreenW [UIScreen mainScreen]. bounds. size. width 28 @ implementation PhotoLayout 29 30 // complex effect: Analysis-> 31 // The closer the cell is to the center (smaller delta), the larger the cell is, the smaller the value is 32 // the distance from the center is 33 // You Need To Know which cells need to be scaled: only the displayed cells need to be laid out 34 35 36 37 // a given area, returns the layoutAttributesForE layout of all cells in this region 38-(nullable NSArray <__ kindof UICollectionViewLayoutAttributes *> *). LementsInRect :( CGRect) rect 39 {40 // 1. Get the display area, bounds rather than the entire rolling area, so that the configured sub-control is controlled within the display area range. 41 CGRect visiableRect = self. collectionView. bounds; 42 43 // 2. obtain the cell Layout in the display area 44 NSArray * attributes = [super layoutAttributesForElementsInRect: visiableRect]; 45 46 47 48 // 3. traverse cell Layout 49 CGFloat offsetX = self. collectionView. contentOffset. x; 50 for (UICollectionViewLayoutAttributes * attr in attributes) {51 // 3.1 calculate the distance from the center to 52 CGFloat delta = fabs (attr. center. x-offsetX-XMGScreenW * 0.5); 5 3 // 1 ~ 0.75 54 CGFloat scale = 1-delta/(XMGScreenW * 0.5) * 0.25; // 1-(0 ~ 0.5) = 1 ~ 0.5 --> 1-(0 ~ 0.5) × 0. 25 = (1 ~ (0.75) 55 attr. transform = CGAffineTransformMakeScale (scale, scale); 56} 57 58 return attributes; 59} 60 61 // Invalidate: refresh 62 // whether to allow refreshing layout 63 when dragging // exercise caution. YES: the layout is 64-(BOOL) shouldInvalidateLayoutForBoundsChange (CGRect) as long as it is rolled) newBounds 65 {66 return YES; 67} 68 69 // determine the final display position 70 // when to call: manually drag UICollectionView, when the finger leaves, 71 // will be called: return the final offset of UICollectionView 72 // proposedContentOffset: Final offset 73-(CGPoint) Then :( CGPoint) proposedContentOffset withScrollingVelocity :( CGPoint) velocity 74 {75 // positioning: locate the cell in which the center is closer, and locate the center 76 // 1. obtain the final displayed region 77 CGRect targetRect = CGRectMake (proposedContentOffset. x, 0, self. collectionView. bounds. size. width, MAXFLOAT); 78 79 // 2. obtain the final Display cell Layout 80 NSArray * attributes = [super layoutAttributesForElementsInRect: targetRect]; 81 82 // 3. traverse the layout of all cells to determine which one is closest to the center: 83 CGFloat minDelta = MAXFLOAT; 84 85 for (UICollectionViewLayoutAttributes * attr in attributes) {86 // 3.1 calculates the distance from the center: 87 CGFloat delta = attr. center. x-proposedContentOffset. x-XMGScreenW * 0.5; 88 // 3.2 minimum pitch 89 if (fabs (delta) <fabs (minDelta) {90 minDelta = delta; 91} 92} 93 94 proposedContentOffset. x + = minDelta; 95 96 if (proposedContentOffset. x <0) {97 proposedContentOffset. x = 0; 98} 99 100 return proposedContentOffset; 101} 102 103 @ end

The final key code:

1 // 2 // ViewController. m 3 // custom streamline Layout 4 // 5 // Created by xmg on 16/1/15. 6 // Copyright©2016 HeYang. all rights reserved. 7 // 8 9 # import "ViewController. h "10 # import" PhotoCell. h "11 # import" PhotoLayout. h "12 13/* 14 // a, B, c a = B + c 15 // int d = (2, 3, 5); 16 17 // high aggregation, low coupling 18 int a = ({19 int B = 2; 20 int c = 3; 21 a = B + c; 22 20; 23 }); 24 */25 26/* 27 UICollectionView Note: 28 1. the layout must be input for initialization (flow layout: jiugongge layout) 29 2. UICollectionViewCell must be registered for 30 3. the cell 31 */32 33 34 # define XMGScreenW [UIScreen mainScreen] Must be customized. bounds. size. width 35 static NSString * const ID = @ "cell"; 36 @ interface ViewController () <UICollectionViewDataSource> 37 38 @ end 39 40 @ implementation ViewController 41 42 // train of thought: photo browsing layout: streamline layout. When dragging to the canvas, recalculate the layout based on the original layout-> Add features to the original function, and customize the streamline layout 43-(void) viewDidLoad {44 [super viewDidLoad]; 45 // Do any additional setup after loading the view, typically from a nib. 46 47 // create a flow layout 48 PhotoLayout * layout = ({49 layout = [[PhotoLayout alloc] init]; 50 // size 51 layout. itemSize = CGSizeMake (180,180); 52 // set the scroll direction: level 53 layout. scrollDirection = uicollectionviewscrolldirehorizontal; 54 // set the additional rolling Area 55 CGFloat inset = (XMGScreenW-180) * 0.5; 56 layout. sectionInset = UIEdgeInsetsMake (0, inset, 0, inset); 57 58 layout; 59}); 60 61 // create UICollectionView: the default value is black 62 UICollectionView * collectionView = ({63 collectionView = [[UICollectionView alloc] initWithFrame: CGRectZero collectionViewLayout: layout]; 64 collectionView. bounds = CGRectMake (0, 0, self. view. bounds. size. width, 200); 65 collectionView. center = self. view. center; 66 collectionView. backgroundColor = [UIColor cyanColor]; 67 collectionView. showsHorizontalScrollIndicator = NO; 68 [self. view addSubview: collectionView]; 69 70 // set the data source 71 collectionView. dataSource = self; 72 collectionView; 73}); 74 75 // register cell 76 [collectionView registerNib: [UINib nibWithNibName: NSStringFromClass ([PhotoCell class]) bundle: nil] forwitcellhreuseidentifier: ID]; 77} 78 79 80 # pragma mark-UICollectionViewDataSource 81 // returns the number of cells 82-(NSInteger) collectionView :( UICollectionView *) collectionView numberOfItemsInSection :( NSInteger) section 83 {84 return 20; 85} 86 87 // return the length of each cell. 88-(UICollectionViewCell *) collectionView :( UICollectionView *) collectionView cellForItemAtIndexPath :( NSIndexPath *) indexPath 89 {90 91 PhotoCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier: ID forIndexPath: indexPath]; 92 93 NSString * imageName = [NSString stringWithFormat: @ "% ld", indexPath. row + 1]; 94 95 cell. image = [UIImage imageNamed: imageName]; 96 97 return cell; 98} 99 100 @ end