第17回 iPhoneとiPadで似た表示を作る。（UILabel使用）
ソースコードをすべてアップしてませんが、前回までで、メインメニューと４つの画面の行き来ができるようになっています。
私のブログを読んでくださっている方の中には、プログラム精通者も入れば、初心者の方もいると思いますし、若い方も、ご年配の方もいることと思います。
ちらっと私のプログラム遍歴を披露しておきますね。
基本はBASICという世代です。シャープ、富士通、NEC、日立・・・国産のパソコンが華やかなりし頃、色々なBASICを触りましたね。
スピードが不満で、アセンブラに手を出したり。アセンブラは劇的に早かったです。というか、BASICが遅すぎ。
CやC++に手を出すも、大きな作品は作っていません。
その後、仕事でエクセルマクロに手を染めますが、これが意外と、オブジェクト指向だったんだなと、今にして分かります。
そんなわけで、私のプログラミングスタイルが少しは理解していただけるかもしれません。
さて、今回は、エントリー画面なんですが、以前作ったアプリはIOS版でここにピッカービューを使っていました。ピッカービューの見た目が面白いという理由だけで使ったのですが、これがAndroidへの移植を阻んでしまった大きな原因でした。今回リニューアルをする上で、iOS,Androidの両方でリリースすることが前提であること、および、ここの使い勝手を大幅に向上させたいという理由から、スクロールビューを使用することにします。
イメージをスケッチしてみました。
左側が、走者選択画面です。
登録した氏名がスクロールビューに一覧表示され、タップすることで、選択される。
選択が終了したら、決定ボタンを押し、右の画面に。
サンプル画面はボタン配置を示す図が表示されるエリアで、何列に表示するか決めてもらうところです。
今回の画面は、スクロールビューを含め、UI部品を多用してみたいと思います。
この程度なら、ストーリーボード使った方がという、ご意見は無視させていただきます。
デザイン上の問題から、最初のスケッチと変わる可能性は十分ありますが、そういうことは日常茶飯事なので、あしからず・・・
で、左側の第１画面から作成しますが、ラベル2個、ボタン4個をまずおいてみます。空いた場所にスクロールビューを可能な限り縦に長く入れてみようかと思います。
とりあえず、swiftで。
override init(frame: CGRect) { super.init(frame: frame) backgroundColor = UIColor(red: 100/255, green: 240/255, blue: 255/255, alpha: 255/255) // このビューのサイズを取っておく myWidth = frame.width myHeight = frame.height runnerSelect() } func runnerSelect() { // ランナーを指定する画面。 // エントリー用のパーツを配置する // Entry(走者名の登録） UILabel let title = UILabel(frame: CGRect.zero) // この時点でサイズは決めない title.text = "Entry(走者名の登録)" title.font = UIFont.systemFont(ofSize: myWidth*0.07, weight: .semibold) title.sizeToFit() addSubview(title) title.center = CGPoint(x: myWidth*0.5, y: myHeight*0.05) }
今回の肝は、フォントのサイズ指定のところ。
title.font = UIFont.systemFont(ofSize: myWidth*0.07, weight: .semibold)
というところですね。
画面幅を基準にフォントサイズを指定すると、iPhoneでもiPadでも似たような表示になるよってところです。
iPadに対しては、ビューの横幅を少し削り、本当の横幅より小さい目のサイズをmyWidthに渡せば、もう少し、よくなるかもしれません。
文字の感覚的な大きさはほぼ同じではないでしょうか？
