最近遇到很吸引我的代码,效果就是这种类似新闻APP的顶部滚动菜单栏:

效果





ios 散开菜单 ios 菜单栏_滑块


segmentHeader.gif


功能

  • 快速集成顶部菜单栏
  • 拆分为SegementHead和SegmentScroll,分别设置头部视图和下方滚动视图。
  • 使用NSCache统计页面加载

样式

//头部样式
typedef enum: NSUInteger{
    /**
     *  默认
     */
    SegmentHeadStyleDefault,
    /**
     *  line(下划线)
     */
    SegmentHeadStyleLine,
    /**
     *  arrow(箭头)
     */
    SegmentHeadStyleArrow,
    /**
     *  slide(滑块)
     */
    SegmentHeadStyleSlide
}LGJSegmentHeadStyle;

/**
 *  分割样式,默认均分,其他样式按照标题长度计算
 */
typedef enum: NSUInteger{
    /**
     *  默认均分,根据maxTitles计算宽度,均分
     */
    LGJSegmentLayoutDefault,
    /**
     *  居中(标题不足一屏时选择样式,反之设置后按照居左)
     */
    LGJSegmentLayoutCenter,
    /**
     *  居左
     */
    LGJSegmentLayoutLeft
} LGJSegmentLayoutStyle;

使用

  • 将LGJSegmentPageView 拖入工程中
  • 默认设置
_segHead = [[LGJSegmentHead alloc] initWithFrame:CGRectMake(0, 64, SCREEN_WIDTH, 40) titles:list headStyle:_style layoutStyle:_layout];
    _segHead.fontScale = 1.1;
    _segHead.showIndex = 4;
    
    _segScroll = [[LGJSegmentScroll alloc] initWithFrame:CGRectMake(0, CGRectGetMaxY(_segHead.frame), SCREEN_WIDTH, SCREEN_HEIGHT-CGRectGetMaxY(_segHead.frame)) vcOrViews:[self vcArr:list.count]];
    _segScroll.loadAll = YES;
    
    [LGJSegmentManager associateHead:_segHead withScroll:_segScroll completion:^{
        [self.view addSubview:_segHead];
        [self.view addSubview:_segScroll];
    }];

滑动中加载页面

  • 默认设置为第一次进入只加载当前显示的页面,即segScroll.loadAll = NO;
  • 默认滑动过程中最大缓存页面是所有页面即 segScroll.countLimit = vcsOrviews.count;segScroll.loadAll = YES;

自定义菜单栏样式

/**
 *  选择状态下的颜色,完全自定义样式下可不设置
 */
@property (nonatomic, strong) UIColor *selectColor;
/**
 *  未选中状态下的颜色,完全自定义样式下可不设置
 */
@property (nonatomic, strong) UIColor *deSelectColor;
/**
 *  字体的大小,完全自定义样式下可不设置
 */
@property (nonatomic, assign) CGFloat fontSize;
/**
 *  选中状态的缩放比例,segmentHeadStyleSlide风格下此属性无用,设置缩放比例滑动过程中会有相应动画
 */
@property (nonatomic, assign) CGFloat fontScale;

其他样式设置

/**
 *  下划线的颜色
 */
@property (nonatomic, strong) UIColor *lineColor;
/**
 *  下划线高度
 */
@property (nonatomic, assign) CGFloat lineHeight;
/**
 *  下划线相对于正常状态下的百分比 默认为1
 */
@property (nonatomic, assign) CGFloat lineScale;
/*------------箭头风格------------*/
/**
 *  箭头的颜色
 */
@property (nonatomic, strong) UIColor *arrowColor;
/*------------滑块风格------------*/
/**
 *  滑块的颜色
 */
@property (nonatomic, strong) UIColor *slideColor;
/**
 *  滑块的高度
 */
@property (nonatomic, assign) CGFloat slideHeight;
/**
 *  滑块的圆角大小
 */
@property (nonatomic, assign) CGFloat slideCorner;
/**
 *  滑块相对于正常状态下的百分比,默认为1
 */
@property (nonatomic, assign) CGFloat slideScale;

/**
 *  顶部导航栏下方的边线
 */
@property (nonatomic, assign) CGFloat bottomLineHeight;
@property (nonatomic, strong) UIColor *bottomLineColor;
其余用法见代码详情

这个是我看见别人的写的感觉效果挺好的,而且思路很清晰,然后我自己对照着手敲了以便加深领会,想学一下人家的思想,也是作为自己的技术积累,不得不说原作者的思路真的是不错,我也是还没有完全理解,还是要多向原作者学习,在这里放上代码链接。(侵权删)
LGJSegmentHeaderView