IOS UI基础08

  • 自定义等高cell
    // 创建自定义cell添加子控件的方法initWithStyle(note:子控件要添加到contentView上)
    - (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier NS_AVAILABLE_IOS(3_0);
    // 传统创建自定义view添加子空间的方法
    //- (instancetype)initWithFrame:(CGRect)frame
    // 自定义xib时调用的方法
    //- (void)awakeFromNib;
    //- (instancetype)initWithCoder:(NSCoder *)coder
    // 布局子控件
    - (void)layoutSubviews
   {
      [super layoutSubviews];
   }
   //设置数据
   - (void)setXX:(模型数据类型 *)XX
  • Masonry

    • 用Masonry布局子控件frame更简洁易懂,可读性更好。
    • 使用Masonry之前需要导入2个宏和Masonry头文件
     //除掉前缀
      #define MAS_SHORTHAND
     //可接收数据类型参数
      #define MAS_SHORTHAND_GLOBALS
      #import "Masonry.h"
      - (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
    {
      if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
    
          // 常用的间距
          CGFloat margin = 10;
    
          CGFloat contentViewW = CGRectGetWidth(self.contentView.frame);
          CGFloat contentViewH = CGRectGetHeight(self.contentView.frame);
    
          // 1.图片
          UIImageView *icon_ImageView = [[UIImageView alloc] init];
          [self.contentView addSubview:icon_ImageView];
          //icon_ImageView.backgroundColor = [UIColor blueColor];
          self.icon_ImageView = icon_ImageView;
    
          [icon_ImageView makeConstraints:^(MASConstraintMaker *make) {
    //            make.left.equalTo(self.contentView.left).offset(margin);
    //            make.top.equalTo(self.contentView.top).offset(margin);
    
              make.top.left.equalTo(self.contentView).offset(margin);
              make.bottom.equalTo(self.contentView.bottom).offset(-margin);
              make.width.equalTo(80);
          }];
    }
    
  • 自定义不等高cell
     // 添加子控件(把有可能显示的子控件都加进去)
     - (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
     //布局子空间Frame
     - (void)layoutSubviews
    {
        [super layoutSubviews];
    }
    // 设置子控件显示的数据
    - (void)setXX:(模型数据类型 *)XX

    //方案1:在heightForRowAtIndexPath:方法调用之前将所有cell的高度计算清楚
    /**
 *  返回每一行cell的具体高度
 */
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    JXStatus *status = self.statuses[indexPath.row];

    CGFloat margin = 10;
    CGFloat cellHeight = 0;

    // 头像
    CGFloat iconX = margin;
    CGFloat iconY = margin;
    CGFloat iconWH = 30;
    CGRect iconImageViewFrame = CGRectMake(iconX, iconY, iconWH, iconWH);

    // 文字
    CGFloat textX = iconX;
    CGFloat textY = CGRectGetMaxY(iconImageViewFrame) + margin;
    CGFloat textW = [UIScreen mainScreen].bounds.size.width - 2 * textX;
    CGSize textMaxSize = CGSizeMake(textW, MAXFLOAT);
    NSDictionary *textAttrs = @{NSFontAttributeName : [UIFont systemFontOfSize:14]};
    CGFloat textH = [status.text boundingRectWithSize:textMaxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:textAttrs context:nil].size.height;
    CGRect text_labelFrame = CGRectMake(textX, textY, textW, textH);

    // 配图
    if (status.picture) {
        CGFloat pictureWH = 100;
        CGFloat pictureX = textX;
        CGFloat pictureY = CGRectGetMaxY(text_labelFrame) + margin;
        CGRect pictureImageViewFrame = CGRectMake(pictureX, pictureY, pictureWH, pictureWH);

        cellHeight = CGRectGetMaxY(pictureImageViewFrame);
    } else {
        cellHeight = CGRectGetMaxY(text_labelFrame);
    }

    cellHeight += margin;

    return cellHeight;
}

// 方案2:在模型中计算cell高度,返回高度直接从模型中取出

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    JXStatus *status = self.statuses[indexPath.row];
    return status.cellHeight;
}

//模型数据
#import <UIKit/UIKit.h>

@interface JXStatus : NSObject
/**** 文字\图片数据 ****/
/** 姓名 */
@property (nonatomic, copy) NSString *name;
/** 文本 */
@property (nonatomic, copy) NSString *text;
/** 头像 */
@property (nonatomic, copy) NSString *icon;
/** 配图 */
@property (nonatomic, copy) NSString *picture;
/** 是否为会员 */
@property (nonatomic, assign) BOOL vip;

/**** frame数据 ****/
/** 头像的frame */
@property (nonatomic, assign) CGRect iconFrame;
/** 昵称的frame */
@property (nonatomic, assign) CGRect nameFrame;
/** 会员的frame */
@property (nonatomic, assign) CGRect vipFrame;
/** 文字的frame */
@property (nonatomic, assign) CGRect textFrame;
/** 配图的frame */
@property (nonatomic, assign) CGRect pictureFrame;
/** cell的高度 */
@property (nonatomic, assign) CGFloat cellHeight;

@end

#import "JXStatus.h"

@implementation JXStatus
- (CGFloat)cellHeight
{
    if (_cellHeight == 0) {
        CGFloat margin = 10;

        // 头像
        CGFloat iconX = margin;
        CGFloat iconY = margin;
        CGFloat iconWH = 30;
        self.iconFrame = CGRectMake(iconX, iconY, iconWH, iconWH);

        // 昵称(姓名)
        CGFloat nameY = iconY;
        CGFloat nameX = CGRectGetMaxX(self.iconFrame) + margin;
        // 计算文字所占据的尺寸
        NSDictionary *nameAttrs = @{NSFontAttributeName : [UIFont systemFontOfSize:17]};
        CGSize nameSize = [self.name sizeWithAttributes:nameAttrs];
        self.nameFrame = (CGRect){{nameX, nameY}, nameSize};

        // 会员图标
        if (self.vip) {
            CGFloat vipW = 14;
            CGFloat vipH = nameSize.height;
            CGFloat vipY = nameY;
            CGFloat vipX = CGRectGetMaxX(self.nameFrame) + margin;
            self.vipFrame = CGRectMake(vipX, vipY, vipW, vipH);
        }

        // 文字
        CGFloat textX = iconX;
        CGFloat textY = CGRectGetMaxY(self.iconFrame) + margin;
        CGFloat textW = [UIScreen mainScreen].bounds.size.width - 2 * textX;
        CGSize textMaxSize = CGSizeMake(textW, MAXFLOAT);
        NSDictionary *textAttrs = @{NSFontAttributeName : [UIFont systemFontOfSize:14]};
        CGFloat textH = [self.text boundingRectWithSize:textMaxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:textAttrs context:nil].size.height;
        self.textFrame = CGRectMake(textX, textY, textW, textH);

        // 配图
        if (self.picture) {
            CGFloat pictureWH = 100;
            CGFloat pictureX = textX;
            CGFloat pictureY = CGRectGetMaxY(self.textFrame) + margin;
            self.pictureFrame = CGRectMake(pictureX, pictureY, pictureWH, pictureWH);

            _cellHeight = CGRectGetMaxY(self.pictureFrame);
        } else {
            _cellHeight = CGRectGetMaxY(self.textFrame);
        }
        _cellHeight += margin;
    }
    return _cellHeight;
}
@end
  • 自动布局

    • 在Main.storyboard添加好子控件,设置好约束
    • 设置子控件显示的数据
      • -(void)setXX:(模型数据类型 *)XX
    • 在viewDidLoad中自动计算cell高度
      // 告诉tableView所有cell的真实高度是自动计算(根据设置的约束来计算)
      self.tableView.rowHeight = UITableViewAutomaticDimension;
      // 告诉tableView所有cell的估算高度
      self.tableView.estimatedRowHeight = 44;
时间: 2024-10-30 17:08:22

IOS UI基础08的相关文章

iOS UI基础-9.0 UITableView基础

在iOS中,要实现表格数据展示,最常用的做法就是使用UITableView.UITableView继承自UIScrollView,因此支持垂直滚动,而且性能极佳. UITableView有两种样式: 一列显示:UITableViewStylePlain 分组显示:UITableViewStyleGrouped tableView展示数据的过程 1.调用数据源的下面方法得知一共有多少组数据 - (NSInteger)numberOfSectionsInTableView:(UITableView

iOS UI基础-17.0 UILable之NSMutableAttributedString

在iOS开发中,常常会有一段文字显示不同的颜色和字体,或者给某几个文字加删除线或下划线的需求.之前在网上找了一些资料,有的是重绘UILabel的textLayer,有的是用html5实现的,都比较麻烦,而且很多UILabel的属性也不起作用了,效果都不理想.后来了解到NSMuttableAttstring(带属性的字符串),上面的一些需求都可以很简便的实现. NSMuttableAttstring 方法 为某一范围内文字设置多个属性 - (void)setAttributes:(NSDictio

iOS UI基础-1.0加法计算器

1.打开Xcode,新建一个项目 2.Single View Application是最适合初学者的模板 3.填写该应用相关信息 4.搭建UI界面 项目创建完毕后,自动帮我们做了很多配置,也自动生成了很多文件 还自动添加了开发所依赖的框架 项目中这么多文件,哪些是影响着UI界面的呢?在iOS5之前,苹果使用xib文件来描述UI界面,在iOS5之后,苹果采取了更加强大和先进的storyboard文件来描述界面(Xcode5是基于iOS7的)因此,可以得出结论:修改项目中的Main.storyboa

IOS UI基础04

动画 1.头尾式动画 动画开始 [UIView beginAnimations:nil context:nil]; 设置动画时间 [UIView s ! etAnimationDuration:3]; [UIView setAnimationDelegate:self]; 只要写在开始和结束之间的代码, 就会被执行动画 但是: 并不是所有的代码都能够执行动画 只有属性声明中说明了是animatable的属性,才可以执行UIView动画 CGRect tempFrame2 = self.hudLa

iOS UI基础01

控制器 1.什么是控制器: 任何继承于UIViewController的类, 都称之为控制器 2.控制器的作用: 管理UI界面(负责管理UI界面的创建和一些事件的处理) IBAction 连线方式 1.从"控制器"往"Storyboard"连线 2.从"Storyboard"往"控制器"连线 3.直接在"Storyboard"中往"Storyboard"上的界面顶部连线 4.直接在&qu

iOS UI基础-13.0 数据存储

应用沙盒 每个iOS应用都有自己的应用沙盒(应用沙盒就是文件系统目录),与其他文件系统隔离.应用必须待在自己的沙盒里,其他应用不能访问该沙盒 应用沙盒的文件系统目录,如下图所示(假设应用的名称叫Layer) 模拟器应用沙盒的根路径在: (apple是用户名, 6.0是模拟器版本) /Users/apple/Library/Application Support/iPhone Simulator/6.0/Applications 应用沙盒结构分析 应用程序包:(上图中的Layer)包含了所有的资源

iOS UI基础-6.0 UIActionSheet的使用

UIActionSheet是在iOS弹出的选择按钮项,可以添加多项,并为每项添加点击事件. 使用 1.需要实现UIActionSheetDelegate  协议 @interface NJWisdomCardDetailViewController ()<UIActionSheetDelegate> @end 2.弹出选择按钮框 - (void)showSheet{ UIActionSheet *actionSheet = [[UIActionSheet alloc] initWithTitl

iOS UI基础控件之UIImageView

一.UIImageView和UIImage UIImageView是iOS中用于显示图片的类,UIImage是用于存储图片数据的类:iOS中几乎所有看到的图片数据都存储在UIImage中,同时所要的图片都是用UIImageView来显示:UIImageView和UIImage关系如下图: 二. 创建UIImageView的两种方式 1.自己设置图片位置和尺寸 "` UIImageView *iv = [[UIImageView alloc] init]; //创建的图片, 没有默认的宽高 iv.

iOS UI基础控件之UIView 详解

UIView 简介 什么是UIView UIView是窗口上的一块区域,是iOS中所有控件的基类,我们在app中所有能看见的都是直接或间接继承与UIView的.我们把UIView叫做视图. UIView的作用 负责内部区域的内容渲染. 负责内部区域的触摸事件. 管理本身的所有子视图. 处理基本的动画. UIView创建与使用 创建UIView //通过frame创建View UIView *view = [[UIView alloc] initWithFrame:CGRectMake(100,