使用FDTemplateLayout框架打造个性App

效果展示

project下载地址

进入构建结构

首先我们新建一个project

接下来我们拖进来一个Table View Controller，将Storyboard Entry Point指向我们的Table View Controller。

原来的ViewController就能够删除了。

效果如图所看到的

选中Table View Controller，点击上面菜单条中Editor->Embed in->Navigation Controller

主要的工作我们都做完了。能够讲project中无用的东西都能够删除了，方便我们进行编写东西

主题（代码编写）

在这里我进行代码的编写，讲述主要部分，后面会把完整的项目给出

构建LDEntity用来初始化字典，进行Json数据的解析

LDEntity.h

#import <Foundation/Foundation.h>

@interface FDFeedEntity : NSObject

- (instancetype)initWithDictionary:(NSDictionary *)dictionary;

@property (nonatomic, copy) NSString *title;

@property (nonatomic, copy) NSString *content;

@property (nonatomic, copy) NSString *username;

@property (nonatomic, copy) NSString *time;

@property (nonatomic, copy) NSString *imageName;

@end

-(instancetype)initWithDictionary:(NSDictionary *)dictionary方法的详细实现，返回本身类型

LDEntity.m

#import "FDFeedEntity.h"

@implementation FDFeedEntity

- (instancetype)initWithDictionary:(NSDictionary *)dictionary

{

    self = super.init;

    if (self) {

        self.title = dictionary[@"title"];

        self.content = dictionary[@"content"];

        self.username = dictionary[@"username"];

        self.time = dictionary[@"time"];

        self.imageName = dictionary[@"imageName"];

    }

    return self;

}

@end

以上代码的功能主要是为了解析JSON数据

构建我们的Main.storyboard

选中Table View更改Style为Grouped

设计出以下样式，而且使用 auto layout进行约束

接下来编写cell

新建LDCell 继承 UITableViewCell

将Main.storyboard中TableView中的Cell的Identifier设置为LDCell，而且关联LDCell

LDCell.h

构建一个LDEntity对象解析数据

#import <UIKit/UIKit.h>

#import "LDEntity.h"

@interface LDCell : UITableViewCell

@property(nonatomic,strong)LDEntity *entity;

@end

将刚才的全部控件与LDCell.m关联

在LDCell.m中构建entity的set方法,还有须要注意的是假设你没有使用auto layout,你须要重写约束方法

LDCell.m

#import "LDCell.h"

@interface LDCell ()

@property (weak, nonatomic) IBOutlet UILabel *titleLabel;

@property (weak, nonatomic) IBOutlet UILabel *contentLabel;

@property (weak, nonatomic) IBOutlet UIImageView *contentImageView;

@property (weak, nonatomic) IBOutlet UILabel *usernameLabel;

@property (weak, nonatomic) IBOutlet UILabel *timeLabel;

@end

@implementation LDCell

- (void)awakeFromNib {

    // 修复IOS7中的BUG- 初始化 constraints warning

    self.contentView.bounds = [UIScreen mainScreen].bounds;

}

//关联控件进行数据显示

-(void)setEntity:(LDEntity *)entity{

    _entity = entity;

    self.titleLabel.text = entity.title;

    self.contentLabel.text = entity.content;

    self.contentImageView.image = entity.imageName.length > 0 ?

[UIImage imageNamed:entity.imageName] : nil;

    self.usernameLabel.text = entity.username;

    self.timeLabel.text = entity.time;

}

#if 0

// 假设没有使用 auto layout, 请重写这种方法

- (CGSize)sizeThatFits:(CGSize)size

{

    CGFloat totalHeight = 0;

    totalHeight += [self.titleLabel sizeThatFits:size].height;

    totalHeight += [self.contentLabel sizeThatFits:size].height;

    totalHeight += [self.contentImageView sizeThatFits:size].height;

    totalHeight += [self.usernameLabel sizeThatFits:size].height;

    totalHeight += 40; // margins

    return CGSizeMake(size.width, totalHeight);

}

#endif

@end

開始编写我们最重要的类LDViewController.在编写这个类之前。我们须要使用FDTemplateLayout

，而且将TableViewController与LDViewController进行关联

LDViewController.h

#import <UIKit/UIKit.h>

@interface FDFeedViewController : UITableViewController

@end

TableView的使用有不明确的能够去学习下，这里不做解释了。凝视中给出了重点的地方解说，设置data source以及设置Delegate在程序中做出区分

LDViewController.m



#import "LDViewController.h"

#import "UITableView+FDTemplateLayoutCell.h"

#import "LDEntity.h"

#import "LDCell.h"

@interface LDViewController ()<UIActionSheetDelegate>

@property (nonatomic, copy) NSArray *prototypeEntitiesFromJSON;

@property (nonatomic, strong) NSMutableArray *feedEntitySections; // 2d array

@property (nonatomic, assign) BOOL cellHeightCacheEnabled;

@end

@implementation LDViewController

- (void)viewDidLoad {

    [super viewDidLoad];

    self.tableView.estimatedRowHeight = 200;

    self.tableView.fd_debugLogEnabled = YES;

    self.cellHeightCacheEnabled = YES;

    [self buildTestDataThen:^{

        self.feedEntitySections = @[].mutableCopy;

        [self.feedEntitySections addObject:self.prototypeEntitiesFromJSON.mutableCopy];

        [self.tableView reloadData];

    }];

}

- (void)buildTestDataThen:(void (^)(void))then

{

    // 模拟一个异步请求

    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{

        // 读取数据从 `data.json`

        NSString *dataFilePath = [[NSBundle mainBundle] pathForResource:@"data" ofType:@"json"];

        NSData *data = [NSData dataWithContentsOfFile:dataFilePath];

        NSDictionary *rootDict = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingAllowFragments error:nil];

        NSArray *feedDicts = rootDict[@"feed"];

        // 讲数据转化为 `LDEntity`

        NSMutableArray *entities = @[].mutableCopy;

        [feedDicts enumerateObjectsUsingBlock:^(id obj, NSUInteger idx, BOOL *stop) {

            [entities addObject:[[LDEntity alloc] initWithDictionary:obj]];

        }];

        self.prototypeEntitiesFromJSON = entities;

        // 重返

        dispatch_async(dispatch_get_main_queue(), ^{

            !then ?: then();

        });

    });

}

//设置数据源

#pragma mark - Table view data source

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView

{

    return self.feedEntitySections.count;

}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section

{

    return [self.feedEntitySections[section] count];

}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

{

    //LDCell为Main.storyboard中的cell控件

    LDCell *cell = [tableView dequeueReusableCellWithIdentifier:@"LDCell" forIndexPath:indexPath];

    [self configureCell:cell atIndexPath:indexPath];

    return cell;

}

- (void)configureCell:(LDCell *)cell atIndexPath:(NSIndexPath *)indexPath

{

    cell.fd_enforceFrameLayout = NO; // Enable to use "-sizeThatFits:"

    if (indexPath.row % 2 == 0) {

        cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;

    } else {

        cell.accessoryType = UITableViewCellAccessoryCheckmark;

    }

    cell.entity = self.feedEntitySections[indexPath.section][indexPath.row];

}

//设置托付

#pragma mark - UITableViewDelegate

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

{

    if (self.cellHeightCacheEnabled) {

        //LDCell为Main.storyboard中的cell控件

        return [tableView fd_heightForCellWithIdentifier:@"LDCell" cacheByIndexPath:indexPath configuration:^(LDCell *cell) {

            [self configureCell:cell atIndexPath:indexPath];

        }];

    } else {

        return [tableView fd_heightForCellWithIdentifier:@"LDCell" configuration:^(LDCell *cell) {

            [self configureCell:cell atIndexPath:indexPath];

        }];

    }

}

- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath

{

    if (editingStyle == UITableViewCellEditingStyleDelete) {

        NSMutableArray *mutableEntities = self.feedEntitySections[indexPath.section];

        [mutableEntities removeObjectAtIndex:indexPath.row];

        [self.tableView deleteRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationAutomatic];

    }

}

@end

假设你想有自己的cell,你能够这么做:



#import "UITableView+FDTemplateLayoutCell.h"

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

{

    return [tableView fd_heightForCellWithIdentifier:@"reuse identifer" configuration:^(id cell) {

        // 配置此Cell(单元格)的数据, 同你在"-tableView:cellForRowAtIndexPath:"做了什么一样

        // 像这样:

        //    cell.entity = self.feedEntities[indexPath.row];

    }];

}

以下制作我们的最后一个功能就是下拉刷新操作

我们使用UITableViewController自带的UIRefreshControl

在LDViewController.m中加入此方法，而且与UIRefreshControl关联

//又一次载入数据

dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{

        [self.feedEntitySections removeAllObjects];

        [self.feedEntitySections addObject:self.prototypeEntitiesFromJSON.mutableCopy];

        [self.tableView reloadData];

        [sender endRefreshing];

    });

效果例如以下：

巴特西