如何实现简单的团购App的UI设计(1)

　　　　　　　　　　　　　　　　

　　如上图所示的UI界面其实实现的方式有很多中，但是需要清楚的是，这是通过自定义的Cell来实现的，因为IOS7的新特性也没有使其Cell能满足所有的需要。

　　相比较于UITableViewCell的高度不同的情况，这个UI是比较简单的东西，可以通过xib文件来定义每一行的样式。定义的样式如下：

　　　　　　　　　　　　　　　　

　　分析目标样式得出的结论是，我们需要一个UIImageView来存放团购需要的图片展示，其他的名称、价格和购买人数可以通过三个Lable实现，同时为了应用的可扩展和数据处理(加载xib、通过模型数据进行xib每个控件的赋值操作等)的封装和减少控制器的负载创建一个与xib名称相同的类，显然的为了通过模型来进行数据的传递封装处理操作，需要为这个类定义一个内置的模型对象，而模型类的声明则只采用@class  EbuyTg;因为这里只是用到了类声明并不不要import，这样也提高了部分的性能。当然需要添加一个类方法，以方便控制器快速的创建cell，这四个控件都需要成为该类的属性.h文件定义为：

#import <UIKit/UIKit.h>

//由于在这里需要的就是一个类的声明所以直接使用class关键字

@classEbuyTg;

@interface EbuyTgCell : UITableViewCell

/** 通过一个tableView 来创建一个自定义的cell */

+(instancetype) cellWithTableView:(UITableView *)tableView;

//为了能够进行数据的填装，所以需要拥有模型

@property(nonatomic,strong) EbuyTg *tg;

@end

　　因为IOS是一个对性能要求极其严格的系统，所以想要做出真正用户体验高的App需要时刻都在考虑性能的问题，这里的话我们在实现定义的　　　　cellWithTableView:方法时就考虑到了这一点，至于这里内存问题的分析就不做了，我们直接给出解决方式：

    //在这里为了实现tableView的高效性，所以需要进行内存的优化。因此使用cell的

    //缓存池的方式

    //1定义一个放进缓存池的对象的ID,定义成静态的，因为只需要定义一次

    static NSString *ID = @"tg";

    //如果在池子中根据id找到了对应类型的对象了，那么就将其取出来，并进行数据的更新添加到view中

    EbuyTgCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];

    //如果没有就重新创建

    if (cell == nil) {

        cell = [[[NSBundlemainBundle] loadNibNamed:@"EbuyTgCell"owner: niloptions:nil] lastObject];

    }

    return cell;

　　作用原理就是，当用户进行划屏操作的时候，这时候进入用户可视界面的cell就要发生改变，现在做法是，使用了tableView对象的缓冲池的原理，为每一个　　创建的cell都绑定一个id这个id其实就是一个类的标识，是一种cell类型的区分，当需要创建新的cell的时候，会调用[tableView 　　　　　　dequeueReusableCellWithIdentifier:ID];去池子中查找是否有这种id的cell对象存在，如果存在就将其取出，然后利用这个类的模型对象属性的set方法来重　　新设定这个取出的对象的属性，这样，不论用户如何操作，内存中存在的这个类型的cell的数量都是固定的，所以一般不会达到内存警告的位置。

　　根据模型对象来对控件进行赋值的操作放在模型对象这个属性的重写的set方法中。

　　因为这些cell的规格都是一样的所以可以直接设定放在控制器的viewDidLoad方法中，由于需要的是大量的数据，所以是放在plist文件中的并且进行懒加载

　　@property (weak, nonatomic) IBOutletUITableView *tableView;

　　//由于需要加载大量的数据所以需要为其添加一个数组用于存储tg

　　@property(nonatomic,strong) NSMutableArray *tgs;

　　

/** 数据的懒加载 */

-(NSMutableArray *)tgs

{

    if (_tgs == nil) {

        //获得plist 的全路径

        NSString *path = [[NSBundlemainBundle] pathForResource:@"tgs.plist"ofType:nil];

        

        NSArray *dictArray = [NSArray arrayWithContentsOfFile:path];

        NSMutableArray *tgArray = [NSMutableArrayarray];

        

        for (NSDictionary *dict in dictArray) {

            EbuyTg *tg = [EbuyTg tgWithDict:dict];

            

            [tgArray addObject:tg];

        }

        _tgs = tgArray;

        

        

    }

    return _tgs;

}

　　还有最为重要的一步，一定要让控制器作为数据源，并且让数据源遵循数据源协议：

　　控制器成为数据源有两种实现方式：1是直接将tableView的datasource的连线拖给控制器

　　　　　　　　　　　　　　　　　　2是在viewDidLoad中书写代码：self.tableView.datasource = self;

　　实现的协议是 UITableViewDataSource

　　最后的一步是实现数据源的方法

　　

#pragma mark -实现数据源的方法

/** 规定tableView共有多少组数据，如果只有一组可以省略 */

-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView

{

    return 1;

}

/**  对应的section组一共有多少行数据 */

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

{

    returnself.tgs.count;

}

/** 针对对应的某组的某一行返回对应的cell */

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

{

    EbuyTgCell *cell = [EbuyTgCell cellWithTableView:tableView];

    cell.tg = self.tgs[indexPath.row];

    return cell;

}

 

　　完成上述的步骤之后就可以做到最简答的UI界面的实现了，当然还有很多地方可以完善，而且还有功能的实现，未完待续了。

　　注：需要的图片资源和plist文件都可以从网上获取。