Implement the content area function of rolling linkage of iOS menus and ios Linkage

Implement the content area function of rolling linkage of iOS menus and ios Linkage

This function is often used in APP development. This instance uses three open-source plug-ins and modifies and adjusts one of them to achieve the desired effect; this article focuses on the modified content and the application of the three plug-ins. These three plug-ins can also be used in other projects;

:

 

Effect of this example: the scroll menu on the top shows all types. Each type corresponds to one type of display. you can scroll the menu on the top and the content area will also change, or Slide left and right in the content area, the scroll menu on the top will be changed, and the rightmost menu on the top will show more menu effects, which will pop up a window with arrows; (Source Code download)

Pop-up view plug-in with arrows: https://github.com/xiekw2010/DXPopover

Content Area slide Plugin: https://github.com/nicklockwood/iCarousel

And the XTSegmentControl menu scrolling effect in the Codint. Net open-source project. This instance modifies it.

1: plug-in and page Initialization

# Import "ViewController. h "# import" oldChildVewController. h "# import" ChildViewController. h "# import" newChildVewController. h "# import" XTSegmentControl. h "# import" iCarousel. h "# import" Masonry. h "# import" menuCollectionViewCell. h "# import" DXPopover. h "# define kScreen_Height [UIScreen mainScreen]. bounds. size. height # define kScreen_Width [UIScreen mainScreen]. bounds. size. width # define kMySegmentControl_Heigh T 44.0 @ interface ViewController () <UICollectionViewDataSource, metrics, iCarouselDataSource, metrics> @ property (strong, nonatomic) XTSegmentControl * mySegmentControl; @ property (strong, nonatomic) NSArray * titlesArray; @ property (strong, nonatomic) iCarousel * myCarousel; @ property (assign, nonatomic) NSInteger curSelectIndex; @ property (nonatomic, strong) DXPopover * popover; @ pro Perty (assign, nonatomic) CGFloat popoverWidth; @ property (strong, nonatomic) UICollectionView * myCollectionView; @ end @ implementation ViewController-(void) viewDidLoad {[super viewDidLoad]; self. view. backgroundColor = [UIColor whiteColor]; // initialize A popover for displaying the window effect self. popover = [DXPopover new]; _ poverwidth = kScreen_Width-20; _ weak typeof (self) weakSelf = self; CGRect frame = self. view. bounds; // content area scrolling Effect plug-in self. myCarousel = ({iCarousel * icarousel = [[iCarousel alloc] initWithFrame: frame]; icarousel. dataSource = self; icarousel. delegate = self; icarousel. decelerationRate = 1.0; icarousel. scrollSpeed = 1.0; icarousel. type = iCarouselTypeLinear; icarousel. pagingEnabled = YES; icarousel. clipsToBounds = YES; icarousel. bounceDistance = 0.2; [self. view addSubview: icarousel]; [icarousel mas_makeConstr Aints: ^ (MASConstraintMaker * make) {make. edges. similar to (self. view ). insets (UIEdgeInsetsMake (64, 0, 0, 0);}]; icarousel;}); // Add the slider _ weak typeof (_ myCarousel) weakCarousel = _ myCarousel; self. mySegmentControl = [[XTSegmentControl alloc] initWithFrame: CGRectMake (0, 20, kScreen_Width, 44) Items: self. titlesArray showRightButton: YES selectedBlock: ^ (NSInteger index) {weakSelf. curSelectIndex = index; weak Invalid usel. currentItemIndex = index; [weakSelf. myCollectionView reloadData];}]; // event self that is returned when a right key exists. mySegmentControl. rightButtonBlock = ^ (CGRect success) {// use the pop-up plug-in [weakSelf updateMyViewFrame]; CGPoint startPoint = CGPointMake (reverse (rightButtomRect), reverse (rightButtomRect) + 25. popover showAtPoint: startPoint popoverPostion: dxpoverpositiondown withContentView: we AkSelf. myCollectionView inView: weakSelf. view] ;}; [self. view addSubview: self. mySegmentControl]; // displays the list in the pop-up effect if (! _ MyCollectionView) {UICollectionViewFlowLayout * layout = [[UICollectionViewFlowLayout alloc] init]; self. myCollectionView = [[UICollectionView alloc] initWithFrame: CGRectMake (200, kScreen_Width-40,) collectionViewLayout: layout]; self. myCollectionView. backgroundColor = [UIColor whiteColor]; self. myCollectionView. showsHorizontalScrollIndicator = NO; self. myCollectionView. showsVerticalScrollIndicator = NO; [self. myCollectionView registerClass: [menuCollectionViewCell class] forCellWithReuseIdentifier: NSStringFromClass ([menuCollectionViewCell class])]; self. myCollectionView. dataSource = self; self. myCollectionView. delegate = self ;}}

XTSegmentControl is created for the top menu, where showRightButton is used to expand whether to display more menu events on the right, and Block the Event Response to the page for implementation, this example shows the effect of the response window. iCarousel is the sliding effect of the content area, dxpover is the effect of the pop-up window, And UICollectionView is used to display the menu list in the pop-up window.

// Popver attributes-(void) updateMyViewFrame {CGRect tableViewFrame = self. myCollectionView. frame; tableViewFrame. size. width = _ popoverWidth; self. myCollectionView. frame = tableViewFrame; self. popover. contentInset = UIEdgeInsetsZero; self. popover. backgroundColor = [UIColor whiteColor];} # pragma mark-Getter/Setter-(NSArray *) titlesArray {if (nil = _ titlesArray) {_ titlesArray = @ [@ "", @ "", @ "open-source control", @ "document", @ "code", @ "golf ", @ "topic", @ "software", @ "stock"];} return _ titlesArray ;}

2 plug-in iCarouselDataSource, iCarouselDelegate code implementation

# Pragma mark iCarousel M-(NSUInteger) numberOfItemsInCarousel :( iCarousel *) specify usel {return [self. titlesArray count];} // content view loading during scrolling-(UIView *) carousel :( iCarousel *) carousel viewForItemAtIndex :( NSUInteger) index reusingView :( UIView *) view {[_ mySegmentControl setscroloffset: index]; UIViewController * childContrll = [[ChildViewController alloc] init]; UIView * my = childContrll. view; switch (index) {case 0: {my. backgroundColor = [UIColor blackColor]; break;} case 1: {my. backgroundColor = [UIColor redColor]; break;} default: childContrll = [[newChildVewController alloc] init]; break;} return childContrll. view;} // update the underline position when scrolling-(void) ususeldidscroll :( iCarousel *) carousel {if (_ mySegmentControl) {[_ mySegmentControl moveIndexWithProgress];} // update the position of the other two controls-(void) carouselCurrentItemIndexDidChange :( iCarousel *) carousel {self. curSelectIndex = Specified usel. currentItemIndex; [self. myCollectionView reloadData]; if (_ mySegmentControl) {_ mySegmentControl. currentIndex = usel. currentItemIndex ;}}

Note: For view loading in the content area and event processing in response to sliding, some exceptions may occur when the XTSegmentControl does not underline the number of menu words at the same time, and this instance modifies it;

3: List the implementation of the UICollectionViewDataSource and UICollectionViewDelegate Functions

-(NSInteger) collectionView :( UICollectionView *) collectionView numberOfItemsInSection :( NSInteger) section {return self. titlesArray. count;}-(UICollectionViewCell *) collectionView :( UICollectionView *) collectionView cellForItemAtIndexPath :( NSIndexPath *) indexPath {worker * ccell = [collectionView worker: worker ([menuCollectionViewCell class]) forIndexPath: indexPath]; NSString * model = [self. titlesArray objectAtIndex: indexPath. row]; ccell. curMenuModel = model; if (self. curSelectIndex = indexPath. row) {ccell. backgroundColor = [UIColor blueColor];} else {ccell. backgroundColor = [UIColor whiteColor];} return ccell;}-(CGSize) collectionView :( UICollectionView *) collectionView layout :( UICollectionViewLayout *) collectionViewLayout sizeForItemAtIndexPath :( NSIndexPath *) indexPath {return CGSizeMake (kScreen_Width-40)/3, 40);}-(UIEdgeInsets) collectionView :( UICollectionView *) collectionView layout :( UICollectionViewLayout *) collectionViewLayout insetForSectionAtIndex :( NSInteger) section {return UIEdgeInsetsZero;}-(CGFloat) collectionView :( UICollectionView *) collectionView layout :( UICollectionViewLayout *) collectionViewLayout layout :( NSInteger) section {return 5;}-(CGFloat) collectionView :( UICollectionView *) collectionView layout :( UICollectionViewLayout *) collectionViewLayout layout :( NSInteger) section {return 5;}-(void) collectionView :( UICollectionView *) collectionView detail :( NSIndexPath *) indexPath {self. curSelectIndex = indexPath. row; // two Rolling positions updated _ mydomainusel. currentItemIndex = self. curSelectIndex; [_ mySegmentControl selectIndex: self. curSelectIndex]; // hide the pop-up window [self. popover dismiss];}

Note: You need to adjust the scroll position and content area when clicking and compress the pop-up window;

4: XTSegmentControl underline Adjustment

-(Void) reverse {CGRect origionRect = [_ itemFrames [_ currentIndex] CGRectValue]; CGRect origionLineRect = CGRectMake (original (origionRect) + reverse, CGRectGetHeight (origionRect)-reverse, CGRectGetWidth (origionRect)-2 * XTSegmentControlHspace, XTSegmentControlLineHeight); // Add an underline to scroll the result [UIView animateWithDuration: 0.5 animations: ^ {_ lineView. frame = origionLineRect;} completion: ^ (BOOL finished) {}];}

5: The extension XTSegmentControl does not have more menu Effects on the right.

    self.mySegmentControl = [[XTSegmentControl alloc] initWithFrame:CGRectMake(0, 20, kScreen_Width, 44) Items:self.titlesArray showRightButton:NO selectedBlock:^(NSInteger index) {        weakSelf.curSelectIndex=index;        weakCarousel.currentItemIndex=index;        [weakSelf.myCollectionView reloadData];    }];

: