困ったー

WIN10・アプリ・ゲームで困ったことを調べてみた

[イベント情報!] ✅ラグビーワールドカップ。8/10から第四次販売!

[セール情報!] ✅3000円クーポン付き任天堂スイッチが登場。

【MAC】XCODEのレイアウト TextViewが消える?ボタンが勝手に移動する?

XCODEでSWIFTを使ってみましたが、思ったよりもつまずきました。

特にレイアウトでは、配置したら文字が消えたりボタンがなぜか違う場所に表示されたりして非常に苦労しました。

ここでは、プログラム経験者がSWIFTを扱うときのレイアウトつまずきポイントや対処法などについて随時まとめていきます。

アイフォンアプリを作るには?

Applications 2015-01-10

アイフォンアプリを作るには、マック上でXCODEという開発ソフトを利用します。

開発言語では現在はSWIFTが一般的のようです。

 

開発環境の構築

マックでアップストアから無料でXCODEをダウンロードすればいいです。

なおOSのアップデートが必要となる場合もありますが、更新を実行するだけですのでそんなに手間はかかりません。

 

開発環境の構築では、アンドロイドよりはこちらのほうがスムーズに作れると思います。XCODEを利用するメリットのひとつといえます。

 

 

エミュレータ実行時のエラー

マック上ではアイフォンのエミュレータを起動させて動作確認をすることができます。

 

この実行時でもよくエラーが出ます。対処などについては以下参照ください。

apicodes.hatenablog.com

 

レイアウトの不具合

エミュレータ実行するとボタンの位置がずれる?

エミュレータでプログラムを実行すると、Storyboardで配置したようにはならないことが多々あります。

これは各部品に制限(Constrain)を指定してあるため、エミュレータのほうではそレに従って配置されるためです。

 

この場合は、部品にある制限を一度全部クリアにしてからやり直すのがいいと思います。

特に制限は何度もつけることができるため、以前つけたものがそのまま残るケースも多々あります。注意しましょう。

 

TextViewで文字が表示できない?

文字表示の部品であるTextViewをおいて、プログラムから文字を設定させることも多いと思いますが、なぜか文字が表示されませんでした。

 

単純にtext viewをcontroller上においてシミュレータを動かすと表示されます。

次にtext viewにマージンの制限をつけると表示されなくなりました。

うちだけの問題なのか、何か設定をする必要があるのかは今のところよくわかりません。

  

 

レイアウトでつまづかないためには?

レイアウトには正直まだ慣れません。

文字が表示されなくなったり、ボタンがシミュレータ上では急に変な位置に出たりしてしまい、イメージ通りに作業が進みません。

 

そんななかでもなんとかなれる方法を考えてみました。

 

中央から配置する

アイフォンやアイパッドでは、種類で画面サイズが異なります。また画面を横置きにした時の表示も変わります。

ある程度レイアウトは柔軟に、変化に強く考えないといけません。

 

結局楽そうなのが、まず中心の部品を決めること。

これはHorizontalとverticalで中心にセットすればいいので、これに関しては問題ないと思います。

 

とはそこからのマージンで部品を配置していく。またはVertical や Horizontalで中央揃えにしながら距離?を指定して配置していく。

 

今のところはこれが一番安定しているように思います。

 

画面を分ける

リストの画面はよくアプリで使うものと思います。

 

ただし個別画面にTableViewを入れると、TableView自体のレイアウト設定で苦労します。

 

逆にTable View Controllerを入れて、1画面フルでテーブルビューというページであれば」、テーブルビュー自体のレイアウトについて考えなくて済みます。

 

レイアウトで躓いたら、画面を機能別に細かく分けていくのもいいかと思います。

 

画面の戻り方に慣れておく

画面を細かく分けると、戻りが大変だったりします。

前のページだけでなく、前の前に戻りたい場合など。

以下ページのスクリプトが参考になりました。

yuu.1000quu.com

 

画面を分けない

これは上の内容とは正反対なので怒られそうです。

 

しかし、画面分けをするほど、ストーリーボード上での作業やプログラムでクラスを作ったりと手間が増えていきます。こんがらがって作業効率が落ちます。

それならいっそのこと、1ページで済ましたほうがストレスが減るかもしれません。

 

1画面で済ますには、フォームやテキストなどの部品を「isHidden」属性を使って表示のオンオフを行うようにすればOKです。

 

 

縦画面か横画面か指定しておく

画面が縦なのか、横なのか両方なのか確認しておきます。

プロジェクトの設定でDeployment Info>Device Orientation」をみてみます。

Portraitが縦、Landscapeが横の画面です。

f:id:apicode:20171227104405p:plain

 

確認する画面サイズを知っておく

エミュレータではいろんなアイフォンで表示できます。

全部を調べるのは大変なので、大きいアイフォン、小さいアイフォンなどで確認したほうがレイアウトをチェックしやすいと思います。

小さいものならiPhone4で、大きいものならiPhoneXがよさそうです。

またiOS11以降であれば5S以上からが対象になります。

  • iPhone4,4S  960x640
  • iPhone5,5S,5C 1136x640
  • iPhone6, 6S,7,8 1334x750
  • iPhone6Plus,7Plus,8Plus 1920x1080
  • iPhoneX 2436x1125

 

iPad対応を考えるなら最大はプロ12.9インチの2732×2048あたりで確認するとよさそうです。

  • iPad1,2,mini 1024×768
  • iPad3,4,Air, Air2,mini2, mini3, mini4, Pro(9.7インチ), 2017(9.7インチ)  2048×1536
  • Pro2017(10.5インチ)  2224×1668
  • Pro(12.9インチ),Pro2017(12.9インチ)  2732×2048

 

 

用意するアイコンのサイズを知っておく

アプリのアイコンですが、用意すべきサイズが非常に多いです。

1つのものでも2倍の解像度のものも必要だったりします。

現状は以下サイズを作成するといいようです。

1024x1024

iTunesArtwork@2x

Icon-1024.png

512x512

・iTunesArtwork

180x180

Icon-60@3x.png

167x167

・Icon-83.5@2x.png

152x152

Icon-76@2x.png

120x120

Icon-Small-40@3x.png

Icon-60@2x.png

87x87

Icon-Small@3x.png

80x80

Icon-Small-40@2x.png

76x76

Icon-76.png

60x60

iPhone-20@3x.png

58x58

Icon-Small@2x.png

40x40

iPad-20@2x.png

iPhone-20@2x.png

Icon-Small-40.png

29x29

Icon-Small.png

20x20

iPad-20@1x.png

 

 

SWIFTのつまずき

SWIFTの仕様変更が激しい

Swift

プログラムを書くときはネット検索でコードを参照しますが、これが結構古くなっています。

実感としては、ほかのプログラム言語よりも激しいように思います。

 

よって、検索するときに「SWIFT4 テーブルビュー」などのようにSWIFTと利用しているバージョン番号とセットで検索ワードをセットしたほうが最新のコードにヒットします。

 

検索時にTOOLを使って検索範囲を1年以内のものにしてしまうのもいいと思います。

 

テキストデータ読めない?

アプリ用にテキストデータをロードさせたい場合があります。

事前にクイズの問題を作っておき、ロードしてからランダムに出題する...などの場合です。

 

ファイル読み込みの命令を探して「let csvBundle = Bundle.main.path(forResource: fileName, ofType: "txt")!」を使ったらファイルが読めないエラーになりました。

 

このときに役立ったのが以下のページ。

Swiftでプロジェクト内のファイルを取得する際の注意点2つ | Yuuの悠々自適Blog

 

リソースに入れたファイル名が拡張子付きだとよくないようです。

Bundle.main.path(forResource: "text", ofType: "txt") //正しい Bundle.main.path(forResource: "text.txt", ofType: "txt")//間違い

 

うちでは拡張子をつけていました。はずしたらエラーがなくなりました。

 

このブログは、ネットや書籍上の情報、個人の体験や感想を中心にまとめたものです。 正確性を期していはいますが、間違い・誤訳等あるかもしれません。 ご利用にあたっては、当サイトの情報によって生じたいかなる損失について一切の責任を負わないものとしますん。あらかじめご了承ください。