Iphone5
Screenshot
Play

Introduction

FDLabelView is an open source project for iOS developers to easily layout text without pains and tedious process! Support JUSTIFY, FILL alignment methods, automatic frame adjustment, scalable line height, and awesome runtime editor.

[ Download or fork us on Github ]

Usage

Install

Copy folder “FDLabelView” which include following header and source files into your project.

FDLabelView.h
FDLabelView.m
FDFontPickerViewController.h
FDFontPickerViewController.m
FDLabelConfigViewController.h
FDLabelConfigViewController.m

Initialization

#include “FDLabelView.h”
FDLabelView* labelView = [[FDLabelView alloc] initWithFrame: someFrame];

Paddings

FDLabelView suppot paddings by assign contentInset, default value is UIEdgeInsetsZero.

labelView.contentInset = UIEdgeInsetsMake(5, 5, 5, 5);

Text Alignment

Enum Type: FDTextAlignment
Textalignment

FDLabelView ignore UILabel.textAlignment by using FDLabelView.fdTextAlignment, which support additional alignment methods, Justify and Fill.

Justify
labelView.fdTextAlignment = FDTextAlignmentJustify;
Fill
labelView.fdTextAlignment = FDTextAlignmentFill;
Left (Default), Center, Right
FDTextAlignmentLeft, FDTextAlignmentCenter, FDTextAlignmentRight

Auto Fit

Enum Type: FDAutoFitMode

FDLabelView support automatic adjustment for view frame to fit content.

Autofit
Contrained to Frame
labelView.fdAutoFitMode = FDAutoFitModeContrainedFrame;

When fdAutoFitMode is set to FDAutoFitModeFrame, the label will automatically enable adjustsFontSizeToFitWidth feature. The size of font will be adjusted until the text can be completed rendered within its frame. It will try to fit content into current frame by decreasing the size of font and frame size of the view.

Auto Height
labelView.fdAutoFitMode = FDAutoFitModeAutoHeight;
None (Default)
labelView.fdAutoFitMode = FDAutoFitModeNone;

If you set adjustsFontSizeToFitWidth to TRUE in this mode, it will behave like FDAutoFitModeContrainedFrame mode, which means it will automatically reduce the size of font to fit content into current frame size. However it won’t change the frame size of the view.

Auto Fit Alignment

Enum Type: FDLabelFitAlignment
Autofitalignment

Specify the alignment methods used for auto fit content to frame.

Fit Align Top (Default)
labelView.fdLabelFitAlignment = FDLabelFitAlignmentTop;
Fit Align Center
labelView.fdLabelFitAlignment = FDLabelFitAlignmentCenter;
Fit Align Bottom
labelView.fdLabelFitAlignment = FDLabelFitAlignmentBottom;

Line Height Adjustment

Fixed Line Height
labelView.fixedLineHeight = 14;

Default value is 0.

Scale Line Height
labelView.lineHeightScale = 0.7;

Default value is 1. This feature is only enable when fixedLineHeight equals 0. It will scale the line height of different size of font, which is used combing the FDLabelView.fdLineScaleBaseLine (see below).

Baseline for Line Height Scale

Enum Type: FDLineHeightScaleBaseLine

The baseline for scaling line heights.

Scale from Top
labelView.fdLineScaleBaseLine = FDLineHeightScaleBaseLineTop;
Scale at Center (Default)
labelView.fdLineScaleBaseLine = FDLineHeightScaleBaseLineCenter;
Scale from Bottom
labelView.fdLineScaleBaseLine = FDLineHeightScaleBaseLineBottom;

Other Properties

numberOfLines

Inherited from UILabel, default value is 1. This property can afftect the rendering results in all FDAutoFitMode modes.

adjustsFontSizeToWidth

Inherited from UILabel, default value is FALSE. This property can only affect the rendering results in FDAutoFitModeNone mode. The value is automatically set to TRUE in FDAutoFitModeFrame mode. It is used with UILabel.minimumScaleFactor.

Other Funtions

Align to Parent View
-(void)alignParentHorizontalCenter:(CGFloat)offset;
-(void)alignParentLeft:(CGFloat)offset;
-(void)alignParentRight:(CGFloat)offset;
-(void)alignParentVerticalCenter:(CGFloat)offset;
-(void)alignParentTop:(CGFloat)offset;
-(void)alignParentBottom:(CGFloat)offset;
Contrained to Specified Frame
-(void)contrainedToFrame:(CGRect)frame;

Runtime Editor

Enable debug mode, this must be enable after the label was added to another parent view. Sepicify the parent view for displaying the runtime editor (required):

labelView.debug = YES;
labelView.debugParentView = someController.view;

Pre-assign some sentences or words with different length or language for tests (optional):

labelView.debugSentences = @[@"Fourdesire focuses on innovation and UI/UX to develop interesting products that balance the latest technology with intutive design.",@"Fourdesire 專注在創新服務\n使用者經驗與介面設計,結合設計與科技開發,致力於做出好玩又實用的產品。",@"FDLabelView allow you easy to layout text without pains and tedious process!\nSupport JUSTIFY, FILL alignment methods, automatic frame adjustment, scalable line height, and awesome runtime editable UI."];

Assign the output variable name, default is ‘labelView’ (optional):

labelView.outputName = @"myFDLabelView";

Visualization, default values are YES

labelView.debugShowLineBreaks = YES;
labelView.debugShowCoordinates = YES;
labelView.debugShowFrameBounds = YES;
labelView.debugShowPaddings = YES;

Output

FDLabelView runtime editor allow you to output the edited and modified results of label to codes by following steps:

1) Click on the row in Output section.
2) Press ⌘ + C, then the code will be copied to your clipboard of Mac OS.
Output