Tips

UIButtonを継承したオリジナルボタンをstoryboard上で使用する③

UIButtonを継承したオリジナルボタンをstoryboard上で使用する③

それでは前回の続きです。
s13_1
↑ここまで作成できていましたね。やっぱりエラーがなくなるとなんだかスッキリしますね!(個人的にですが。)

今度こそオリジナル感を出していく!

ふと思ったのですが、サイズが10pxだとボタンがちょっと小さすぎるので、

    init(){
        super.init(frame: CGRectMake(10, 10, 10, 10))
    }

のCGRectMake()の中を変更します。
ちなみに、CGRectMake()関数は、中の引数でオブジェクトの座標とサイズを決めることができます。
CGRectMake(X座標、Y座標、横幅、縦幅)というふうに指定していきます。
とりあえず全部100にしましょう。

    init(){
        super.init(frame: CGRectMake(100, 100, 100, 100))
    }

ただしこのままだと背景色やボタンの文字などが全くありませんので、2行ほど
付け加えます。

        self.backgroundColor = UIColor.blueColor()
        self.setTitle("Button", forState: UIControlState.Normal)

すると、こんな感じに。
s13_2
こう記述するとすると、MyButtonクラスのインスタンスを作成すると、
(X座標、Y座標)=(100px,100px)の位置で(横幅、縦幅)=(100px,100px)
で、背景色が青色、ボタンを押していない通常時(Normal時)に「Button」という文字が自動的に
表示されます。

さぁ、ここまでできたらもう準備OKです!

storyboardにMyButtonクラスのボタンを配置してみよう!

では、実際にボタンをstoryboard上に配置していきます。
まず、通常のUIButtonクラスのボタンを任意の位置に配置します。
s13_3
ただし、このボタンはXcode側で用意されているUIButtonクラスのボタンになります。
自分で作成したMyButtonクラスのボタンではありません。
なので、このボタンのクラスを変更してあげないといけないのですね。

変更するには、ユーティリティエリアのアイデンティティインスペクタ内の
「Custom Class」部分に変更を加える必要があります。
s13_4
薄くUIButtonと表示されているところがあると思いますが、その右側の矢印をクリックしてみましょう。
そうすると選択できるクラスが表示されその中にMyButtonクラスがありますので選択します。
s13_5

この「Custom Class」の部分を変更するとそのオブジェクトのクラスを変更することができますので
覚えておきましょう。

では、Runボタンを押して実際にシミュレータで確認してみましょう。

実行が上手くいかない!!

しかし、試してみると下記の様なエラーが表示されてどうもうまく動作してくれません。
s13_6
エラーの部分を見てみると、

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

の部分でエラーが起こっている様です。

fatalError()関数とはなんぞ?

さて、ここでちょっと脱線してfatalError()関数についてです。
fatal errorは「フェイタルエラー」と読み、「致命的なエラー」という意味になります。
引数なしでも使用できますし、引数にstring型の文字列を指定して、その文字をエラー文言として
表示することができます。

その行に差し掛かったタイミングで、無条件で、強制的に実行を止めエラーを表示して落とすという動作をとります。
今一度この行を見てみると、

        fatalError("init(coder:) has not been implemented")

という関数ですので、エラーの際にデバッグエリアに「init(coder:) has not been implemented」
のメッセージが表示されることになります。

似たような関数にassert関数がありますが、こちらは条件を指定してその条件を満たしていない時に
だけ実行を止めてエラーを表示するというものになります。
assert(条件式、”表示したいエラー文言”)という形で記述します。fatalError()と同じく、””内の
エラー文言は省略することができます。

fatalError()は、その行に差し掛かったら無条件で実行を止めて落とす。
assert()は、条件を指定して、その条件に反したら実行を止め、条件に合致していたらそのまま
実行を続ける。

ということになります。

試しに新しいプロジェクトで以下のコードを書いてみましょう。

        let a = 1
        assert(a == 5, "aは5じゃないからアウト!")
        fatalError("aがどんな数字だろうと無条件でアウト!")

記述した後に実行してみると以下の様になります。
s13_7
a=1ですので、assert関数の部分で条件を満たしていないのでそこで実行が
止められています。
下のデバッグ部分も見てみると、assert関数のメッセージが出力されている
のも確認できますね。
では、次にaの値を5に変更して実行してみましょう。

        let a = 5
        assert(a == 5, "aは5じゃないからアウト!")
        fatalError("aがどんな数字だろうと無条件でアウト!")

変更後に実行してみると以下の様になります。
s13_8
a=5ですのでassert関数の条件は満たしています。そのため、その行では実行が止まらずに処理され、
次の行のfatalError関数でエラーが表示されて実行が止まっています。
また、下のデバッグ部分でもfatalError関数のメッセージが出力されているのが確認できるかと
思います。

脱線が長くなってしまいましたので、今回はこれで終わりにしたいと思います。

つづく

TechProjin 開発系基礎講座 連載リンク

基礎からPHPWEBアプリ解発を学ぶなら・・
PHP基礎 連載

AIなどで注目急上昇!これから学ぶならPython!!
独学で学ぶ-pythonプログラミング 連載

汎用性◎ 定番プログラミング言語JAVA
Java基礎講座 連載

Recent News

Recent Tips

Tag Search