6個iOS圖片文本設計小技巧
來源：星夜暮晨的簡書
原文：6 Hacks For Creating a Stunning User Interface
設計師們似乎擁有著我們這些開發者所沒有的“魔力”，他們知道如何讓一個應用的界面看起來非常得舒適，以至于有時讓我們有了迫不及待將其復現的沖動。
然而，幾天過去了，我們仍然還停留在設計稿的第一個界面，寫下大段大段的代碼，可是界面卻不是我們想要的那個樣子，這無疑是非常讓人惱火的一件事情。
好消息是設計師們的“魔力”并不是我們想象中的那么神奇，有一些關于設計的小技巧。只要掌握了它們，我們就能夠以最小的代價讓用戶界面變得好看起來。
今天，我將會給大家展示其中的一些小技巧，我更樂意將它們稱之為“圖片標記技巧”，大意就是如何在一幅圖片上放文字會更加好看。我們在我們的[iOS模板]中使用了這些技巧，這也是我們為何能夠搭建出色用戶界面的訣竅之一。
這些設計理念也可以用在表視圖單元格(Table View Cell)和集合視圖(Collection View)當中。
我們并不能直接將文字扔到圖片上面，然后指望它Duang地一下出現那個Feel。不過，跟隨以下6條小技巧就能夠實現我們的目的了：
1：加文字
嗯，我不會忘記我說過，直接將文字扔到圖片上面并不能讓它變得號看起來。不過有些時候我們或許會走狗屎運，就像下圖這個例子一樣。這種設計看起來很贊，是因為標題比其他文字元素要顯得更大一些。
并且，這種效果一般只會發生在文字在圖片的深色部分上面。如果不是這種情況，那么就會像下面這個例子一樣。現在我們換了一個有其他封面的文章，啊偶，GG。
好吧，怎么辦？
2：加圖片遮罩
我們可以直接在圖片上加一個遮罩，技巧就是通過這個遮罩讓圖片變得更暗、更透明，或者直接刷上顏色，就像Yahoo新聞做的那樣。
好的，在這個例子中，由于底色是藍色，文字顏色是白色，所以看起來效果很贊。
下面這個例子是我們目前正在制作的項目截圖，接下來就是我們實現這個效果的代碼：
func addFullOverlay(){
let overlayView = UIView(frame: CGRectZero)
overlayView.translatesAutoresizingMaskIntoConstraints = false
overlayView.backgroundColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.5)
self.view.insertSubview(overlayView, aboveSubview: coverImageView)
let topConstraint = NSLayoutConstraint(item: overlayView, attribute: .Top, relatedBy: .Equal, toItem: self.view, attribute: .Top, multiplier: 1, constant: 0)
let leftConstraint = NSLayoutConstraint(item: overlayView, attribute: .Left, relatedBy: .Equal, toItem: self.view, attribute: .Left, multiplier: 1, constant: 0)
let rightConstraint = NSLayoutConstraint(item: overlayView, attribute: .Right, relatedBy: .Equal, toItem: self.view, attribute: .Right, multiplier: 1, constant: 0)
let bottomConstraint = NSLayoutConstraint(item: overlayView, attribute: .Bottom, relatedBy: .Equal, toItem: self.view, attribute: .Bottom, multiplier: 1, constant: 0)
view.addConstraints([topConstraint, leftConstraint, rightConstraint, bottomConstraint])
} 不過這個效果不是很理想，因為圖片現在的顏色很陰暗，文字就特別突兀，不過這個效果或許就是您追求的效果。通過給遮罩添加一下著色，我們就可以像instagram那樣，給圖片加個“濾鏡”的效果，就像下圖所展示的那樣。
我們只需給這個半透明的遮罩加上顏色就可以了：
overlayView.backgroundColor = UIColor(red: 0.5, green: 0.2, blue: 0, alpha: 0.5)
3：加文字背景
某些人并不喜歡遮罩這個做法，因為他們可能想讓圖片保持“原汁原味”。這樣的話，我們就要使用這個技巧了，就如“Funny or Die”所做的那樣。
那我們的項目來距離，我們可以給文字加上背景。通過文本的`NSAttributed`屬性，我們可以輕易地完成這項操作。
實現這項效果的代碼如下：
func addBackgroundColorToText() {
let style = NSMutableParagraphStyle.defaultParagraphStyle().mutableCopy() as! NSMutableParagraphStyle
style.firstLineHeadIndent = 10.0
style.headIndent = 10
style.tailIndent = 0
let attributes = [NSParagraphStyleAttributeName : style]
let attributedTitleText = NSAttributedString(string: "Supplier woes suggest Apple Watch sales aren't great", attributes: attributes)
titleLabel.attributedText = attributedTitleText
let textbackgroundColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.6)
titleLabel.backgroundColor = textbackgroundColor
authorLabel.backgroundColor = textbackgroundColor
dateLabel.backgroundColor = textbackgroundColor
} 4：加有顏色的背景
呃，和上面那個效果類似，如果您不喜歡黑色的話，那么可以更換文字背景的顏色，這樣就有了“有顏色的文字背景”。至于如何實現這個效果，就留給您去嘗試了O(∩_∩)O~。關鍵在于找到圖片的主色，然后將其設置為背景顏色。
5：加毛玻璃
這是我最喜歡的效果，沒有之一。通過iOS 8提供的`UIVisualEffectView`類，我們可以輕松地實現這個效果。我們在Newsstand例程中使用了這項效果。通過將文本下方的圖片加上毛玻璃效果，可以讓文字變得更加易讀。
以下是實現這個效果的代碼：
func addBlurView(){
let effect = UIBlurEffect(style: .Light)
let overlayView = UIVisualEffectView(effect: effect)
overlayView.translatesAutoresizingMaskIntoConstraints = false
self.view.insertSubview(overlayView, aboveSubview: coverImageView)
let topConstraint = NSLayoutConstraint(item: overlayView, attribute: .Top, relatedBy: .Equal, toItem: self.titleLabel, attribute: .Top, multiplier: 1, constant: -30)
let leftConstraint = NSLayoutConstraint(item: overlayView, attribute: .Left, relatedBy: .Equal, toItem: self.view, attribute: .Left, multiplier: 1, constant: 0)
let rightConstraint = NSLayoutConstraint(item: overlayView, attribute: .Right, relatedBy: .Equal, toItem: self.view, attribute: .Right, multiplier: 1, constant: 0)
let bottomConstraint = NSLayoutConstraint(item: overlayView, attribute: .Bottom, relatedBy: .Equal, toItem: self.view, attribute: .Bottom, multiplier: 1, constant: 0)
view.addConstraints([topConstraint, leftConstraint, rightConstraint, bottomConstraint])
} 6：加暗色漸變
這是我第二喜歡的效果，有些時候甚至比毛玻璃還要好看一些。
這個效果是通過在文本下方加上一個“暗色漸變”(gradient fade)的圖層，顏色從半透明的黑色漸變到不透明的黑色，看起來效果很贊。
這個效果用在了很多應用上面，比如說Flipboard以及許多博客應用上發。我們也可以發現在Hotel Tonight應用中也應用了這個效果。
要實現這個效果，您可以使用以下代碼：
func addGradientOverlay(){
self.view.insertSubview(gradientView, aboveSubview: coverImageView)
gradientLayer.frame = gradientView.bounds
let opaqueBlackColor = UIColor(red: 0, green: 0, blue: 0, alpha: 1.0).CGColor
let transparentBlackColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.0).CGColor
gradientLayer.colors = [transparentBlackColor, opaqueBlackColor]
gradientView.layer.insertSublayer(gradientLayer, atIndex: 0)
gradientView.translatesAutoresizingMaskIntoConstraints = false
self.view.insertSubview(gradientView, aboveSubview: coverImageView)
let topConstraint = NSLayoutConstraint(item: gradientView, attribute: .Top, relatedBy: .Equal, toItem: self.titleLabel, attribute: .Top, multiplier: 1, constant: -60)
let leftConstraint = NSLayoutConstraint(item: gradientView, attribute: .Left, relatedBy: .Equal, toItem: self.view, attribute: .Left, multiplier: 1, constant: 0)
let rightConstraint = NSLayoutConstraint(item: gradientView, attribute: .Right, relatedBy: .Equal, toItem: self.view, attribute: .Right, multiplier: 1, constant: 0)
let bottomConstraint = NSLayoutConstraint(item: gradientView, attribute: .Bottom, relatedBy: .Equal, toItem: self.view, attribute: .Bottom, multiplier: 1, constant: 0)
view.addConstraints([topConstraint, leftConstraint, rightConstraint, bottomConstraint])
} 下載示例項目
是不是很喜歡這些效果呢？現在您已經知道如何實現，那么就可以在您的應用中使用它們了。點擊此處來下載示例項目，這樣可以看到所有已實現的效果。
關于更多設計技巧相關的內容，可以參閱Medium網站上的文章。如果您有更好的想法，請與我聯系。