Swift(iPhone)

swift

Swiftが3.0になってから初めてのアプリ作成としてお天気アプリを作り始めました。

前回はJSONで出力される天気予報データをテーブルビューに表示させましたが、今回で最終回。残りのデータを表示して完成させます。

前回の記事は以下になります。

【Swift】お天気アプリを作る(1)JSON形式の気象予報データを取得しよう

【Swift】お天気アプリを作る(2)気象予報データをテーブルビューで表示しよう

Swift(iPhone)

swift

Swiftが3.0になってから初めてのアプリ作成を開始しました。今回のテーマはお天気アプリ。

前回はJSONで出力される天気予報データの取得までを作ったので、今度はデータをUITableViewを使って表示します。

前回の記事は以下になります。

【Swift】お天気アプリを作る(1)JSON形式の気象予報データを取得しよう

Swift(iPhone)

swift

Swiftが3.0になってから全く触れていなかったので、もう一度簡単なアプリを作りながら勉強してみようと思います。

今回のテーマはお天気アプリ。データの取得から表示まで、一通りできるところまでを目指していきます。ライブラリなどは使うと便利だけど使えるまでが初心者には大変なので使いません。

サンプルは記事の最後にあります。

Swift(iPhone)

dev電子書籍やフォトアルバムみたいにスワイプしてページをめくるような機能ってどうやるんだろう?とふと思い立って、コレクションビューを使って簡単に作ってみました。今回はその方法のご紹介です。

Swift(iPhone)

iphoneアプリのデータを保存するときに使用されるCoreData。前回はCoreDataデータを扱うための基本部分を取り上げましたが、巷ではMagicalRecordというライブラリを使った方が便利だと言われています。

今回はそのCocoaPodsを使ったMagicalRecordのインストールと、簡単なデータの登録・読み出し・削除の方法を試してみます。

Swift(iPhone)

iphone

使いこなせればグンと開発の幅が広がりそうだけど、なんだか理解しにくいのがCoreData。データをアプリ側で保存して、ユーザー設定や次回のアプリ起動時まで残しておきたい情報をまとめて登録してくれる優れものなんですが、どうも面倒臭い。今回は簡単な組み込み方を学びながら、お手軽メモを作成してみたいと思います。

ベースは結構前に作ってあったのですが、Swift2.0仕様に直してたら時間を取られてしまいました。

Swift(iPhone)

iOS app

 

スポンサーリンク

はじめに

Swiftでコレクションビューを使う方法の基礎を最近覚えましたが、まだモノにできていない感じがしたので、引き続き勉強してみました。今回は画面のサイズに合わせて自動的にセルのサイズも変更して、常に3列表示できるようにしたいと思います。前回の分と合わせて、ようやくそれなりに使えるようになるのではないでしょうか。

 

こちらで作成したサンプルの続きになります。まだお読みになっていないからはこちらを先にご覧ください。

Collection Viewの基礎を学んでみた【Swift低空飛行ガイド】

 

学べること

  • コレクションビューのセルサイズを画面のサイズに合わせて変更する方法

 

ではやってみましょう

サンプルのダウンロード

まずは全開作ったサンプルをダウンロードしましょう。これをベースに手を加えていきます。

サンプルはこちらに置いてあります

 

セルのサイズを調整

cellsizeまずはセルのサイズを調整します。Cell sizeのWidth、Height共に200を指定してください。実行時には画面のサイズに合わせて変化しますので、編集時に使い易い大きさにしているだけです。

Min spacingのほうは、For Cells、For Lines共に3を指定してください。今回3列にするのでセルとセルの間には2つの隙間を作ります。その隙間の幅を指定しています。

 

セル内のオブジェクトを調整

次にセルの中のイメージビューとラベルを調整します。

 

イメージビューの調整

image-view-sizeイメージビューはセルのサイズと同様、X=0、Y=0、Width=200、Height=200に設定します。実行すると画面サイズに合わせて変更されるので、ストーリーボード上で編集時に便利なように広げています。

ちなみに右の図ではイメージビューがラベルの上にありますが、これが逆だとイメージの裏側にラベルが隠れてしまいますので、ドラッグして位置を変更しておいてください。

cell-size-followサイズを変更したら、今度は可変するセルのサイズに追従できるように制約を付けます。Xcodeの画面右下にあるPinボタンをクリックして、Constrain to marginsのチェックを外したら、上下左右の数値を全て0にして隣接する赤い線をクリックして濃い色にします。これでAdd 4 constrainsボタンをクリックすればオッケーです。

 

 

ラベルの調整

label-sizeラベルもセルのサイズ変更に合わせて変化できるように調整しておきましょう。こちらはセルの下にピッタリ付けるよう配置して、左右も目一杯幅を広げます。

 

label-color

ついでにラベルの文字色も見やすいように変更しておきます。

 

 

 

label-follow

配置が済んだら、イメージと同じくセルのサイズ変化に追従できるように制約を付けておきます。Pinボタンを押したら、Constrain to marginsのチェックを外して左右と下の数値を全て0にして隣接する赤い線をクリックして濃い色にします(上側の設定は不要です)。その代わり、Heightの項目をチェックして高さを固定します。あとはAdd 4 constrainsボタンをクリックすれば完了です。

 

 

 

ちょっとだけコーディング

最後にコーディングです。下記のコードをViewController.swiftにペタッと貼りましょう。

セルサイズの自動変更はオートレイアウトではできないらしく、コーディングの力が必要になります。ここでは3列表示させるために画面サイズの幅を3で割っています。その後ろのマイナス2は隙間を作るため、それぞれのセルから2づつ引いて計6を差っ引いています。3列にできる隙間は2つなので、3づつを割り当てます。先ほどMin spacingという項目で3を設定しましたが、この数値のことです。高さも幅と同じにしています。

作ってから気づきましたが、画面サイズがアプリ実行中に変わることはないのでdidloadあたりで計算させておいた方が良さそうですね。

このコード、以下のサイトを参考にさせていただきました。

iPhoneアプリでありがちな設定画面を作る方法(とりあえずphpとかさん)

 

 

あとは実行!

running-appこれで実行すると画像が3列になって表示されます。間にちょっと隙間があるのも設定通りですよ。隙間をなくしたいときは、ちゃんと画面サイズの幅にピッタリ合うように計算してあげる必要があります。この辺りが面倒なところ。

 

今回のサンプルはこちらにあります。

 

 

 

 

 

おわりに

狙い通りに表示させるには画面のサイズに合わせた計算やオートレイアウトを意識する必要があり、なんとなく敷居が高いですが、やってみると意外とすんなり理解できると思いますよ。慣れれば表示させる内容の重要度に合わせてセルのサイズを変更したり、もっともっと自由度の高いレイアウトが可能になります。テーブルレイアウトだけでは物足りなくなったら、ぜひチャレンジしてみてください。

Swift(iPhone)

dev

スポンサーリンク

はじめに

Swiftで何かのコンテンツをリスト表示するときにテーブルビューを使うことが多いと思いますが、もっとオシャレなデザインにしたいとか、タイル貼りのような2列、3列の配置にしたい場合はコレクションビューを使う手もあります。

しかし、テーブルビューに比べて少し敷居が高く、動くようになるまでが意外と難しかったので、基本的な使い方をメモしておこうと思います。

本記事の作成にあたり、以下のサイトを参考にさせて頂きました。

SwiftでUICollectionViewをとりあえず表示させてみる(開発メモさん)

Swift(iPhone)

f_f_business_31_s128_f_business_31_2bg

スポンサーリンク

はじめに

 

iPhone用のアプリで表示される画像データは、ロゴのようにいつも同じものを使う場合であれば先にアプリ内に登録しておけばすぐに取り出して使うことができます。しかし、ニュースの記事に使われる画像のようにコロコロを変わるものであれば予め登録できないので、インターネット上にあるデータを取ってきて画面に表示するようにしなければなりません。

その時のやり方をいつも忘れてしまうので、今回は自分用のメモ的な意味合いも込めてurlで指定した画像をアプリ内で表示するための方法をご紹介します。

 

学べること

  • 指定したURLにある画像を、アプリの中で表示する

 

はじめましょう!

プロジェクトの新規作成

まずはプロジェクトを新規作成します。名前は「UrlImageSample」としておきましょう。テンプレートは「Single View Application」を選択してください。Core Dataのチェックも不要です。手順の詳細は以下をご参照ください。

「基礎手順:プロジェクトの新規作成」

 

オブジェクトの作成

イメージビューの配置

post-727_01最初にイメージビューを作成します。Imege Viewをドラッグしてストーリーボード上に配置します。あとは位置とサイズを下記のように調整しておきましょう。幅と高さは今回使用するロゴの大きさに合わせているだけです。

X=16
Y=20
Width=213
Height=55

 

イメージビューのアウトレット接続

次に、今作成したイメージビューをプログラムで制御できるようにアウトレット接続しておきます。アウトレット名は「imgLogo」としておきましょう。

アウトレット接続作成の詳細は以下をご参照ください。

「基礎手順:アウトレット接続」

 

最後にコーディング

最後に少しだけコーディングします。追加するのはviewDidLoadの中、下記のハイライト部分になります。

urlという変数の宣言部分で、取得する画像のurlを指定しています。インターネット経由で画像を取得しようとすると時間がかかってしまうかもしれないので、sendAsynchronousRequestを使って非同期処理にして動作が固まってしまわないようにしています。

 

実行してみましょう!

スクリーンショット 2015-07-21 19.53.52これで準備ができましたので、実行してみましょう。今回はヤフーのロゴを直接していして表示するようにしてみました(もしかしたらすぐurlが変わってしまうかもしれませんね)。

今回のサンプルはこちらです。

 

 

 

おわりに

大したことではないんですけど、いつもあれ、どうだっけ?ってなります。この辺もストーリーボードから操れるようにしてくれませんかね?なったらなったで扱いが面倒そうですけどね。

結構前に調べた内容なので参考元がわからなくなってしまいました。検索すると他の方法がたくさん出てきますが、このやり方だと非同期で画像を表示できるのでテーブルリストでの画像表示などで使えると思います。

 

Swift(iPhone)

f_f_business_31_s128_f_business_31_2bg
夏が近づいてくると、わらび餅とかゼリーっぽいのが食べたくなりませんか?ということで、プルプルしたものを作ってみたくなりました。

今回はこちらの情報を参考にさせて頂きました。

[iOS] UIView をプルプルさせる