iOSでブロックを使用します。 パート1

Objective-CとiOS開発を学ぶ過程で、ブロックがどのように機能するかを理解できませんでした。 メソッドにパラメーターとして渡すことができるのは混乱していました。 ブロックだけでなく、アプリケーション開発プロセスも考慮されたため、非常に興味深いと思われる記事に出会いました 。 投稿はxCode 7.3.1に適合しています。

まえがき

ブロックはC / Objective-Cへの非常に強力な追加機能です。これにより、コードの断片を個別のユニットに「ラップ」し、オブジェクトとして操作できます。 より多くのAPIがiOSでブロックを使用する必要があるため、それらを理解することは非常に重要です。 ただし、それらの構文といくつかの微妙な側面は、初心者にとってしばしば混乱を招きます。 しかし、恐れることはありません-このレッスンは非常に役立ちます。

このチュートリアルの2つのパートでは、「iOS Diner」という小さなiOSプロジェクトを作成します。 アプリケーション自体は簡単です。ユーザーはメニューから料理を選択して、まるで昼食を食べているかのように注文を作成します。 注意：創造の過程で、空腹感がエスカレートします！

最初の部分では、アプリケーションのUIを開発し、同時にストーリーボード （文字通り-ストーリーボード-約Per。）を確認します。これには、JSON形式でメニューを読み込むためのWebサービスの作成と使用に関する短いメモが含まれます。

ご注意 ストーリーボードとインターフェイスビルダーが既に得意な場合は、最初の部分をスキップして、ブロックの使用を開始する2番目の部分に直接進んでください。 このパートでは、 StoryboardとInterface Builderのみに焦点を当てます。

2番目の部分では、アプリケーションロジックのプログラミング、非同期データ処理、バックグラウンドタスク、多くの標準APIの代替としての使用など、ブロックの包括的な使用方法を示します。

はじめに

Xcodeを開き、新しいプロジェクトを作成します。



プロジェクトの名前で、「iOSDiner」を示します。



プロジェクトを実行します。 もちろん、まだ空であり、シミュレータには空白の画面が表示されます。


Deployment Infoのプロジェクト設定で、 Portraitボックスのチェックを外します。



最初に行うことは、プレゼンテーションのカスタマイズです。 これを行うには、小さなグラフィックが必要です。 こちらからダウンロードできます。 これをプロジェクトリソースに追加する必要があります。

正直なところ、xCodeがプロジェクトとファイルシステムで一致するファイルを処理する方法が好きではなかったので、通常、ファイルシステムにリソースを手動で追加します。 Finderでプロジェクトフォルダーを開き、その中に「リソース」フォルダーを作成します。 その中に、「Images」フォルダーを作成します。



以下のスクリーンショットに示すように、ダウンロードしたZIPファイルから画像をImagesフォルダーにコピーし、XcodeでIOSDinerフォルダーにResourcesフォルダーをドラッグします。



これで、XcodeのResourcesフォルダーを見ることができます。このフォルダーには、ファイルシステムと同じように、ダウンロードされた画像を含むサブフォルダーImagesがあります。

画像を追加する

Main.storyboardを開きます 。



「 コントローラーシーンの表示 」という名前の2番目の列が表示されない場合は、下の[展開 ]ボタンをクリックします。

したがって、画像をStoryImageにUIImageViewsおよびUIButtonsとして追加します 。 簡単にするには、[ ユーティリティ]サイドバーを開き、[ メディアライブラリ]を選択します。



ここに、プロジェクトに追加された以前のすべての画像が表示されます。 確かに、各写真には名前の末尾に「@ 2x」が付いた独自のコピーがあることに気づきました。 Retinaバージョンに使用されます。

私たちはいつもの絵だけに興味があります。 スペースバーをクリックして押すことで、画像のバージョンを確認できます。 以下に示すように、「bg_wall.png」をルートビューにドラッグします。 画像が正しく設定されているかどうかわからない場合は、サイズインスペクターに切り替えてX座標とY座標を変更できます。





次の画像でも同じことを行います。

• person.png
• sign_theiOSdiner.png
• chalkboard.png
• bg_counter.png
• total_field.png
• food_box.png

ご注意 Cmdと=キーを同時に押すことにより、 画像ビューを画像の正確なサイズに合わせることができます。 すべての写真を適切な場所に配置したら、プロジェクトを実行します。



わあ！ アプリのように！ 次に、ユーザーインターフェイスパーツを追加します。 [ ユーティリティ ]パネルで、[ オブジェクトライブラリ ]に切り替えます。

ビューの中央、モニターの上にボタンをドラッグします。 新しく追加されたボタンをダブルクリックして、「-1」を入力します。




ボタンが強調表示されていることを確認します。 属性インスペクターで 、 Background属性を「button_silver.png」に設定します。Alt キーを押したまま 、-1ボタンを右にドラッグします。 これにより、オブジェクトのコピーが作成されます。 テキストを+1に変更します。





別のボタンをモニターの左端にドラッグします。 Button TypeをCustomに設定し、ボタンのタイトルを削除して、 メディアライブラリーから「button_arrow_left.png」をドラッグします



このボタンをコピーして、背景画像を「button_arrow.png」に変更します



そして最後のボタンが残った。 ボードの下に置き、背景画像を「total_field.png」に設定します。 プロジェクトを実行します。



かなりいいですね。 次に追加するのは、ラベルとプレビューウィンドウです。
オブジェクトライブラリに再度移動します。 UILabelをボードにドラッグし、ボードに合わせて引き伸ばします。

Atrributes Inspectorで、 Linesを0 に設定し（これによりラベルが複数行になります）、 Text Colorを白に、 FontをMarker Felt 17.0に変更します。 通常、Marker Feltの使用は犯罪であると考えていますが、私たちの場合は非常に適しています。


UIImageViewをモニターにドラッグアンドドロップします。



属性インスペクターで、 モードをアスペクトフィットに変更します 。


別のUILabelを右下のプレートにドラッグします。 プレートの灰色の領域のサイズにして、 AlignmentをCenterに設定します。

IBOutletsおよびIBActionsをインストールする

次に、作成したユーザーインターフェイスとコードの間の関係を確立する必要があります。 これには、 IBOutletsとIBActionsが必要です。 IBはInterface Builderの略で、xCodeでUIを作成するために使用されます。

• IBOutletは 、基本的に、UI要素（ボタンまたはラベル）とコード内のリンクとの関係です。
• IBActionは、開発されたインターフェイスのイベント（ボタンクリックなど）に接続できるコード内のアクション（またはより便利なメソッド）です。

IBOutletsとIBActionsを介してUI要素を接続するためのコードを作成しましょう。

[ ユーティリティ ]タブを閉じて、 アシスタントエディタを開きます。 構成方法によっては、スクリーンショットがスクリーンショットと同じに見えない場合があります。 アシスタントエディターの表示を変更する場合は、そのメニューを見てください。



ボタンから始めましょう。 -1ボタンを選択し、 Ctrlキーを押しながらコードにドラッグします。 これにより、ボタンのIBOutletの作成が自動化されます。

このオブジェクトに必要なのは、名前を付けることだけです。 xCodeではオートコンプリートによりすべての要素を簡単に見つけることができるため、「ib」プレフィックスが好きです。 このオブジェクトに「ibRemoveItemButton」という名前を付け、[ 接続 ]をクリックします 。



残りのボタンについても同じことを行います。









同じ方法でラベルを設定します。







これで、 ViewController.mは次のようになります。

#import "ViewController.h" @interface ViewController () @property (weak, nonatomic) IBOutlet UIButton *ibRemoveItemButton; @property (weak, nonatomic) IBOutlet UIButton *ibAddItemButton; @property (weak, nonatomic) IBOutlet UIButton *ibPreviousItemButton; @property (weak, nonatomic) IBOutlet UIButton *ibNextItemButton; @property (weak, nonatomic) IBOutlet UIButton *ibTotalOrderButton; @property (weak, nonatomic) IBOutlet UILabel *ibChalkboardLabel; @property (weak, nonatomic) IBOutlet UIImageView *ibCurrentItemImageView; @property (weak, nonatomic) IBOutlet UILabel *ibCurrentItemLabel; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } @end 

ここで、 UIButtonsにIBActionsを追加する必要があります 。 これらは、特定のイベント（Touch Up Inside、Touch Up Outside、Touch Cancelなど）に応答して呼び出されるメソッドです。 ボタンの場合、最も一般的に使用される内部タッチアップ。

ボタン「-1」を選択します。 再度、 Ctrlキーを使用してViewController.mにドラッグします 。 これはIBActionであるため、ibaプレフィックスを使用します。 すべてのボタンについて繰り返します。

Webサービスをインストールする

コードを開始する前に、Webサービスを構成します。 これについてはすでにいくつかのレッスンがありますので、すべてを詳しく説明するつもりはありません（ iOSアプリ用のシンプルなPHP / MySQL Webサービスの 書き方とWebサービスを使用するiOSアプリの書き方 ）。

以下のコードは、WebサービスのPHPコードがどのようになるかを示しています。

 <?php function getStatusCodeMessage($status) { $codes = Array( 100 => 'Continue', 101 => 'Switching Protocols', 200 => 'OK', 201 => 'Created', 202 => 'Accepted', 203 => 'Non-Authoritative Information', 204 => 'No Content', 205 => 'Reset Content', 206 => 'Partial Content', 300 => 'Multiple Choices', 301 => 'Moved Permanently', 302 => 'Found', 303 => 'See Other', 304 => 'Not Modified', 305 => 'Use Proxy', 306 => '(Unused)', 307 => 'Temporary Redirect', 400 => 'Bad Request', 401 => 'Unauthorized', 402 => 'Payment Required', 403 => 'Forbidden', 404 => 'Not Found', 405 => 'Method Not Allowed', 406 => 'Not Acceptable', 407 => 'Proxy Authentication Required', 408 => 'Request Timeout', 409 => 'Conflict', 410 => 'Gone', 411 => 'Length Required', 412 => 'Precondition Failed', 413 => 'Request Entity Too Large', 414 => 'Request-URI Too Long', 415 => 'Unsupported Media Type', 416 => 'Requested Range Not Satisfiable', 417 => 'Expectation Failed', 500 => 'Internal Server Error', 501 => 'Not Implemented', 502 => 'Bad Gateway', 503 => 'Service Unavailable', 504 => 'Gateway Timeout', 505 => 'HTTP Version Not Supported' ); return (isset($codes[$status])) ? $codes[$status] : ''; } // Helper method to send a HTTP response code/message function sendResponse($status = 200, $body = '', $content_type = 'text/html') { $status_header = 'HTTP/1.1 ' . $status . ' ' . getStatusCodeMessage($status); header($status_header); header('Content-type: ' . $content_type); echo $body; } class InventoryAPI { function getInventory() { $inventory = array( array("Name"=>"Hamburger","Price"=>0.99,"Image"=>"food_hamburger.png"), array("Name"=>"Cheeseburger","Price"=>1.20,"Image"=>"food_cheeseburger.png"), array("Name"=>"Fries","Price"=>0.69,"Image"=>"food_fries.png"), array("Name"=>"Onion Rings","Price"=>0.69,"Image"=>"food_onion-rings.png"), array("Name"=>"Soda","Price"=>0.75,"Image"=>"food_soda.png"), array("Name"=>"Shake","Price"=>1.20,"Image"=>"food_milkshake.png") ); sendResponse(200, json_encode($inventory)); } } sleep(5); $api = new InventoryAPI; $api->getInventory(); ?> 

このWebサービスは、JSON配列を返す非常に単純なPHPスクリプトです。 配列には、いわゆる連想配列 （PHP）、またはディクショナリ （Objective-C）が含まれ、アイテムの名前、価格、画像名が含まれます。 上記のコードで注意すべきことは、line sleep(5); 。

低速のWebサービスをシミュレートして、非同期操作でブロックがどのように役立つかをよりよく示すために使用します。

このコードを拡張子.phpのファイルにコピーしてホスティングに配置するか、単にmineを使用します。

次にすること

レッスンのこの部分のドラフトは、 ここからダウンロードできます 。 まあ、ブロックとは関係のないあらゆる種類のものがたくさんありました。 しかし、 ビューとWebサービスをインストールしたら、コーディングに進み、ブロックを使用してアプリケーションを完全に機能させることができます。