iOS仿微信朋友圈实现

下面讨论一下微信朋友圈的实现方式。先分析结构，和布局。

微信朋友圈，看起来很有秩序，而且滑动的时候也不卡，应用的非常好。对于微信朋友圈的样式，我们可以大致分成以下6种类型。

• 纯文字类型
• 单张图得显示
• 多张图得显示（按照九宫格排练）
• 链接类型
• 视频类型
• 广告类型

那么我们需要分析每种类型的布局有什么共同点，和不同点。

每种类型都是有一个头像和一个姓名，这个是必须的，我们可以封装到父类里。每种类型，都可以附带文字说明，也可以不带，我们也可以封装到父类里，但是这个不是必须要创建的时候，就生成的，而是根据当前有没有文字说明来生成的，所有说他应该是动态生成的，对于复用我们可以用隐藏。最好不要从父类移除。

还有就是评论，每种类型都可以评论。那么我们就要把评论封装到一起。也可以封装到父类。对于显示时间这个也是必须的我们也可以封装到父类里。

那么我们可以看到如下结构：

以一个多张图类型，我们分析一下，红框算一个cell，只有黑框位置的内容是不一样的，所以我们只要把黑框以外的分装好做成基类，其他的类型都继承基类，这样我们就能减少布局的变化，并且还能更多的复用。

那么我们用MVC的模式来分析：

• 模型

class JHSMessageModel: NSObject {var name = "";var modelType: MessageModelType!var contentText: String!init(type: MessageModelType) {super.init();modelType = type;self.configData();}func configData() -> Void {}private var _contextSize: CGSize!var contextSize: CGSize {if cOntentText== nil {return CGSize.zero;}if _contextSize != nil {return _contextSize;}_cOntextSize= contentText.textSize(size: CGSize(width: PengConfigParamter.maxWidth, height: CGFloat.greatestFiniteMagnitude), font: PengConfigParamter.textFont);return _contextSize;}var nameSize: CGSize {let size = name.textSize(size: CGSize(width: PengConfigParamter.maxWidth, height: CGFloat.greatestFiniteMagnitude), font: PengConfigParamter.textFont);return size;}var topHeight: CGFloat {let ht = (contextSize.height + 8) + nameSize.height + 12;return ht;
// let ht = contextSize.height + nameSize.height + 14;
// return ht <60 ? 60 : ht;}private var _cHeight: CGFloat = 0;var commentHeight: CGFloat {if comment == nil || comment.count == 0 {return 0;}if _cHeight != 0 {return _cHeight;}for (_,item) in comment.enumerated() {_cHeight += (item.size.height + 4)}_cHeight += 20;return _cHeight;}var rowHeight: CGFloat {return topHeight + commentHeight + 6;}var comment: [JHSCommentModel]!}

基类JHSMessageModel封装了共有的信息。姓名，类型，文字说明等属性，还有一些共有的方法。

• 纯文字类型Model

只有文字类型的cell实际上和上边这个也是一样的，但是它是为了基类使用的，所有我们还需要定义它的子类。如下：

class JHSTextModel: JHSMessageModel {}

• 单张图得显示Model

class JHSImageModel: JHSMessageModel {var urlString = "";var image: UIImage!override var topHeight: CGFloat {let ht = super.topHeight;return ht + 200;}var supHeight: CGFloat {return super.topHeight;}
}

• 多张图得显示（按照九宫格排练）Model

class JHSMutableImageModel: JHSMessageModel {var images: [UIImage]!var count = 8 {didSet{count = count > 8 ? 8: count;images.removeAll();for idx in 0...count {images.append(UIImage(named: "\(idx).jpg")!);}}}override func configData() {images = [UIImage]();for idx in 0...count {images.append(UIImage(named: "\(idx).jpg")!);}}override var topHeight: CGFloat {if images == nil {return super.topHeight;}let perWidth = (PengConfigParamter.maxWidth - 8 - 40) / 3 + 4;let row = ceil(Double(images.count) / 3.0)return super.topHeight + perWidth * CGFloat(row);}var supTopHeight: CGFloat {return super.topHeight;}var cellImageHeight: CGFloat {return topHeight - super.topHeight;}
}

• 链接类型Model

class JHSNewModel: JHSMessageModel {override var topHeight: CGFloat {return super.topHeight + 48;}var link = "链接地址";var linkTitle = "标题";var lineImage : UIImage!;}

对于model 基本的数据都已经有了，那么我们看看Model的view

先看基类的View:

class JHSGroupCell: UITableViewCell {var entity: JHSMessageModel!var leftImage: UIImageView!var nameLabel: UILabel!var contextLabel: UILabel!var tabBarView: JHSOperationView!var actionTarget: Any!var selector: Selector!fileprivate var commentView: JHSCommentItemView!var comments: [JHSCommentModel]! {didSet{configComment();}}var leftPointX: CGFloat {return leftImage.maxX + 10;}var topPointY: CGFloat {return nameLabel.maxY + 8;}var maxWidth: CGFloat {return PengConfigParamter.maxWidth}override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {super.init(style: style, reuseIdentifier: reuseIdentifier);backgroundColor = UIColor.white;selectiOnStyle= .none;leftImage = createImageView(rect: .init(x: 10, y: 10, width: 40, height: 40));leftImage.cOntentMode= .scaleAspectFill;leftImage.clipsToBounds = true;leftImage.layer.masksToBounds = true;leftImage.layer.cornerRadius = 4;leftImage.image = UIImage(named: "1.jpg");nameLabel = createLabel(rect: .init(x: leftPointX, y: 10, width: 20, height: 14), text: "姓名");nameLabel.fOnt= PengConfigParamter.textFont;nameLabel.textColor = PengConfigParamter.textColor;tabBarView = JHSOperationView(frame: .init(x: leftPointX, y: topPointY, width: PengConfigParamter.maxWidth, height: 30));addSubview(tabBarView);configSubView();}func configSubView() -> Void {}private func configComment() {if comments != nil && commentView == nil {commentView = JHSCommentItemView(frame: .init(x: leftPointX, y: nameLabel.maxY, width: maxWidth, height: 40));addSubview(commentView);}commentView?.comments = comments;commentView?.isHidden = comments == nil;}private func configContent(context: String?) -> Void {if cOntext== nil {contextLabel?.text = "";return;}if cOntextLabel== nil {cOntextLabel= createLabel(rect: .init(x: leftPointX, y: topPointY, width: maxWidth, height: 20), text: "");contextLabel.numberOfLines = 0;contextLabel.fOnt= PengConfigParamter.textFont;contextLabel.textColor = PengConfigParamter.textColor;}contextLabel.text = context;}required init?(coder aDecoder: NSCoder) {fatalError("init(coder:) has not been implemented")}func configMessage(model: JHSMessageModel) -> Void {entity = model;nameLabel.text = model.name;configContent(context: model.contentText);comments = model.comment;}func addTarget(t: Any,sel: Selector) -> Void {self.actiOnTarget= t;selector = sel;}override func layoutSubviews() {super.layoutSubviews();if entity == nil {return;}var rect = nameLabel.frame;rect.size = entity.nameSize;nameLabel.frame = rect;if let label = contextLabel {rect = label.frame;rect.size = entity.contextSize;label.frame = rect;}if let cell = self as? JHSVideoCell {guard let imageModel = entity as? JHSVideoModel else{return;}rect = cell.backImage.frame;rect.origin.y = imageModel.supHeight;cell.backImage.frame = rect;rect = tabBarView.frame;rect.origin.y = cell.backImage.maxY;tabBarView.frame = rect;cell.backImage.image = UIImage(named: "1.jpg");}else if self is JHSTextCell {var rect = tabBarView.frame;rect.origin.y = entity.topHeight;tabBarView.frame = rect;}else if let cell = self as? JHSImageCell {if let imageModel = entity as? JHSImageModel {rect = cell.backImage.frame;rect.origin.y = imageModel.supHeight;cell.backImage.frame = rect;rect = tabBarView.frame;rect.origin.y = cell.backImage.maxY;tabBarView.frame = rect;}}else if let cell = self as? JHSMutableImageCell {guard let imgs = cell.mutableImages else {return;}let perWidth = (PengConfigParamter.maxWidth - 8 - 40) / 3;for item in imgs.enumerated() {let row = item.offset / 3;let column = item.offset % 3;let drawRect = CGRect(x: column.cgFloat * (perWidth + 4) + leftPointX, y: row.cgFloat * (perWidth + 4) + cell.topHeight, width: perWidth, height: perWidth);let img = cell.getImageBy(index: item.offset, rect: drawRect);img.image = item.element;img.isHidden = false;}if imgs.count <9 {for idx in imgs.count...8 {let img = cell.getImageBy(index: idx, rect: CGRect.zero);img.isHidden = true;}}if let model = entity as? JHSMutableImageModel {var rect = tabBarView.frame;rect.origin.y = model.topHeight;tabBarView.frame = rect;}}else if let cell = self as? JHSNewCell {rect = cell.linkView.frame;rect.origin.y = entity.topHeight - 48;cell.linkView.frame = rect;rect = tabBarView.frame;rect.origin.y = entity.topHeight;tabBarView.frame = rect;}if let cView = commentView {rect = cView.frame;rect.origin.y = tabBarView.maxY;rect.size.height = entity.commentHeight;cView.frame = rect;}}
}

• 纯文字类型View

class JHSTextCell: JHSGroupCell {}

• 单张图得显示View

class JHSImageCell: JHSGroupCell {var backImage: UIImageView!override func configMessage(model: JHSMessageModel) {super.configMessage(model: model);if let cModel = model as? JHSImageModel {backImage.image = cModel.image;}}override func configSubView() {backImage = createImageView(rect: .init(x: leftPointX, y: topPointY, width: 160, height: 200));addSubview(backImage);backImage.cOntentMode= .scaleAspectFill;backImage.clipsToBounds = true;}
}

• 多张图得显示（按照九宫格排练）View

class JHSMutableImageCell: JHSGroupCell {var mutableImages: [UIImage]! {didSet{setNeedsLayout();}}var topHeight: CGFloat {if let model = entity as? JHSMutableImageModel {return model.supTopHeight;}return 0;}private var imageTag = 12345;override func configSubView() {backgroundColor = UIColor.white;}override func configMessage(model: JHSMessageModel) {super.configMessage(model: model);if let imgsModel = model as? JHSMutableImageModel {mutableImages = imgsModel.images;}}func getImageBy(index: Int,rect: CGRect) -> UIImageView {var img = viewWithTag(index + imageTag) as? UIImageView;if img == nil {img = createImageView();img?.tag = index + imageTag;img?.cOntentMode= .scaleAspectFill;img?.clipsToBounds = true;}if !rect.isNull {img?.frame = rect;}return img!;}override func addTarget(t: Any, sel: Selector) {}override func touchesBegan(_ touches: Set, with event: UIEvent?) {fetchImageIndex(touches, isEnd: false);}func fetchImageIndex(_ touches: Set,isEnd: Bool) -> Void {guard let point = touches.first?.location(in: self) else{return;}var index = -1;for idx in 0...8 {let rect = getImageBy(index: idx, rect: CGRect.null).frame;if !rect.isNull && rect.contains(point) {index = idx;break;}}if index != -1 ,let sel = selector , isEnd{let obs = actionTarget as? NSObject;obs?.perform(sel, with: [JHSCellKey.cell:self,JHSCellKey.imgIndex:index]);}}override func touchesEnded(_ touches: Set, with event: UIEvent?) {fetchImageIndex(touches, isEnd: true);}override func touchesCancelled(_ touches: Set, with event: UIEvent?) {fetchImageIndex(touches, isEnd: false);}}

• 链接类型View

class JHSNewCell: JHSGroupCell {var linkView: JHSLinkView!override func configSubView() {linkView = JHSLinkView(frame: .init(x: leftPointX, y: topPointY, width: PengConfigParamter.maxWidth, height: 48));addSubview(linkView);}override func configMessage(model: JHSMessageModel) {super.configMessage(model: model);if let lModel = model as? JHSNewModel {linkView.cOntent= lModel.linkTitle;linkView.leftImg.image = lModel.lineImage;}}override func touchesEnded(_ touches: Set, with event: UIEvent?) {guard let point = touches.first?.location(in: self) else {return;}if linkView.frame.contains(point),let sel = selector {let obj = actionTarget as? NSObject;obj?.perform(sel, with: [JHSCellKey.cell:self]);}}}

对于这样的设计我们就很好的运到实际工作共，那么我么也附上deom

demo地址链接。