使用UIScrollView 結合 UIImageView 實現圖片循環滾動

jopen 9年前發布 | 11K 次閱讀 iOS開發 移動開發 UIScrollView

場景:

在開發工作中,有時我們需要實現一組圖片循環滾動的情況。當我們使用 UIScrollView 結合 UIImageView 來實現時,一般 UIImageView 會盡量考慮重用,下面例子是以(左中右)三個 UIImageView 的使用,其實也可以考慮使用 兩個 UIImageView 實現的情況。這樣避免 一組圖片多少個就對應多少個 UIImageView 所導致占用過多內存的情況。

使用UIScrollView 結合 UIImageView 實現圖片循環滾動

效果如下:

使用UIScrollView 結合 UIImageView 實現圖片循環滾動

ViewController.h
#import <uikit uikit.h="">

@interface ViewController : UIViewController <uiscrollviewdelegate> @property (strong, nonatomic) UIScrollView scrV; @property (strong, nonatomic) UIPageControl pageC; @property (strong, nonatomic) UIImageView imgVLeft; @property (strong, nonatomic) UIImageView imgVCenter; @property (strong, nonatomic) UIImageView imgVRight; @property (strong, nonatomic) UILabel lblImageDesc; @property (strong, nonatomic) NSMutableDictionary *mDicImageData; @property (assign, nonatomic) NSUInteger currentImageIndex; @property (assign, nonatomic) NSUInteger imageCount;

@end</uiscrollviewdelegate></uikit></pre>
ViewController.m

#import "ViewController.h"

define kWidthOfScreen [[UIScreen mainScreen] bounds].size.width

define kHeightOfScreen [[UIScreen mainScreen] bounds].size.height

define kImageViewCount 3

@interface ViewController () /**

  • 加載圖片數據 */
    • (void)loadImageData;

/**

  • 添加滾動視圖 */
    • (void)addScrollView;

/**

  • 添加三個圖片視圖到滾動視圖內 */
    • (void)addImageViewsToScrollView;

/**

  • 添加分頁控件 */
    • (void)addPageControl;

/**

  • 添加標簽;用于圖片描述 */
    • (void)addLabel;

/**

  • 根據當前圖片索引設置信息 *
  • @param currentImageIndex 當前圖片索引;即中間 */
    • (void)setInfoByCurrentImageIndex:(NSUInteger)currentImageIndex;

/**

  • 設置默認信息 */
    • (void)setDefaultInfo;

/**

  • 重新加載圖片 */
    • (void)reloadImage;
  • (void)layoutUI; @end

@implementation ViewController

  • (void)viewDidLoad { [super viewDidLoad];

    [self layoutUI]; }

  • (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. }

  • (void)loadImageData { NSString *path = [[NSBundle mainBundle] pathForResource:@"ImageInfo" ofType:@"plist"]; _mDicImageData = [NSMutableDictionary dictionaryWithContentsOfFile:path]; _imageCount = _mDicImageData.count; }

  • (void)addScrollView { _scrV = [[UIScrollView alloc] initWithFrame:[[UIScreen mainScreen] bounds]]; _scrV.contentSize = CGSizeMake(kWidthOfScreen * kImageViewCount, kHeightOfScreen); _scrV.contentOffset = CGPointMake(kWidthOfScreen, 0.0); _scrV.pagingEnabled = YES; _scrV.showsHorizontalScrollIndicator = NO; _scrV.delegate = self; [self.view addSubview:_scrV]; }

  • (void)addImageViewsToScrollView { //圖片視圖;左邊 _imgVLeft = [[UIImageView alloc] initWithFrame:CGRectMake(0.0, 0.0, kWidthOfScreen, kHeightOfScreen)]; _imgVLeft.contentMode = UIViewContentModeScaleAspectFit; [_scrV addSubview:_imgVLeft];

    //圖片視圖;中間 _imgVCenter = [[UIImageView alloc] initWithFrame:CGRectMake(kWidthOfScreen, 0.0, kWidthOfScreen, kHeightOfScreen)]; _imgVCenter.contentMode = UIViewContentModeScaleAspectFit; [_scrV addSubview:_imgVCenter];

    //圖片視圖;右邊 _imgVRight = [[UIImageView alloc] initWithFrame:CGRectMake(kWidthOfScreen * 2.0, 0.0, kWidthOfScreen, kHeightOfScreen)]; _imgVRight.contentMode = UIViewContentModeScaleAspectFit; [_scrV addSubview:_imgVRight]; }

  • (void)addPageControl { _pageC = [UIPageControl new]; CGSize size= [_pageC sizeForNumberOfPages:_imageCount]; //根據頁數返回 UIPageControl 合適的大小 _pageC.bounds = CGRectMake(0.0, 0.0, size.width, size.height); _pageC.center = CGPointMake(kWidthOfScreen / 2.0, kHeightOfScreen - 80.0); _pageC.numberOfPages = _imageCount; _pageC.pageIndicatorTintColor = [UIColor whiteColor]; _pageC.currentPageIndicatorTintColor = [UIColor brownColor]; _pageC.userInteractionEnabled = NO; //設置是否允許用戶交互;默認值為 YES,當為 YES 時,針對點擊控件區域左(當前頁索引減一,最小為0)右(當前頁索引加一,最大為總數減一),可以編寫 UIControlEventValueChanged 的事件處理方法 [self.view addSubview:_pageC]; }

  • (void)addLabel { _lblImageDesc = [[UILabel alloc] initWithFrame:CGRectMake(0.0, 40.0, kWidthOfScreen, 40.0)]; _lblImageDesc.textAlignment = NSTextAlignmentCenter; _lblImageDesc.textColor = [UIColor whiteColor]; _lblImageDesc.font = [UIFont boldSystemFontOfSize:[UIFont labelFontSize]]; _lblImageDesc.text = @"Fucking now."; [self.view addSubview:_lblImageDesc]; }

  • (void)setInfoByCurrentImageIndex:(NSUInteger)currentImageIndex { NSString *currentImageNamed = [NSString stringWithFormat:@"%lu.png", (unsigned long)currentImageIndex]; _imgVCenter.image = [UIImage imageNamed:currentImageNamed]; _imgVLeft.image = [UIImage imageNamed:[NSString stringWithFormat:@"%lu.png", (unsigned long)((_currentImageIndex - 1 + _imageCount) % _imageCount)]]; _imgVRight.image = [UIImage imageNamed:[NSString stringWithFormat:@"%lu.png", (unsigned long)((_currentImageIndex + 1) % _imageCount)]];

    _pageC.currentPage = currentImageIndex; _lblImageDesc.text = _mDicImageData[currentImageNamed]; }

  • (void)setDefaultInfo { _currentImageIndex = 0; [self setInfoByCurrentImageIndex:_currentImageIndex]; }

  • (void)reloadImage { CGPoint contentOffset = [_scrV contentOffset]; if (contentOffset.x > kWidthOfScreen) { //向左滑動

      _currentImageIndex = (_currentImageIndex + 1) % _imageCount;
    

    } else if (contentOffset.x < kWidthOfScreen) { //向右滑動

      _currentImageIndex = (_currentImageIndex - 1 + _imageCount) % _imageCount;
    

    }

    [self setInfoByCurrentImageIndex:_currentImageIndex]; }

  • (void)layoutUI { self.view.backgroundColor = [UIColor blackColor];

    [self loadImageData]; [self addScrollView]; [self addImageViewsToScrollView]; [self addPageControl]; [self addLabel]; [self setDefaultInfo]; }

pragma mark - UIScrollViewDelegate

  • (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView { [self reloadImage];

    _scrV.contentOffset = CGPointMake(kWidthOfScreen, 0.0); _pageC.currentPage = _currentImageIndex;

    NSString *currentImageNamed = [NSString stringWithFormat:@"%lu.png", (unsigned long)_currentImageIndex]; _lblImageDesc.text = _mDicImageData[currentImageNamed]; }

@end</pre>

ImageInfo.plist

使用UIScrollView 結合 UIImageView 實現圖片循環滾動

來源:KenmuHuang的博客

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!