核心代碼瀏覽器
1.ide
2.佈局
3.ui
界面代碼VFL code
/* 瀏覽做品view*/
import UIKit
/**
* 圖片瀏覽器(大圖和縮略圖)
*/
class JYBrowseWorksView: UIView {
/// 數據源參數（外界傳入）
var dataArray:[WorkImagesProtocol] = [] {
didSet{
self.topCollectionView.reloadData()
self.bottomCollectionView.reloadData()
if dataArray.isEmpty {
self.topCollectionView.backgroundView = self.emptyView
bottomCollectHeight?.constant = 0
self.topCollectionView.backgroundColor = UIColor(hexColor: "F9F9F9")
}else{
self.topCollectionView.backgroundView = nil
bottomCollectHeight?.constant = 70
self.topCollectionView.backgroundColor = UIColor.white
}
}
}
/// 照片比例類型(默認1:1)
var photoSizeType: JYMyCenterPhotoHeightType = .squareType {
didSet{
self.collectionHeightConstraint?.constant = photoSizeType.photoHeight
if photoSizeType == .rectangleType {
self.collectionMegrainConstraint?.constant = 72
}else {
self.collectionMegrainConstraint?.constant = 24
}
}
}
/// 當前顯示的圖片索引
private var selectIndex:Int = 0 {
didSet{
self.reloadCollectionUI()
}
}
/// 空頁面
private let emptyView = JYZDEmptyView(emptyAreement: JYEmptyViewStruct(emptyType: .noImageEmptyType, offsetY: -70, titleTipStr: "暫無做品", buttonTitleStr: nil))
/// 底部相冊的高度約束
private var bottomCollectHeight: NSLayoutConstraint?
/// 可分頁滑動collectionView
private lazy var topCollectionView : UICollectionView = {
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .horizontal
layout.itemSize = CGSize(width: JY_DEVICE_WIDTH, height: self.photoSizeType.photoHeight)
let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
collectionView.translatesAutoresizingMaskIntoConstraints = false
collectionView.backgroundColor = UIColor.white
collectionView.isPagingEnabled = true
collectionView.showsVerticalScrollIndicator = false
collectionView.showsHorizontalScrollIndicator = false
return collectionView
}()
/// 可選擇點中的collectionview
private var bottomCollectionView : UICollectionView = {
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .horizontal
layout.itemSize = CGSize(width: 70, height: 70)
let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
collectionView.translatesAutoresizingMaskIntoConstraints = false
collectionView.backgroundColor = UIColor.white
collectionView.showsVerticalScrollIndicator = false
collectionView.showsHorizontalScrollIndicator = false
return collectionView
}()
/// topcollectionView 開始滑動時的位移
private var startContentOffsetX : CGFloat = 0
/// topcollectionView 將要中止滑動時的位移
private var willEndContentOffsetX : CGFloat = 0
/// 控制高度的約束
private var collectionHeightConstraint: NSLayoutConstraint?
/// 控制距離的約束
private var collectionMegrainConstraint: NSLayoutConstraint?
override init(frame: CGRect) {
super.init(frame: frame)
self.translatesAutoresizingMaskIntoConstraints = false
self.configerUI()
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
/// 刷新collectionview的UI
private func reloadCollectionUI() {
let endContentOffsetX = topCollectionView.contentOffset.x
if endContentOffsetX < willEndContentOffsetX , willEndContentOffsetX < startContentOffsetX {
DDLOG(message: "左移")
if !bottomCollectionView.indexPathsForVisibleItems.contains(IndexPath(item: selectIndex, section: 0)) {
bottomCollectionView.selectItem(at: IndexPath(item: selectIndex, section: 0), animated: true, scrollPosition: UICollectionView.ScrollPosition.left)
}
} else if endContentOffsetX > willEndContentOffsetX , willEndContentOffsetX > startContentOffsetX {
DDLOG(message: "右移")
if !bottomCollectionView.indexPathsForVisibleItems.contains(IndexPath(item: selectIndex, section: 0)) {
bottomCollectionView.selectItem(at: IndexPath(item: selectIndex, section: 0), animated: true, scrollPosition: UICollectionView.ScrollPosition.right)
}
}
self.bottomCollectionView.reloadData()
}
}
// MARK: - UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout
extension JYBrowseWorksView : UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return self.dataArray.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "JYBrowseWorksCollectionCell", for: indexPath) as! JYBrowseWorksCollectionCell
cell.configerCellData(imageData: dataArray[indexPath.row])
if collectionView == bottomCollectionView {
let select = selectIndex == indexPath.row ? true : false
cell.configerSelectCell(isSelect: select)
}else {
// cell.imageView.contentMode = .scaleAspectFit
// cell.clipsToBounds = false
}
return cell
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
if collectionView == topCollectionView {
return 0.0001
}
return 10
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
if collectionView == topCollectionView {
return 0
}
return 10
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
if collectionView == topCollectionView {
return UIEdgeInsets.zero
}
return UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 10)
}
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
if collectionView == bottomCollectionView {
selectIndex = indexPath.row
topCollectionView.scrollToItem(at: IndexPath(item: indexPath.row, section: 0), at: UICollectionView.ScrollPosition.left, animated: true)
}
}
/// 滑動頂部collectionview，底部collectionview顯示頂部當前顯示的圖片
///
/// - Parameter scrollView: scrollView description
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
if scrollView == topCollectionView {
let x = scrollView.contentOffset.x
let i:Int = Int(x/UIScreen.main.bounds.size.width)
self.selectIndex = i
}
}
/// 獲取將要滑動時位移
/// 用於判斷滑動方向
/// - Parameter scrollView: scrollView description
func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
if scrollView == topCollectionView {
startContentOffsetX = scrollView.contentOffset.x
}
}
/// 獲取將要結束時 topCollectionView 的位移
/// 用於判斷 滑動方向
/// - Parameters:
/// - scrollView: scrollView description
/// - velocity: velocity description
/// - targetContentOffset: targetContentOffset description
func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
if scrollView == topCollectionView {
willEndContentOffsetX = scrollView.contentOffset.x
}
}
}
// MARK: - UI佈局
extension JYBrowseWorksView {
private func configerUI() {
topCollectionView.delegate = self
topCollectionView.dataSource = self
bottomCollectionView.delegate = self
bottomCollectionView.dataSource = self
topCollectionView.register(JYBrowseWorksCollectionCell.classForCoder(), forCellWithReuseIdentifier: "JYBrowseWorksCollectionCell")
bottomCollectionView.register(JYBrowseWorksCollectionCell.classForCoder(), forCellWithReuseIdentifier: "JYBrowseWorksCollectionCell")
self.addSubview(topCollectionView)
self.addSubview(bottomCollectionView)
let vd:[String:UIView] = ["topCollectionView":topCollectionView,"bottomCollectionView":bottomCollectionView]
self.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "|[topCollectionView]|", options: [], metrics: nil, views: vd))
self.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "|[bottomCollectionView]|", options: [], metrics: nil, views: vd))
self.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|[topCollectionView]", options: [], metrics: nil, views: vd))
self.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:[bottomCollectionView]|", options: [], metrics: nil, views: vd))
self.collectionHeightConstraint = topCollectionView.heightAnchor.constraint(equalToConstant: JY_DEVICE_WIDTH)
self.collectionHeightConstraint?.isActive = true
self.collectionMegrainConstraint = bottomCollectionView.topAnchor.constraint(equalTo: topCollectionView.bottomAnchor, constant: 24)
self.collectionMegrainConstraint?.isActive = true
bottomCollectHeight = bottomCollectionView.heightAnchor.constraint(equalToConstant: 70)
bottomCollectHeight?.isActive = true
}
}