iOS 跑马灯带图片可点击
项目中有个需求，需要以跑马灯的形势滚动展示用户的实时数据，跑马灯需要有用户头像，内容的长度不固定，并且可以点击，滚动效果还要足够流畅，本着不重复造轮子的心理，在网上各种搜索，发现都没法找到满足需求的demo，没办法，本来(ˇˍˇ) 想～偷个懒来着，现在只有自己动手造轮子了。
整体思路大概就是在scrollView中添加多个view,让这几个view依次排列在在scrollView中，动态计算scrollView的frame,让其宽度刚好是所有view的总宽度和，然后把scrollView的x初始值设置在屏幕以外，通过一个定时器，让scrollView每隔一段时间就移动一定的距离，这个时间可以微调，确保不会出现滚动的时候抖动的问题，当scrollView滚出可见区域了，再把scrollView的frame恢复到初始值即可
先看下效果图吧，由于博客园好像不支持gif图片上传，所有整了几张静态图，如果想要完整效果和代码的话，可以前往我的github https://github.com/qqcc1388/MarqueeViewDemo 查看demo源码和动态效果
我的这个demo中分为3个部分
- HXQMarqueeView 用来显示跑马灯的显示区域，接受滚动的数据源，并且手动控制动画的开启。
- HXQBoardView 跑马灯中每组数据的显示区域，这个视图的长度是根据传入文字的多少，动态计算的，如果文字或者头像被点击了，可以通过block将点击的model传递到上一层
- HXQMarqueeModel 跑马灯数据model 主要参数是文字内容和头像参数(头像是网络图片),设置完文字后，在setTitle这个方法中会动态的把文字的总宽度计算一遍，并赋值为titleWith,width的宽度为文字+头像的总宽度
部分实现代码
//
// HXQMarqueeView.m
// hxquan
//
// Created by Tiny on 2018/3/2.
// Copyright © 2018年 Tiny. All rights reserved.
//
#import "HXQMarqueeView.h"
#import "HXQMarqueeModel.h"
#import "HXQBoardView.h"
#import "UIView+Extionsiton.h"
@interface HXQMarqueeView ()
@property (nonatomic, strong) NSTimer *timer;
@property (nonatomic, strong) UIScrollView *scrollView;
@property (nonatomic, strong) NSMutableArray *viewList;
@property (nonatomic, strong) NSArray *models;
@property (nonatomic, copy) void (^itelClick)(HXQMarqueeModel *);
@end
@implementation HXQMarqueeView
-(void)dealloc{
[self.timer invalidate];
self.timer = nil;
}
-(NSMutableArray *)viewList{
if (!_viewList) {
_viewList = [NSMutableArray array];
}
return _viewList;
}
-(NSTimer *)timer{
if (!_timer) {
_timer = [NSTimer timerWithTimeInterval:0.008f target:self selector:@selector(refreshProgress) userInfo:nil repeats:YES];
[[NSRunLoop currentRunLoop] addTimer:_timer forMode:NSRunLoopCommonModes];
}
return _timer;
}
-(instancetype)initWithFrame:(CGRect)frame{
if (self = [super initWithFrame:frame]) {
[self setupUI];
}
return self;
}
-(void)setupUI{
self.scrollView = [[UIScrollView alloc] initWithFrame:self.bounds];
self.scrollView.scrollEnabled = NO;
self.scrollView.showsVerticalScrollIndicator = NO;
self.scrollView.showsHorizontalScrollIndicator = NO;
[self addSubview:self.scrollView];
}
-(void)setItems:(NSArray *)items{
_models = items;
//移除动画
[self.scrollView.layer removeAllAnimations];
//先移除之前的item
for (UIView *v in self.scrollView.subviews) {
if ([v isKindOfClass:[HXQBoardView class]]) {
[v removeFromSuperview];
}
}
[self.viewList removeAllObjects];
//创建新的item
HXQBoardView *last = nil;
CGFloat margin = 20;
for (int i = 0; i < items.count; i++) {
HXQMarqueeModel *model = items[i];
HXQBoardView * lb = [[HXQBoardView alloc] initWithFrame:CGRectMake(last.frame.origin.x + last.bounds.size.width + margin, 0, model.width, 44) Model:model];
__weak typeof(self) weakself = self;
lb.boardItemClick = ^(HXQMarqueeModel *xModel) {
if (weakself.itelClick) {
weakself.itelClick(xModel);
}
};
lb.tag = i;
[self.scrollView addSubview:lb];
[self.viewList addObject:lb];
last = lb;
}
//设置scrollView的contentSize
self.scrollView.contentSize = CGSizeMake(last.frame.origin.x+last.bounds.size.width, 0);
CGSize contetnsize = self.scrollView.contentSize;
self.scrollView.frame = CGRectMake(self.bounds.size.width,0,contetnsize.width+self.bounds.size.width, 44);
self.clipsToBounds = YES;
}
-(void)refreshProgress{
self.scrollView.x -=0.5 ;
if (self.scrollView.x <= -self.scrollView.contentSize.width) {
self.scrollView.x = self.bounds.size.width;
}
}
- (void)startAnimation {
if (!self.timer.isValid) {
[self.timer fire];
}
}
-(void) stopAnimation{ //结束动画
if (self.timer.isValid) {
[self.timer invalidate];
self.timer = nil;
}
}
#pragma mark - Private
-(void)addMarueeViewItemClickBlock:(void (^)(HXQMarqueeModel *))block{
self.itelClick = block;
}
//demo使用起来也很简单 只需要3行代码即可(前提是数据源要准备好哦😯)
//创建跑马灯
HXQMarqueeView *marqueeView = [[HXQMarqueeView alloc] initWithFrame:CGRectMake(0 100,self.view.bounds.size.width, 44)];
[self.view addSubview:marqueeView];
//初始化数据源
[marqueeView setItems:modelList];
//开始动画
[marqueeView startAnimation];
//如果需要监听点击回调，请实现这个方法
[marqueeView addMarueeViewItemClickBlock:^(HXQMarqueeModel *model) {
NSLog(@"%@",model.title);
}];
swift版本(snapKit布局)，更加简洁完善
//
// HXQMarqueeView.swift
// hxquan-swift
//
// Created by Tiny on 2018/11/20.
// Copyright © 2018年 hxq. All rights reserved.
// 跑马灯
import UIKit
class MarqueeModel: Equatable{
var title: String? //内容
var img: String? //头像图片 url
var textColor: UIColor = .black //字体默认颜色
var font: UIFont = .systemFont(ofSize: 14) //字体大小
var imageHolder: UIImage = HXQDefaultUserImage //头像默认图片
static func == (lhs: MarqueeModel, rhs: MarqueeModel) -> Bool {
return lhs.title == rhs.title &&
lhs.img == rhs.img &&
lhs.textColor == rhs.textColor &&
lhs.font == rhs.font &&
lhs.imageHolder == rhs.imageHolder
}
}
class MarqueeItem: UIView {
private var textLb: UILabel! //文字label
private var imgView: UIImageView! //图片
/// 重写setModel并赋值
fileprivate var model: MarqueeModel?{
didSet{
if model != nil {
textLb.text = model?.title
textLb.textColor = model!.textColor
textLb.font = model!.font
imgView.sd_setImage(with: URL(string: model!.img ?? ""), placeholderImage: model!.imageHolder)
}
}
}
override init(frame: CGRect) {
super.init(frame: frame)
setupUI()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
private func setupUI(){
let gesture = UITapGestureRecognizer(target: self, action: #selector(itemClick))
addGestureRecognizer(gesture)
textLb = UILabel()
textLb.font = UIFont.systemFont(ofSize: 14)
textLb.textColor = UIColor.black
addSubview(textLb)
imgView = UIImageView()
imgView.layer.masksToBounds = true
addSubview(imgView)
imgView.snp.makeConstraints { (make) in
make.left.equalTo(5)
make.top.equalTo(5)
make.bottom.equalTo(-5)
make.width.equalTo(imgView.snp.height)
}
textLb.snp.makeConstraints { (make) in
make.centerY.equalToSuperview()
make.left.equalTo(imgView.snp.right).offset(5)
make.right.equalTo(-5)
}
}
/// item被点击事件回调
fileprivate var itemDidTap:(() -> Void)?
@objc private func itemClick(){
//将事件传递出去
itemDidTap?()
}
override func layoutSubviews() {
super.layoutSubviews()
imgView.layer.cornerRadius = imgView.bounds.size.width*0.5
}
}
class HXQMarqueeView: UIView {
/// 初始化scrollView
private lazy var scrollView: UIScrollView = {
let scrollView = UIScrollView(frame: .zero)
scrollView.scrollsToTop = false
scrollView.showsVerticalScrollIndicator = false
scrollView.showsHorizontalScrollIndicator = false
return scrollView
}()
/// 初始化定时器
private lazy var timer: Timer = {[unowned self] in
let timer = Timer(timeInterval: 0.008, target: self, selector: #selector(startToMove), userInfo: nil, repeats: true)
RunLoop.current.add(timer, forMode: .common)
return timer
}()
override init(frame: CGRect) {
super.init(frame: frame)
setupUI()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
private func setupUI(){
layer.masksToBounds = true
addSubview(scrollView)
scrollView.snp.makeConstraints { (make) in
make.top.left.bottom.equalToSuperview()
make.width.equalToSuperview()
}
}
var marqueeHolder: String?
var marqueeFontSize: CGFloat = 14
var marqueeTextColor = UIColor.black
public var items = [MarqueeModel](){
didSet{
//判断2次数据是否相同
if oldValue == items {
return
}
//关闭定时器
if timer.isValid {
timer.fireDate = Date.distantFuture
}
//移除scrollView中所有控件
for v in scrollView.subviews{
v.removeFromSuperview()
}
//显示默认
if items.isEmpty{
//如果需要显示默认值的话
if marqueeHolder != nil{
let lb = UILabel()
lb.textAlignment = .center
lb.text = marqueeHolder
lb.font = UIFont.systemFont(ofSize: marqueeFontSize)
lb.textColor = marqueeTextColor
scrollView.addSubview(lb)
lb.snp.makeConstraints { (make) in
make.height.equalToSuperview()
make.left.equalTo(20)
}
//更新scrollView的ContentSize
scrollView.snp.makeConstraints { (make) in
make.right.equalTo(lb.snp.right)
}
layoutIfNeeded()
scrollView.x = 0;
}
}else{
let margin: CGFloat = 10
let gap: CGFloat = 20
var last: MarqueeItem?
for (i,model) in items.enumerated(){
let item = MarqueeItem()
item.model = model
item.itemDidTap = { [unowned self] in
self.selectionBlock?(model,i)
}
scrollView.addSubview(item)
item.snp.makeConstraints { (make) in
if last == nil{
make.left.equalTo(margin)
}else{
make.left.equalTo(last!.snp.right).offset(gap)
}
make.height.equalToSuperview()
}
last = item
}
//更新scrollView的ContentSize
scrollView.snp.makeConstraints { (make) in
make.right.equalTo(last!.snp.right).offset(margin)
}
layoutIfNeeded()
//拿到contentSize重新更新scrollView约束
scrollView.snp.remakeConstraints { (make) in
make.width.equalTo(scrollView.contentSize.width)
make.top.bottom.equalToSuperview()
make.right.equalTo(last!.snp.right).offset(margin)
make.left.equalTo(self.snp.right)
}
//开始启动定时器
if last != nil{
timer.fireDate = Date(timeIntervalSinceNow: 0)
}
}
}
}
private var selectionBlock: ((MarqueeModel,Int) -> Void)?
public func queeSelection(_ callBack: ((MarqueeModel,Int) -> Void)?){
selectionBlock = callBack
}
@objc private func startToMove(){
scrollView.x = scrollView.x - 0.5 ;
if scrollView.x <= -scrollView.contentSize.width {
scrollView.x = self.bounds.size.width;
}
}
deinit {
if timer.isValid {
timer.invalidate()
}
}
}
/// swift版本跑马灯使用方法
//创建
let marquee = HXQMarqueeView()
view.addSubview(marquee)
//设置约束
marquee.snp.makeConstraints { (make) in
make.left.equalTo(20)
make.right.equalTo(-20)
make.top.equalTo(100)
make.height.equalTo(30)
}
//初始化数据源
var array = [MarqueeModel]()
for i in 0..<5 {
let item = MarqueeModel()
item.title = "我完事了，你们呢\(i)"
item.img = ""
item.textColor = COLOR_RANDOM()
item.font = HFont(12)
array.append(item)
}
//赋值
marquee.items = array
//监听点击
marquee.queeSelection { (model, index) in
print("\(model.title ?? "") + \(index)")
}
更多详情请参考demo: https://github.com/qqcc1388/MarqueeViewDemo
