如何在Swift中为iOS创建垂直文本UILabel和UITextView?

Sur*_*gch 46 uitextview uilabel ios swift mongolian-vertical-script

如果你根据标题来讨论这个问题,但对蒙古语不感兴趣,你可能会寻找这个问答:


我一直在学习Swift,以便为传统的蒙古语开发iOS应用程序.问题是传统的蒙古语是从上到下,从左到右垂直书写的.我的问题是如何垂直显示文本并仍然有换行功能?

如果你和我待在一起,我会试着更清楚地解释这个问题.下面是我想要实现的文本视图的图像.如果外国脚本将你抛弃,我已经包含了遵循相同模式的英文文本.事实上,如果应用程序有任何英文文本要显示,这应该是它的外观.

在此输入图像描述

对于简单的单线UILabel,顺时针旋转90度就可以了.但是,对于多行UITextView,我需要处理换行.如果我只做一个普通的90度旋转,写的第一件事最终会在最后一行.

到目前为止,我已经制定了一个我认为可以解决这个问题的计划:

  1. 制作一个自定义字体,其中所有字母都垂直镜像.
  2. 顺时针旋转文本视图90度.
  3. 水平镜像文本视图.

在此输入图像描述

这应该照顾文本包装.

我可以做镜像字体.但是,我不知道如何为UITextView的旋转和镜像执行Swift编码.我发现以下链接似乎给解决方案的部分提示,但它们都在Objective C中,而不是在Swift中.

应用程序商店中有传统的蒙古应用程序(像这样这个),但我还没有找到任何人共享他们的源代码,所以我不知道他们在幕后做什么来显示文本.我打算让我的代码开源,以便将来的其他人不会为数百万阅读传统蒙古语的人开发应用程序.你可以给予这项努力的任何帮助,不仅是我,也是蒙古人民.即使你不了解自己,提出这个问题以使其更加明显也会有所帮助.

更新

@ sangonz的答案仍然是一个很好的答案,但我暂时将其标记为已接受的答案,因为我无法让一切顺利.特别:

  • 启用滚动(通过在滚动视图中嵌入自定义视图或通过子类化UIScrollView).在github项目中,@ sangonz说这应该很容易,但它不适合我.
  • 在方向改变时获得字线的重新布局(而不是拉伸).我认为通过更多的研究来解决这个问题应该不会太难.
  • 为什么文本行不会一直到视图的边缘?底部存在很大差距.
  • 如何取消链接自定义垂直视图的NSTextStorage与其他UITextView.(见这个问题)

到目前为止,我一直在使用上面提到的原始方法,但我真正想要的是获得类似@sangonz提议的工作方式.

我现在也在考虑其他方法

san*_*onz 21

编辑:这就是我最终做到的.

这是我的GitHub中的一个非常基本的实现:Vertical-Text-iOS.

没什么好看的,但它确实有效.最后我不得不混合TextKit和图像处理.看看代码.它涉及:

  1. 子类化NSTextContainer以获得正确的文本维度.
  2. 创建自定义UIView以呈现文本,将仿射变换应用于每一行,并使用渲染NSLayoutManager来保留所有TextKit功能.

TextKit方式

保持所有本机文本优势(例如突出显示,选择...)的正确方法是使用标准TextKit API.您提出的方法会破坏所有这些或可能导致奇怪的行为.

但是,看起来像iOS中的TextKit还不支持开箱即用的垂直方向,但它已经为此做好了准备.作为旁注,在OS X中它有一定的支持,你可以打电话textView.setLayoutOrientation(.Vertical),但它仍然有一些限制.

NSTextLayoutOrientationProvider协议定义了一个接口,该接口在没有显式NSVerticalGlyphFormAttributeName 属性的情况下为符合对象布置的文本提供默认方向.实现此接口的唯一UIKit类是 NSTextContainer其默认实现返回 NSTextLayoutOrientationHorizontal.NSTextContainer处理垂直文本的子类可以将此属性设置 NSTextLayoutOrientationVertical为支持自定义布局方向逻辑.

来源:UIKit> NSTextLayoutOrientationProvideriOS协议参考

总之,你应该开始子类NSTextContainer,你将不得不面对NSLayoutManagerNSTextContainer很多.


自定义图像处理方式

另一方面,如果您决定遵循自定义文本呈现,我建议采用以下方法.

  1. 使用普通字体将普通文本渲染到隐藏图层.为其边界框指定正确的大小.
  2. 获取文本属性,主要是文本高度和行间距.
  3. 如下图所示,从下到上以相反的顺序处理每一行的图像.你应该得到一个新CGImage的结果.
  4. 旋转图像创建a UIImage并设置正确的UIImageOrientation值.
  5. 将该图像插入UIScrollView仅允许水平滚动的图像.

请注意此方法呈现整个文本,因此不要将其用于很长的文本.如果您需要这样做,则需要考虑平铺方法.观看WWDC 2013> 217 - 探索iOS 7上的滚动视图.

这个图片

祝好运!

更新:(来自github项目的图片)

在此输入图像描述


归档时间:

查看次数:

6142 次

最近记录:

8 年,10 月 前