Teaprog.com

とあるエンジニアの日々の記録。エンジニアと関係のないようなことも書きます。

iPhoneでフォント一覧を表示するアプリ作成

目次

実行結果

 

xcodeを使用して、iPhone向けのアプリを作成しました。

 

テーブルビューという仕様を使用して、複数の値をリスト表示させています。

 

今回は参考書籍通りにフォントを一覧表示するアプリを作って動くかどうか試してみました。 

 

上はiPhone12の画面ですが、PC上でシミュレータで動かしているため、マウスが写っております。

 

iPhoneを購入できていないので、ご容赦いただきたく存じます。

 

画面をスクロールすると、一覧もそれに沿って上に流れていく様子が確認できました。

 

参考書籍

 

私はiPhoneアプリ作成の初心者でしたので、こちらの本を選びました。

 

 

実はこの本、2、3年前に購入したため、バージョンが古いです。

 

もう一つ新しいバージョンの書籍が出ていましたので、それもご参考にしていただければと思います。

 

 

簡単な作成手順

 

参考書籍に記載があった作成手順を簡単ですが、まとめてみました。

 

画像は実際に私自身が手を動かして打ち込んでいるものになりますので、ご了承いただきたく存じます。

 

より詳しく構造を知りたい方は、上で紹介させていただいた参考書籍をご覧になることをお勧めいたします。

 

まずファイル名を入力します。

 

「Language」には「Swift」を選択します。

 

     f:id:tk0137:20210612200457j:plain

 

続いて「Object」を画面上に設置します。

 

今回使用したのは「Table View」です。

 

ここに一覧が表示されます。

 

f:id:tk0137:20210612200538j:plain

 

一覧は画面いっぱいに表示させたいので、「Table View」と画面枠の間の余白をなくします。

 

編集画面の一番下にあるアイコンをクリックして、制約を追加します。

 

余白を無くすには、上下左右の数値の値を全てゼロにします。

 

f:id:tk0137:20210612200628j:plain

 

ここまでの作業が終了した段階でアプリを実行した結果が以下の画像のようになります。

 

真っ白の画面ですが、よく見ると罫線が聞かれているのが確認できます。

 

この各行に一覧として文字列が表示されていきます。

                                                  f:id:tk0137:20210612200743j:plain

 

次に「Table View」を「dataSource」と「delegate」へ接続します。

 

この「dataSource」と「delegate」がなんなのかよく分からなかったので、他のサイトで調べて見たところ、「dataSource」は"テーブルに表示する内容を提供するもの"、「delegate」は"テーブルの表示や操作を処理するためのもの"だそうです。

 

この二つの機能を使用するために、「UITableViewDatasource」「UITableViewDelegate」という二つのプロトコルを追加する必要があるということです。

 

つまり、「TableView」で一覧表示したいなら、この一連の作業は必須になるようです。

 

なんとなくわかったようなそうでないような感じですが、とにかくおまじないのように、コードを書いていきます。

 

f:id:tk0137:20210612200708j:plain

 

コードは「ViewController.swift」に記述していきます。

 

まず、「ViewController」クラスには、先ほど述べた二つの「UIViewController」、 「UITableViewDataSource」プロトコルを記述します。

 

クラスを宣言した段階では、エラーが出るかもしれません。

 

しかしこれは、「行数」と「一覧に表示する内容」を出力するコードを書いていない事に起因するものですので、コードを書き進めるうちにエラーは消えます。

class ViewController: UIViewController, UITableViewDataSource, 
UITableViewDelegate{...}

 

そしてこのクラスの中に以下のようにフォント名を格納する配列を宣言します。

 

//フォント名を入れる配列を用意
    var fontName_array:[String] = []

 

そして元からあるその下の「ViewDidLoad」関数内に、先ほど宣言した配列にフォント名を格納するコードを記述していきます。

 

//フォントファミリー名を全て調べる
        for fontFamilyName in UIFont.familyNames {
            //そのフォントファミリー名が持っているフォント名を全て調べる
            for fontName in UIFont.fontNames(forFamilyName:fontFamilyName as String){
                //フォント名を配列に追加
                fontName_array.append(fontName as String)
            }

 

そして、先ほどエラーの原因になっていた「行数」と「一覧に表示する内容」に関するコードを書いていきます。

 

行数はフォントの数を「count」プロパティで取得しています。

 

また、コード中にある「cell」いわゆる「セル」は「Table View」においては1行単位の要素のことを表します。

 

コード中ではセルの宣言時に「.subtitle」と指定していますので、実行結果のようにフォントの表示例とフォント名の2行が表示されているわけです。

 

//テーブルビューの行数
    func tableView(_ tableView: UITableView, numberOfRowsInSection
                    section: Int) -> Int {
        return fontName_array.count
    }
    func tableView(_ tableView: UITableView, cellForRowAt
                    indexPath: IndexPath) -> UITableViewCell{
        //セルを作ります(二つのラベルを表示できる[.sbutitle])
        let cell = UITableViewCell(style: .subtitle,
                                   reuseIdentifier:"myCell")
        //このセルに表示するフォント名を取得します
        let  fontname = fontName_array[indexPath.row]
        //テキストに、指定したフォントでサンプル文字を表示します
        cell.textLabel?.font = UIFont(name: fontname, size: 18)
        cell.textLabel?.text = "ABCDE abcde 012345 あいうえお"
        //サブテキストに、フォント名を表示します
        cell.detailTextLabel?.textColor = UIColor.brown
        cell.detailTextLabel?.text = fontname
        return cell
    }

 

f:id:tk0137:20210612200956j:plain

 

f:id:tk0137:20210612201014j:plain

 

ここまでのコードを記述すれば、コードとしては完成です。

 

動作確認をして正常な挙動を確認できれば、アプリとして完成です。

 

↑目次に戻る

 

まとめ

 

最近アプリの作成をしていなかったので久々にmacbookのxcodeを開きました。

 

少し複雑な気持ちで、この記事を書いておりました。

 

まだ自身の力で1つのアプリを1から作成できないということに少し悔しさを感じます。

 

ですがこのモヤモヤした感覚は忘れないようにしたいと思います。

 

このような時期を経て、また一つ次の段階へ進めるのだと思っているからです。

 

今の立場に甘えず、ゆっくりでもいいので少しづつ手を動かしてみようと思います。

 

私ごとになってしまいましたが、最後までありがとうございました。