Image layouts similar to Weibo

Similar to this effect, we first analyze the interface, first the top and bottom are invariant, so we use xib way to create, as follows

Then the middle of the picture content because the number of images in the middle is not sure, so we use code to create, our idea is that when the picture only = a picture when we let the width of the screen width, when I picture for more than one time we split the width of this screen, but can put up to three code as follows,

#import "PhotoView.h"

#import "Uiimageview+webcache.h"

#import "SDPhotoBrowser.h"

#define K_SCREENWIDTH ([UIScreen mainscreen].bounds.size.width)

#define K_screenheight ([UIScreen mainscreen].bounds.size.height)

@interface PhotoView () <SDPhotoBrowserDelegate>

@end

@implementation PhotoView

-(void) Setimagesurlstr: (Nsarray *) imagesurlstr

{

_imagesurlstr = Imagesurlstr;

if (Imagesurlstr.count = = 1) {

Uiimageview * ImageView = [[Uiimageview alloc] init];

imageview.userinteractionenabled = YES;

[ImageView Addgesturerecognizer:[[uitapgesturerecognizer alloc] initwithtarget:self action: @selector (tapaction:)] ;

[ImageView Sd_setimagewithurl:[nsurl Urlwithstring:imagesurlstr[0]] completed:^ (UIImage *image, Nserror *error, Sdimagecachetype CacheType, Nsurl *imageurl) {

Imageview.tag = 100;

Imageview.image = image;

Cgsize size = Cgsizemake (K_screenwidth, (K_screenwidth * image.size.height)/image.size.width);

Imageview.frame = CGRectMake (0, 0, size.width,200);

}];

Imageview.contentmode = Uiviewcontentmodescaletofill;

[Self addsubview:imageview];

}else if (Imagesurlstr.count < 4) {

for (int i=0; i<imagesurlstr.count; i++) {

Uiimageview * ImageView = [[Uiimageview alloc] Initwithframe:cgrectmake (([UIScreen mainscreen].bounds.size.width)/( Imagesurlstr.count) * I, 0, ([UIScreen mainscreen].bounds.size.width)/(Imagesurlstr.count), 200)];

imageview.userinteractionenabled = YES;

[ImageView Addgesturerecognizer:[[uitapgesturerecognizer alloc] initwithtarget:self action: @selector (tapaction:)] ;

[ImageView Sd_setimagewithurl:[nsurl urlwithstring:[imagesurlstr objectatindex:i]];

Imageview.tag = + i;

Imageview.contentmode = Uiviewcontentmodescaletofill;

[Self addsubview:imageview];

}

}else {

for (int i=0; i<imagesurlstr.count; i++) {

Uiimageview * ImageView = [[Uiimageview alloc] Initwithframe:cgrectmake ((K_SCREENWIDTH/3) * (i%3), * * (I/3), K_SCREENWI DTH/3, 150)];

imageview.userinteractionenabled = YES;

Imageview.contentmode = Uiviewcontentmodescaletofill;

[ImageView Addgesturerecognizer:[[uitapgesturerecognizer alloc] initwithtarget:self action: @selector (tapaction:)] ;

[ImageView Sd_setimagewithurl:[nsurl urlwithstring:[imagesurlstr objectatindex:i]];

Imageview.tag = + i;

[Self addsubview:imageview];

}

}

}

-(void) Tapaction: (uitapgesturerecognizer*) Tap

{

Sdphotobrowser *photobrowser = [Sdphotobrowser new];

Photobrowser.delegate = self;

Photobrowser.currentimageindex = tap.view.tag-100;

Photobrowser.imagecount = Self.imagesUrlStr.count;

Photobrowser.sourceimagescontainerview = self;

[Photobrowser show];

}

-(Nsurl *) Photobrowser: (Sdphotobrowser *) browser Highqualityimageurlforindex: (nsinteger) index

{

NSString *urlstring = Self.imagesurlstr[index];

return [Nsurl urlwithstring:urlstring];

}

-(UIImage *) Photobrowser: (Sdphotobrowser *) browser Placeholderimageforindex: (nsinteger) index

{

Uiimageview *imageview = [self viewwithtag:100 + index];

return imageview.image;

}

@end

This enables the display to be the most visible, but also prevents cell reuse and high computation.

To prevent the duplication problem caused by cell reuse, let's look at the source code of the cell first.

//

tableviewcell.m

Imitation micro bo

//

Created by Zyyt on 16/7/20.

COPYRIGHT©2016 year SJB. All rights reserved.

//

#import "TableViewCell.h"

#import "PhotoView.h"

#import "PhotoModel.h"

#import "Uiimageview+webcache.h"

#import "Uiimage+circle.h"

@interface Tableviewcell ()

Picture in the middle

@property (nonatomic,weak) PhotoView * Pictureview;

Avatar

@property (Weak, nonatomic) Iboutlet Uiimageview *iconview;

User name

@property (Weak, nonatomic) Iboutlet UILabel *usernamelabel;

Time

@property (Weak, nonatomic) Iboutlet UILabel *creatdatelabel;

Text content

@property (Weak, nonatomic) Iboutlet UILabel *contenttextlabel;

Top

@property (Weak, nonatomic) Iboutlet UIButton *praisebtn;

Step

@property (Weak, nonatomic) Iboutlet UIButton *tiresomebtn;

Share

@property (Weak, nonatomic) Iboutlet UIButton *sharebtn;

Collection

@property (Weak, nonatomic) Iboutlet UIButton *collectionbtn;

@end

@implementation Tableviewcell

#pragma mark-Lazy loading

-(PhotoView *) Pictureview

{

if (_pictureview = = nil) {

PhotoView * view = [[PhotoView alloc] init];

[Self.contentview Addsubview:view];

Self.pictureview = view;

}

return _pictureview;

}

Assign value

-(void) Setphoto: (Photomodel *) photo

{

_photo = photo;

Self.userNameLabel.text = Photo.username;

Self.creatDateLabel.text = Photo.createdatestr;

Self.contentTextLabel.text = Photo.message;

[Self.iconview sd_setimagewithurl:[nsurl urlwithstring:photo.photo]completed:^ (UIImage *image, NSError *error, Sdimagecachetype CacheType, Nsurl *imageurl) {

Self.iconView.image = [Image circleimage];

}];

/*

Sends to all object in the array the message identified by a given selector, starting with the first object and Continuin G through the array to the last object.

A selector that identifies the message to send to the objects in the array. The method must not take any arguments, and must not has the side effect of modifying of the receiving array.

Parameters

Aselector

A selector that identifies the message to send to the objects in the array. The method must not take any arguments, and must not has the side effect of modifying of the receiving array.

*/

if (Photo.messageSmallPics.count > 0) {

Clear the original child controls

[Self.pictureView.subviews makeobjectsperformselector: @selector (Removefromsuperview)];

Set frame

Self.pictureView.frame = Photo.picturef;

SELF.PICTUREVIEW.IMAGESURLSTR = Photo.messagesmallpics;

Show Pictureview when you have a picture

Self.pictureView.hidden = NO;

}else{

Hide Pictureview When there is no picture

Self.pictureView.hidden = YES;

}

}

-(Ibaction) Praiseaction: (uibutton*) Sender {

NSLog (@ "%s", __func__);

}

-(Ibaction) Tiresomeaction: (uibutton*) Sender {

NSLog (@ "%s", __func__);

}

-(Ibaction) ShareAction: (UIButton *) Sender {

NSLog (@ "%s", __func__);

}

-(Ibaction) Collectionaction: (ID) Sender {

NSLog (@ "%s", __func__);

}

@end

[Self.pictureView.subviews makeobjectsperformselector: @selector (Removefromsuperview)]; This code is clear before each assignment of the Pictureview child control, if there are other types of controls in the Picturevie we want to judge, because there are no other controls, we have directly cleared all the child controls.

Let's take a look at the code to calculate the cell height, for the convenience of writing the code, we put the cell height in the model, the model Code is written as follows,

#import <Foundation/Foundation.h>

#import <UIKit/UIKit.h>

@interface Photomodel:nsobject

@property (nonatomic,copy) NSString * USERNAME;

@property (nonatomic,copy) nsstring * photo;

@property (nonatomic,copy) nsstring * message;

@property (nonatomic,copy) NSString * CREATEDATESTR;

@property (nonatomic,copy) nsarray * messagesmallpics;

Auxiliary features

@property (nonatomic,assign) cgfloat cellheight;

@property (nonatomic,assign,readonly) CGRect picturef;

@end

------------------------------------------Split Line-------------------------------------

//

photomodel.m

Imitation micro bo

//

Created by Zyyt on 16/7/20.

COPYRIGHT©2016 year SJB. All rights reserved.

//

#import "PhotoModel.h"

#define Cellmargin 10

@implementation Photomodel

-(void) SetValue: (ID) value Forundefinedkey: (NSString *) key

{

}

-(CGFloat) cellheight

{

if (_cellheight = = 0) {

CGFloat top = + cellmargin;

CGFloat contextheight = [Self.message boundingrectwithsize:cgsizemake ([UIScreen mainscreen].bounds.size.width-20, maxfloat) Options:nsstringdrawinguseslinefragmentorigin Attributes:@{nsfontattributename:[uifont systemFontOfSize : +]} context:nil].size.height;

CGFloat middleheight = Cellmargin;

CGFloat imagesheight = 0;

if (_messagesmallpics.count = = 0) {

}else{

if (_messagesmallpics.count = = 1) {

Imagesheight + = 200;

_picturef = CGRectMake (0, middleheight + contextheight + top, [UIScreen mainscreen].bounds.size.width, ImagesHeight);

}else if (_messagesmallpics.count < 4) {

Imagesheight + = 200;

_picturef = CGRectMake (0, middleheight + contextheight + top, [UIScreen mainscreen].bounds.size.width, ImagesHeight);

}else if (_messagesmallpics.count < 7) {

Imagesheight + = 300;

_picturef = CGRectMake (0, middleheight + contextheight + top, [UIScreen mainscreen].bounds.size.width, ImagesHeight);

}else{

Imagesheight + = 450;

_picturef = CGRectMake (0, middleheight + contextheight + top, [UIScreen mainscreen].bounds.size.width, ImagesHeight);

}

}

CGFloat bottomtoolbarheight = 40;

_cellheight = top + contextheight + middleheight + imagesheight + bottomtoolbarheight;

}

return _cellheight;

}

@end

----------------------------Split Line-------------------------

As shown in the code above, we can see that we got the cell's height and pictureview frame directly in the model.

This basically achieves the most effect, the following is the controller's code

//

Viewcontroller.m

Imitation micro bo

//

Created by Zyyt on 16/7/20.

COPYRIGHT©2016 year SJB. All rights reserved.

//

#import "ViewController.h"

#import "TableViewCell.h"

#import "PhotoModel.h"

@interface Viewcontroller () <UITableViewDataSource,UITableViewDelegate>

@property (Nonatomic,strong) UITableView * TableView;

@property (Nonatomic,strong) nsmutablearray * datasouce;

@end

Static NSString * Const CELLID = @ "Cell";

@implementation Viewcontroller

-(Nsmutablearray *) datasouce

{

if (_datasouce = = nil) {

_datasouce = [Nsmutablearray array];

}

return _datasouce;

}

-(void) Viewdidload {

[Super Viewdidload];

Additional setup after loading the view, typically from a nib.

[Self setuptableview];

[Self requestData];

}

-(void) RequestData

{

Load the pickup data as a string

NSString * str = [[NSString alloc] initwithcontentsoffile:[[nsbundle Mainbundle] pathforresource:@ "Data" ofType:@ "JSON" ] Encoding:nsutf8stringencoding Error:nil];

Convert a string into a binary stream

NSData * data = [[NSData alloc] initwithdata:[str datausingencoding:nsutf8stringencoding]];

Parsing a binary stream

Nsdictionary * dic = [nsjsonserialization jsonobjectwithdata:data options:nsjsonreadingmutableleaves Error:nil];

NSLog (@ "%@",);

Convert a dictionary into a model

for (int i=0; i<[dic[@ "Data"][@ "Rows"] count]; i++) {

Nsdictionary * dict =dic[@ "data"][@ "Rows"][i];

Photomodel * model = [[Photomodel alloc] init];

[Model Setvaluesforkeyswithdictionary:dict];

[Self.datasouce Addobject:model];

}

[Self.datasouce AddObjectsFromArray:self.dataSouce];

[Self.datasouce AddObjectsFromArray:self.dataSouce];

[Self.datasouce AddObjectsFromArray:self.dataSouce];

[Self.tableview Reloaddata];

}

-(void) Setuptableview

{

Self.tableview = [[UITableView alloc] InitWithFrame:self.view.bounds style:uitableviewstylegrouped];

Self.tableView.dataSource = self;

Self.tableView.delegate = self;

[Self.tableview registernib:[uinib Nibwithnibname:nsstringfromclass ([Tableviewcell class]) Bundle:nil] Forcellreuseidentifier:cellid];

[Self.view AddSubview:self.tableView];

}

-(Nsinteger) Numberofsectionsintableview: (UITableView *) TableView

{

return 1;

}

-(Nsinteger) TableView: (UITableView *) TableView numberofrowsinsection: (nsinteger) Section

{

return self.dataSouce.count;

}

-(uitableviewcell*) TableView: (UITableView *) TableView Cellforrowatindexpath: (Nsindexpath *) Indexpath

{

Tableviewcell * cell = [TableView dequeuereusablecellwithidentifier:cellid];

Cell.photo = [Self.datasouce objectAtIndex:indexPath.row];

return cell;

}

-(CGFloat) TableView: (UITableView *) TableView Heightforrowatindexpath: (Nsindexpath *) Indexpath

{

Photomodel * model = [Self.datasouce ObjectAtIndex:indexPath.row];

return model.cellheight;

}

@end

To this all integration

Image layouts similar to Weibo