SwiftでQuickDialogを使ってFontPickerを作る


QPickerElementを使って、フォントの種類とサイズを選べるFontPickerを作る。

このとき PickerView にはフォントの種類に応じてフォント名をそのフォントの書体で表示するようにしたい。
これをやるにはQPickeElementが pickerView のハンドルでやっている
– (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
ではなく、UILabelを使って
– (UIView*)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view
で表示しなければならないのでObjective-Cのカテゴリを使ってQPickerElementを拡張する(これは後述)。

とりあえず、FontPicker用のQPickerElementの準備。
QPickerElement は今のところ Extras の中に入っているので、cocoapod にQuickDialog/Extrasも追加。
Podsの Profile

pod 'QuickDialog'
pod 'QuickDialog/Extras'

SWiftで使うために myAppxxxxxxx-Bridging-Header.h に以下を追加。
後に述べるQPickerElementの拡張のためのヘッダも併記。

#import <QuickDialog/QuickDialog.h>
#import <QuickDialog/QPickerElement.h>
#import "QPickerTableViewCellExtension.h"

QPickerElementさえ使えれば、FontPickerを作るのはそう難しくはない。

var fontNames: [String] = []
var fontSizes: [String] = []
for family in UIFont.familyNames() as [String] {
    for fontname in UIFont.fontNamesForFamilyName(family) as [String] {
        fontNames.append(fontname)
    }
}
fontNames.sort{  $0 < $1 }
for fontsize in  Array<Int>(8...50) as [Int] {
    fontSizes.append(String(fontsize))
}
let fontPickerSection = QSection()
let fontPickerElement = QPickerElement(title: "Font Picker", items: [fontNames, fontSizes], value: fontValue)
fontPickerElement.key = "fontPicker12345"
fontPickerSection.addElement(fontPickerElement)
root.addSection(fontPickerSection)

値の取得は、rootからほかのElementなどとまとめてとってもよい。

let dict = NSMutableDictionary()
root.fetchValueIntoObject(dict)

しかし、onValueChanged で、その都度取って NSUserDefaults などに保存する方が好み。

fontPickerElement.onValueChanged = { ( el: QRootElement!) in
    var dict = NSMutableDictionary()
    fontPickerElement.fetchValueIntoObject(dict)
    .... dict を NSUserDefaultなどに格納 ....
}

最後に、PickerViewでフォント名の表示をそのフォントで表示する拡張のコード。これはSwiftではなく Objective-Cで書く。
拡張するのは QPickerElementではなく QPickerTableViewCell の方である。
QPickerTableViewCellExtension.h を追加する。

#import <Foundation/Foundation.h>
#import "QPickerTableViewCell.h"
#import "QPickerElement.h"

@interface QPickerTableViewCell(QPickerTableViewCellExtension)

@property (nonatomic, strong) UIPickerView *pickerView;
@property (nonatomic, readonly) QPickerElement *pickerElement;

- (UIView*)pickerView;

@end

QPickerTableViewCellExtension.m を追加する。

#import "QPickerTableViewCellExtension.h"

@implementation QPickerTableViewCell(QPickerTableViewCellExtension)

@dynamic pickerView;
@dynamic pickerElement;

// add following for font picker by eiji
- (UIView*)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view
{
    UILabel* fontlabel = (UILabel*)view;
    if (!fontlabel) {
        fontlabel =  [[UILabel alloc] initWithFrame:CGRectZero];
        fontlabel.adjustsFontSizeToFitWidth = YES;
        fontlabel.backgroundColor = [UIColor clearColor];
    }
    [fontlabel setFrame:CGRectMake(0.0f, 0.0f, ([pickerView rowSizeForComponent:component].width - 8.0f),
                                   [pickerView rowSizeForComponent:component].height)];
    if (component == 0) {
        NSString* fontname = [[[self.pickerElement.items objectAtIndex:(NSUInteger) component] objectAtIndex:(NSUInteger) row] description];
        fontlabel.text = fontname;
        fontlabel.font = [UIFont fontWithName:fontname size:[UIFont labelFontSize]];
        fontlabel.textAlignment = NSTextAlignmentLeft;
    } else {
        NSString* fontsize = [[[self.pickerElement.items objectAtIndex:(NSUInteger) component] objectAtIndex:(NSUInteger) row] description];
        fontlabel.text = fontsize;
        fontlabel.font = [UIFont boldSystemFontOfSize:15];
        fontlabel.textAlignment = NSTextAlignmentRight;
    }
    return fontlabel;
    
}

これでフォント名の書体で表示されるPickerができる。

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中