FSCalendarを使用する(2) Tips

前回の記事「FSCalendarを使用する(1) storyboardへの貼り付けと使用準備」で、FSCalendarを利用する準備が整いました。

今回から実際の使用方法について見ていきます。

選択された日付を取得するには?

FSCalendarで選択された日を確認するために、はじめにLabelを1つ配置しておいてください。なお、配置したLabelはアウトレット接続をlabelDateという名前で作成しておいてください。

FSCalendarで日付がタップされた時の処理は以下の関数を使用します。

func calendar(_ calendar: FSCalendar, didSelect date: Date, at monthPosition: FSCalendarMonthPosition) {
    // 処理
}

選択された日付はdate変数に格納されます。このdateをCalendarクラスを使用して年、月、日で分解してからLabelに表示する例を以下に示します。

func calendar(_ calendar: FSCalendar, didSelect date: Date, at monthPosition: FSCalendarMonthPosition) {
    let tmpDate = Calendar(identifier: .gregorian)
    let year = tmpDate.component(.year, from: date)
    let month = tmpDate.component(.month, from: date)
    let day = tmpDate.component(.day, from: date)
    labelDate.text = "\(year)/\(month)/\(day)"
}

2018年2月14日を選択した例を以下に示します。

コードから日付を選択するには?

コードから任意の日付を選択するには、はじめにFSCalendarのアウトレットを準備しておきます。ここではアウトレット名をmyCalendarとしています。

Calendarクラスを使用して選択したい日を作成し、FSCalendarが持つselect関数の引数に渡します。これで指定した日を選択することができます。以下は2018年6月19日を選択する例です。

@IBOutlet weak var myCalendar: FSCalendar!

override func viewDidLoad() {
    super.viewDidLoad()
    
    let calendar = Calendar.current
    let selectDate = calendar.date(from: DateComponents(year: 2018, month: 6, day: 19))
    myCalendar.select(selectDate)
}

実行すると以下のように2018年6月19日が選択されます。

スクロール方向を変更する

スクロール方向を変更するには、scrollDirectionプロパティを使用します。既定値はhorizontal(水平方向)がセットされています。

// 水平方向(既定値)
myCalendar.scrollDirection = .horizontal
// 垂直方向
myCalendar.scrollDirection = .vertical

スクロールを禁止する

スクロールを禁止するには、scrollEnabledプロパティにfalseをセットします。既定はtrueなのでスクロールが可能になっています。

// スクロールの許可(既定値)
myCalendar.scrollEnabled = false
// スクロールの禁止
myCalendar.scrollEnabled = false

週表示にする

既定では1ヶ月分のカレンダーが表示されますが、1週間分だけ表示することが可能です。

scopeプロパティにweekをセットすると週表示になり、monthをセットすると月表示(既定値)になります。

// 週表示にする
myCalendar.scope = .week

 

FSCalendarを使用する(1) storyboardへの貼り付けと使用準備

今回は、FSCalenderを使用する方法を見ていきます。

FSCalenderの導入方法については前回の記事「CocoaPodsを使用してFSCalendarを導入する」を参照してください。

Single Viewアプリケーションのプロジェクトを作成して確認していきます。

FSCalendarの配置

はじめにMain.storyboardを表示して、UIViewを貼り付けます。

続いて、貼り付けたUIViewのClassを「FSCalendar」にします。

すると、先ほど貼り付けたUIVewにカレンダーが表示されるようになります。

続いてView ControllerにdataSourceとdelegateを設定します。

FSCalendar上で[control]キーを押しながら、View Controllerまでドラッグします。

ドラッグすると以下のようにOutlets作成用のウィンドウが表示されるので、dataSourceとdelegateを作成します(1回につき1つしか作成できないのでdataSourceとdelgate分の2回実行する必要があります)。

 

この時点で一旦ビルドをしておきましょう。

エラーが出ないことを確認するとともに、FSCalendarをインポートできるようになります。

続いてViewController.swiftを開き、コードを以下のように編集します。

FSCalendarをインポートし、FSCalendarDataSourceとFSCalendarDelegateを継承しています。

import UIKit
import FSCalendar


class ViewController: UIViewController,FSCalendarDataSource,FSCalendarDelegate {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

実行すると、以下のようにカレンダーが使用可能になります(カレンダーのサイズは任意で変更をしてください)。

 

CocoaPodsを使用してFSCalendarを導入する

iOSにはCalendarコントロールが提供されていないのですが、MITライセンスのFSCalendar(https://github.com/WenchaoD/FSCalendar/blob/master/README.md)というコントロールがあります。

今回は、CocoaPodsを使用して、このFSCalendarコントロールをプロジェクトに組み込む方法を見ていきます。

※CocoaPodsのインストール方法は「CocoaPodsの導入」を参照してください。

はじめに、新規でプロジェクトを作成しておきます。

次に、ターミナルを起動して、作成したプロジェクトディレクトリに移動して以下のコマンドを実行します。

pod init

成功するとプロジェクトディレクトリにPodfileが作成されます。

作成されたPodfileを開いて以下のように編集します。

# Uncomment the next line to define a global platform for your project
platform :ios, '9.0'

target 'WorkTimeManager' do
  # Comment the next line if you're not using Swift and don't want to use dynamic frameworks
  use_frameworks!

  # Pods for WorkTimeManager
  pod 'FSCalendar', :git=> 'https://github.com/WenchaoD/FSCalendar'

end

Podfileの編集が完了したら、ターミナルに戻りPodfileがあるディレクトリ上で、以下のコマンドを実行してインストールをします。これによりプロジェクトにFSCalendarが取り込まれます。

pod install

ライブラリインストール完了移行は、以下のように「プロジェクト名.xcworkspace」をダブルクリックしてプロジェクトを開きます。

XcodeのProject Navigatorを確認するとFSCalendarが導入されていることを確認できます。

CocoaPodsの導入

Swiftでの開発を進めていくにあたり、ライブラリの導入は不可欠です。

CocoaPodsというライブラリ管理ツールがありますので、その導入方法を見ていきます。

はじめにCocoaPodsをインストールします。

ターミナルを開いて以下のようにコマンドを入力してインストールを行います。

sudo gem install cocoapods

続いて、以下のコマンドでセットアップをします。Setup Completedと表示されれば完了です。

pod setup

画像を表示する

今回は、ページに画像を表示する方法を見ていきます。

はじめに、新規でSingle Viewのプロジェクトを作成します。

プロジェクト名称はImageSampleとしました。

プロジェクトの作成が完了したら、Project NavigatorでAssets.xcassetsを選択します。

一般的にプロジェクトで使用する画像はAssets.xcassetsフォルダに格納して使用します。

Assets.xcassetsフォルダを選択すると、以下のような画面が表示されます。プロジェクトで使用したい画像をfinderからドラッグ&ドロップして登録します。

画像を登録すると以下のようになります。イメージは3種類登録しておくことができますが、とりあえず1つでOKです。また、登録した画像の名称は左側で変更することができますので、コードから参照する時の任意の名称にしておきます。ここではsampleという名称にしています。

画像を表示するコードの実装

画像の準備ができたら、あとは画像を表示するコードの実装のみです。

Project NavigatorでViewController.swiftを選択したら、コードを以下のように編集します。

import UIKit

class ViewController: UIViewController {

    // 画像インスタンス用
    let imageSample = UIImageView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        // スクリーンサイズの取得
        let screenW:CGFloat = view.frame.size.width
        let screenH:CGFloat = view.frame.size.height
        
        // 画像を読み込んで、準備しておいたimageSampleに設定
        imageSample.image = UIImage(named: "sample")
        // 画像のフレームを設定
        imageSample.frame = CGRect(x:0, y:0, width:128, height:128)
        
        // 画像を中央に設定
        imageSample.center = CGPoint(x:screenW/2, y:screenH/2)
        
        // 設定した画像をスクリーンに表示する
        self.view.addSubview(imageSample)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


}

最初に、6行目で画像を入れる器(UIImageView)を準備しておきます。ここで準備したimageSampleに画像を読み込んだり、画像のフレームを設定したり、表示位置を設定したりして、最終的には画面(スクリーン)に表示します。

画像の読み込み〜表示までの処理はviewDidLoadの中で行います。

まずは、使用するデバイスのスクリーンサイズを取得しておきます(12,13行目)。このスクリーンサイズを使用して、後から画面の中央を計算するのに使用します。

続いて、画像を読み込みます(17行目)。画像を読み込む際は、Assets.xcassetsフォルダに登録した画像名を指定します。

画像の読み込みをしたら、表示サイズ(フレーム)を設定します(19行目)。

次に、画像がスクリーンの中央に表示されるようにします(22行目)。imageSample.centerは読み込んだ画像の中心です。この中心を、スクリーンの中央座標に合わせることで、画面中心に表示させます。

ここまでで、画像を中央に表示する準備は完了です。あとは25行目のようにしてassSubViewを実行することにより、画像が画面に表示されるようになります。

上記の実行例を以下に示します。

 

Hello Swift!

本サイトは、2016年3月より運営していたのですが不運にもDBが壊れてしまったので、一からのスタートとなります。

随時記事をアップしていきますのでよろしくお願いいたします。