纯代码实现Facebook News Feed(1)

最终效果图:

simulator

项目地址:github.com/Paganarchitect/facebook_newsFeed.git

第一部分搭建基本UI,用到了UICollectionView和NSLayoutConstraint的知识。看下这部分完成后:

simulator

#1 搭建基本框架,注册cell,设置collectionView数据源和代理

simulator

1.删掉storyboard,并把删掉Main Interface里的main。将ViewController改名为FeedController,subclass of UICollectionViewController。

Deployment Info
FeedController.swift

2.搭建基本框架。需说明的是,UICollectionViewFlowLayout是UICollectionViewLayout的默认形式。

AppDelegate.swift

3.设定navigation bar,navigation bar titleText及UICollectionView的颜色。

--继续在AppDelegate.swift里,添加代码,设置navigation bar和bar title text的颜色。

AppDelegate.swift

--在FeedController.swift里,将bar title text设置为“Facebook News Feed”,collectionView的背景颜色设置为浅灰。

FeedController.swift

运行一下,现在status bar的颜色还是黑色。想要把它也变成和navigationbartitle的颜色一样,怎么办?

simulator

--在Info.plist里,添加一个property--status bar based on view controller appearance,将这个布尔值设为No,这意味着application对status bar的设置高于view controller对status bar的设置。运行一下,status bar的颜色也变成了白色,哈哈。

Info.plist
simulator

4.注册collectionViewCell

--新建文件命名为FeedCell

FeedCell.swift

--回到FeedViewController.swift中,

FeedViewController.swift

5.添加数据源和代理方法,并设置垂直方向的反弹为YES

数据源和代理方法
在ViewDidLoad()里进行设置

#2 添加nameLabel和profileImageView

1.添加nameLabel和profileImageView并加约束.需要说明的是translatesAuthoresizingMaskIntoConstraints属性默认是True,这里我们设置为NO,不添加隐含constraint,这样才能让手动添加的constraint起作用。

FeedCell.swift

当然,也可以添加一个方法,使得代码看起来更简洁!这个方法有两个参数,format和views;先声明一个字典;再对views进行遍历。

FeedCell.swift

运行一下,现在是这样的

simulator

2.填充图片,拖图片进来,并添加代码

FeedCell.swift

3.修改label。这里,需要解释以下两点:

--关于numberOfLines:label默认只显示一行,通过设置numberOfLines可以改变行数。但是如果设置为0,则告诉文本不管占多少行,都显示出来。

--关于NSAttributedString富文本字符串。使用场景:设置文字样式和设置段落样式。可以分为NSAttributedString和NSMutableAttributedString两种。在使用中通过将AttributedString赋值给控件的attributedText属性来添加文字样式。有属性的控件有UILabel、UITextField和UITextView。

FeedCell.swift

#3 添加feedTextView,feedImageView和likeCommentsLabel,和dividerLineView

1.在FeedController.swift里,将cell的高度改为450;接着,修改nameLabel的约束,与superview的垂直间距为8 points

FeedCell.swift
simulator

2.添加feedTextView,并加约束

FeedCell.swift

3.添加feedImageView,并加约束。这里解释一下masksToBounds属性,它用来防止子元素大小溢出父元素。因为上面我们的contentMode设置成的是scaleAspectFill,所以这里需要将maskToBounds属性设置为true,防止图片溢出。

FeedCell.swift

4.添加likeCommentsLabel,dividerLineView。太简单,不细说。

运行一下,现在是这样的!

simulator

#4 添加button

likeButton

因为这三个button构造基本一样,偷个懒,起一个与这段代码功能相对应的名字,封装成一个新的方法。声明类的类型方法(Type Methods),在方法的关键字func前加上关键字class。

Type Methods

注意button的水平约束,每个button的宽度占superview宽度的1/3。但是VFL不能实现multiplier怎么办?可以让likeButton,commentButton的宽度是shareButton的宽度。

constraints

运行一下,现在是这样的:

simulator

#5 处理横屏布局

手动调用invalidateLayout方法以更新布局对象,此方法会强制生成新layout。(需要注意invalidateLayout与reloadData的区别,在移动,添加或者删除item的时候,使用invalidateLayout,而如果只是datasource中的数据有更新,这时需要使用reloadData

FeedViewController.swift
横屏

第一部分结束。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,246评论 4 61
  • 抓不住概念,就是说,意识不到那是个概念,随便给个译法,不给原文,叫我怎么说你好? ——又,连廊下派是个“教派”还是...
    Gottfried阅读 75评论 0 1
  • 我相信世上是有鬼神之说的 ,虽然这种“鬼压床”的现象,已经有了详细的科学解释,但“鬼压床”这种事我还是想把...
    本宫来看看阅读 3,574评论 0 6
  • 朋友送来一盒伦勃朗彩铅,迫不及待地打开,试着用新彩铅画幅画。说画就画。 铅笔画稿,在用彩铅描稿,擦去铅笔印。这次我...
    格Y调阅读 1,254评论 10 37