欢迎来到Doc100.Net免费学习资源知识分享平台!
您的位置:首页 > 程序异常 >

这种布局是如何元素布局的

更新时间: 2014-01-05 02:36:48 责任编辑: Author_N1

 

这种布局是怎么元素布局的?


如上图,请问图中我用红圈卷中的区域是怎么布局的?是Collection View吗?谢谢
--参考方法--
UICollectionView  应该可以实现
当然自己计算位置来实现一样可以来做。最底层的那个框直接切成一个图片,只需要关心上层icon及title的位置。可以定义一个model类来封装一下

--参考方法--
我下面说的方案不是基于UICollectionView来实现的。
每一个方格,你可以自定义一个控件,这个控件名定义为CustomCell ,这个cell接收一个实体model,包含icon及title的实体
@interface CellModel : NSObject
@property (nonatomic,strong) NSString *iconName;
@property (nonatomic,strong) NSString *title;
@end

@class CellModel;
@interface CustomCell: UIView
@property (nonatomic,strong) CellModel *model;

-(id)initWithModel:(CellModel *)cm;

@end


#import "CellModel.h"
@implement CustomCell

-(id)initWithModel:(CellModel *)cm {
      if (self=[super init]) {
           self.model=cm;
      }

      return self;
}

-(void)layoutSubview {
     
      if (nil!=self.model) {
           /////draw icon

          CGRect bounds=self.bounds;
           UIImage *iconImg=[UIImage imageNamed:self.model.iconName];

           UIImageView *iconView=[[UIImageView alloc] initWithImage:iconImg];
           /////compute position. set iconview's frame
           iconView.frame=CGRectMake((bounds.width-iconImg.size.width)/2, 5, iconImg.size.width,iconImage.size.height);
           [self addSubview:iconView];



           //////draw title
           UILabel *lblTitle=[[UILabel alloc] init];
           [lblTitle setTitle:self.model.title];
           [lblTitle setColor;[UIColor black]];
           [lblTitle setFont: [UIFont fontWithsize:12]];
           [lblTitle setNumberOfLines:0];
           [lblTitle setLineBreakModel:NSLineBreakWordWarpping];

           CGSize titleSize=[lblTitle.text sizeWithFont:lblTitle.font];

           lblTitle.frame=CGRectMake((bounds.width-titleSize.width)/2, CGRectGetMaxY(iconView.frame)+5, titleSize.width,titleSize.height);
           [self addSubview:lblTitle];

      }
}

@end


上面只是部分伪代码,纯手写,不保证完全正确。大体的思路应该是这样。
上一篇:上一篇
下一篇:下一篇

 

随机推荐程序问答结果

 

 

如对文章有任何疑问请提交到问题反馈,或者您对内容不满意,请您反馈给我们DOC100.NET论坛发贴求解。
DOC100.NET资源网,机器学习分类整理更新日期::2014-01-05 02:36:48
如需转载,请注明文章出处和来源网址:http://www.doc100.net/bugs/t/12088/
本文WWW.DOC100.NET DOC100.NET版权所有。