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

Posted dreamDeveloper

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了可以显示图片的类似网易新闻的头部滚动条(转)相关的知识,希望对你有一定的参考价值。

声明:原文来自  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里面的属性showImageimagePosition再增加一个代理方法

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
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。



























































以上是关于可以显示图片的类似网易新闻的头部滚动条(转)的主要内容,如果未能解决你的问题,请参考以下文章

js循环倒计时代码 每5秒循环倒计时到0 再从5秒开始 到0之后刷新页面 类似网易的滚动新闻

Android 仿网易新闻v3.5:上下滑动的引导页

android新闻客户端问题

ios开发--网易滚动导航栏

AJAX技术之网易滚动新闻的简单实现(附源码)--AJAX

iOS 网易新闻首页进化版Demo(MXSegmentedPager),自带平行头部拉伸