Ios-development-with-swift2-advanced-ios
Swift2によるiOS開発-高度なiOS
この章では、アプリケーションでの複数のビューの作成、ナビゲーションバーの追加、テーブルビューの追加、アプリケーションへのデータの保存、Webアプリケーションの作成などの高度な機能について説明します。
この章にはアプリケーションの開発に必要なもののほとんどが含まれているため、すべてのセクションを注意深く読んでください。
マルチビューコントローラー
以前のアプリケーションでは、単一のビュー/View Controllerのみを提供していました。 ただし、アプリケーションに複数のビューを含めることができ、それらのビューを個別に実行できます。
したがって、新しいプロジェクトを作成することから始めます。このプロジェクトの名前には複数のビューがあります。 他のすべてのプロジェクトと同様に、このプロジェクトにもView Controllerとそのコントローラー用のSwiftファイルがあります。 (これは、ビューを選択し、Identity Inspectorでそのプロパティを表示することで確認できます。)
次のスクリーンショットは、現在のビューがどのように見えるかを示しています-
右側(Identityインスペクター)に、View Controllerに関連するクラスが表示されます。 左側のこの矢印は、エントリポイントです。 これは、アプリケーションの実行開始後に表示されるアプリケーションの最初のビューです。
2番目のMultiple View Controllerの追加
アプリケーションに他のView Controllerを追加するには、オブジェクトライブラリでView Controllerを検索します。 見つかったら、View Controllerをmain.stroryboardのほかのビューのすぐ外側にドラッグします。
これは、アプリケーションの外観です。 これで、View Controllerが追加されましたが、新しく追加されたビューのView Controllerクラスも作成する必要があります。
- プロジェクトを右クリック→新しいファイル→cocoa Touch Class→*好きな名前を付けて、「SecondViewController」という名前を付けます。
これは、View Controllerのクラスファイルを作成する方法です。 ここで、「main.storyboard」に戻り、2番目のView Controllerをクリックして、Identity Inspectorを確認します。
クラスフィールドは現在空である必要があるため、そのフィールドをクリックして、最後の手順で追加したクラス名の入力を開始します。 表示されたら、Enterをクリックします。
これで、複数のView Controllerを作成し、そのViewのコントローラークラスファイルを追加しました。 ただし、アプリケーションを実行すると、2番目のビューはまだ表示されません。 Why?
関数を追加していないため、そのビューに移動できます。 つまり、アプリケーションにナビゲーションをまだ追加していません。 心配しないでください;次のセクションで説明します。
アプリケーションへのナビゲーションの追加
あるビューから別のビューへの遷移のプロセスは、セグエ*と呼ばれます。 2つのビューの間にセグエを作成して行います。 これを行うには、最初のView Controllerにボタンを追加し、そこから2番目のビューへのドラッグを制御します。 ボタンを離すと、下のスクリーンショットに示すようにいくつかのオプションが表示されます。
アクションセグエから「表示」オプションを選択します。 アプリケーションを実行すると、ボタンをクリックすると、2番目のビューが表示されます(2番目のビューに何かをより明確に追加して、識別できるようにします)。
ただし、最初のビューに戻ることはできません。 そのために、 Navigation controller があります。
最初のView Controllerを選択し、トップバーで、*エディター→埋め込み→ナビゲーションコントローラー*をクリックします。
これで、アプリケーションは次のスクリーンショットのようになります。
ビューの上部に小さな明るい灰色の行があることを確認する必要があります。 これで、アプリケーションを実行すると、ビューの上部にナビゲーションバーがあることがわかります。 ボタンをクリックすると、2番目のビューに移動し、そのナビゲーションバーに戻るボタンが表示されます。 これをクリックすると、初期ビューに戻ります。
ナビゲーションバーにタイトルと戻るボタンを追加する
ナビゲーションバーにタイトルを追加するには、ナビゲーションバーをクリックして、属性インスペクターを表示します。 そこに我々は表示されます-
- タイトル-これは、中央に表示されるナビゲーションバーのタイトルになります。
- プロンプト-これは中央のタイトルバーの上部に表示されます。
- 戻るボタン-ここでは、戻るボタンに表示されるテキストを変更できます。
現在、ビューを通過しているボタンはビューにあります。これは、画面に他の何かを表示したい場合には適さない可能性があります。 したがって、ナビゲーションバーにBar Buttonアイテムを追加し、2番目のビューに移動します。 ただし、このためには、最初に追加した最後のボタンを削除する必要があります。
バーボタンアイテムの追加
オブジェクトライブラリでバーボタンアイテムを検索し、ナビゲーションバーの右側にドロップをドラッグします。 「次へ」という名前を付け、そこから2番目のビューへのドラッグを制御し、追加した最後のボタンで行ったように「表示」を選択します。
アプリケーションを実行すると、見た目がすっきりと良くなります。 これが、ナビゲーションで今行うことのすべてです。 後続の章では、必要に応じて、Swiftコードを使用してナビゲーションバーを変更します。
テーブルビュー
テーブルは、複数の行を含む単一の列リストとしてデータを表示します。これはさらにセクションに分割できます。 テーブルを使用して、クリーンで効率的な方法でデータを表示する必要があります。
このセクションでは、テーブルビューの追加、プロトタイプセルの追加、テーブルビューのデータソースとデリゲートの追加、テーブルのプロパティの変更、テーブルビューセルの動的データの設定方法を理解します。
テーブルビューの追加
テーブルビューを追加するには、まず新しいプロジェクトを作成し、「tableView」という名前を付けます。 次に、オブジェクトライブラリに移動し、Table Viewを検索します。TableView、Table View Controller、その他の多くのオプションが表示されます。 ただし、テーブルビューを選択してドラッグし、デフォルトビューコントローラーに追加する必要があります。
プロトタイプセルの追加
テーブルビューが強調表示されている間に、ビュー全体をカバーするようにテーブルビューを引き伸ばします。 属性インスペクターを確認してください。Prototypecellsというフィールドがあり、現在は0です。 値を1に変更する必要があります。これで、ビューは次のようになります。
セル識別子の変更
次に、ビュー内で、プロトタイプセルをクリックします(少し注意が必要です)。 そのため、ドキュメントアウトラインで、[ビューコントローラー]→[表示]→[テーブルビュー]→[テーブルビューセル]をクリックします。属性インスペクターに[識別子]という列があり、クリックして「セル」という名前を付けます。 上記の手順を理解するには、次のスクリーンショットを参照してください。
デリゲートとデータソースの追加
テーブルビューを動的にするには、動的データを読み込む必要があります。 したがって、そのためのデリゲートとデータソースが必要です。 テーブルのデリゲートとデータソースを作成するには、下のスクリーンショットに示すように、Table ViewからView ControllerまたはView Controllerの上の黄色のボタンまでドラッグを制御します。
カーソルを放すと、dataSourceとデリゲートの2つのオプションが表示され、それらを1つずつ選択します(いずれかのオプションを選択すると、ポップアップが非表示になり、上記の手順を繰り返して2番目のオプションを追加する必要があります) 。 今、それは次のように見えるはずです-
これが、UI/Main.Storyboardを使用して行うことです。 「ViewController.swift」ファイルに切り替えます。 以下に示すように、viewController.swiftに UITableViewDelegate、UITableViewDataSource を追加します-
ただし、Xcodeはこの行にエラーを表示します。
これは、 UITableView を使用する必要があるメソッドがいくつかあるためです。
これらのメソッドを表示するには、Commandキーを押しながらUITableViewDataSouceをクリックし、「numberOfRowsInSection」、「cellForRowAtIndex」引数を持つ最初の2つのメソッドをコピーし、viewDidLoad()の前にViewController.swiftに貼り付けます。
両方のメソッドからこの行* @ available(iOS 2.0、*)*を削除し、開始と終了の中括弧「\ {}」を追加します。 今、ビューは次のようになります-
Xcodeは両方の関数でエラーを表示している必要があります。 ただし、これらの関数の戻り値の型は追加していないため、心配する必要はありません。
今、あなたの関数は次のように見えるはずです-
最初の行では、デフォルトスタイルのセルを作成しています。 reuseIdentifier は、作成したプロトタイプセルの名前です。
最後に、そこからセルを返します。 今すぐアプリケーションを実行してみてください、それは次のように見えるはずです-
タイムテーブルアプリケーション
このアプリケーションでは、最後のプロジェクトを継続し、2(2…10…。)のテーブルを印刷するアプリケーションを作成します。 20).
したがって、このアプリケーションを作成するには、プロジェクトのView Controllerファイルを変更するだけです。
以下に示すように機能を変更します-
次に、アプリケーションを実行します。 以下のようになります。
さて、テーブルビューを完成させてアプリケーションを作成したので、解決するための簡単な課題があります。
チャレンジ
ユーザーが入力した番号のカウントテーブルを印刷するアプリケーションを作成します。
ヒント-入力を取得し、ボタンを追加します。ボタンを押すと、その数のカウントとともにテーブルがロードされます。 ここでは、テーブルデータをリロードする次の関数も必要です。
このアプリケーションに関するすべてのトピックを網羅しているため、これはあなたにとっての課題です。そのためのソリューションは提供しません。
卵タイマーアプリケーション
このアプリケーションでは、時間を管理する* Timer()および *Class Constructor の概念を使用します。 コンセプトとコーディングを提供します。 前の章ですべてのUI要素について何度も説明したように、自分でUIを作成する必要があります。 (ただし、まったく新しいもののヒントを提供します)。
最終的なアプリのレイアウトは次のようになります-
このアプリケーションではどうなりますか?
- タイトルラベルの開始値は210です。
- 再生ボタンをクリックすると、値が1秒ごとに減少します。
- 一時停止をクリックすると、値はそこでのみ停止します。
- -10をクリックすると、値が10減り、デクリメントが継続します。
- +10のクリックで、値が10増加し、減少が続くはずです。
- リセットをクリックすると、値は210になります。
- 値が0未満になることはありません。
概念
- クラスTimer()→var timer = Timer()の変数を使用します。
- 作成したばかりのこのタイマー変数に値を設定します。
- timer = Timer.scheduledTimer(timeInterval:1、target:self、selector:#selector(ViewController.processTimer)、userInfo:nil、repeats:true)
- timeInterval→は、使用する時間間隔です。
- target→は影響を受けるビューコントローラーです。
- selector→は、このタイマーを使用する関数名です。
- userInfo→ null and repeats、はい、繰り返したいので、それは本当です。
タイマーの無効化
プログラミングによってタイマーを停止するには、* timer.invalidate()*関数を追加します。
使用した要素-
ナビゲーションバー-ナビゲーションバーに3つの項目を追加しました。
- バーボタンアイテム、左に1つ、右に1つ。
- 「Our Egg Timer」という名前のタイトル。
ツールバー-ツールバーはアプリ画面の下部に表示され、現在のビューまたはそのコンテンツに関連するアクションを実行するためのボタンが含まれています。
ツールバーは半透明で、背景色が付いている場合があります。 人々がそれらを必要とする可能性が低いとき、彼らはしばしば隠れます。
UIの下部に5つの項目があるツールバーを追加しました。
- -10、リセット、+ 10という名前の3つのバーボタン項目。
- 2つの柔軟なスペース:バーボタン項目間の柔軟なスペース-
バーボタンアイテムにアイコンを追加する方法は?
バーボタンアイテムを選択します。 バーボタンアイテムをクリックし、属性インスペクターに移動し、[アイテムの選択]をクリックして、表示されるドロップダウンからアイテムを選択します。
同様に、他のすべてのボタンのアイテムを選択し、上記のUIを作成します。 ビューの中央にラベルを追加し、アウトレットとして接続し、名前を- timeLeftLabel にします。
タイマー開始のアクション
以下は、開始タイマーのプログラムです。
次の関数を作成します-
停止機能のアクション
停止機能のプログラムは次のとおりです。
時間を減算するアクション
以下は、時間を減算するためのプログラムです。
時間をリセットするためのアクション
以下は、時間をリセットするためのプログラムです。
addTimeのアクション
以下は、時間を追加するためのプログラムです。
さて、viewController.swiftは次のようになります-
これがアプリケーションで行うすべてです。アプリケーションを実行してみてください。正常に実行されるはずです。
ローカルストレージにデータを保存する
ローカルストレージにデータを保存するということは、ローカルデバイスのストレージを使用して、デバイス上のアプリケーションに関連するデータを保存することを意味します。 ローカルストレージにデータを保存するには、 NSUserDefault と CoreData の2つの方法があります。
それらを詳細に理解しましょう。
NSUserDefaults
NSUserDefaultsは、設定、設定、個々の値などの小さなデータを格納するためのものです。 アプリケーションでUserDefaultsを使用するには、次のようにコードを使用してnsuserDefaultsへの参照を作成するだけです。
UserDefaultsのデータに値を設定するには、次のコードを使用できます-
NSUserDefaultsから値を取得するには、次のコードを使用できます。
CoreData
CoreDataは、大規模なデータトランザクションをサポートする永続的なフレームワークです。 CoreDataを使用すると、ユーザーデータを格納するためのリレーショナルエンティティ属性モデルを構築できます。 CoreDataはフレームワークであり、SQLiteバイナリ形式を使用してデータを保存できます。
アプリケーションでCoreDataを使用するには、新しいプロジェクトから開始し、プロジェクトの作成中に「コアデータを使用する」をオンにします。
コアデータを使用してログイン-新しいプロジェクトを作成し、次のスクリーンショットに示すようにCoreDataを使用を選択します。
プロジェクトが開くまで続けます。プロジェクトに以前のプロジェクトよりも多くのファイルがあることがわかります。
このファイル CoreData_demo.xcdatamodeld は、ユーザーテーブルを作成してデータを保存するデータベースです。
コンセプト-CoreDataに関することは、アプリを閉じて数か月後に開いても、保存したデータが残っていることです。これは次のアプリケーションで確認します。
次に、コアデータを追加し、コアデータを取得する方法について説明します。
コアデータの追加-CoreDataを追加するには、CoreData_demo.xcdatamodeldファイルをクリックすると、エンティティが空であることがわかります。 [エンティティの追加]ボタンをクリックすると、エンティティが追加されます。エンティティ名をダブルクリックして、好きな名前に変更します。
エンティティをクリックすると、属性フィールドが空であることがわかります。 プラス記号をクリックして、エンティティの名前を変更します。 次のフィールドからエンティティのタイプを選択します。
エンティティと1つの属性を追加しました。 AppDelegate.swift に移動すると、CoreDataを選択したために2つの新しい関数が追加されたことがわかります。 追加された2つの機能は次のとおりです-
注-先に進む前に、CoreDataをファイルにインポートしてください。
データをコアデータに保存-CoreDataにデータを保存するには、AppDelegateクラスのオブジェクトを作成する必要があります。
そして、コンテキストオブジェクト
次に、エンティティを呼び出すエンティティオブジェクトを作成する必要があります-
作成した属性の値を設定します。
を使用してデータを保存します
コアデータからのフェッチ-フェッチ中、上記の2つのステップ(appDelegateとコンテキストの作成)は同じです。 次に、フェッチリクエストを作成します。
結果を保存するオブジェクトを作成します。
次に、要件に従って結果を確認します。 次のアプリケーションを作成すると、CoreDataの詳細が表示されます。
チャレンジ-ユーザーが名前を入力し、ログインをクリックしてアプリケーションを閉じるアプリケーションを作成してみてください。 次回ユーザーがアプリケーションを開くとき、彼はまだログインする必要があります。 次に、ボタンを追加します-ログアウトし、彼がそれをクリックすると、アプリケーションはユーザー名を再度要求します。
CoreDataを使用したログイン/ログアウト
「ログイン」という単一のビュープロジェクトを作成し、CoreDataの使用を選択します。 CoreData_demo.xcdatamodeldをクリックして、「Users」というエンティティを追加します。 その中に、「名前」という属性を追加します。
main.storyboardに移動し、テキストフィールドとログインボタンを追加します。 その下で、ラベルを追加し、それをダブルクリックしてそのコンテンツを削除します。 次に、ログアウトボタンを追加し、属性インスペクターに移動して、「アルファ」を0に設定します。 今、私たちのビューは次のように見えるはずです-
次に、View Controllerファイルに移動し、アシスタントエディターを開いて、UI要素とコントローラーファイル間の接続を作成します。
注-ボタンの外観を変更する必要があるため、両方のボタンのアウトレットも作成します。 たとえば、ユーザーがログインしている場合、ログインボタンを非表示にします。ユーザーがログインしていない場合は、ログインを表示し、ログアウトボタンを非表示にします。
CoreDataからのデータの追加と取得について既に説明したように、ここにコードを配置します。
ログイン/ログアウトアプリケーションのコード
ログイン/ログアウトアプリケーションに使用されるさまざまなコンポーネントとコードを理解しましょう。
ログインボタンアクション-次のコードは、ログインボタンアクションを追加する方法を説明しています。
ログアウトボタンアクション-次のコードは、ログアウトボタンアクションを追加する方法を説明しています。
- ViewDidLoad()*-次のコードは、ViewDidLoad()関数の使用方法を説明しています。
両方のボタンに対してアウトレットとアクションを作成しなければならなかったことを思い出してください。
次に、アプリケーションを保存して実行します。 ログインし、アプリケーションを閉じて、再度実行します。 次のようになります。
CoreDataで行うことはこれですべてです。 同じ概念を使用して、多くのCoreDataアプリケーションを構築できます。
キーボードの制御
このセクションでは、キーボードの動作を制御する方法を学びます。 たとえば、テキストを入力した後、テキストフィールドの外側をクリックしても、キーボードは閉じません。 ここでは、キーボードの制御方法を理解します。
入力フィールドの外側をクリックするとキーボードが消えます
これは簡単なタスクです。中括弧を閉じる前に、viewControllerファイルに次のコードを貼り付けるだけです。
これにより、入力フィールドの外側をクリックするとキーボードが消えます。
リターンキーをタップするとキーボードが消えます
キーボードを非表示にするには、View Controllerに新しいTypeを追加する必要があります。 また、テキストフィールドを追加し、textFieldというアウトレットを作成します。 最後に、 UITextFieldDelegate を追加します。
また、入力フィールドからView Controllerに control + drag し、表示されるオプションからデリゲートを選択します。
次に、次の関数を追加します。
最終的なView Controllerファイルは次のようになります-
Webコンテンツのダウンロード-Facebook/Googleを開く
このセクションでは、各ボタンがそれぞれ押されたときにFacebookとGoogleを開くアプリケーションの作成について学習します。 また、Webビューとアプリトランスポートレイヤーセキュリティの概念についても学習します。 この後、独自のブラウザを作成できるようになります。
注-このアプリケーションにはインターネット接続が必要です。
Webアプリケーションの作成
新しいシングルビューアプリケーション、iOSプロジェクトを作成します。 オブジェクトライブラリの検索バーで、Webビューを検索してドラッグし、main.StoryboardのViewコントローラーに追加します。
Webビューを追加した後、それをすべての隅まで伸ばします。 アプリケーションのUIは次のようになります-
アシスタントエディターをクリックして、main.storyboardとView Controllerを開きます。 webViewのアウトレットと両方のボタンのアクションを作成します。 ロード時に、アプリケーションはwebViewにyahooをロードします。 グーグルをクリックすると、グーグルをロードし、フェイスブックボタンをクリックすると、フェイスブックページをロードするはずです。
最終的なビューは次のようになります-
次のスクリーンショットは、アプリケーションのさまざまな画面がどのように見えるかを示しています。 https以外のWebサービスを開こうとすると、エラーが表示されるため、 info.plist ファイルにApp Transport Layer Security例外を追加する必要があります。