iOS Swift 如何實現(xiàn)文字豎直/垂直展示

? ? ? ?經(jīng)過多番嘗試困鸥, 使用NSMutableAttributedString搭配CoreText來實現(xiàn)較為簡單和靈活。

? ? ? ?如果想要試用UILabel來做,通過限制label寬度,每一個字符換一行來實現(xiàn)的話,哪怕是暫時實現(xiàn)了效果者填, 也終是害人害己,先看看效果圖:

做法:

```swift

let text = "我總想要穿越人海和潮流\n但穿越不了的是你我的鴻溝\nso this way \n 終究還是要自己走\n……\n嗯呀"

? ? ? ? let style = NSMutableParagraphStyle.init()

? ? ? ? style.lineSpacing = 10

//這個對齊方式做葵,對豎直排版同樣有效占哟,左對齊對應(yīng)豎直排版的頭部對齊,右對齊對應(yīng)尾部對齊

? ? ? ?style.alignment = .right

? ? ? ? style.firstLineHeadIndent = 2

? ? ? ? let number1 = NSNumber.init(value: NSWritingDirection.rightToLeft.rawValue)

? ? ? ? let number2 = NSNumber.init(value: NSWritingDirectionFormatType.embedding.rawValue)

? ? ? ? let attriStr = NSMutableAttributedString.init(string: text, attributes: [.foregroundColor: UIColor.white,.font:UIFont.exoBoldFont(size: 18), .verticalGlyphForm: true,.writingDirection:[number1,number2],.paragraphStyle:style])

? ? ? ? let ttLable = TestTextLabel()

? ? ? ? ttLable.attributeStr = attriStr

? ? ? ? self.view.addSubview(ttLable)

? ? ? ? ttLable.sizeToFit()

? ? ? ? ttLable.snp.makeConstraints { (make) in

? ? ? ? ? ? make.center.equalToSuperview()

? ? ? ? ? ? make.width.equalTo(400)

? ? ? ? ? ? make.height.equalTo(400)

? ? ? ? }

//自定義一個label 繼承UIView

class TestTextLabel: UIView {

? ? var attributeStr:NSMutableAttributedString?


? ? var contentSize:CGSize = .zero


? ? overrideinit(frame:CGRect) {

? ? ? ? super.init(frame: frame)

? ? ? ? self.backgroundColor = .black

? ? }


? ? requiredinit?(coder:NSCoder) {

? ? ? ? fatalError("init(coder:) has not been implemented")

? ? }


? ? overridefuncdraw(_rect:CGRect) {

? ? ? ? super.draw(rect)


? ? ? ? let context = UIGraphicsGetCurrentContext()

? ? ? ? context?.textMatrix= .identity

? ? ? ? //CFAttributedString

? ? ? ? letattrString =self.attributeStr!asCFAttributedString

? ? ? ? let framesetter = CTFramesetterCreateWithAttributedString(attrString)


? ? ? ? //作用范圍

? ? ? ? letrangeAll =CFRangeMake(0,self.attributeStr?.length??0)

? ? ? ? varfitRange:CFRange= .init()


? ? ? ? //獲取適應(yīng)的尺寸。豎直展示這里設(shè)置height為無窮大榨乎,width為0怎燥,意思就是,高度可以無限長蜜暑,寬度由AttributedString的文字決定铐姚, 如果想要設(shè)置為橫著展示,則width設(shè)置為無窮大肛捍, height設(shè)置為0

? ? ? ? lets =CTFramesetterSuggestFrameSizeWithConstraints(framesetter, rangeAll,nil,CGSize.init(width:0, height:CGFloat(MAXFLOAT)), &fitRange)


? ? ? ? //coretext的原點坐標(biāo)(0,0)在左下角隐绵,UIKit的原點坐標(biāo)(0,0)系在左上角,這里要把UIKit的坐標(biāo)轉(zhuǎn)為

? ? ? ? context?.translateBy(x:0, y:self.height)

? ? ? ? //翻轉(zhuǎn)矩陣, 把畫面翻轉(zhuǎn)過來拙毫, 如果不設(shè)置這個依许,那么出現(xiàn)的效果就好像是照鏡子一樣,可以自行嘗試

? ? ? ? context?.scaleBy(x:1, y:-1)

? ? ? ? //設(shè)置坐標(biāo) L 形坐標(biāo)系, 因為原本是橫著展示的恬偷,現(xiàn)在要豎直展示,所以需要交換s的寬高帘睦, s.width實際上現(xiàn)在變成了文字的高度

? ? ? ? letframeRect =CGRect.init(x: (self.width-s.height)/2.0, y: (self.height-s.width)/2.0, width: s.height, height: s.width)

? ? ? ? //筆畫路徑

? ? ? ? letframePath:CGPath=CGPath.init(rect: frameRect, transform:nil)


? ? ? ? //.leftToRight 豎直狀態(tài)袍患,從左邊往右讀,.rightToLeft從右往左讀竣付,.topToBottom 橫著的狀態(tài)

? ? ? ? /*如果是豎直的狀態(tài)诡延, 需要attributeString 也設(shè)置為豎直的形式


?? ? ? ? var attriStr = NSMutableAttributedString.init(string: text, attributes: [.foregroundColor: UIColor.red,.font:UIFont.exoBoldFont(size: 14), .verticalGlyphForm: true])

? ? ? ? ? 也就是這句代碼:.verticalGlyphForm: true

? ? ? ? */


? ? ? ? letprogressionNumber =NSNumber.init(value:CTFrameProgression.rightToLeft.rawValue)

? ? ? ? // CTFrameProgression 一定要先轉(zhuǎn)成number類型,否則會crash

?? ? ? letdic = [kCTFrameProgressionAttributeName:progressionNumberasCFNumber]

? ? ? ? letframe =CTFramesetterCreateFrame(framesetter, rangeAll, framePath, dicasCFDictionary)

? ? ? ? CTFrameDraw(frame, context!)

? ? }

}

```

效果圖:


?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末古胆,一起剝皮案震驚了整個濱河市肆良,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌逸绎,老刑警劉巖惹恃,帶你破解...
    沈念sama閱讀 221,198評論 6 514
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異棺牧,居然都是意外死亡巫糙,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,334評論 3 398
  • 文/潘曉璐 我一進店門颊乘,熙熙樓的掌柜王于貴愁眉苦臉地迎上來参淹,“玉大人,你說我怎么就攤上這事乏悄≌阒担” “怎么了?”我有些...
    開封第一講書人閱讀 167,643評論 0 360
  • 文/不壞的土叔 我叫張陵檩小,是天一觀的道長开呐。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么负蚊? 我笑而不...
    開封第一講書人閱讀 59,495評論 1 296
  • 正文 為了忘掉前任神妹,我火速辦了婚禮,結(jié)果婚禮上家妆,老公的妹妹穿的比我還像新娘鸵荠。我一直安慰自己,他們只是感情好伤极,可當(dāng)我...
    茶點故事閱讀 68,502評論 6 397
  • 文/花漫 我一把揭開白布蛹找。 她就那樣靜靜地躺著,像睡著了一般哨坪。 火紅的嫁衣襯著肌膚如雪庸疾。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,156評論 1 308
  • 那天,我揣著相機與錄音栗柒,去河邊找鬼孔庭。 笑死,一個胖子當(dāng)著我的面吹牛金顿,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播鲤桥,決...
    沈念sama閱讀 40,743評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼揍拆,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了茶凳?” 一聲冷哼從身側(cè)響起嫂拴,我...
    開封第一講書人閱讀 39,659評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎贮喧,沒想到半個月后筒狠,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,200評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡箱沦,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,282評論 3 340
  • 正文 我和宋清朗相戀三年窟蓝,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片饱普。...
    茶點故事閱讀 40,424評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡运挫,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出套耕,到底是詐尸還是另有隱情谁帕,我是刑警寧澤,帶...
    沈念sama閱讀 36,107評論 5 349
  • 正文 年R本政府宣布冯袍,位于F島的核電站匈挖,受9級特大地震影響碾牌,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜儡循,卻給世界環(huán)境...
    茶點故事閱讀 41,789評論 3 333
  • 文/蒙蒙 一舶吗、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧择膝,春花似錦誓琼、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,264評論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至齿穗,卻和暖如春傲隶,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背窃页。 一陣腳步聲響...
    開封第一講書人閱讀 33,390評論 1 271
  • 我被黑心中介騙來泰國打工跺株, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人脖卖。 一個月前我還...
    沈念sama閱讀 48,798評論 3 376
  • 正文 我出身青樓乒省,卻偏偏與公主長得像,于是被迫代替她去往敵國和親胚嘲。 傳聞我的和親對象是個殘疾皇子作儿,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,435評論 2 359

推薦閱讀更多精彩內(nèi)容