美文网首页
简单的图片+标题样式处理

简单的图片+标题样式处理

作者: 举个栗子wow | 来源:发表于2016-06-03 15:39 被阅读406次

效果类似于贴吧的 精 图片+标题,像下面这样

424E2A96-EC0F-49B2-ACC9-15D6E0530116.png

一个图片+文字,或者复杂点的格式。。。
iOS7之前,要做这样的效果需要NSAttributedstring结合CoreText渲染 - - 。。。
iOS7出现了TextKit框架,解决起来这个问题还是非常简单的。。。
首先要了解一下这个类:NSTextAttachment,从字面上的意思就是文本附件的意思,它有个image的属性,可以带上一个image。
我们在初始化属性字符串的时候,使用这个方法可以带上这个“附件”:

+ (NSAttributedString *)attributedStringWithAttachment:(NSTextAttachment *)attachment;

携带了图片之后,还需要设定一下图片的尺寸,一般来说,使用的时候都是继承了这个类创建个子类,通过NSTextAttachment的代理方法:

- (CGRect)attachmentBoundsForTextContainer:(nullable NSTextContainer *)textContainer proposedLineFragment:(CGRect)lineFrag glyphPosition:(CGPoint)position characterIndex:(NSUInteger)charIndex;

来设定这个图片的大小;或者可以直接创建NSTextAttachment的对象,通过设定bounds来改变图片的尺寸。
在使用上比CoreText简单多了。。。
举个例子:

继承NSTextAttachment创建一个子类

.h

#import <UIKit/UIKit.h>

@interface JWMainPageActiveTextAttachment : NSTextAttachment

@end

.m

#import "JWMainPageActiveTextAttachment.h"

@implementation JWMainPageActiveTextAttachment

- (CGRect)attachmentBoundsForTextContainer:(NSTextContainer *)textContainer proposedLineFragment:(CGRect)lineFrag glyphPosition:(CGPoint)position characterIndex:(NSUInteger)charIndex NS_AVAILABLE_IOS(7_0)
{
    return CGRectMake(0 ,0 ,lineFrag.size.height,lineFrag.size.height);
}

@end

lineFrag表示这一行的尺寸

使用

NSMutableAttributedString *titleLabText = [[NSMutableAttributedString alloc] initWithString:@"哈哈哈哈123"];
JWMainPageActiveTextAttachment *activeTextAttachment = [[JWMainPageActiveTextAttachment alloc] initWithData:nil ofType:nil];
activeTextAttachment.image = [UIImage imageNamed:@"actionguangfan2"];
NSAttributedString *textAttachmentString = [NSAttributedString                   attributedStringWithAttachment:activeTextAttachment];
[titleLabText insertAttributedString:textAttachmentString atIndex:0];
        }
self.titleLabel.attributedText = titleLabText;

简单粗暴

相关文章

  • 简单的图片+标题样式处理

    效果类似于贴吧的 精 图片+标题,像下面这样 一个图片+文字,或者复杂点的格式。。。iOS7之前,要做这样的效果需...

  • iOS自定义按钮button详解封装说明

    iOS常用到有标题同时有图片的按钮,但是系统控件默认只提供图片在左,标题在右的样式,想要其他的样式就需要自己处理,...

  • Bootstrap相关

    1.Bootstrap 样式之 响应式图片的处理 响应式图片处理 在bootstrap中如何使用响应式图片? 简单...

  • 简书富文本编辑器样式一览

    简书富文本编辑器样式一览 引用样式: 我是引用 插入图片: 标题样式: H1标题H1标题H1标题H1标题H1标题 ...

  • CSS样式

    背景样式 文本属性 基本样式 浮动float 宽度:calc函数 图片模糊处理

  • 兼容IOS中transform和border-radius处理

    在图片的父类添加以下样式处理

  • word 排版

    页眉右边设置章节名:插入->文档部件->域->StyleRef 标题使用内建样式修改,内容自建样式,图片自建样式 ...

  • #30天专注橙长计划# Day18之ppt

    终于降到了图片处理了,所以很兴奋。而老师首先给出的基本操作很简单,共5招:裁剪,去背,变色,效果,样式。感觉很简单...

  • 图片简单处理

    均属于笔记,仅供个人参考,有问题欢迎指正 public class BitmapUtil { //@# 图片加载工...

  • 简单处理图片

    图片格式 置灰:(人眼感知)float gray = 0.3 * color.r+0.59 *color.g+0...

网友评论

      本文标题:简单的图片+标题样式处理

      本文链接:https://www.haomeiwen.com/subject/wztldttx.html