Scrolling and positioning of news home page tags


The main implementation of similar news header scrolling labels and content linkage effect


A recent requirement is: a scrolling tab bar with a shaded part at the top, which is in tabular form and can scroll around, and the scroll bar has a linkage effect with the scroll of content.
I began to think of the linkage between scollView and scrollView, and later found in the details of control is difficult to grasp, because of the needs of the project, in the initialization time, the tab bar has a padding, starting with a scrollView design, in this drama series. I think the collectionView is invalid, then, with a custom a Grallery online library of layout, the author applied to the project, after repeated polishing, now more fit the needs of the

Scrolling and positioning of news home page tags,
, Simulator, Screen, Shot, June 14, 2017, 20.24.36.png
Scrolling and positioning of news home page tags,
, Simulator, Screen, Shot, June 14, 2017, 20.24.45.png
Scrolling and positioning of news home page tags,
, Simulator, Screen, Shot, June 14, 2017, 20.24.53.png

As the above several pictures, click on the label or tag when rolling and rolling at the top, content view, display will change accordingly, and to ensure that the final stop in the middle of the label is selected, is simple in theory, in the implementation, their hands do not know the trick. The algorithm here is given below, with the simple code, can go to my GitHub download code view:

Make sure that the displayed cell is positioned in the middle of the collectionView at the end of the scroll, which is mainly defined in this method in the custom layout:

After collectionView / * * * collectionView sliding stop offset - * / (CGPoint) targetContentOffsetForProposedContentOffset: (CGPoint) proposedContentOffset withScrollingVelocity: (CGPoint velocity) {/ / calculated spacing traversing the rectangular box of cell relative to the center line of the frame rectangle display to select the most suitable cell adjusted CGRect currentRect; currentRect.origin.x = proposedContentOffset.x; currentRect.origin.y = 0; currentRect.size = CGSizeMake (self.collectionView.frame.size.width, self.collectionView.frame.size.height); / / get NSArray *array = [super layoutAttributesForElementsInRect:currentRect] layout attributes of super have been calculated in the corresponding rect; / / collectionView computing the center value of X CGFloat CE NterX = proposedContentOffset.x + 0.5 * self.collectionView.frame.size.width; / / CGFloat minDelta storage minimum spacing value = MAXFLOAT; for (UICollectionViewLayoutAttributes *attr in array (ABS) {if (minDelta) > ABS ( - centerX)) {minDelta = - centerX;}} / / modify the original offset proposedContentOffset.x = minDelta; return proposedContentOffset;}

After this setting, you can achieve the effect of cell to the middle position.

The following brief shows the interaction between the two effects, specific download source code view

1. scroll method and linkage control on the top tab are as follows:

- (void) collectionView: (UICollectionView * collectionView) didSelectItemAtIndexPath: (NSIndexPath * indexPath) {[self updateScrollOffsetWith:indexPath.item]; [self triggerTopItemRequestWith:indexPath.item];} - (void) scrollViewWillBeginDecelerating: (UIScrollView * scrollView) {[self updateScrollOffsetWith: (scrollView.contentOffset.x / self.itemWidth)];} - (void) scrollViewDidEndDecelerating: (UIScrollView *) triggerTopItemRequestWith: scrollView {[self (scrollView.contentOffset.x / self.itemWidth)];}

To trigger this method, callback the content view to change the offset

- (void) triggerTopItemRequestWith: (int) itemIndex *indexPath indexPathForItem:itemIndex inSection:0] {NSIndexPath = [NSIndexPath; if (self.clickItemTop) self.clickItemTop (indexPath.item) {}};

Triggers this method to modify offsets and their font color size settings

- (void) changeCollectionOffset: (int) itemIndex scrollToItemAtIndexPath:[NSIndexPath indexPathForItem:itemIndex inSection:0] atScrollPosition:UICollectionViewScrollPositionCenteredHorizontally {[self.collectionView animated:YES];} - (void) didChangeTagProperty: (int) itemIndex *indexPath indexPathForItem:itemIndex inSection:0] {NSIndexPath = [NSIndexPath; if (self.currentIndexPath = = indexPath) {return}; self.currentIndexPath = indexPath; [self.collectionView reloadData];}

The scroll agent for content view is implemented as follows:

The //self.containerScroll logo is caused by rolling the content view request - (void) scrollViewWillBeginDragging: (UIScrollView * scrollView) {self.containerScroll = YES;} / / when scrolling to the half of the drive tab change - (void) scrollViewDidScroll: (UIScrollView * scrollView) {if (! Self.containerScroll) {return}; / / if scroll to half the screen change, the top offset int index = scrollView.contentOffset.x / scrollView.frame.size.width; if (scrollView.contentOffset.x - index * scrollView.frame.size.width = scrollView.frame.size.width * > 0.5) {// that is sliding to the next page, more than half of the [self.recommendTagView (updateScrollOffsetWith: scrollView.contentOffset.x / scrollView.frame.size.wi DTH + 1]);} if (index * scrollView.frame.size.width - scrollView.contentOffset.x = > scrollView.frame.size.width * 0.5) {[self.recommendTagView updateScrollOffsetWith: (scrollView.contentOffset.x / scrollView.frame.size.width)];}} / / rolling end to trigger network requests - (void) scrollViewDidEndDecelerating: (UIScrollView * scrollView) {int index = scrollView.contentOffset.x / kScreenW; / / YGLog offset change the top (@ "page%d", index); [self.recommendTagView updateScrollOffsetWith:index]; [self.recommendTagView triggerTopItemRequestWith:index];}

Roughly realize the idea, that is, the specific needs of specific analysis

Ps: the following with my GitHub source, interested friends can download to see, do not have a good place, we welcome the exchange and common progress, love partner can give a stars Oh, thank you
: the additional test found are lacking in fluency, below the introduction of fluency improvement makes up for the shortcoming, interested students can go to see oh