iOS 跑馬燈帶圖片可點擊

來源:互聯網
上載者:User

標籤:來源   距離   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 跑馬燈帶圖片可點擊

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

Tags Index: