6.新浪微博Swift項目第六天

時間 2019-11-11

標籤新浪微博 swift 項目第六欄目 Swift 简体版

原文原文鏈接

第六天

終於有時間能夠在更新這個swift的demo了,一看時間,已是8個月之後,swift都已經更新4.0了,可是目前這個demo依然用3.0去寫

以前咱們完成了新浪微博是受權,而且成功登錄了咱們的微博,今天咱們就開始佈局首頁的微博視圖,今天只對原創微博進行處理,轉發微博只是在原創微博的基礎上添加一個評論

1.建立`XQWBStatusCell`和對應的xib文件,而且拖入對應的空間,設置約束

注意: 爲了體現封裝,咱們將配圖視圖(XQWBStatusPictureView)和工具欄視圖(XQWBStatusToolBar)分別封裝,這樣會cell中的代碼會更加清晰

2.在cell的XQWBStatusViewModel(後邊咱們會講到這個Viewmodel)屬性的setter方法中,給各個控件渲染

/// 微博視圖模型
    var viewModel: XQWBStatusViewModel? {
        didSet {
            // 微博文本
            statusLabel?.text = viewModel?.status.text
            // 姓名
            nameLabel.text = viewModel?.status.user?.screen_name
            // 設置會員圖標 (直接使用屬性不用計算)
            memberIconView.image = viewModel?.memberIcon
            // 認證圖標
            vipIconView.image = viewModel?.vipIcon
            // 用戶頭像
            iconView.xq_setImage(urlString: viewModel?.status.user?.profile_image_url, placeholderImage: UIImage(named: "avatar_default_big"), isAvatar:true)
            // 底部工具欄
            toolBar.viewModel = viewModel
            // 配圖視圖的高度
            pictureView.heightCons.constant = viewModel?.pictureViewSize.height ?? 0
            // 配圖視圖的數據
            pictureView.urls = viewModel?.status.pic_urls
        }
    }

2.1 配圖視圖的處理咱們首先將9個圖片所有建立而且隱藏,在咱們設置圖片的時候,根據圖片數組的數量,將對應的UIImageView顯示, 這樣的作能夠優化一些性能(儘可能避免動態建立視圖)git

// 建立9個UIImageView
   for i in 0..<9 {
       let iv = UIImageView()
       iv.contentMode = .scaleAspectFill
       iv.clipsToBounds = true
       // 行 - > Y
       let row = CGFloat(i / 3)
       // 列 - > X
       let col = CGFloat(i % 3)
       iv.frame = rect.offsetBy(dx: col * (itemWidth + InnerMargin), dy: row * (itemWidth + InnerMargin))
       addSubview(iv)
   }

   // 在設置圖片數組的時候講對應的UIImageView顯示
   var urls : [XQWBStatusPicture]? {
       didSet {
           // 1. 隱藏全部的iv
           for v in subviews {
               v.isHidden = true
           }
           // 遍歷urls 順序設置圖像
           var index = 0
           for url in urls ?? [] {
           // 得到對應的imageView
           let iv = subviews[index] as! UIImageView
           if index == 1 && urls?.count == 4 {
               index += 1
           }
           // 設置圖像
           iv.xq_setImage(urlString: url.thumbnail_pic, placeholderImage: nil)
           // 顯示圖像
           iv.isHidden = false
           index += 1
       }
   }

2.2 設置XQWBStatusToolBarswift

var viewModel: XQWBStatusViewModel? {
        didSet {           
            retweetedBtn.setTitle(viewModel?.retweetedStr, for: .normal)
            commentBtn.setTitle(viewModel?.commentStr, for: .normal)
            likeBtn.setTitle(viewModel?.likeStr, for: .normal)
        }
    }

3. 修改咱們以前在controller中綁定的cell,而且進行數據渲染

// 1.取出cell
let cell = tableView.dequeueReusableCell(withIdentifier: cellID, for: indexPath) as! XQWBStatusCell
// 2.設置cell
let viewModel = listViewModel.statusList[indexPath.row]
cell.viewModel = viewModel

4.進行數據處理,這裏是最關鍵的一步,咱們要充分體驗到viewModel的使用及其優勢

4.1 咱們單首創建XQWBStatusViewModel,管理每一條微博的數據, 其中包含如下屬性數組

/// 微博模型
var status: XQWBStatus
/// 會員圖標
var memberIcon: UIImage?
/// vip 認證類型
var vipIcon: UIImage?
/// 轉發文字
var retweetedStr: String?
/// 評論文字
var commentStr: String?
/// 點贊文字
var likeStr: String?
/// 配圖視圖大小
var pictureViewSize = CGSize()

4.2 在設置重寫的構造方法中,咱們對每一個屬性進行計算賦值函數

init(model: XQWBStatus) {
   self.status = model
   // 會員等級
   if (model.user?.mbrank)! > 0 && (model.user?.mbrank)! < 7 {
       let imageName = "common_icon_membership_level\(model.user?.mbrank ?? 1)"
       memberIcon = UIImage(named: imageName)
   }
   // 認證圖標
   switch model.user?.verified_type ?? -1 {
   case 0:
       vipIcon = UIImage(named: "avatar_vip")
   case 2, 3, 4:
       vipIcon = UIImage(named: "avatar_enterprise_vip")
   case 220:
       vipIcon = UIImage(named: "avatar_grassroot")
   default:
       break
   }

   // 設置toolbar 字符串
   retweetedStr = countStr(count: model.reposts_count, defaultStr: "轉發")
   commentStr = countStr(count: model.comments_count, defaultStr: "評論")
   likeStr = countStr(count: model.attitudes_count, defaultStr: "贊")

   // 計算配圖視圖大小
   pictureViewSize = calcPictureViewSize(count: status.pic_urls?.count)
}

4.3 在處理構造函數中有幾個子方法單獨處理工具

// 設置評論,轉發等數字格式
 private func countStr(count: Int, defaultStr: String) -> String {
    if count == 0 {
        return defaultStr
    }
    if count < 10000 {
        return count.description
    }
    return String(format: "%.02f萬", Double(count) / 10000.0)
}
// 根據配圖的數量計算配圖視圖大小
private func calcPictureViewSize(count: Int?) -> CGSize {

    if count == 0 || count == nil {
        return CGSize()
    }
    // 1.計算寬度 (common)
    // 2.計算高度
    let row = (count!-1) / 3 + 1 // 行數
    var height = OutterMargin
    height += CGFloat(row) * itemWidth
    height += CGFloat(row - 1) * InnerMargin

    return CGSize(width: ViewWidth, height: height)
}