ホーム / iosアプリ開発 Swiftでクイズアプリを作ってみる /

iOSアプリ開発　Swiftでクイズアプリを作ってみる　前編

2019年7月22日月曜日

iosアプリ開発 Swiftでクイズアプリを作ってみる

t f B! P L








目次

1. 新規プロジェクトの作成
2. Main.storyboard  LabelとButtonとUIImageの配置
3. QuizViewControllerの作成  LabelとButtonとUIImageの接続
4. CSVファイルの作成  クイズ問題の作成
5. CSVファイル読み込み 関数





1. 新規プロジェクトの作成




Single View Appを選択してNext



Product Name、Organization Name、Organization Identifierを入力してNext




2. main.storyboard  LabelとButtonの配置


オブジェクトからButtonを選択、View Controller上に配置



STARTボタンにします。



となりにもう一つView Controllerを配置します。


オブジェクトライブラリからView Controllerを選択。

２つのView Controllerができました。


STARTボタンと追加したView Controllerを接続します。


STARTボタンを選択、Controlキーを押しながら右側のView Controller上に移動させマウスボタンを離します。

Action Segueが表示されるので、Present Modallyを選択。


Segueが表示されます。



右側のView ControllerにLabel２つとButton４つを配置します。



オブジェクトライブラリからImage Viewを選択。


上から２つ目のLabelの上に２つ重ねます。


Assets.xcassetsを選択して、用意していた⭕️正解と✖️不正解の画像を追加します。


Main.storyboardに戻り、Image Viewを選択します。


右側ユーティリティエリアの属性インスペクタを選択。
  • Image ViewのImageを⭕️正解にします。
  • ViewのContent ModeをAspect Fitにします。
  • Alphaを0にします。


もう一つのImage Viewを✖️不正解にして、同じ設定にします。





3. QuizViewController.swiftの作成  LabelとButtonとUIImageの接続


新規ファイルの作成、Cocoa Touch Classを選択して、Next。

Class名をQuizViewControllerにします。


Main.storyboardで右側のViewControllerを選択。

右側のアイデンティティインスペクタを選択。

Custom Class内のclassをQuizViewControllerにします。



アシスタントエディタを表示します。


左側にMain.storyboard、右側にQuizViewController.swiftを表示させます。


Main.storyboardの一番上のLabelをコントロールキーを押したまま、右側のコード上にドラッグ&ドロップします。

Nameを入力してConnect


下のLabelとButton4つも同じ手順でドラッグ&ドロップします。



  1. @IBOutlet weak var label00: UILabel!
  2.     
  3. @IBOutlet weak var label01: UILabel!
  4.     
  5. @IBOutlet var button01: [UIButton]!




Buttonを押した時のアクション


Main.storyboardのButtonをコントロールキーを押したまま、右側のコード上にドラッグ&ドロップします。

Nameを入力してConnect



下の３つのButtonも接続します。

  1. @IBAction func buttonCheck(_ sender: Any) {
  2. }





  1. @IBOutlet weak var currectAnswer: UIImageView!
  2.     
  3. @IBOutlet weak var incorrectAnswer: UIImageView!






4. CSVファイルの作成  クイズ問題の作成

New FileからEnptyを選択Next

Save As: クイズ問題.csv 

Create



  1. ワンピースの主人公、モンキー・D・ルフィの兄弟は誰？,ポートガス・D・エース,モンキー・D・ガープ,モンキー・D・ドラゴン,ゴール・D・ロジャー
  2. スラムダンクの主人公、桜木花道のチームメートは誰？,流川楓,仙道彰,清田信長,青田龍彦
  3. ドラゴンボールの主人公、孫悟空の兄弟は誰？,ラディッツ, ターレス,ブロリー,バーダック


クイズ問題,クイズの答え,ダミーの答え,ダミーの答え,ダミーの答え





5. CSVファイル読み込み　関数


  1. var csvArray: [AnyObject] = []

  1. func csvToArray() {
  2.         
  3.         if let csvPath = Bundle.main.path(forResource: "クイズ問題", ofType: "csv") {
  4.           
  5.             do {
  6.                 
  7.                 let csvStr = try String(contentsOfFile: csvPath, encoding: String.Encoding.utf8)
  8.                 
  9.                 let csvArr = csvStr.split(separator: "\n").map(String.init)
  10.                 
  11.                 for csvFile in csvArr {
  12.                     
  13.                     let csvsplit = csvFile .components(separatedBy: ",")
  14.                     
  15.                     csvArray.append(csvsplit as AnyObject)
  16.                     
  17.                 }
  18.                 
  19.                 print(csvArray)
  20.                 
  21.             } catch let error as NSError {
  22.                 
  23.                 print(error.localizedDescription)
  24.                 
  25.             }
  26.         }
  27.     }

  1. override func viewDidLoad() {
  2.         super.viewDidLoad()
  3. csvToArray()
  4. }

 viewDidLoad()内にcsvToArray()




keep175
Illustrator,photoshop,アプリ開発の勉強中です。

アーカイブ

QooQ