首页 > 代码库 > iOS开发项目篇—43子控件的细节处理

iOS开发项目篇—43子控件的细节处理

iOS开发项目篇—43子控件的细节处理

一、升级UI

把之前的UI图片删除,换上新的图片(图片命名一致,规范)没有其他的影响。

 

删除之后,添加。

 

替换之后,做一次clear操作。

建议把沙盒中的包删除,删除之后再做一次clear操作。

二、调整转发(模块)

1.设置背景(使用提供的素材图片进行平铺)

为转发微博部分设置背景,考虑到这个部分整体上是一个UIView,可以尝试以下设置。

第一种尝试:

但是这样设置,因为图片是平铺的,所以整个背景会出现线条效果,影响显示,不可行。

第二种尝试:

注意:这个方法需要手动调用(?setNeedDisplay)

显示(把一个飞机图片画到整个UIView上去):

解决方法:(注意方法的调用,当控件没有尺寸的时候,不会调用drawRect:方法),使用这种方法能够解决现在面对的问题

 1 -(void)setFrame:(CGRect)frame 2 { 3     [super setFrame:frame]; 4     [self setNeedsDisplay]; 5 } 6  7 -(void)drawRect:(CGRect)rect 8 { 9     [[UIImage resizedImage:@"timeline_retweet_background"] drawInRect:rect];10 }

第三种尝试:使用imageView

提示:imageView是基于UIView的,所以相对而言,UIView更轻量级。

让该类继承自UIImageView,代码如下:

 1 // 2 //  YYStatusRetweetedView.m 3 // 4  5 #import "YYStatusRetweetedView.h" 6 #import "YYStatusRetweetedFrame.h" 7 #import "YYStatusModel.h" 8 #import "YYUserModel.h" 9 10 @interface YYStatusRetweetedView ()11 /**12  *  昵称13  */14 @property(nonatomic,weak)UILabel  *nameLabel;15 /**16  *  微博的正文17  */18 @property(nonatomic,weak)UILabel *textLabel;19 @end20 @implementation YYStatusRetweetedView21 22 - (id)initWithFrame:(CGRect)frame23 {24     self = [super initWithFrame:frame];25     if (self) {26         27         self.image=[UIImage resizedImage:@"timeline_retweet_background"];28         self.highlightedImage=[UIImage resizedImage:@"timeline_retweet_background_highlighted"];29     //初始化子控件30     //1.添加昵称31         UILabel *nameLabel=[[UILabel alloc]init];32         nameLabel.font=YYStatusRetweetedNameFont;33         [self addSubview:nameLabel];34         self.nameLabel=nameLabel;35         36     //2.添加微博正文37         UILabel *textLabel=[[UILabel alloc]init];38         textLabel.font=YYStatusRetweetedTextFont;39         textLabel.numberOfLines=0;40         [self addSubview:textLabel];41         self.textLabel=textLabel;42     }43     return self;44 }45 46 -(void)setRetweetedFrame:(YYStatusRetweetedFrame *)retweetedFrame47 {48     _retweetedFrame=retweetedFrame;49     50     //取出对应的数据模型51     YYStatusModel *retweeted_status=retweetedFrame.retweeted_status;52     53     //设置自己的frame54     self.frame=retweetedFrame.frame;55     56     //设置昵称的frame57     self.nameLabel.text=retweeted_status.user.name;58     self.nameLabel.frame=retweetedFrame.nameFrame;59     60     //设置正文的frame61     self.textLabel.text=retweeted_status.text;62     self.textLabel.frame=retweetedFrame.textFrame;63 }64 //65 //-(void)setFrame:(CGRect)frame66 //{67 //    [super setFrame:frame];68 //    [self setNeedsDisplay];69 //}70 //71 //-(void)drawRect:(CGRect)rect72 //{73 //    [[UIImage resizedImage:@"timeline_retweet_background"] drawInRect:rect];74 //}75 @end

设置的效果:

2.设置转发的微博的用户昵称(@和颜色)

注意:添加了@后,需要在frame模型中,也把@添加作为一个整体计算frame。

 1 // 2 //  YYStatusRetweetedView.m 3 // 4  5 #import "YYStatusRetweetedView.h" 6 #import "YYStatusRetweetedFrame.h" 7 #import "YYStatusModel.h" 8 #import "YYUserModel.h" 9 10 @interface YYStatusRetweetedView ()11 /**12  *  昵称13  */14 @property(nonatomic,weak)UILabel  *nameLabel;15 /**16  *  微博的正文17  */18 @property(nonatomic,weak)UILabel *textLabel;19 @end20 @implementation YYStatusRetweetedView21 22 - (id)initWithFrame:(CGRect)frame23 {24     self = [super initWithFrame:frame];25     if (self) {26         27         self.image=[UIImage resizedImage:@"timeline_retweet_background"];28         self.highlightedImage=[UIImage resizedImage:@"timeline_retweet_background_highlighted"];29         30     //初始化子控件31     //1.添加昵称32         UILabel *nameLabel=[[UILabel alloc]init];33         nameLabel.textColor=YYColor(74, 102, 105);34         nameLabel.font=YYStatusRetweetedNameFont;35         [self addSubview:nameLabel];36         self.nameLabel=nameLabel;37         38     //2.添加微博正文39         UILabel *textLabel=[[UILabel alloc]init];40         textLabel.font=YYStatusRetweetedTextFont;41         textLabel.numberOfLines=0;42         [self addSubview:textLabel];43         self.textLabel=textLabel;44     }45     return self;46 }47 48 -(void)setRetweetedFrame:(YYStatusRetweetedFrame *)retweetedFrame49 {50     _retweetedFrame=retweetedFrame;51     52     //取出对应的数据模型53     YYStatusModel *retweeted_status=retweetedFrame.retweeted_status;54     55     //设置自己的frame56     self.frame=retweetedFrame.frame;57     58     //设置昵称的frame59     self.nameLabel.text=[NSString stringWithFormat:@"@%@",retweeted_status.user.name];60     self.nameLabel.frame=retweetedFrame.nameFrame;61     62     //设置正文的frame63     self.textLabel.text=retweeted_status.text;64     self.textLabel.frame=retweetedFrame.textFrame;65 }66 @end

在对应的frame模型中,也应该把@计算进去。

设置完成后的显示效果:

3.设置UITableView中每个cell之间的间隔

第一种尝试

(1)增加cell的高度,增加20

(2)设置整个tableView的背景颜色,去掉分割线

(3)对cell的背景颜色进行清空,设置整个微博内容模块的背景为一张预先提供的图片的平铺(修改UIView为UIImageView)。

实现效果:

存在的问题:在底部加载更多数据前有间隙,不符合要求。

(4)调整

设置整个微博模块的y值由0变为10,cell的高度不再需要+10.

 1 /** 2  *  计算自己的frame 3  */ 4 -(void)setupDetailFrame 5 { 6     CGFloat x=0; 7 //    CGFloat y=0; 8     CGFloat y=10; 9     CGFloat w=YYScreenW;10     CGFloat h=self.tempHeight;11     self.frame=CGRectMake(x, y, w, h);12 }

建议把cell之间的间距抽取变成为宏。

实现效果:

补充:整个过程的完整示意图

   

三、项目pch文件宏定义补充

 1 // 2 //  Prefix header 3 // 4 //  The contents of this file are implicitly included at the beginning of every source file. 5 // 6  7 #import <Availability.h> 8  9 #ifndef __IPHONE_5_010 #warning "This project uses features only available in iOS SDK 5.0 and later."11 #endif12 13 #ifdef __OBJC__14     #import <UIKit/UIKit.h>15     #import <Foundation/Foundation.h>16     #import "UIImage+Extension.h"17     #import "UIBarButtonItem+Extension.h"18     #import "UIView+Extension.h"19 20 #ifdef DEBUG // 调试状态, 打开LOG功能21 #define YYLog(...) NSLog(__VA_ARGS__)22 #else // 发布状态, 关闭LOG功能23 #define YYLog(...)24 #endif25 26 // 颜色27 #define YYColor(r, g, b) [UIColor colorWithRed:(r)/255.0 green:(g)/255.0 blue:(b)/255.0 alpha:1.0]28 29 // 随机色30 #define YYRandomColor [UIColor colorWithRed:arc4random_uniform(256)/255.0 green:arc4random_uniform(256)/255.0 blue:arc4random_uniform(256)/255.0 alpha:1.0]31 32 // 是否为iOS733 #define iOS7 ([[UIDevice currentDevice].systemVersion doubleValue] >= 7.0)34 35 //是否为4英寸36 #define FourInch ([UIScreen mainScreen].bounds.size.height==568.0)37 38 // 屏幕尺寸39 #define YYScreenW [UIScreen mainScreen].bounds.size.width40 41 //微博cell的计算参数42 43 //微博cell之间的间距44 #define YYStatusCellMargin  1045 #define YYCellStatusInset   1046 // 原创微博昵称字体47 #define YYStatusOrginalNameFont [UIFont systemFontOfSize:14]48 // 原创微博时间字体49 #define YYStatusOrginalTimeFont [UIFont systemFontOfSize:12]50 // 原创微博来源字体51 #define YYStatusOrginalSourceFont  YYStatusOrginalTimeFont52 // 原创微博正文字体53 #define YYStatusOrginalTextFont [UIFont systemFontOfSize:15]54 55 // 转发微博昵称字体56 #define YYStatusRetweetedNameFont YYStatusOrginalNameFont57 // 转发微博正文字体58 #define YYStatusRetweetedTextFont YYStatusOrginalTextFont59 60 // 导航栏标题的字体61 #define YYNavigationTitleFont [UIFont boldSystemFontOfSize:20]62 63 #define YYAppKey     @"1972915028"64 #define YYAppSecret   @"b255603c4dfd82b4785bf9a808ce2662"65 #define YYRedirectURI  @"http://www.cnblogs.com/wendingding/"66 #endif