前言, 最近发现一类效果类似网易新闻头部滚动条的效果，不过是可以显示图片(上, 中, 左, 右)和文字, 最近在比较闲的时候顺带把这些效果也一并实现了, 那么这一类的各种效果大致上就实现了Demo地址，供有需要的朋友可以参考
增加效果
原来的效果 --- 只显示文字
关于实现部分, 新增显示的图片的效果, 其实对原来的影响并不大
- 只是更换了一下ZJSegmentView里面显示文字的控件, 之前是使用label,那么就只是考虑到显示文字, 所以要实现显示图片, 只需要替换这个label为其他的控件就好了.
- 所以, 如果你需要参考ZJScrollPageView是怎么实现的, 你可以先看看这篇介绍
- 所以这里, 就新增了一个ZJTitleView用于显示标题和图片, 这个里面的处理也并不复杂, 一个imageView用来显示图片, 一个label用来显示文字, 根据不同的设置必要的添加这两个控件上去
@property (strong, nonatomic) UIImageView *imageView;
@property (strong, nonatomic) UILabel *label;
- ZjTitleView里面同时增加了几个public的属性, 用于外部调用
@interface ZJTitleView : UIView
/// 这个属性用于设置放大和缩小倍数
@property (assign, nonatomic) CGFloat currentTransformSx;
/// 这个用来设置图片显示的位置
@property (assign, nonatomic) TitleImagePosition imagePosition;
/// 这个用于设置标题
@property (strong, nonatomic) NSString *text;
/// 这个用于设置标题的颜色
@property (strong, nonatomic) UIColor textColor;
/// 这个用于设置标题文字的字体
@property (strong, nonatomic) UIFont font;
/// 这个用于标示是否被选中
@property (assign, nonatomic, getter=isSelected) BOOL selected;
/ 代理方法中推荐只设置下面的属性, 当然上面的属性设置也会有效, 不过建议上面的设置在style里面设置 */
@property (strong, nonatomic) UIImage *normalImage;
@property (strong, nonatomic) UIImage *selectedImage;
* ZJTitleView提供两个方法给ZJSegmentView使用,不是提供给外部使用的 `- (CGFloat)titleViewWidth;`,`- (void)adjustSubviewFrame;`
/// 这个方法返回当前的imageView和label的总共的宽度, 用于ZJSegmentView来设置titleView的宽度
- (CGFloat)titleViewWidth {
CGFloat width = 0.0f;
switch (self.imagePosition) {
case TitleImagePositionLeft:
width = _imageWidth + _titleSize.width;
break;
case TitleImagePositionRight:
width = _imageWidth + _titleSize.width;
break;
case TitleImagePositionCenter:
width = _imageWidth;
break;
default:
width = _titleSize.width;
break;
}
return width;
}
/// 这个方法是给ZJSegmentView使用
/// 当设置了需要显示图片的时候
/// 这个方法里面会根据不同的图片位置, 来设置imageView和label的frame
-
(void)adjustSubviewFrame {
_isShowImage = YES;CGRect contentViewFrame = self.bounds;
contentViewFrame.size.width = [self titleViewWidth];
contentViewFrame.origin.x = (self.frame.size.width - contentViewFrame.size.width)/2;
self.contentView.frame = contentViewFrame;
self.label.frame = self.contentView.bounds;[self addSubview:self.contentView];
[self.label removeFromSuperview];
[self.contentView addSubview:self.label];
[self.contentView addSubview:self.imageView];switch (self.imagePosition) {
case TitleImagePositionTop: {
self.imageView.frame = CGRectMake(0, 0, _imageWidth, _imageHeight);
CGPoint center = self.imageView.center;
center.x = self.label.center.x;
self.imageView.center = center;CGFloat labelHeight = self.contentView.frame.size.height - _imageHeight; CGRect labelFrame = self.label.frame; labelFrame.origin.y = _imageHeight; labelFrame.size.height = labelHeight; self.label.frame = labelFrame; break; } case TitleImagePositionLeft: { CGRect labelFrame = self.label.frame; labelFrame.origin.x = _imageWidth; labelFrame.size.width = self.contentView.frame.size.width - _imageWidth; self.label.frame = labelFrame; CGRect imageFrame = CGRectZero; imageFrame.size.height = _imageHeight; imageFrame.size.width = _imageWidth; imageFrame.origin.y = (self.contentView.frame.size.height - imageFrame.size.height)/2; self.imageView.frame = imageFrame; break; } case TitleImagePositionRight: { CGRect labelFrame = self.label.frame; labelFrame.size.width = self.contentView.frame.size.width - _imageWidth; self.label.frame = labelFrame; CGRect imageFrame = CGRectZero; imageFrame.origin.x = CGRectGetMaxX(self.label.frame); imageFrame.size.height = _imageHeight; imageFrame.size.width = _imageWidth; imageFrame.origin.y = (self.contentView.frame.size.height - imageFrame.size.height)/2; self.imageView.frame = imageFrame; break; } case TitleImagePositionCenter: self.imageView.frame = self.contentView.bounds; [self.label removeFromSuperview]; break; default: break;}
}
* 以上的属性的set方法均被重写了, 用于设置ZJTitleView的对应控件的属性, 例如如下的一些setter
>
/// 设置普通状态的图片, 同时记录下图片的尺寸用于设置imageView的尺寸
- (void)setNormalImage:(UIImage *)normalImage {
_normalImage = normalImage;
_imageWidth = normalImage.size.width;
_imageHeight = normalImage.size.height;
self.imageView.image = normalImage;
}
/// 设置选中状态的图片
>
- (void)setSelectedImage:(UIImage *)selectedImage {
_selectedImage = selectedImage;
self.imageView.highlightedImage = selectedImage;
}
- (void)setFont:(UIFont *)font {
_font = font;
self.label.font = font;
}
/// 设置文字, 同时计算出文字的尺寸
>
- (void)setText:(NSString *)text {
_text = text;
self.label.text = text;
CGRect bounds = [text boundingRectWithSize:CGSizeMake(MAXFLOAT, 0.0) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName: self.label.font} context:nil];
_titleSize = bounds.size;
}
/// 设置文字颜色
>
- (void)setTextColor:(UIColor *)textColor {
_textColor = textColor;
self.label.textColor = textColor;
}
/// 设置是否选中
>
- (void)setSelected:(BOOL)selected {
_selected = selected;
self.imageView.highlighted = selected;
}
* 使用上只需要设置style里面的属性`showImage`和`imagePosition`再增加一个代理方法
>
ZJSegmentStyle *style = [[ZJSegmentStyle alloc] init];
/// 显示遮盖
style.showLine = YES;
/// 设置滚动条高度
style.segmentHeight = 60;
/// 显示图片 (在显示图片的时候只有下划线的效果可以开启, 其他的'遮盖','渐变',效果会被内部关闭)
style.showImage = YES;
/// 平分宽度
// style.scrollTitle = NO;
/// 图片位置
style.imagePosition = TitleImagePositionTop;
// 当标题(和图片)宽度总和小于ZJScrollPageView的宽度的时候, 标题会自适应宽度
- (void)setUpTitleView:(ZJTitleView *)titleView forIndex:(NSInteger)index {
/// 设置普通状态图片
titleView.normalImage = [UIImage imageNamed:[NSString stringWithFormat:@"normal_%ld", index+1]];
/// 设置选中状态图片
titleView.selectedImage = [UIImage imageNamed:@"selected"];
}
> 到目前为止,这个小框架的功能算是比较丰富的了, 如果你正好需要, 可以用用试试, 如果你有使用问题可以联系我[Demo地址](https://github.com/jasnig/ZJScrollPageView)