2017-04-03 8 views
0

누구나 신축성있는 UITableView 바닥 글을 구현하는 방법을 알려줄 수 있습니까?Swift 3 : Stretchy UITableView footer

사용자가 '지나치다'때 내 바닥 글의 이미지를 늘리거나 크기를 늘리고 싶습니다.

private let tableFooterHeight: CGFloat = 300 
private var footerCustomView = UIImageView() 

    func setupFooterView(){ 
     // Footer view 
     self.footerCustomView = UIImageView(frame: CGRect.zero) 
     self.footerCustomView.backgroundColor = UIColor.brown 
     self.footerCustomView.image = UIImage(named: "image") 

     self.view.addSubview(self.footerCustomView) 
//  self.view.bringSubview(toFront: self.tableView) 

     self.tableView.contentInset = UIEdgeInsets(top: 0, left: 0, bottom: self.tableFooterHeight, right: 0) 

     self.footerCustomView.translatesAutoresizingMaskIntoConstraints = false 

     let leadingConstraint = NSLayoutConstraint(item: self.footerCustomView, 
               attribute: .leading, 
               relatedBy: .equal, 
               toItem: self.tableView, 
               attribute: .leading, 
               multiplier: 1, 
               constant: 0) 

     let trailingConstraint = NSLayoutConstraint(item: self.footerCustomView, 
              attribute: .trailing, 
              relatedBy: .equal, 
              toItem: self.tableView, 
              attribute: .trailing, 
              multiplier: 1, 
              constant: 0) 

     let bottomConstraint = NSLayoutConstraint(item: self.footerCustomView, 
              attribute: .bottom, 
              relatedBy: .equal, 
              toItem: self.tableView, 
              attribute: .bottom, 
              multiplier: 1, 
              constant: 0) 

     let heightConstraint = NSLayoutConstraint(item: self.footerCustomView, 
               attribute: .height, 
               relatedBy: .equal, 
               toItem: nil, 
               attribute: .height, 
               multiplier: 1, 
               constant: self.tableFooterHeight) 

     self.view.addConstraints([bottomConstraint, trailingConstraint, heightConstraint, leadingConstraint]) 
} 

func scrollViewDidScroll(_ scrollView: UIScrollView) { 

    self.updateFooterView() 
} 

func updateFooterView() {   
    if self.tableView.bounds.origin.y > 1559 { // 1559 is end of tableView 
     let diff = self.tableView.contentOffset.y - 1559 
     self.footerCustomView.frame.size.height = self.tableFooterHeight + diff 
    } 
} 

감사합니다 :

현재 코드 (사용자가 아래로 스크롤하는 경우 jQuery과 하단에 이미있는 경우)!

일반 : Normal


스트레치 모드 : Stretch mode

+0

맨 아래 contentInset을 테이블보기에 추가하고 테이블보기의 수퍼 뷰 맨 아래에 이미지보기를 추가해야합니다. 테이블보기 뒤에 추가되었는지 확인하십시오. 스크롤 뷰 대리자 인 scrollViewDidScroll에서 오버플로 양으로 이미지 뷰 프레임을 조정합니다. – HMHero

+0

입력 해 주셔서 감사합니다. 위 질문에서 코드를 업데이트했습니다. tableFooterView가 아래쪽으로 커지고 있습니다. tableviews bottom과 footerCustomView 사이에 맨 아래 구속 조건을 추가하려고 시도했지만 운이 없었습니다. 또한 self.view.bringSubview (toFront : self.tableView)를 호출하면 my customView가 표시되지 않고 마지막 셀 backgroundColor에서 처리됩니다. 당신은 아이디어를 갖고 있습니까? 그리고 설명대로 코드를 구현 했습니까? – PAK

답변

0

jQuery과 이미 우리는있는 UIImageView하는있는 UIScrollView, 다른 UIView의에로 UIView의 하위 클래스를 할 수

속성 tableFooterView있다 UIImageView의 컨테이너 역할을합니다. StretchyFooterView라고 부르 자.

저는 제약 조건 추가에 PureLayout 라이브러리를 사용하고 싶습니다.

class YourView: UIView, UITableViewDelegate { 

fileprivate let tableView = UITableView(frame: .zero, style: .plain) 

fileprivate let image = UIImage(named: "yourImage")! 

// ---------------------------------------------------------------------------- 
// MARK: Init 
// ---------------------------------------------------------------------------- 

override init(frame: CGRect) { 
    super.init(frame: frame) 

    setupViews() 
} 

required init?(coder aDecoder: NSCoder) { 
    fatalError("init(coder:) has not been implemented") 
} 

// ---------------------------------------------------------------------------- 
// MARK: UIView 
// ---------------------------------------------------------------------------- 

override func updateConstraints() { 
    tableView.autoPinEdgesToSuperviewEdges() 

    super.updateConstraints() 
} 

override func layoutSubviews() { 
    super.layoutSubviews() 

    // do this after the view lays out so we know the frame width and height 
    let imageAspect = image.size.width/image.size.height 
    let footerWidth = frame.size.width 
    let footerHeight = footerWidth/imageAspect 
    let footerSize = CGSize(width: footerWidth, height: footerHeight) 
    let footerFrame = CGRect(origin: .zero, size: footerSize) 

    tableView.tableFooterView = StretchyFooterView(frame: footerFrame, image: image) 
} 

// ---------------------------------------------------------------------------- 
// MARK: Internal 
// ---------------------------------------------------------------------------- 

func scrollViewDidScroll(_ scrollView: UIScrollView) { 
    let verticalScrollDistance = scrollView.contentOffset.y 
    let bottomOfView = frame.height 

    if let stretchyFooterView = tableView.tableFooterView as? StretchyFooterView { 
     stretchyFooterView.stretchBy(verticalScrollDistance, bottomBound: bottomOfView) 
    } 
} 

// ---------------------------------------------------------------------------- 
// MARK: Private 
// ---------------------------------------------------------------------------- 

fileprivate func setupViews() { 
    tableView.delegate = self 

    addSubview(tableView) 
} 
} 

class StretchyFooterView: UIView { 

fileprivate let containerView = UIView() 
fileprivate let scrollView = UIScrollView() 
fileprivate let imageView = UIImageView() 

fileprivate let image: UIImage 

// ---------------------------------------------------------------------------- 
// MARK: Init 
// ---------------------------------------------------------------------------- 

init(frame: CGRect, image: UIImage) { 
    self.image = image 

    super.init(frame: frame) 

    setupViews() 
} 

required init?(coder aDecoder: NSCoder) { 
    fatalError("init(coder:) has not been implemented") 
} 

// ---------------------------------------------------------------------------- 
// MARK: UIView 
// ---------------------------------------------------------------------------- 

override func updateConstraints() { 
    containerView.autoCenterInSuperview() 
    containerView.autoMatch(.height, to: .height, of: scrollView) 

    imageView.autoPinEdgesToSuperviewEdges() 
    imageView.autoMatch(.width, to: .height, of: scrollView, withMultiplier: image.aspect) 

    super.updateConstraints() 
} 

// ---------------------------------------------------------------------------- 
// MARK: Internal 
// ---------------------------------------------------------------------------- 

func stretchBy(_ distanceScrolled: CGFloat, bottomBound: CGFloat) { 
    let distanceFromTop = bottomBound + distanceScrolled // the footer could be offscreen, so we need to add the distance scrolled to the bottom of the view 
    let distanceFromBottom = frame.maxY - distanceFromTop // this is how much we need to scroll 

    if distanceFromBottom < 0 { // once we hit zero and below, we need to stretch the height 
     let origin = CGPoint.zero // since we are scrolling, the origin needs to stay at zero 
     let newSize = CGSize(width: frame.width, height: frame.height - distanceFromBottom) // subtract distanceFromBottom because it's negative 

     scrollView.frame = CGRect(origin: origin, size: newSize) 
    } 
} 

// ---------------------------------------------------------------------------- 
// MARK: Private 
// ---------------------------------------------------------------------------- 

fileprivate func setupViews() { 
    imageView.image = image 

    containerView.addSubview(imageView) 

    scrollView.frame = bounds 
    scrollView.addSubview(containerView) 

    addSubview(scrollView) 
} 
}