股票场内基金交易,没时间盯盘?
实现的文字框动态背景如图所示,
它可以基于固定的几张背景图片来现实出大小动态变化并且自动适应文字的文字框背景,使背景恰好可以包含文字,而且它的缩放不会带来画质的损失。
我们所用的背景图是这样的:
虚线框表示背景图的真实大小,蓝色外面到虚线框的区域为透明区域,而我们平时使用时应该保证文字被蓝色的区域包裹。
设置背景图片
首先先把背景图设置为 UIButton 的背景图片:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
NSString *normal,*high; if (self.messageFrame.message.type == MessageModelTypeMe) { normal = @"chat_send_nor"; high = @"chat_send_press_pic"; } else { normal = @"chat_recive_nor"; high = @"chat_recive_press_pic"; } [self.contentButton setBackgroundImage:[UIImage imageNamed:normal] forState:UIControlStateNormal]; [self.contentButton setBackgroundImage:[UIImage imageNamed:high] forState:UIControlStateHighlighted]; |
运行,显示的内容是这样的:
设置 contentEdgeInsets
但是很明显,文字内容并没有在蓝色(或白色)区域里面,为此,我们需要设置 UIButton 里面的 contentEdgeInsets 属性来调整按钮的内容(包括图片 image 内容和文字标题 title 内容)在按钮内的位置。我们可以定义横向和纵向的边距表示距离按钮边界多远才开始显示文字,例如:
1 2 |
#define UIEdgeInsetVerticalDistance 20.0 #define UIEdgeInsetHorizontalDistance 20.0 |
然后设置 UIButton 的属性:
1 |
self.contentButton.contentEdgeInsets = UIEdgeInsetsMake(UIEdgeInsetVerticalDistance, UIEdgeInsetHorizontalDistance, UIEdgeInsetVerticalDistance, UIEdgeInsetHorizontalDistance); |
然后设置好 contentButton 的 frame:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
#define padding 10.0 contentButtonFrame CGSize contentButtonTitleLabelMaxSize = CGSizeMake(screenWidth * 2/3 , MAXFLOAT); NSDictionary *dict = @{NSFontAttributeName:contentButtonTextFont}; CGSize contentButtonTitleLabelSize = [_message.text boundingRectWithSize:contentButtonTitleLabelMaxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:dict context:nil].size; CGFloat contentButtonW = contentButtonTitleLabelSize.width + 2 * UIEdgeInsetHorizontalDistance; CGFloat contentButtonH = contentButtonTitleLabelSize.height + 2 * UIEdgeInsetVerticalDistance; CGFloat contentButtonX; if(_message.type == MessageModelTypeMe){ contentButtonX = iconViewX - padding - contentButtonW; } else { contentButtonX = iconViewX + iconViewW_and_H + padding; } CGFloat contentButtonY = iconViewY; self.contentButtonFrame = CGRectMake(contentButtonX, contentButtonY, contentButtonW, contentButtonH); |
此时,有的对话倒是大致符合大小了,就像这样:
但是对于大段的文字的对话框,则不合适了,如图:
这是由于图片被放大,那么之前的透明区域也被放大,因此之前设置的 UIEdgeInsetVerticalDistance 和 UIEdgeInsetHorizontalDistance 已经太小了。同时,由于放大可以看出图片出现了变形、模糊的情况。即便我们扩大代码中的 UIEdgeInsetVerticalDistance 和 UIEdgeInsetHorizontalDistance ,可是对于小段的文字,又会出现背景框过大,就像这样:
resizableImageWithCapInsets 方法
为了结局这个问题,应该采取的是局部放缩的方法。就像如图所示:
对图中四根红线所夹的矩形区域进行拉伸(或者是平铺),而其他地方的形状和大小均不变,这样的话矩形放缩区域由于是纯色的所以经过拉伸平铺都不会改变画质,而其他地方也不会被改变。我们可以使用这两种方法:
1 2 3 4 5 |
//不指定变形方法,由系统自动判断 - (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets; //指定变形方法 - (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode; |
其中 UIImageResizingMode 包括:
1 2 3 4 |
typedef enum { UIImageResizingModeTile, UIImageResizingModeStretch, } UIImageResizingMode; |
代表平铺和拉伸。
这两种方法可以对 UIImage 使用,根据 CapInsets 确立被拉伸(平铺)的范围,然后范围一个被拉伸(平铺)后的 UIImage 对象。例如我实现的代码是:
1 2 3 4 5 6 7 8 9 10 |
UIImage *normalImage = [UIImage imageNamed:normal]; CGFloat norWidth = normalImage.size.width; CGFloat norHeight = normalImage.size.height; UIImage *highImage = [UIImage imageNamed:high]; CGFloat highWidth = highImage.size.width; CGFloat highHeight = highImage.size.height; [self.contentButton setBackgroundImage:[normalImage resizableImageWithCapInsets:UIEdgeInsetsMake(norHeight/2,norWidth/2,norHeight/2,norWidth/2)] forState:UIControlStateNormal]; [self.contentButton setBackgroundImage:[highImage resizableImageWithCapInsets:UIEdgeInsetsMake(highHeight/2,highWidth/2,highHeight/2,highWidth/2)] forState:UIControlStateHighlighted]; |
配合上此前对 contentEdgeInsets 的设置(横向纵向间距取 15 左右),就可以得到这样的比较好的效果了~~
实现 UIImage 类方法扩展(category )
最后再把此前对 UIImage 局部拉伸(局部区域选择为中间的一点)封装为一个类方法以方便将来的调用吧。为此,首先需要建立一个分类(在不改变原有类的情况下增加一些新的方法)。点击 Project Navigator 的 New File,选择 Objective-c File ,File Type 选择 Category,class 选择 UIImage ,Category 输入 Extention(这个可以自己定义)。然后实现:
1 2 3 4 5 6 7 |
- (UIImage *)resizableImageWithImageName:(NSString *)name { UIImage *image = [UIImage imageNamed:name]; CGFloat w = image.size.width; CGFloat h = image.size.height; return [image resizableImageWithCapInsets:UIEdgeInsetsMake(h/2, w/2, h/2,w/2)]; } |
即可。
想获得去掉 5 元限制的证券账户吗?

如果您想去掉最低交易佣金 5 元限制,使用微信扫描左边小程序二维码,访问微信小程序「优财助手」,点击底部菜单「福利」,阅读文章「通过优财开证券账户无最低交易佣金 5 元限制」,按照文章步骤操作即可获得免 5 元证券账户,股票基金交易手续费率万 2.5。
请注意,一定要按照文章描述严格操作,如错误开户是无法获得免 5 元证券账户的。