欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

iOS开发商品页中banner中点击查看图片

程序员文章站 2023-12-16 15:30:58
轮翻播放与查看是分开的,轮翻是是用 开源的sdcyclescrollview 这里是给出的是查看的: // // fullscreenshowimage...

轮翻播放与查看是分开的,轮翻是是用 开源的sdcyclescrollview

这里是给出的是查看的:

//
// fullscreenshowimageview.swift
// joopic
//
// created by jianxiong li on 16/9/27.
// copyright © 2016年 joobot. all rights reserved.
//
import foundation
import uikit
//图片轮播组件代理协议
protocol fullscreenshowimageviewdelegate{
 //获取数据源
 func gallerydatasource()->[string]
 //获取内部scrollerview的宽高尺寸
 func galleryscrollerviewsize()->cgsize
 
 func hiddenforcliked(index:int)
}
//图片轮播组件控制器
class fullscreenshowimageview: uiview,uiscrollviewdelegate{
 //代理对象
 var delegate : fullscreenshowimageviewdelegate!
 
 //屏幕宽度
 let kscreenwidth = bwidth
 
 //当前展示的图片索引
 var currentindex : int = 0
 
 //数据源
 var datasource : [string]?
 
 //用于轮播的左中右三个image(不管几张图片都是这三个imageview交替使用)
 var leftimageview , middleimageview , rightimageview : uiimageview?
 
 //放置imageview的滚动视图
 var scrollerview : uiscrollview?
 
 //scrollview的宽和高
 var scrollerviewwidth : cgfloat?
 var scrollerviewheight : cgfloat?
 
 //页控制器(小圆点)
 var pagecontrol : uipagecontrol?
 
 //加载指示符(用来当iamgeview还没将图片显示出来时,显示的图片)
 var placeholderimage:uiimage!
 
 //自动滚动计时器
 var autoscrolltimer:nstimer? 
 init(frame: cgrect,delegate:fullscreenshowimageviewdelegate) {
  super.init(frame: frame)
  self.delegate = delegate
  praperaui()
 }
 required init?(coder adecoder: nscoder) {
  fatalerror("init(coder:) has not been implemented")
 }

 func praperaui() {
  
  //获取并设置scrollerview尺寸
  let size : cgsize = self.delegate.galleryscrollerviewsize()
  self.scrollerviewwidth = size.width
  self.scrollerviewheight = size.height
  
  //获取数据
  self.datasource = self.delegate.gallerydatasource()
  //设置scrollerview
  self.configurescrollerview()
  
  //设置加载指示图片
  self.configureplaceholder()
  
  //设置imageview
  self.configureimageview()
  
  //设置页控制器
  self.configurepagecontroller()
  
  //设置自动滚动计时器
  //self.configureautoscrolltimer()
  
  self.backgroundcolor = uicolor.blackcolor()
  
  self.addtapaction()
 }
  
 func addtapaction(){
  //添加组件的点击事件
  let tap = uitapgesturerecognizer(target: self,
           action: #selector(fullscreenshowimageview.handletapaction(_:)))
  self.addgesturerecognizer(tap)
 }
 
 //点击事件响应
 func handletapaction(tap:uitapgesturerecognizer)->void{
  //获取图片索引值
  self.delegate.hiddenforcliked(self.currentindex)
  self.dismissviewanimate()
 }
 
 func presentviewanimate() {
  
  let fr = self.middleimageview?.frame
  self.middleimageview?.frame = cgrect(x: fr!.origin.x, y: 22, width: fr!.width, height: fr!.height)
  uiview.animatewithduration(10, animations: {
   
   self.middleimageview?.frame = fr!
   
  }) { (_) in
   
  }
  
 }
 
 func dismissviewanimate() {
  
  let fr = self.middleimageview?.frame
  self.middleimageview?.frame = cgrect(x: fr!.origin.x, y: fr!.origin.y - statusandnavheight, width: fr!.width, height: fr!.height)
  uiview.animatewithduration(10, animations: {
   
    self.middleimageview?.frame = cgrect(x: fr!.origin.x , y: -42, width: fr!.width, height: fr!.height)
   
  }) { (_) in
   
   self.hidden = true
   self.middleimageview?.frame = fr!
  }
  
 }
 
 //设置scrollerview
 func configurescrollerview(){
  self.scrollerview = uiscrollview(frame: cgrect(x: 0,y: 0,
   width: self.scrollerviewwidth!, height: bheight))
  
  self.scrollerview?.backgroundcolor = uicolor.blackcolor()
  self.scrollerview?.delegate = self
  self.scrollerview?.contentsize = cgsize(width: self.scrollerviewwidth! * 3,
            height: bheight)
  //滚动视图内容区域向左偏移一个view的宽度
  self.scrollerview?.contentoffset = cgpoint(x: self.scrollerviewwidth!, y: 0)
  self.scrollerview?.pagingenabled = true
  self.scrollerview?.bounces = false
  self.addsubview(self.scrollerview!)
  
 }
 
 //设置加载指示图片
 func configureplaceholder(){
  //这里我使用imagehelper将文字转换成图片,作为加载指示符
  let font = uifont.systemfontofsize(17)// uifont.systemfont(ofsize: 17.0, weight: uifontweightmedium)
  let size = cgsize(width: self.scrollerviewwidth!, height: self.scrollerviewheight!)
  placeholderimage = uiimage(named: "图片加载中...")
 }
 
 //设置imageview
 func configureimageview(){
  
  self.leftimageview = uiimageview(frame: cgrect(x: 0, y: (bheight-scrollerviewheight!)/2,
   width: self.scrollerviewwidth!, height: self.scrollerviewheight!))
  
  self.middleimageview = uiimageview(frame: cgrect(x: self.scrollerviewwidth!, y: (bheight-scrollerviewheight!)/2,
   width: self.scrollerviewwidth!, height: self.scrollerviewheight! ));
  
  self.rightimageview = uiimageview(frame: cgrect(x: 2*self.scrollerviewwidth!, y: (bheight-scrollerviewheight!)/2,
   width: self.scrollerviewwidth!, height: self.scrollerviewheight!));
  self.scrollerview?.showshorizontalscrollindicator = false
  
  self.leftimageview?.contentmode = uiviewcontentmode.scaleaspectfit
  self.middleimageview?.contentmode = uiviewcontentmode.scaleaspectfit
  self.rightimageview?.contentmode = uiviewcontentmode.scaleaspectfit
  
  //设置初始时左中右三个imageview的图片(分别时数据源中最后一张,第一张,第二张图片)
  if(self.datasource?.count != 0){
   resetimageviewsource()
  }
  
  self.scrollerview?.addsubview(self.leftimageview!)
  self.scrollerview?.addsubview(self.middleimageview!)
  self.scrollerview?.addsubview(self.rightimageview!)
 }
 
 //设置页控制器
 func configurepagecontroller() {
  self.pagecontrol = uipagecontrol(frame: cgrect(x: kscreenwidth/2-60,
               y: bheight - 30, width: 120, height: 20))
  self.pagecontrol?.numberofpages = (self.datasource?.count)!
  self.pagecontrol?.userinteractionenabled = false
  self.addsubview(self.pagecontrol!)
 }
 
 //设置自动滚动计时器
 func configureautoscrolltimer() {
  //设置一个定时器,每三秒钟滚动一次
  autoscrolltimer = nstimer.scheduledtimerwithtimeinterval(3, target: self, selector: #selector(slidergallerycontroller.letitscroll), userinfo: nil, repeats: true)
 }
 
 //计时器时间一到,滚动一张图片
 func letitscroll(){
  let offset = cgpoint(x: 2*scrollerviewwidth!, y: 0)
  self.scrollerview?.setcontentoffset(offset, animated: true)
 }
 
 //每当滚动后重新设置各个imageview的图片
 func resetimageviewsource() {
  //当前显示的是第一张图片
  if self.currentindex == 0 {
   self.leftimageview?.sd_setimagewithurl(nsurl(string: self.datasource!.last!))
   self.middleimageview?.sd_setimagewithurl(nsurl(string: self.datasource!.first!))
   let rightimageindex = (self.datasource?.count)!>1 ? 1 : 0 //保护
   self.rightimageview?.sd_setimagewithurl(nsurl(string: self.datasource![rightimageindex]))
   
   
  }
   //当前显示的是最后一张图片
  else if self.currentindex == (self.datasource?.count)! - 1 {
   
   self.leftimageview?.sd_setimagewithurl(nsurl(string:self.datasource![self.currentindex-1]))
   self.middleimageview?.sd_setimagewithurl(nsurl(string: self.datasource!.last!))
   self.rightimageview?.sd_setimagewithurl(nsurl(string: self.datasource!.first!))
   
  }
   //其他情况
  else{
   
   self.leftimageview?.sd_setimagewithurl(nsurl(string:self.datasource![self.currentindex-1]))
   self.middleimageview?.sd_setimagewithurl(nsurl(string: self.datasource![self.currentindex]))
   self.rightimageview?.sd_setimagewithurl(nsurl(string: self.datasource![self.currentindex+1]))
  }
  
  //设置页控制器当前页码
  self.pagecontrol?.currentpage = self.currentindex
 }
 
 
 //scrollview滚动完毕后触发
 func scrollviewdidscroll(scrollview: uiscrollview) {
  //获取当前偏移量
  let offset = scrollview.contentoffset.x
  
  if(self.datasource?.count != 0){
   
   //如果向左滑动(显示下一张)
   if(offset >= self.scrollerviewwidth!*2){
    //还原偏移量
    scrollview.contentoffset = cgpoint(x: self.scrollerviewwidth!, y: 0)
    //视图索引+1
    self.currentindex = self.currentindex + 1
    
    if self.currentindex == self.datasource?.count {
     self.currentindex = 0
    }
   }
   
   //如果向右滑动(显示上一张)
   if(offset <= 0){
    //还原偏移量
    scrollview.contentoffset = cgpoint(x: self.scrollerviewwidth!, y: 0)
    //视图索引-1
    self.currentindex = self.currentindex - 1
    
    if self.currentindex == -1 {
     self.currentindex = (self.datasource?.count)! - 1
    }
   }
   
   //重新设置各个imageview的图片
   resetimageviewsource()
   
  }
 }
 
 //手动拖拽滚动开始
 func scrollviewwillbegindragging(scrollview: uiscrollview) {
  //使自动滚动计时器失效(防止用户手动移动图片的时候这边也在自动滚动)
  //autoscrolltimer?.invalidate()
 }
 
 //手动拖拽滚动结束
 func scrollviewdidenddragging(scrollview: uiscrollview,
         willdecelerate decelerate: bool) {
  //重新启动自动滚动计时器
  //configureautoscrolltimer()
  
 }
}

如何使用:

var slidergallery : fullscreenshowimageview!
 var bannercurrentindex:int = 0
 
 //图片轮播组件协议方法:获取内部scrollview尺寸
 func galleryscrollerviewsize() -> cgsize {
  return cgsize(width: bwidth, height: bheight/2)
 }
 
 //图片轮播组件协议方法:获取数据集合
 func gallerydatasource() -> [string] {
  return self.bannerview.imageurlstringsgroup as! [string]
 }
 
  //点击事件响应
 func hiddenforcliked(index:int){
  if(bannercurrentindex != index){
    self.bannerview.scrolltoindex(int32(index))
  }
  self.navigationcontroller?.setnavigationbarhidden(false, animated: false)
 }
 
 func showimagegallery(index:int){
  //初始化图片轮播组件
  if(slidergallery == nil){
   slidergallery = fullscreenshowimageview(frame: cgrect(x: 0, y: 0, width: bwidth,
    height: bheight),delegate:self)
   
   slidergallery.currentindex = index
   slidergallery.resetimageviewsource()
   
   //将图片轮播组件添加到当前视图
   self.view.addsubview(slidergallery)
   
  }else{
   slidergallery.currentindex = index
   slidergallery.resetimageviewsource()
   slidergallery.hidden = false
   
  }
  self.slidergallery.presentviewanimate()
  self.navigationcontroller?.setnavigationbarhidden(true, animated: false)
 }
 
 //pragma -- sdcyclescrollviewdelegate
 func cyclescrollview(cyclescrollview: sdcyclescrollview!, didselectitematindex index: int) {
  print("--------index:\(index)")
  bannercurrentindex = index
  self.showimagegallery(index)
  
 }

以上就是本次我们整理的代码全部内容,如果大家学习时候还有任何不明白的地方,可以在下方的留言区讨论,感谢你对的支持。

上一篇:

下一篇: