IOS 开发之网络图片轮播图的实现

IOS 开发之网络图片轮播图的实现

截图

1.使用

LJPhotoGroupView *_ljPhotoGroupView = [[LJPhotoGroupView alloc]initWithItem:self.ljUrlArray];
_ljPhotoGroupView.backgroundColor = [UIColor blackColor];
_ljPhotoGroupView.frame = CGRectMake(0, 0, kDEVICEWIDTH, kDEVICEHEIGHT);
[_ljPhotoGroupView showHintView:self]; 

2.源码

#import "LJPhotoGroupView.h"
#import "LJWebIDataManager.h" 

@interface LJPhotoGroupCellView() 

@property (nonatomic, strong) UIImageView *ljImageview; 

@end 

@implementation LJPhotoGroupCellView 

- (instancetype)initWithFrame:(CGRect)frame url:(NSString*)imageurl
{
  self = [super initWithFrame:frame];
  if (self) {
    [self addSubview:self.ljImageview];
    //这里大家可以换成自己的网络请求图片的方法
    [[LJWebIDataManager sharedInstances]retrieveData:imageurl successBlock:^(NSData *netData, NSString *progressStr, BOOL isFinished) {
      //在主线程中刷新界面
      dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{ 

        UIImage *_ljImage = [UIImage imageWithData: netData scale:0.3];
        @myWeakify(self);
        dispatch_async(dispatch_get_main_queue(), ^{
          @myStrongify(self);
          self.ljImageview.image = _ljImage;
        });
      });
    }];
  }
  return self;
} 

- (UIImageView*)ljImageview
{
  if (!_ljImageview) {
    _ljImageview = UIImageView.new;
    _ljImageview.frame = CGRectMake(15, 0, kDEVICEWIDTH - 30, 130);
    _ljImageview.backgroundColor = [UIColor redColor];
    UIGestureRecognizer *_tap = [[UIGestureRecognizer alloc]initWithTarget:self action:@selector(dismissHintView)];
    [_ljImageview addGestureRecognizer:_tap];
  }
  return _ljImageview;
} 

@end 

@interface LJPhotoGroupView()<UIScrollViewDelegate> 

@property (nonatomic, strong) UIScrollView *ljScrollView;
@property (nonatomic, strong) NSArray *ljItemArray;
@property (nonatomic, strong) UIImageView *ljImageview;
@property (nonatomic, strong) UIPageControl *ljPageControl; 

@end 

@implementation LJPhotoGroupView 

- (instancetype)initWithItem:(NSArray*)ljArray
{
  self = [super init];
  if (self)
  {
    self.ljItemArray = [NSArray arrayWithArray:ljArray]; 

    [self addSubview:self.ljScrollView];
    [self addSubview:self.ljPageControl]; 

    for (int i = 0; i < self.ljItemArray.count; i++) { 

      //方法一:直接设置每个cell的X坐标
//      LJPhotoGroupCellView *_cell = [[LJPhotoGroupCellView alloc]initWithFrame:CGRectMake((kDEVICEWIDTH )*i, 0, kDEVICEWIDTH, 130) url:self.ljItemArray[i]]; 

      //方法二:先不用考虑cell的X坐标,在下面设置X的坐标
      LJPhotoGroupCellView *cell = [[LJPhotoGroupCellView alloc]initWithFrame:self.ljScrollView.bounds url:self.ljItemArray[i]];
      UITapGestureRecognizer *_tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(dismissHintView)];
        [cell addGestureRecognizer:_tap];
      [self.ljScrollView addSubview:cell];
    } 

    //方法二:设置cell的X坐标
    // 计算imageView的位置
    [self.ljScrollView.subviews enumerateObjectsUsingBlock:^(LJPhotoGroupCellView *cell, NSUInteger idx, BOOL *stop)
     {
      // 调整x => origin => frame
      CGRect frame = cell.frame;
      frame.origin.x = idx * frame.size.width; 

      cell.frame = frame;
    }]; 

    self.ljPageControl.currentPage = 0;
  }
  return self;
} 

- (UIScrollView*)ljScrollView
{
  if (!_ljScrollView)
  {
    _ljScrollView = UIScrollView.new;
    _ljScrollView.frame = CGRectMake(0, 250, kDEVICEWIDTH, 130);
    _ljScrollView.delegate = self;
    //_scrollView.scrollsToTop = NO;
    _ljScrollView.pagingEnabled = YES;
    _ljScrollView.contentSize = CGSizeMake(_ljScrollView.bounds.size.width * self.ljItemArray.count, 130);
    //_scrollView.alwaysBounceHorizontal = groupItems.count > 1;
    // _scrollView.showsHorizontalScrollIndicator = NO;
    //_scrollView.showsVerticalScrollIndicator = NO;
    //_scrollView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
    //_scrollView.delaysContentTouches = NO;
    //_scrollView.canCancelContentTouches = YES;
  }
  return _ljScrollView;
} 

- (UIPageControl *)ljPageControl
{
  if (_ljPageControl == nil)
  {
    // 分页控件,本质上和scrollView没有任何关系,是两个独立的控件
    _ljPageControl = [[UIPageControl alloc] init];
    // 总页数
    _ljPageControl.numberOfPages = self.ljItemArray.count;
    CGSize size = [_ljPageControl sizeForNumberOfPages:self.ljItemArray.count]; 

    _ljPageControl.bounds = CGRectMake(0, 0, size.width, size.height);
    _ljPageControl.center = CGPointMake(self.center.x, 380); 

    // 设置颜色
    _ljPageControl.pageIndicatorTintColor = [UIColor redColor];
    //当前页面的颜色
    _ljPageControl.currentPageIndicatorTintColor = [UIColor whiteColor];
    [_ljPageControl addTarget:self action:@selector(pageChanged:) forControlEvents:UIControlEventValueChanged];
  }
  return _ljPageControl;
} 

// 分页控件的监听方法
- (void)pageChanged:(UIPageControl *)page
{
  NSLog(@"%ld", (long)page.currentPage); 

  // 根据页数,调整滚动视图中的图片位置 contentOffset self.scrollView.bounds.size.width
  CGFloat x = page.currentPage * (kDEVICEWIDTH);
  [self.ljScrollView setContentOffset:CGPointMake(x, 0) animated:YES];
} 

- (UIImageView*)ljImageview
{
  if (!_ljImageview) {
    _ljImageview = UIImageView.new;
    _ljImageview.frame = CGRectMake(0, 0, kDEVICEWIDTH, kDEVICEHEIGHT);
    _ljImageview.backgroundColor = [UIColor redColor]; 

    UIGestureRecognizer *_tap = [[UIGestureRecognizer alloc]initWithTarget:self action:@selector(dismissHintView)];
    [_ljImageview addGestureRecognizer:_tap];
  }
  return _ljImageview;
} 

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
  //CGFloat floatPage = _scrollView.contentOffset.x / _scrollView.width;
  //NSInteger page = _scrollView.contentOffset.x / _scrollView.width;
} 

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
  if (!decelerate) {
  }
} 

#pragma mark - ScrollView的代理方法
// 滚动视图停下来,修改页面控件的小点(页数)
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
  // 停下来的当前页数
  NSLog(@"%@", NSStringFromCGPoint(scrollView.contentOffset)); 

  // 计算页数
  int page = scrollView.contentOffset.x / scrollView.bounds.size.width; 

  self.ljPageControl.currentPage = page;
} 

- (void)showHintView:(UIView*)view
{
  //[view addSubview:self];
   [[UIApplication sharedApplication].delegate.window.rootViewController.view addSubview:self]; 

  self.alpha = 0.0;
  [UIView animateWithDuration:0.3 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{ 

    self.alpha = 1.0; 

  } completion:^(BOOL finished)
   { 

   }];
} 

- (void)dismissHintView
{
  [UIView animateWithDuration:0.3 delay:0 options:UIViewAnimationOptionCurveEaseIn animations:^{ 

    self.alpha = 0.0; 

  } completion:^(BOOL finished){ 

    [self removeFromSuperview];
  }];
} 

@end

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

(0)

相关推荐

  • iOS实现轮播图banner示例

    楼主项目中需要有一个轮播图,因为比较简单,就自己写了个,因为是从网上弄得图片 所以用了SDWebImage 这个三方库 当然自己也可以去掉 类型后面有*号 如用使用 请自行加上..... 代码:.h 文件 @protocol TJXViewDelegate<NSObject> //判断点击的那个 -(void)sendImageName:(TJXView *)TJXView andName:(NSInteger)selectImage; @end @interface TJXView : UI

  • IOS 开发之网络图片轮播图的实现

    IOS 开发之网络图片轮播图的实现 截图 1.使用 LJPhotoGroupView *_ljPhotoGroupView = [[LJPhotoGroupView alloc]initWithItem:self.ljUrlArray]; _ljPhotoGroupView.backgroundColor = [UIColor blackColor]; _ljPhotoGroupView.frame = CGRectMake(0, 0, kDEVICEWIDTH, kDEVICEHEIGHT);

  • iOS实现无限循环轮播图效果

    本文实例为大家分享了iOS实现无限循环轮播图的具体代码,供大家参考,具体内容如下 轮播图基础控件,左滑右滑都能无限循环 预览 思路 (1)在第一张左边加一张最后一张的图片,往左滑到边缘结束后计算偏移量迅速定位成最后一张 #pragma mark - pagecontrol事件 // 这个是点击小圆点条进行切换,到边不能循环 - (void)pageControlTouched { // 点击的时候停止计时 [self.kvTimer setFireDate:[NSDate distantFutu

  • Angularjs中使用轮播图指令swiper

    我们在angualrjs移动开发中遇到轮播图的功能 安装 swiper  npm install --save swiper   或者 bower install --save swiper 引入文件路径 <link rel="stylesheet" href="../bower_components/swiper/dist/css/swiper.min.css" rel="external nofollow" /> <scri

  • 微信小程序 swiper组件轮播图详解及实例

    微信小程序 swiper组件轮播图 照着开发文档尝试,总是能有所收获.之前做Android开发,做个轮播图并不简单,用上viewpage再设置圆点,折腾一通之后还一堆bug.今天尝试微信小程序开发做轮播图,真是感动的泪流满面.废话说完了,上图. 上图就是一个简易的轮播图,是不是很简易.23333 主要是代码也很简单. 1.index.wxml <!--index.wxml--> <swiper class="swiper" indicator-dots="t

  • flutter 轮播图动态加载网络图片的方法

    Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面. Flutter可以与现有的代码一起工作.在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费.开源的. Swiper,网上很多例子只是加载固定的几张图,并且页面只有一个轮播图,在实际应用中,可能会遇到类似ins这种,加载列表,并且都是多图模式的情况. 需要添加依赖包 flukit: ^1.0.0 引用 import 'package:flukit/flukit.da

  • 原生js实现移动开发轮播图、相册滑动特效

    使用方法: 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" href="css/photoSlider.min.css" /> <script src="js/photoSlider.min.js" type="text/javascript" charset="utf-8"></script

  • Android开发实现的自动换图片、轮播图效果示例

    本文实例讲述了Android开发实现的自动换图片.轮播图效果.分享给大家供大家参考,具体如下: 50行代码急速实现轮播图: 先看效果: 两个例子没太大区别, 不过i是布局文件中控件的Height不一样罢了这里一第二个为例: public class MainActivity extends Activity { int[] imageIds = new int[]{ R.drawable.a00,R.drawable.a01,R.drawable.a02,R.drawable.a3,R.draw

  • iOS使用UIScrollView实现无限循环轮播图效果

    本文实例为大家分享了iOS使用UIScrollView实现无限循环轮播图的具体代码,供大家参考,具体内容如下 代码: // // ViewController.m // 无限轮播 // // Created by limin on 17/8/23. // Copyright © 2017年 none. All rights reserved. // #import "ViewController.h" @interface ViewController ()<UIScrollVi

  • 两行IOS代码实现轮播图

    此篇文章讲述IOS轮播图,仅需要几步就可以完成,很简单了. 第一步:利用cocopods导入KJBannerView组件 #import "KJBannerView.h" 第二步:在m文件加入代理 <KJBannerViewDelegate> //并且定义组件 @property (nonatomic,strong) KJBannerView *banner2; 第三步:实现就仅此一步 -(void)initData{ KJBannerView *banner2 = [[K

  • iOS简单实现轮播图效果

    本文实例为大家分享了iOS简单实现轮播图效果的具体代码,供大家参考,具体内容如下 平常在开发过程中,首页的轮播图总是少不了,轮播图我们都知道肯定是要使用 UIScrollView ,难点就在最后一张图片被滑动时,如何回到第一张图片以及第一张滑动到最后一张.我们可以使用如下方式实现轮播图,在划到3后面的1后,设置 contentOffset 回到最先的1,并设置 pageControl ,即可达到效果 (从1划到3也同理) 看一下效果: 完成这种轮播图,我们的 View 需要如下的属性和方法 @i

随机推荐