美文网首页
5 首页布局2

5 首页布局2

作者: DavidFeng_swift | 来源:发表于2015-11-16 23:40 被阅读0次
  • 配图
    字典数组


    屏幕快照 2015-11-16 下午8.37.59.png

    在status模型中加入配图属性
    var pic_urls : [[string : string ]]?
    -添加collectionView
    构造函数的调用是底层自动转发的 init()->initWithFrame->initWithFrame:layout

  • 计算配图视图大小
    首先拿到flowlayout再从flowlayout.item中获得itemSize设置大小

    private func calcViewSize() -> CGSize {
      // 1. 准备工作
      let layout = collectionViewLayout as! UICollectionViewFlowLayout
      // 设置默认大小
      layout.itemSize = CGSize(width: HMStatusPictureItemWidth, height: HMStatusPictureItemWidth)
      
      // 2. 根据图片数量来计算大小
      let count = statusViewModel?.thumbnailURLs?.count ?? 0
      
      // 1> 没有图
      if count == 0 {
          return CGSizeZero
      }
      
      // 2> 1张图
      if count == 1 {
          // TODO: - 临时返回一个大小
          let size = CGSize(width: 150, height: 150)
          
          layout.itemSize = size
          return size
      }
      
      // 3> 4张图 2 * 2 
      if count == 4 {
          let w = 2 * HMStatusPictureItemWidth + HMStatusPictureItemMargin
          
          return CGSize(width: w, height: w)
      }
      
      // 4> 其他
      /**
          2, 3,
          5, 6,
          7, 8, 9
      */
      // 计算显示图片的行数
      let row = CGFloat((count - 1) / Int(HMStatusPictureMaxCount) + 1)
      let h = row * HMStatusPictureItemWidth + (row - 1) * HMStatusCellMargin
      let w = HMStatusPictureMaxWidth
      
      return CGSize(width: w, height: h)
      }
    
Snip20150907_23.png
  • 设置图片

  • 计算行高
    在statuscell中添加返回行高的方法

    /// - returns: 计算的行高
    func rowHeight(viewModel: StatusViewModel) -> CGFloat {
      // 1. 设置视图模型 - 会调用 模型的 didSet
      statusViewModel = viewModel
      
      // 2. 有了内容之后更新约束
      layoutIfNeeded()
      
      // 3. 返回底部视图的最大高度
      return CGRectGetMaxY(bottomView.frame)
    }
    

在homeview控制器行高代理方法中设置行高

  override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
    
    // 0. 获得模型
    let viewModel = statusListViewModel.statuses[indexPath.row] as! StatusViewModel
    
    // 1. 获得 cell
    let cell = tableView.dequeueReusableCellWithIdentifier(HMStatusNormalCellID) as! StatusCell
    
    // 2. 返回行高
    return cell.rowHeight(viewModel)
  }
  • 行高代理方法介绍

  • 缓存行高
    在statusViewModel中定义行高
    在homeViewController控制器 行高代理方法中记录行高
    func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {

      // 0. 获得模型
      let viewModel = statusListViewModel.statuses[indexPath.row] as! StatusViewModel
      
      // 1. 判断视图模型的行高是否为0,如果不为0,表示行高已经缓存
      if viewModel.rowHeight > 0 {
          printLog("返回缓存行高")
          return viewModel.rowHeight
      }
      
      // 2. 获得 cell,不能使用 indexPath 的方法,否则会出现死循环
      let cell = tableView.dequeueReusableCellWithIdentifier(HMStatusForwardCellID) as! StatusForwardCell
      
      // 3. 记录行高
      viewModel.rowHeight = cell.rowHeight(viewModel)
      
      return viewModel.rowHeight
    

    }

  • 转发模型
    在status模型中定义转发属性
    var retweeted_status : status ?


    Snip20150907_44.png
  • 转发界面布局
    继承原创微博 添加、重写

  • 调度组演练
    学了多线程 但是基本没用过 因为第三方框架都封装好了 加载网络用AFN 加载图片SDWebImage 都是在异步加载网络 主线程回调
    调度组目的:监听一组异步任务完成

相关文章

  • 5 首页布局2

    配图字典数组屏幕快照 2015-11-16 下午8.37.59.png在status模型中加入配图属性var pi...

  • 网页设计作业成品

    1、有5-6个页面组成一个简单的网站 2、首页命名成index.html 3、网页布局合理,使用表格、层等布局方法...

  • Vue后台管理系统2

    今日目标 1.实现后台首页的基本布局2.实现左侧菜单栏3.实现用户列表展示4.实现添加用户 1.后台首页基本布局 ...

  • 仿网易新闻首页UI布局

    title : 仿网易新闻首页UI布局category : UI 仿网易新闻首页UI布局 标签(空格分隔): UI...

  • HTML5入门 ——首页布局

    本人新手入门,对于前端设计还处于零基础阶段,没有经过专业培训,纯属无聊从慕课网中学习。如本文写的有错误,请...

  • Android开发(10)——手机号验证登录

    本节内容1.EditText简介2.Button简介3.Bomb三方库提供短信验证服务4.首页布局5.实现手机号自...

  • UICollectionView好强大啊啊啊

    以前一直习惯于用UITableView来布局首页,这次首页用UICollectionView布局觉得超好用,很棒,...

  • 表严肃极简博客开发

    0x01 总体布局 0x02 首页布局开发代码 html布局代码: CSS样式代码: 效果图: 更改版首页导航: ...

  • ViewPager+FragmentPageAdapter实现可

    首先创建首页布局: 底部栏布局: 主界面的Activity:

  • 首页运营攻略(三) - 首页运营技巧

    首页运营技巧 1. 首页布局策略 1)尊重用户已有习惯。尽量和主流竞品保持类似风格布局。首页不是做大创新的地方。我...

网友评论

      本文标题:5 首页布局2

      本文链接:https://www.haomeiwen.com/subject/xowkhttx.html