iOS 跑馬燈帶圖片可點擊

標籤：來源   距離   tor   UI   參考   動畫   model   網狀圖   建立   

項目中有個需求，需要以跑馬燈的形勢滾動展示使用者的即時資料，跑馬燈需要有帳戶圖片，內容的長度不固定，並且可以點擊，滾動效果還要足夠流暢，本著不重複造輪子的心理，在網上各種搜尋，發現都沒法找到滿足需求的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);    }];

更多詳情請參考demo: https://github.com/qqcc1388/MarqueeViewDemo

轉載請標註來源：http://www.cnblogs.com/tinych/p/8664280.html

iOS 跑馬燈帶圖片可點擊