码迷,mamicode.com
首页 > 移动开发 > 详细

(素材源码)猫猫学IOS(十七)UI之纯代码自定义Cell实现新浪微博UI

时间:2015-04-10 11:28:01      阅读:271      评论:0      收藏:0      [点我收藏+]

标签:ui   自定义   ios   控件   cell   

猫猫分享,必须精品

素材代码地址:http://download.csdn.net/detail/u013357243/8580249
原文地址:http://blog.csdn.net/u013357243?viewmode=contents

先看效果图

技术分享

技术分享

技术分享


编程思路

代码创建Cell的步骤

1> 创建自定义Cell,继承自UITableViewCell
2> 根据需求,确定控件,并定义属性
3> 用getter方法完成控件的实例化,只创建并添加到contentView,不处理位置
4> 定义一个模型属性,通过setter方法,设置cell的显示

昵称正文字符串的位置算法

设置大小由文字的长度决定
用字符串方法:[@"" boundingRectWithSize:(CGSize) options:(NSStringDrawingOptions) attributes:(NSDictionary *) context:(NSStringDrawingContext *)]

//boundingRectWithSize计算给定文字字符串所占的区域,返回是一个x,y为0的CGRect
//    如果要计算多行的准确高度需要传入
//        options:NSStringDrawingUsesLineFragmentOrigin

//attribbutes:dict 用于指定字体的相关属性的字典。UIKit框架的第一个头文件ps 这个头文件不记很难找
//    context :nil
#define kNameFont [UIFont systemFontOfSize:14]

    NSDictionary *nameDict = @{NSFontAttributeName:kNameFont};
    CGRect nameFrame = [self.status.name boundingRectWithSize:CGSizeMake(MAXFLOAT, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:nameDict context:nil];

计算行高的方法

要用到代理方法的:

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

计算行高的方法,会在加载表格数据时,有多少行计算多少次 contentSize

 问题:此方法执行的时候,cell还没有被实例化!
 但是:行高计算是在实例化cell时,通过设置status属性,计算=》有了status模型,就可以知道行高  !

 问题:如何在cell实例化之前,获得行高?
 解决方法:通过status可以计算得到行高! = 》再建立一个模型,专门计算所有控件的位置

警告:原形单元格必须又一个可重用标示符的解决

警告:file:///Users/apple/Desktop/%E5%AD%A6%E4%B9%A0/%E4%BA%8C%E6%9C%9F%E5%AD%A6%E4%B9%A0/Day07/%E6%96%B0%E6%B5%AA%E5%BE%AE%E5%8D%9AUI/%E6%96%B0%E6%B5%AA%E5%BE%AE%E5%8D%9AUI/Base.lproj/Main.storyboard: warning: Unsupported Configuration: Prototype table cells must have reuse identifiers
警告:原形单元格必须又一个可重用标示符
解决办法是在Cell中的Identfier加入可重用标示符
技术分享

然后一定要关联cell的class
技术分享

——这两部可以用一行代码来代替

//为tableView注册可重用单元格
    [self.tableView registerClass:[NYStatusCell class] forCellReuseIdentifier:ID];

这时候我们注释

//    if (cell == nil) {
//        cell = [[NYStatusCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];
//    }

也可以运行了

    在Storyboard中指定了可重用标示符,同时指定了Cell的类是NYStatusCell,系统会为tableView注册一个原形cell,专门用来做可重用单元格,一旦缓冲区不存在可重用单元格,系统会使用原形Cell新实例化一个Cell供程序使用!
因此如果在Storyb中,注册了原形Cell,就不需要做 cell == nil 的判断了

注意:这些在iOS6之后才有的。

代码学习

自定义cell纯代码写NYStatusCell

//ps:新建iOS交流学习群:304570962
可以加猫猫QQ:1764541256 或则微信znycat
让我们一起努力学习吧。
原文:http://blog.csdn.net/u013357243?viewmode=contents
//  NYStatusCell.m
//  新浪微博UI
//
//  Created by apple on 15-4-9.
//  Copyright (c) 2015年 znycat. All rights reserved.
//

#import "NYStatusCell.h"
#import "NYStatus.h"
#import "NYStatusFrame.h"


/**姓名字体*/
#define kNameFont [UIFont systemFontOfSize:14]
/**正文字体*/
#define kTextFont [UIFont systemFontOfSize:16]
@interface NYStatusCell()
//1>创建自定iyiCell,继承自UITableViewCell
//2>根据需求,确定控件,并定义属性。
@property (nonatomic, strong) UIImageView *iconView;
@property (nonatomic, strong) UILabel *nameView;
@property (nonatomic, strong) UIImageView *vipView;
@property (nonatomic, strong) UILabel *textView;
@property (nonatomic, strong) UIImageView *pictureView;

@end

@implementation NYStatusCell

//3>用get方法完成控件的实例化,只创建并添加到contentView,不处理位置。
-(UIImageView *)iconView
{
    if (_iconView == nil) {
        _iconView = [[UIImageView alloc] init];
        [self.contentView addSubview:_iconView];
    }
    return _iconView;
}

-(UILabel *)nameView
{
    if (_nameView == nil) {
        _nameView = [[UILabel alloc] init];
        //默认字体是17号,改成kNameFont
        _nameView.font = kNameFont;
        [self.contentView addSubview:_nameView];
    }
    return _nameView;
}

-(UIImageView *)vipView
{
    if (_vipView == nil) {
        _vipView = [[UIImageView alloc] init];
        [self.contentView addSubview:_vipView];
    }
    return _vipView;
}

-(UILabel *)textView
{
    if (_textView == nil) {
        _textView = [[UILabel alloc] init];

        _textView.font = kTextFont;
        _textView.numberOfLines = 0;//让他可以换行
        [self.contentView addSubview:_textView];
    }
    return _textView;
}

-(UIImageView *)pictureView
{
    if (_pictureView == nil) {
        _pictureView = [[UIImageView alloc] init];
        [self.contentView addSubview:_pictureView];
    }
    return _pictureView;
}



-(void)setStatusFrame:(NYStatusFrame *)statusFrame
{
    _statusFrame = statusFrame;
    //1>设置数据
    [self settingData];

    //2>设置位置
    [self settingFrame];

}

/**设置数据*/
-(void)settingData
{
    NYStatus *status = self.statusFrame.status;
    //头像
    self.iconView.image = [UIImage imageNamed:status.icon];
    //姓名
    self.nameView.text = status.name;
    //vip
    if (status.vip) {
        self.vipView.image = [UIImage imageNamed:@"vip"];
    }
    //内容正文
    self.textView.text = status.text;
    //图片可选参数:
    if (status.picture.length > 0) {
        self.pictureView.hidden = YES;
        self.pictureView.image = [UIImage imageNamed:status.picture];
    }
    self.pictureView.hidden = NO;
}

/**设置位置*/
-(void)settingFrame
{


    //1.头像
    self.iconView.frame = self.statusFrame.iconF;

    //2,姓名大小由文字的长度决定
//boundingRectWithSize计算给定文字字符串所占的区域,返回是一个x,y为0的CGRect;w,h是计算好的宽高
//    如果要计算多行的准确高度需要传入
//        options:NSStringDrawingUsesLineFragmentOrigin

//attribbutes:dict 用于指定字体的相关属性的字典。UIKit框架的第一个头文件ps 这个头文件不记很难找
//    context :nil


    self.nameView.frame = self.statusFrame.nameF;

    //3,vip图片
    self.vipView.frame = self.statusFrame.vipF;

    //4,正文
    self.textView.frame = self.statusFrame.textF;

    //5,图片
    self.pictureView.frame = self.statusFrame.pictureF;

}



@end

类结构

这个小项目主要由这些类组成
技术分享

MVC各自负责各自的东西
Model有两个模型,一个是Status主要负责所有数据
Status中有

@property (nonatomic, copy)NSString *text;
@property (nonatomic, copy)NSString *icon;
@property (nonatomic, copy)NSString *name;
@property (nonatomic, assign)BOOL vip;
@property (nonatomic, copy) NSString *picture;

这些属性主要包括头像,昵称,vip图标,正文,图片
StatusFrame模型主要负责存放每一个组件在cell所要存放的位置

//提高安全性能:+readonly
@property (nonatomic, assign, readonly)CGRect textF;
@property (nonatomic, assign, readonly)CGRect iconF;
@property (nonatomic, assign, readonly)CGRect nameF;
@property (nonatomic, assign, readonly)CGRect vipF;
@property (nonatomic, assign, readonly)CGRect pictureF;

/**行高*/
@property (nonatomic, assign)CGFloat cellHeight;

/**所有控件的尺寸都可以通过Status来计算得出*/
@property (nonatomic, strong)NYStatus *status;

ps:新建iOS交流学习群:304570962
可以加猫猫QQ:1764541256 或则微信znycat
让我们一起努力学习吧。
原文:http://blog.csdn.net/u013357243?viewmode=contents

(素材源码)猫猫学IOS(十七)UI之纯代码自定义Cell实现新浪微博UI

标签:ui   自定义   ios   控件   cell   

原文地址:http://blog.csdn.net/u013357243/article/details/44976175

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!