6個(gè)iOS圖片文本設(shè)計(jì)小技巧
設(shè)計(jì)師們似乎擁有著我們這些開(kāi)發(fā)者所沒(méi)有的“魔力”，他們知道如何讓一個(gè)應(yīng)用的界面看起來(lái)非常得舒適，以至于有時(shí)讓我們有了迫不及待將其復(fù)現(xiàn)的沖動(dòng)。
然而，幾天過(guò)去了，我們?nèi)匀贿€停留在設(shè)計(jì)稿的第一個(gè)界面，寫(xiě)下大段大段的代碼，可是界面卻不是我們想要的那個(gè)樣子，這無(wú)疑是非常讓人惱火的一件事情。
好消息是設(shè)計(jì)師們的“魔力”并不是我們想象中的那么神奇，有一些關(guān)于設(shè)計(jì)的小技巧。只要掌握了它們，我們就能夠以最小的代價(jià)讓用戶界面變得好看起來(lái)。
今天，我將會(huì)給大家展示其中的一些小技巧，我更樂(lè)意將它們稱之為“圖片標(biāo)記技巧”，大意就是如何在一幅圖片上放文字會(huì)更加好看。我們?cè)谖覀兊腫iOS模板]中使用了這些技巧，這也是我們?yōu)楹文軌虼罱ǔ錾脩艚缑娴脑E竅之一。
這些設(shè)計(jì)理念也可以用在表視圖單元格(Table View Cell)和集合視圖(Collection View)當(dāng)中。
我們并不能直接將文字扔到圖片上面，然后指望它Duang地一下出現(xiàn)那個(gè)Feel。不過(guò)，跟隨以下6條小技巧就能夠?qū)崿F(xiàn)我們的目的了：
1：加文字
嗯，我不會(huì)忘記我說(shuō)過(guò)，直接將文字扔到圖片上面并不能讓它變得號(hào)看起來(lái)。不過(guò)有些時(shí)候我們或許會(huì)走狗屎運(yùn)，就像下圖這個(gè)例子一樣。這種設(shè)計(jì)看起來(lái)很贊，是因?yàn)闃?biāo)題比其他文字元素要顯得更大一些。
并且，這種效果一般只會(huì)發(fā)生在文字在圖片的深色部分上面。如果不是這種情況，那么就會(huì)像下面這個(gè)例子一樣。現(xiàn)在我們換了一個(gè)有其他封面的文章，啊偶，GG。
好吧，怎么辦？
2：加圖片遮罩
我們可以直接在圖片上加一個(gè)遮罩，技巧就是通過(guò)這個(gè)遮罩讓圖片變得更暗、更透明，或者直接刷上顏色，就像Yahoo新聞做的那樣。
好的，在這個(gè)例子中，由于底色是藍(lán)色，文字顏色是白色，所以看起來(lái)效果很贊。
下面這個(gè)例子是我們目前正在制作的項(xiàng)目截圖，接下來(lái)就是我們實(shí)現(xiàn)這個(gè)效果的代碼：
- 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])
- }
不過(guò)這個(gè)效果不是很理想，因?yàn)閳D片現(xiàn)在的顏色很陰暗，文字就特別突兀，不過(guò)這個(gè)效果或許就是您追求的效果。通過(guò)給遮罩添加一下著色，我們就可以像instagram那樣，給圖片加個(gè)“濾鏡”的效果，就像下圖所展示的那樣。
#p#
我們只需給這個(gè)半透明的遮罩加上顏色就可以了：
- overlayView.backgroundColor = UIColor(red: 0.5, green: 0.2, blue: 0, alpha: 0.5)
3：加文字背景
某些人并不喜歡遮罩這個(gè)做法，因?yàn)樗麄兛赡芟胱寛D片保持“原汁原味”。這樣的話，我們就要使用這個(gè)技巧了，就如“Funny or Die”所做的那樣。
那我們的項(xiàng)目來(lái)距離，我們可以給文字加上背景。通過(guò)文本的`NSAttributed`屬性，我們可以輕易地完成這項(xiàng)操作。
實(shí)現(xiàn)這項(xiàng)效果的代碼如下：
- 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：加有顏色的背景
呃，和上面那個(gè)效果類似，如果您不喜歡黑色的話，那么可以更換文字背景的顏色，這樣就有了“有顏色的文字背景”。至于如何實(shí)現(xiàn)這個(gè)效果，就留給您去嘗試了O(∩_∩)O~。關(guān)鍵在于找到圖片的主色，然后將其設(shè)置為背景顏色。
5：加毛玻璃
這是我最喜歡的效果，沒(méi)有之一。通過(guò)iOS 8提供的`UIVisualEffectView`類，我們可以輕松地實(shí)現(xiàn)這個(gè)效果。我們?cè)?a target="_blank">Newsstand例程中使用了這項(xiàng)效果。通過(guò)將文本下方的圖片加上毛玻璃效果，可以讓文字變得更加易讀。
以下是實(shí)現(xiàn)這個(gè)效果的代碼：
- 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：加暗色漸變
這是我第二喜歡的效果，有些時(shí)候甚至比毛玻璃還要好看一些。
這個(gè)效果是通過(guò)在文本下方加上一個(gè)“暗色漸變”(gradient fade)的圖層，顏色從半透明的黑色漸變到不透明的黑色，看起來(lái)效果很贊。
這個(gè)效果用在了很多應(yīng)用上面，比如說(shuō)Flipboard以及許多博客應(yīng)用上發(fā)。我們也可以發(fā)現(xiàn)在Hotel Tonight應(yīng)用中也應(yīng)用了這個(gè)效果。
要實(shí)現(xiàn)這個(gè)效果，您可以使用以下代碼：
- 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])
- }
是不是很喜歡這些效果呢？現(xiàn)在您已經(jīng)知道如何實(shí)現(xiàn)，那么就可以在您的應(yīng)用中使用它們了。點(diǎn)擊此處來(lái)下載示例項(xiàng)目，這樣可以看到所有已實(shí)現(xiàn)的效果。
