你的位置:首页 > 软件开发 > 操作系统 > iOS菜单滚动联动内容区域功能实现

iOS菜单滚动联动内容区域功能实现

发布时间:2015-10-16 15:00:03
平时开发APP中关于此功能还是比较经常碰到,本实例借用三个开源的插件,并对其中一个进行修改调整实现出想要的效果;本文重点介绍修改的内容跟三个插件的运用,这三个插件还可以各自扩展到其它项目的运用;效果图: 本实例实现的效果:顶部的滚动菜单显示出所有的类型,每个类型都对应一种展示 ...

iOS菜单滚动联动内容区域功能实现

平时开发APP中关于此功能还是比较经常碰到,本实例借用三个开源的插件,并对其中一个进行修改调整实现出想要的效果;本文重点介绍修改的内容跟三个插件的运用,这三个插件还可以各自扩展到其它项目的运用;

效果图:

iOS菜单滚动联动内容区域功能实现iOS菜单滚动联动内容区域功能实现iOS菜单滚动联动内容区域功能实现iOS菜单滚动联动内容区域功能实现

 

本实例实现的效果:顶部的滚动菜单显示出所有的类型,每个类型都对应一种展示,可以在顶部的菜单进行滚动,内容区域也会跟着改变,或者是内容区域左右滑动,则顶部的滚动菜单也会跟着更改,顶部菜单的最右边有一个展示更多菜单的效果,用于弹出一个带箭头的窗;(源代码下载)

 带箭头的弹出视图插件 :https://github.com/xiekw2010/DXPopover

 内容区域滑动插件:https://github.com/nicklockwood/iCarousel

 及Codint.Net开源项目中的XTSegmentControl菜单滚动效果,此实例对它进行的修改

1:插件及页面的初始化

#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_Height 44.0@interface ViewController ()<UICollectionViewDataSource, UICollectionViewDelegate,iCarouselDataSource, iCarouselDelegate>@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;@property(assign,nonatomic)CGFloat popoverWidth;@property (strong, nonatomic) UICollectionView *myCollectionView;@end@implementation ViewController- (void)viewDidLoad {  [super viewDidLoad];    self.view.backgroundColor=[UIColor whiteColor];    //初始化一个popover 用于弹窗效果的展示  self.popover = [DXPopover new];  _popoverWidth = kScreen_Width-20;    __weak typeof(self) weakSelf = self;  CGRect frame=self.view.bounds;    //内容区滚动效果插件  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_makeConstraints:^(MASConstraintMaker *make) {      make.edges.equalTo(self.view).insets(UIEdgeInsetsMake(64, 0, 0, 0));    }];    icarousel;  });    //添加滑块  __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;    weakCarousel.currentItemIndex=index;    [weakSelf.myCollectionView reloadData];  }];  //当有右边键时 其响应的事件  self.mySegmentControl.rightButtonBlock= ^(CGRect rightButtomRect)  {    //弹出插件的运用    [weakSelf updateMyViewFrame];    CGPoint startPoint =    CGPointMake(CGRectGetMidX(rightButtomRect), CGRectGetMaxY(rightButtomRect) + 25);    [weakSelf.popover showAtPoint:startPoint          popoverPostion:DXPopoverPositionDown         withContentView:weakSelf.myCollectionView              inView:weakSelf.view];  };  [self.view addSubview:self.mySegmentControl];    //用于展示弹出效果里面的列表  if (!_myCollectionView) {    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];    self.myCollectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0,50,kScreen_Width-40, 200) 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;  }}

原标题:iOS菜单滚动联动内容区域功能实现

关键词:IOS

IOS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。