SnapKit swift實現高度自適應的新浪微博布局


 

SnapKit swift版的自動布局框架,第一次使用感覺還不錯。

SnapKit是一個優秀的第三方自適應布局庫,它可以讓iOS、OS X應用更簡單地實現自動布局(Auto Layout)。
GtiHub地址: https://github.com/SnapKit/SnapKit

1.uitableview高度自適應的關鍵代碼:

        self.tableView.estimatedRowHeight=50//預估值隨意寫一個差不多的就可以

        self.tableView.rowHeight=UITableViewAutomaticDimension

2.布局約束時一定要從上往下不然高度也無法適應

3.在最后一個view一定要添加與底部的一個約束: make.bottom.equalTo(-10)

 

 

以下是示例代碼

//

//  TableViewCell.swift

//  Test 

//  Copyright © 2017  All rights reserved.

//

 

import UIKit

import SnapKit

 

class TableViewCell: UITableViewCell {

 

  

    

    override func awakeFromNib() {

        super.awakeFromNib()

 

        //約束頭像

        self.headImageView.backgroundColor=UIColor.red

        self.addSubview(headImageView)

        

        self.headImageView.snp.makeConstraints({make in

        

            make.top.left.equalTo(10)

            make.width.height.equalTo(40)

    

        })

        

        //約束用戶名

        self.addSubview(nameLabel)

        self.nameLabel.snp.makeConstraints({make in

        

           make.top.equalTo(headImageView.snp.top)

           make.left.equalTo(headImageView.snp.right).offset(5)

        

        })

        

        self.addSubview(timeLabel)

        

        self.timeLabel.snp.makeConstraints({make in

        

        make.left.equalTo(headImageView.snp.right).offset(5)

        make.bottom.equalTo(headImageView.snp.bottom)

        })

        

        //約束文字內容

        self.addSubview(contentLabel)

        

        self.contentLabel.snp.makeConstraints({make in

        

            make.top.equalTo(headImageView.snp.bottom).offset(5)

            make.left.equalTo(headImageView.snp.left)

            make.right.equalTo(-10)

          

        

        })

        

        //約束圖片

        self.picView.dataSource=self

        self.picView.delegate=self

       // let nib = UINib.init(nibName: "CollectionViewCell", bundle: nil)

        self.picView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "imgCell")

        self.addSubview(picView)

        

        self.picView.snp.makeConstraints({make in

        

            make.top.equalTo(contentLabel.snp.bottom).offset(5)

            make.height.equalTo(0)

            make.left.equalTo(contentLabel.snp.left)

            make.right.equalTo(-10)

           

           

        })

 

        

        //約束底部工具條

        

        self.addSubview(bottomBar)

        

        self.bottomBar.snp.makeConstraints({make in

        

            

             make.top.equalTo(picView.snp.bottom).offset(5)

             make.left.equalTo(10)

             make.right.equalTo(-10)

             make.height.equalTo(40)

             make.bottom.equalTo(-10)//這句一定要放在最后一個view不然無法自動計算高度

         

        })

       

        

    }

    

    

    //懶加載頭像

    lazy private var headImageView:UIImageView={

    

    let headImageView = UIImageView()

    

        return headImageView

    }()

    

    //懶加載用戶名

    lazy private var nameLabel:UILabel={

    

        let nameLabel=UILabel()

        

        return nameLabel

    

    }()

    

    //懶加載時間

    lazy private var timeLabel:UILabel={

    

    

        let timeLabel = UILabel()

        

        timeLabel.font=UIFont.systemFont(ofSize: 14)

        timeLabel.textColor=UIColor.darkGray

        return timeLabel

    }()

    

    //懶加載文字內容

    lazy private var contentLabel:UILabel={

    

        let contentLabel = UILabel()

    

        contentLabel.numberOfLines=0

        return contentLabel

    }()

    

    

    //懶加載圖片容器

    lazy private var picView:UICollectionView={

    

        

        let picView=UICollectionView(frame:CGRect.zero,collectionViewLayout: UICollectionViewFlowLayout())

    

        return picView

    }()

    

    

    //底部工條

    lazy private var bottomBar:UIView={

    

        let bottomBar=UIView()

        

        bottomBar.backgroundColor=UIColor.cyan

        

        return bottomBar

    

    }()

  

    

    var model:Model?{

    

        didSet{

        

            guard let model=model else {

       

                return

            }

        

            self.nameLabel.text="用戶名"

            self.timeLabel.text="時間"

            self.contentLabel.text=model.text ?? ""

          

            //這里更新圖片容器(注意:這里測試寫死的,開發中應根據圖片張數計算圖片容器高度)

            self.picView.snp.updateConstraints({make in

             

               make.height.equalTo(310)

            

            })

            

        }

        

        

    }

    

   

 

}

 

extension TableViewCell:UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout{

 

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

        

        return 1

    }

    

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {

        

        return 9

    }

    

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {

        

        return 5

    }

    

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {

        return 0

    }

    

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

        

        return CGSize(width:(UIScreen.main.bounds.size.width-30)/3,height:100)

    }

    

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

        

        

        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "imgCell", for: indexPath)

        

    

        cell.backgroundColor=UIColor.orange

      

        

        return cell

    }

 

}

 

//

//  TableViewController.swift

//  Test

//

//  Created by admin  

//  Copyright © 2017 tdin360. All rights reserved.

//

 

import UIKit

 

class TableViewController: UITableViewController {

 

    var datas = [Model]()

    override func viewDidLoad() {

        super.viewDidLoad()

 

     datas.append(Model(text: "2016.01.18 -- 推出普通簡化版”tableviewcell自動高度方法(推薦使用),原來的需2步設置的普通版方法將標記過期"))

     datas.append(Model(text: "One line of code to implement automatic layout. 一行代碼搞定自動布局!支持CellTableview高度自適應,LabelScrollView內容自適應,致力於做最簡單易用的AutoLayout庫。The most easy way for autoLayout. Based on runtime."))

        

     datas.append(Model(text: "One line of code to implement automatic layout. 一行代碼搞定自動布局!支持CellTableview高度自適應,LabelScrollView內容自適應,致力於做最簡單易用的AutoLayout庫。The most easy way for autoLayout. Based on runtime.One line of code to implement automatic layout. 一行代碼搞定自動布局!支持CellTableview高度自適應,LabelScrollView內容自適應,致力於做最簡單易用的AutoLayout庫。The most easy way for autoLayout. Based on runtime."))

     datas.append(Model(text: "One line of code to implement automatic layout. 一行代碼搞定自動布局!支持CellTableview高度自適應,LabelScrollView內容自適應,致力於做最簡單易用的AutoLayout庫。The most easy way for autoLayout. Based on runtime.One line of code to implement automatic layout. 一行代碼搞定自動布局!支持CellTableview高度自適應,LabelScrollView內容自適應,致力於做最簡單易用的AutoLayout庫。The most easy way for autoLayout. Based on runtime.One line of code to implement automatic layout. 一行代碼搞定自動布局!支持CellTableview高度自適應,LabelScrollView內容自適應,致力於做最簡單易用的AutoLayout庫。The most easy way for autoLayout. Based on runtime."))

      datas.append(Model(text: "One line of code to implement automatic layout. 一行代碼搞定自動布局!支持CellTableview高度自適應,LabelScrollView內容自適應,致力於做最簡單易用的AutoLayout庫。The most easy way for autoLayout. Based on runtime.")) 

        

        

       //這兩句是實現高度自適應的關鍵代碼

        self.tableView.estimatedRowHeight=50

        self.tableView.rowHeight=UITableViewAutomaticDimension

        

        

        

    }

 

    override func didReceiveMemoryWarning() {

        super.didReceiveMemoryWarning()

     

    }

 

    // MARK: - Table view data source

    override func numberOfSections(in tableView: UITableView) -> Int {

 

        

        return 1

    }

 

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

        

      

        return datas.count

    }

 

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! TableViewCell

  

  

         cell.model=datas[indexPath.row]

        

        return cell

    }

 

 

}

 

效果圖

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM