可以显示图片的类似网易新闻的头部滚动条(转)

声明：原文来自  http://www.jianshu.com/p/ce4909bc4752

  

前言, 最近发现一类效果类似网易新闻头部滚动条的效果，不过是可以显示图片(上, 中, 左, 右)和文字, 最近在比较闲的时候顺带把这些效果也一并实现了, 那么这一类的各种效果大致上就实现了Demo地址，供有需要的朋友可以参考

增加效果

图片在左边

图片在右边.gif

图片在上面.gif

只显示图片.gif

---

原来的效果 --- 只显示文字

---

oc版滚动示例.gif

关于实现部分, 新增显示的图片的效果, 其实对原来的影响并不大

• 只是更换了一下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地址

文／ZeroJ（简书作者）
原文链接：http://www.jianshu.com/p/ce4909bc4752
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。