iOS dev > Learning-tips for 6 iOS image text designs

English: TOPE

Starry Night, Twilight morning

Website: http://www.jianshu.com/p/88263196fdf0

Designers seem to have the "magic" that we developers don't have, and they know how to make an app's interface look so comfortable that it sometimes gives us the urge to reproduce it.

However, a few days later, we still remain in the design of the first interface, write down a large section of the code, but the interface is not what we want to look like, this is undoubtedly a very annoying thing.

The good news is that designers ' magic is not as magical as we think, there are some tips on design. As long as they are mastered, we can make the user interface look good at the lowest possible cost.

Today, I'm going to show you some of these tips, and I'd like to call them "photo-tagging techniques" to get a better look at how to put text on a picture. We've used these tips in our iOS templates, which is one of the tricks we have to build a great user interface.

These design concepts can also be used in table view cells and in the collection view (Collection view).

We can't just throw the text on top of the picture and expect it to duang the feel. However, follow these 6 tips to achieve our goal:

1: Add text

Well, I will not forget that I have said that throwing text directly above the picture does not make it look like a sign. But there are times when we may have a dog poop, just like this example. This design looks great because the title is bigger than the other text elements.

Also, this effect usually occurs only when the text is in the darker part of the picture. If this is not the case, then it will be the same as the following example. Now we have another article on the cover, ah I, GG.

All right, what do you do?

2: Add Picture Mask

We can add a mask directly to the image, and the trick is to make the image darker, more transparent, or to brush it directly, as Yahoo News did.

OK, in this case, because the background is blue, the text color is white, so it looks great.

The following example is a project we are currently working on, followed by the code for this effect:

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])

}

But this effect is not very ideal, because the picture is now very dark color, the text is particularly abrupt, but this effect may be your pursuit of the effect. By adding shading to the mask, we can add a "filter" effect to the image like Instagram does, as shown.

We just need to add color to this translucent mask:

Overlayview.backgroundcolor = Uicolor (red:0.5, green:0.2, blue:0, alpha:0.5)

3: Add text background

Some people don't like to mask this, because they may want to keep the picture "authentic". In that case, we're going to use this technique, just like "Funny or Die".

That our project come to the distance, we can add the background to the text. With the Nsattributed property of the text, we can do this easily.

The code to achieve this effect is as follows:

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:a Ttributes)

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: Color-Added background

Well, similar to the above effect, if you do not like the black, then you can change the color of the text background, so that there is a "colored text background." As for how to achieve this effect, you are left to try O (∩_∩) o~. The key is to find the main color of the picture, and then set it to the background color.

5: Frosted glass

This is my favorite effect, no one. With the Uivisualeffectview class provided by iOS 8, we can easily achieve this effect. We used this effect in newsstand routines. By adding a frosted glass effect to the picture below the text, you can make the text easier to read.

Here is the code to achieve this effect:

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: Add Dark Gradient

This is my second favorite effect, sometimes even more beautiful than the frosted glass.

This effect is done by adding a "dark gradient" (gradient fade) layer underneath the text, from a translucent black gradient to an opaque black color, which looks great.

This effect is used in many applications, such as Flipboard and many blog applications. We can also find that this effect is also applied in the hotel tonight application.

To achieve this effect, you can use the following code:

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])

}

Download the sample project

Do you really like these effects? Now that you know how to implement them, you can use them in your app. Click here (http://www.appdesignvault.com/downloads/FontOnImages.zip) to download the sample project so that you can see all the results that have been achieved.

For more design tips, refer to the articles on the medium website for more information. If you have a better idea, please contact me.

iOS dev > Learning-tips for 6 iOS image text designs