在手持式行动装置中,被限制住的显示屏幕空间,使得我们必须花费更多的时间与功夫来处理文字内容的安排,舒适的行距、间距以及字号,这些需要不断调整的细节,会大大影响内容的阅读性与程序的使用性。
在简单介绍 ios 中如何处理变动的内容的方法后,这篇文章也将简单介绍 ios 针对于较长的文字内容,支持哪些可以快速调整的属性,让设计师在思考与规划版面时,能够事先可虑进去,减少实作时额外沟通的成本。
在 iOS 6 之后,iOS 的文字显示组件中提供了一个可以调整文字细节属性的NSAttributedString 类别,可以针对文字内容的全部与部份区域改变显示的方式,可套用在组件 UILabel 与 UITextView,以下我们介绍其中常用的属性:
段落排版
段落排版的属性(NSParagraphStyleAttributeName)是 NSAttributedString中最重要也是具有文章显示需求的服务所一定会用到的功能,可调整的细节有:
1. 对齐
向左对齐、置中对齐、向右对齐是最基本的对齐方式,除此之外还支持两端对齐(NSTextAlignmentJustified)以及根据显示的文字特性对齐(NSTextAlignmentNatural)。
![iOS开发之段落文字排版的属性与细节 iOS开发之段落文字排版的属性与细节](https://image.shishitao.com:8440/aHR0cHM6Ly93d3cuaXRkYWFuLmNvbS9nby9hSFIwY0RvdkwzQm9iM1J2TG5Ob2FXcDFaUzVqZG1sa1pXRXVZMjR2WVhOelpYUXZOVEl4WXpNM05UWXdZakZqWkdNellUSmtNREF3TURBeExsQk9Sdz09.jpg?w=700)
2. 段落开头缩排
可以透过 firstLineHeadIndent 指定段落开始的缩排像素。
![iOS开发之段落文字排版的属性与细节 iOS开发之段落文字排版的属性与细节](https://image.shishitao.com:8440/aHR0cHM6Ly93d3cuaXRkYWFuLmNvbS9nby9hSFIwY0RvdkwzQm9iM1J2TG5Ob2FXcDFaUzVqZG1sa1pXRXVZMjR2WVhOelpYUXZOVEl4WXpNM05UaGxOelEwWmprM1pUVXdNREF3TURBeExsQk9Sdz09.jpg?w=700)
3. 缩排
透过 headIndent 可调整全部文字的缩排距离,可当作左边 padding 使用。
![iOS开发之段落文字排版的属性与细节 iOS开发之段落文字排版的属性与细节](https://image.shishitao.com:8440/aHR0cHM6Ly93d3cuaXRkYWFuLmNvbS9nby9hSFIwY0RvdkwzQm9iM1J2TG5Ob2FXcDFaUzVqZG1sa1pXRXVZMjR2WVhOelpYUXZOVEl4WXpNM05UbGxOelEwWmpreU5EUTJNREF3TURBeExsQk9Sdz09.jpg?w=700)
而透过 tailIndent 可调整文字尾端的缩排距离。需要注意的是,这里指定的值可以当作文字显示的宽、而也可当作右边 padding 使用,依据输入的正负值而定:
![iOS开发之段落文字排版的属性与细节 iOS开发之段落文字排版的属性与细节](https://image.shishitao.com:8440/aHR0cHM6Ly93d3cuaXRkYWFuLmNvbS9nby9hSFIwY0RvdkwzcHZibVV1YzJocGFuVmxMbU4yYVdSbFlTNWpiaTloYzNObGRDODFNakZqTXpjMVltVTNORFJtT1RZMU5qTXdNREF3TURFdVVFNUg%3D.jpg?w=700)
4. 行距
想要调整行距,可以透过搭配使用 lineHeightMultiple 更改行距倍数:
![iOS开发之段落文字排版的属性与细节 iOS开发之段落文字排版的属性与细节](https://image.shishitao.com:8440/aHR0cHM6Ly93d3cuaXRkYWFuLmNvbS9nby9hSFIwY0RvdkwzcHZibVV1YzJocGFuVmxMbU4yYVdSbFlTNWpiaTloYzNObGRDODFNakZqTXpjMVpEQXpaVEEwTXpFM01UWXdNREF3TURFdVVFNUg%3D.jpg?w=700)
或是 lineSpacing 来增加行距:
![iOS开发之段落文字排版的属性与细节 iOS开发之段落文字排版的属性与细节](https://image.shishitao.com:8440/aHR0cHM6Ly93d3cuaXRkYWFuLmNvbS9nby9hSFIwY0RvdkwzcHZibVV1YzJocGFuVmxMbU4yYVdSbFlTNWpiaTloYzNObGRDODFNakZqTXpjMVptVTNORFJtT1RjMk9XRXdNREF3TURFdVVFNUg%3D.jpg?w=700)
而针对不同的字型与字号,我们可以透过指定最大与最小行距(maximumLineHeight 与 minimumLineHeight)来避免过高或过窄的状况发生。
5. 段落行距
而若是文章内容有分段落的话,也可以透过指定段落结尾距离(paragraphSpacing)以及段落开头距离(paragraphSpacingBefore):
![iOS开发之段落文字排版的属性与细节 iOS开发之段落文字排版的属性与细节](https://image.shishitao.com:8440/aHR0cHM6Ly93d3cuaXRkYWFuLmNvbS9nby9hSFIwY0RvdkwzcHZibVV1YzJocGFuVmxMbU4yYVdSbFlTNWpiaTloYzNObGRDODFNakZqTXpjMVpqQXpaVEEwTXpGbVpEZ3dNREF3TURFdVVFNUg%3D.jpg?w=700)
字符间距
想要拉开字符间的距离的话,则可以指定 NSKernAttributeName 属性来调整:
![iOS开发之段落文字排版的属性与细节 iOS开发之段落文字排版的属性与细节](https://image.shishitao.com:8440/aHR0cHM6Ly93d3cuaXRkYWFuLmNvbS9nby9hSFIwY0RvdkwzQm9iM1J2TG5Ob2FXcDFaUzVqZG1sa1pXRXVZMjR2WVhOelpYUXZOVEl4WXpNM05qQmxOelEwWmprMFl6VTNNREF3TURBeExsQk9Sdz09.jpg?w=700)
字型
如果需要在部分文字中替换不同的字型与字号,则可以透过NSFontAttributeName 属性来更改部分区域的文字:
![iOS开发之段落文字排版的属性与细节 iOS开发之段落文字排版的属性与细节](https://image.shishitao.com:8440/aHR0cHM6Ly93d3cuaXRkYWFuLmNvbS9nby9hSFIwY0RvdkwzcHZibVV1YzJocGFuVmxMbU4yYVdSbFlTNWpiaTloYzNObGRDODFNakZqTXpjMk1UQXpaVEEwTXpNNU9HVXdNREF3TURFdVVFNUg%3D.jpg?w=700)
颜色与视觉风格
除了文本块本身的背景颜色,也可以透过 NSBackgroundColorAttributeName 以及NSForegroundColorAttributeName 个别修改文字部分的背景以及文字颜色(如强调段落开头的第一个字):
![iOS开发之段落文字排版的属性与细节 iOS开发之段落文字排版的属性与细节](https://image.shishitao.com:8440/aHR0cHM6Ly93d3cuaXRkYWFuLmNvbS9nby9hSFIwY0RvdkwzQm9iM1J2TG5Ob2FXcDFaUzVqZG1sa1pXRXVZMjR2WVhOelpYUXZOVEl4WXpNM05qTXdZakZqWkdNellqVTVNREF3TURBeExsQk9Sdz09.jpg?w=700)
而个别修改阴影与文字外框也同样有支持,可使用 NSStrokeColorAttributeName、NSStrokeWidthAttributeName以及 NSShadowAttributeName 达成:
![iOS开发之段落文字排版的属性与细节 iOS开发之段落文字排版的属性与细节](https://image.shishitao.com:8440/aHR0cHM6Ly93d3cuaXRkYWFuLmNvbS9nby9hSFIwY0RvdkwyRnlkQzV6YUdscWRXVXVZM1pwWkdWaExtTnVMMkZ6YzJWMEx6VXlNV016TnpZME1ETmxNRFF6TlRNeVpUQXdNREF3TVM1UVRrYz0%3D.jpg?w=700)
底线与删除线
若需要底线与删除线,可以指定 NSUnderlineStyleAttributeName 与NSStrikethroughStyleAttributeName:
![iOS开发之段落文字排版的属性与细节 iOS开发之段落文字排版的属性与细节](https://image.shishitao.com:8440/aHR0cHM6Ly93d3cuaXRkYWFuLmNvbS9nby9hSFIwY0RvdkwyUnJMbk5vYVdwMVpTNWpkbWxrWldFdVkyNHZZWE56WlhRdk5USXhZek0zTmpWbE56UTBaamt3TW1aa01EQXdNREF4TGxCT1J3PT0%3D.jpg?w=700)
搭配这些属性,我们就可以快速又简单的实作一些精美的段落显示,设计师在充分了解了在文字排版你拥有哪些可利用的武器后,在设计时间就可以更精准的规划策略,减少设计与实作之间的差距。
![iOS开发之段落文字排版的属性与细节 iOS开发之段落文字排版的属性与细节](https://image.shishitao.com:8440/aHR0cHM6Ly93d3cuaXRkYWFuLmNvbS9nby9hSFIwY0RvdkwzQm9iM1J2TG5Ob2FXcDFaUzVqZG1sa1pXRXVZMjR2WVhOelpYUXZOVEl4WXpNM05qWmxOelEwWmprek9HWXpNREF3TURBeExsQk9Sdz09.jpg?w=700)