woshidan's blog

そんなことよりコードにダイブ。

カスタムビューの配置方法と文字のフォント設定、描画領域のサイズ取得について

今日から少しずつ慣れてこーってことでターミナルでREPLからXCodeに戻ってきたんですが、XCodeって入力してると、にょん!って補完が出てちょっと楽しいですね...。

内容

上の本を参考にiOSのUIViewと戯れています。

  • カスタムビューの書き方
  • 文字の配置について
    • フォントの設定の仕方
    • サイズの取得の仕方
  • カスタムビューをStoryBoardに配置する

カスタムビューの書き方

import UIKit

// UIViewから継承して書いていくのは
// AndroidのCustomViewを書くようなノリなのでしょうか
class StringEx : UIView {
  // 描画時に呼び出されます
  override func drawRect(rect: CGRect) {
    // ここに描画内容を書く
  }
}

文字の配置について

// UIViewクラスのインスタントメソッド内で
// stringはString型のリテラル
string.drawAtPoint(CGPointMake(CGFloat(x), CGFloat(y)))

Androidのひよっこなので、TextViewみたいなのがあって、それを配置してからそこに描画する文字を属性として設定する、みたいなのが基本かと思っていたので、Stringオブジェクトのインスタンスメソッドで描画処理がかけることに少し驚いて検索してみたのですが。

http://secondflush2.blog.fc2.com/blog-entry-1002.html

UIKitフレームワークでの拡張らしいですね...*1

// ターミナルで叩いてみてSwiftそのもののStringには
// そんなメソッドないみたいです
 113> "Test".drawAtPoint
repl.swift:113:1: error: value of type 'String' has no member 'drawAtPoint'
"Test".drawAtPoint
^~~~~~ ~~~~~~~~~~~

// シグネチャが間違っている時に出るエラー
// repl.swift:116:20: error: argument passed to call that takes no arguments

フォントの設定の仕方

let attrs = [
    // フォントをメソッドで生成する場合
    // (system/bold/italic)FontOfSize(size : CGFloat)
    // で標準/太字/斜体のフォントが指定できる
    
    // iOSで利用出来るフォントである必要があるが、フォント名をUIFontのイニシャライザ
    // に渡すとそのフォントに対応したUIFontのオブジェクトが利用出来る
    NSFontAttributeName: UIFont.systemFontOfSize(CGFloat(size)),
    NSForegroundColorAttributeName: color
]
// フォントの設定が入ったディクショナリを
// withAttributesのパラメータとして渡す
str.drawAtPoint(CGPointMake(CGFloat(x), CGFloat(y)), withAttributes: attrs)

サイズの取得の仕方

// strの文字列を設定したパラメータによって描画した場合の
// 描画領域のサイズを表すGCSizeクラスが帰ってきます。
// struct GCSize {
//   var width: CGFloat
//   var height: CGFloat
// }
let attrs = [
            NSFontAttributeName: UIFont.systemFontOfSize(CGFloat(size))]
        return str.sizeWithAttributes(attrs)

カスタムビューをStoryBoardに配置する

http://qiita.com/kikuchy/items/f1d6731d804b63cf7a29

上の記事を参考にやってみました。

手順は、

  • カスタムビューの親クラスにあたるビューをStoryBoardに配置
  • 配置したビューをクリック
  • 右側のユーティリティエリアshow the Identity Inspecterと吹き出しが出るタブ(アイデンティティインスペクタ)を開く
  • Custom Classの項目にカスタムビューのクラス名を追加

ひとまず、しばらくはサンプルなぞってきゃっきゃしているだけ感じです。

JavaScriptではUI作るための引き出しがなくてMVCとかは多少はわかっても実際いろいろ動きを作るのが遅くて*2Androidの時は逆に最初に一通りwidgetクラス触って少しだけ救われたので、とりあえず面白がれる範囲でやっていこうかと思います。

*1:本当はNSStringが拡張されているけれど、SwiftからはObjective-CのNSStringはStringとして見える

*2:この辺とかで時間切れしてたりする http://woshidan.hatenablog.com/entry/2015/06/15/024121