亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

利用swift實(shí)現(xiàn)卡片橫向滑動(dòng)動(dòng)畫(huà)效果的方法示例

 更新時(shí)間:2017年07月21日 09:28:19   作者:醉春風(fēng)  
卡片橫向滑動(dòng)動(dòng)畫(huà)效果相信對(duì)大家來(lái)說(shuō)都不陌生,下面這篇文章主要給大家介紹了關(guān)于利用swift實(shí)現(xiàn)卡片橫向滑動(dòng)動(dòng)畫(huà)效果的方法示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起看看吧。

本文主要給大家介紹了關(guān)于利用swift實(shí)現(xiàn)卡片橫向滑動(dòng)動(dòng)畫(huà)效果的相關(guān)資料,分享出來(lái)供大家參考學(xué)習(xí),下面來(lái)一起看看詳細(xì)的介紹吧。

根據(jù)慣例,首先上效果圖:


那天去面試,面試官突然拿出手機(jī)點(diǎn)開(kāi)了一個(gè)app,自個(gè)在那點(diǎn)了一會(huì),然后問(wèn)我 這個(gè)效果怎么實(shí)現(xiàn),當(dāng)時(shí)一看可以滑動(dòng),肯定用scrollView 或者 collectionView實(shí)現(xiàn),就大概的說(shuō)了下。今天剛好閑下來(lái),就敲一敲這個(gè)效果。

先來(lái)分析下這個(gè)效果:

卡片是橫向滾動(dòng),并且每個(gè)卡片的位置都是保持在屏幕中間的,而且 左右相鄰的卡片都露出來(lái)一點(diǎn)邊
collectionView 和scrollView都可以實(shí)現(xiàn),在這里,我們用collectionView實(shí)現(xiàn),但是我們平常普通用的collectionView都是正屏滑動(dòng)的!!而且是平滑,所有我們只能自定義UICollectionViewFlowLayout 流式布局,才可以達(dá)到上圖效果.

廢話不多說(shuō),直接上代碼:

創(chuàng)建collectionView布局

//創(chuàng)建collectionView布局
func setepUI() {
//CustomLayout是自定義的UICollectionViewFlowLayout
 layout = CustomLayout()
 layout?.itemSize = CGSize(width: SCREEN_WIDTH-80, height: SCREEN_HEIGHT-64-120)

 let rect = CGRect(x: 0, y: 64, width:SCREEN_WIDTH , height: SCREEN_HEIGHT-64)
 collectionView = UICollectionView(frame: rect, collectionViewLayout: layout!)
 collectionView?.delegate = self
 collectionView?.dataSource = self
 view.addSubview(collectionView!)
 collectionView?.register(CustomViewCell.self, forCellWithReuseIdentifier: "identifier")
 collectionView?.backgroundColor = UIColor.red

 }

實(shí)現(xiàn)代理方法:

我們?cè)趀xtension中實(shí)現(xiàn):

// MARK: -- delegate and datasource
extension ViewController:
UICollectionViewDelegate,
UICollectionViewDataSource,
UICollectionViewDelegateFlowLayout{

 func numberOfSections(in collectionView: UICollectionView) -> Int {
 return 1
 }

 func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
 return 10
 }
 func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
//CustomViewCell是自定義的cell
 let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "identifier", for: indexPath) as! CustomViewCell
 cell.backgroundColor = UIColor.orange
 cell.lable?.text = "\(indexPath.row)/\(10)"
 return cell
 }
}

至此,我們可以得到普通的效果,左右滑動(dòng),但中間cell不會(huì)居中,兩側(cè)cell也不會(huì)縮放,如下圖:


這個(gè)時(shí)候就需要在自定義的流式布局 CustomLayout里做點(diǎn)什么了:

初始化方法 prepare , 初始化一些內(nèi)容:

//重寫(xiě)prepare方法
 //布局之前的準(zhǔn)備工作 初始化 這個(gè)方法每次layout發(fā)生改變就調(diào)用一次
override func prepare() {
  scrollDirection = UICollectionViewScrollDirection.horizontal
   minimumLineSpacing = 20.0
  sectionInset = UIEdgeInsets(top: 0, left: 40, bottom: 0, right: 40)
  super.prepare()
 }

(該方法默認(rèn)返回false) 返回true frame發(fā)生改變就允許重新布局 內(nèi)部會(huì)重新調(diào)用prepare 和

layoutAttributesForElementsInRect
 override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
  return true
 }

MARK:---用來(lái)計(jì)算出rect這個(gè)范圍內(nèi)所有cell的UICollectionViewLayoutAttributes 對(duì)象,循環(huán)遍歷每個(gè)attribute對(duì)象,修改frame,再將這數(shù)組返回給系統(tǒng)

 override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
  //根據(jù)當(dāng)前滾動(dòng)進(jìn)行對(duì)每個(gè)cell進(jìn)行縮放
  //首先獲取 當(dāng)前rect范圍內(nèi)的 attributes對(duì)象
  let array = super.layoutAttributesForElements(in: rect)
  private let ScaleFactor:CGFloat = 0.001//縮放因子
  //計(jì)算縮放比 首先計(jì)算出整體中心點(diǎn)的X值 和每個(gè)cell的中心點(diǎn)X的值
  //用著兩個(gè)x值的差值 ,計(jì)算出絕對(duì)值
  //colleciotnView中心點(diǎn)的值
  let centerX = (collectionView?.contentOffset.x)! + (collectionView?.bounds.size.width)!/2
  //循環(huán)遍歷每個(gè)attributes對(duì)象 對(duì)每個(gè)對(duì)象進(jìn)行縮放
  for attr in array! {
   //計(jì)算每個(gè)對(duì)象cell中心點(diǎn)的X值
   let cell_centerX = attr.center.x

   //計(jì)算兩個(gè)中心點(diǎn)的便宜(距離)
   //距離越大縮放比越小,距離小 縮放比越大,縮放比最大為1,即重合
   let distance = abs(cell_centerX-centerX)
   let scale:CGFloat = 1/(1+distance*ScaleFactor)
   attr.transform3D = CATransform3DMakeScale(1.0, scale, 1.0)

  }

  return array
 }

到目前為止,我們可以得到一個(gè)縮放的效果,但是仍然沒(méi)有達(dá)到我們要的效果,可視區(qū)域的cell并沒(méi)有居中顯示,而是滑到哪里就到哪里:

如下圖:


所以我們還得重寫(xiě)一個(gè)方法:

func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint

需要注意的兩個(gè)參數(shù):

  • proposedContentOffset :手指滑動(dòng)視圖最終停止的便宜量,并不是手指離開(kāi)時(shí)的偏移量(congtentOffset)
  • velocity:手指滑動(dòng)的速率

實(shí)現(xiàn)該方法:

/// <#Description#>
 ///
 /// - Parameter proposedContentOffset: 當(dāng)手指滑動(dòng)的時(shí)候 最終的停止的偏移量
 /// - Returns: 返回最后停止后的點(diǎn)
 override func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint {
  let visibleX = proposedContentOffset.x
  let visibleY = proposedContentOffset.y
  let visibleW = collectionView?.bounds.size.width
  let visibleH = collectionView?.bounds.size.height
  //獲取可視區(qū)域
  let targetRect = CGRect(x: visibleX, y: visibleY, width: visibleW!, height: visibleH!)

  //中心點(diǎn)的值
  let centerX = proposedContentOffset.x + (collectionView?.bounds.size.width)!/2

  //獲取可視區(qū)域內(nèi)的attributes對(duì)象
  let attrArr = super.layoutAttributesForElements(in: targetRect)!
  //如果第0個(gè)屬性距離最小
  var min_attr = attrArr[0]
  for attributes in attrArr {
   if (abs(attributes.center.x-centerX) < abs(min_attr.center.x-centerX)) {
    min_attr = attributes
   }
  }
  //計(jì)算出距離中心點(diǎn) 最小的那個(gè)cell 和整體中心點(diǎn)的偏移
  let ofsetX = min_attr.center.x - centerX
  return CGPoint(x: proposedContentOffset.x+ofsetX, y: proposedContentOffset.y)
 }

至此,整個(gè)過(guò)程結(jié)束,其實(shí)很簡(jiǎn)單,主要是對(duì)這幾個(gè)方法理解!

最后代碼下載:

github下載地址:點(diǎn)這里

本地下載地址:http://xiazai.jb51.net/201707/yuanma/ScrollCardDemo(jb51.net).rar

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)腳本之家的支持。

相關(guān)文章

  • Swift能代替Objective-C嗎?

    Swift能代替Objective-C嗎?

    這是我在網(wǎng)上上看到的答案,復(fù)制粘貼過(guò)來(lái)和大家分享一下,因?yàn)槲液秃芏嗳艘粯雍荜P(guān)心Swift的出現(xiàn)對(duì)Mac開(kāi)發(fā)的影響和對(duì)Objective-C的影響。
    2014-09-09
  • 關(guān)于swift的個(gè)人小結(jié)

    關(guān)于swift的個(gè)人小結(jié)

    本文是個(gè)人對(duì)于目前學(xué)習(xí)swift的一些心得的匯總,這里分享給大家,希望大家能夠喜歡
    2016-12-12
  • iPhone與iWatch連接、控制、數(shù)據(jù)傳遞(Swift)的方法

    iPhone與iWatch連接、控制、數(shù)據(jù)傳遞(Swift)的方法

    這篇文章主要介紹了iPhone與iWatch連接、控制、數(shù)據(jù)傳遞(Swift)的方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
    2017-03-03
  • Swift心得筆記之函數(shù)

    Swift心得筆記之函數(shù)

    函數(shù)是執(zhí)行特定任務(wù)的代碼自包含塊。通過(guò)給定一個(gè)函數(shù)名稱標(biāo)識(shí)它是什么,并在需要的時(shí)候使用該名稱來(lái)調(diào)用函數(shù)以執(zhí)行任務(wù)。今天我們就來(lái)探討下swift中的函數(shù)問(wèn)題。
    2015-04-04
  • swift閉包和OC block類型的使用

    swift閉包和OC block類型的使用

    這篇文章主要介紹了swift閉包和OC block類型的使用,需要的朋友可以參考下
    2017-08-08
  • Swift 3.0基礎(chǔ)學(xué)習(xí)之枚舉類型

    Swift 3.0基礎(chǔ)學(xué)習(xí)之枚舉類型

    枚舉在編程中很多時(shí)候要用到,在 Swift 中,枚舉具有更多的特性。下面這篇文章主要介紹了Swift 3.0基礎(chǔ)學(xué)習(xí)之枚舉類型的相關(guān)資料,文中介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面來(lái)一起看看吧。
    2017-03-03
  • swift3.0 創(chuàng)建sqlite數(shù)據(jù)庫(kù)步驟方法

    swift3.0 創(chuàng)建sqlite數(shù)據(jù)庫(kù)步驟方法

    本篇文章主要介紹了swift3.0 創(chuàng)建sqlite數(shù)據(jù)庫(kù)步驟方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-06-06
  • Swift初始化器與可選鏈的使用方法介紹

    Swift初始化器與可選鏈的使用方法介紹

    初始化器初始化是準(zhǔn)備類、結(jié)構(gòu)或枚舉的實(shí)例以供使用的過(guò)程。此過(guò)程涉及為該實(shí)例上的每個(gè)存儲(chǔ)屬性設(shè)置初始值,并執(zhí)行在新實(shí)例準(zhǔn)備就緒可供使用之前所需的任何其他設(shè)置或初始化,可選鏈?zhǔn)且环N可以請(qǐng)求和調(diào)用屬性、方法和子腳本的過(guò)程,用于請(qǐng)求或調(diào)用的目標(biāo)可能為nil
    2022-08-08
  • 如何利用SwiftUI實(shí)現(xiàn)可縮放的圖片預(yù)覽器

    如何利用SwiftUI實(shí)現(xiàn)可縮放的圖片預(yù)覽器

    這篇文章主要給大家介紹了關(guān)于如何利用SwiftUI實(shí)現(xiàn)可縮放圖片預(yù)覽器的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用SwiftUI具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2021-09-09
  • Swift實(shí)現(xiàn)簡(jiǎn)單計(jì)算器項(xiàng)目

    Swift實(shí)現(xiàn)簡(jiǎn)單計(jì)算器項(xiàng)目

    這篇文章主要為大家詳細(xì)介紹了Swift實(shí)現(xiàn)簡(jiǎn)單計(jì)算器項(xiàng)目,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-01-01

最新評(píng)論