iOSのWidgetをAPIからデータを取得して表示させてみる

な感じで表示されるものを作ってみる。

準備に関してはこちら

開発する前にざっとドキュメントを読んでみる。

冒頭のWidgetの振る舞いについて意訳をしてみる。

Ensure that content always looks up to date
コンテツはいつも最新にしておけよ！

Respond appropriately to user interactions
いい感じで使いやすくしろよ！

Perform well (in particular, iOS widgets must use memory wisely or the system may terminate them)
ちゃんと動かせよ！

Avoid putting a scroll view inside a Today widget.
scroll viewは使わないで！

これってUIScrollViewのことじゃないよね？？？
なのでpageControlとscrollViewを利用して実装してみる。

Widget出来上がりサンプル

以下のような仮実装をしてみた。
＞ボタンを押して画面遷移をさせるようにしてみた。

サンプルソース

TodayView.swift

TodayView.swift

import UIKit
import Foundation

public class TodayView : UIView {
    var currentPage: Int?

    required public init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    override init(frame : CGRect) {
        super.init(frame : frame)
    }

    convenience init(_ currentPage: Int) {
        self.init(frame: CGRectZero)
        self.setup(currentPage)
    }

    func setup(currentPage: Int) {
        self.currentPage = currentPage
    }
}

TodayViewControllerサンプル

TodayViewControllerSample.swift

import UIKit
import NotificationCenter


class TodayViewController: UIViewController, NCWidgetProviding {
    @IBOutlet weak var pageControl: UIPageControl!
    @IBOutlet weak var scrollView: UIScrollView!
    @IBOutlet weak var nextButton: UIButton!
    @IBOutlet weak var backButton: UIButton!

    let numberOfPages: Int = 5 // ページ数
    let viewHeight: CGFloat = 140 // 画面の高さ

    override func viewDidLoad() {
        super.viewDidLoad()

        // pageControlの準備
        pageControl.numberOfPages = numberOfPages

        // scrollViewの準備
        scrollView.contentSize = CGSize(
            width: CGFloat(numberOfPages) * scrollView.frame.size.width,
            height: viewHeight
        )

        // Widgetに高さを明示的に教える
        self.preferredContentSize = CGSizeMake(0, viewHeight);

        self.updateScrollViewContent()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    func widgetPerformUpdateWithCompletionHandler(completionHandler: ((NCUpdateResult) -> Void)!) {
        // Perform any setup necessary in order to update the view.

        // If an error is encountered, use NCUpdateResult.Failed
        // If there's no update required, use NCUpdateResult.NoData
        // If there's an update, use NCUpdateResult.NewData

        completionHandler(NCUpdateResult.NewData)
    }

    // 戻るボタンアクション
    @IBAction func backButton(sender: UIButton) {
        if pageControl.currentPage > 0 {
            pageControl.currentPage--
            nextButton.hidden = false
        }
        if pageControl.currentPage == 0 {
            backButton.hidden = true
        }
        self.updateScrollViewContentOffset()
    }

    // 進むボタンアクション
    @IBAction func nextButton(sender: UIButton) {
        if pageControl.currentPage < numberOfPages {
            pageControl.currentPage++
            backButton.hidden = false
        }
        if pageControl.currentPage == numberOfPages-1 {
            nextButton.hidden = true
        }
        self.updateScrollViewContentOffset()
    }

    // pageControlのcurretPageValueが更新された時の処理
    @IBAction func pageChanged(sender: UIPageControl) {
        self.updateScrollViewContentOffset()
    }

    // 横スクロールのオフセットをページ開始に合わせる
    func updateScrollViewContentOffset() {
        scrollView.setContentOffset(
            CGPoint(
                x: scrollView.frame.size.width * CGFloat(pageControl.currentPage),
                y: 0.0
            ),
            animated: true
        )
    }

    func updateScrollViewContent() {
        // ページ数分の背景色を準備してみる
        let colors = [
            UIColor.redColor(),
            UIColor.blackColor(),
            UIColor.yellowColor(),
            UIColor.greenColor(),
            UIColor.purpleColor()
        ]
        for var i = 0; i < numberOfPages; i++ {
            let pageView = TodayView(i)
            let w = scrollView.frame.size.width
            let x = CGFloat(i) * w
            pageView.frame = CGRectMake(x, 0, w, viewHeight)
            pageView.backgroundColor = colors[i]
            scrollView.addSubview(pageView)
        }
    }
}

APIと繋いだTodayViewControllerのコード例

まだ綺麗にできると思うけど、こんな感じでAPIからデータを取得して表示させることができる。

TodayViewController.swift

import UIKit
import NotificationCenter


class TodayViewController: UIViewController, NCWidgetProviding {
    @IBOutlet weak var page1ViewButton: UIButton!
    @IBOutlet weak var page2ViewButton: UIButton!
    @IBOutlet weak var page3ViewButton: UIButton!
    @IBOutlet weak var page4ViewButton: UIButton!
    @IBOutlet weak var page5ViewButton: UIButton!

    @IBOutlet weak var pageControl: UIPageControl!
    @IBOutlet weak var scrollView: UIScrollView!
    @IBOutlet weak var nextButton: UIButton!
    @IBOutlet weak var backButton: UIButton!

    @IBOutlet weak var page1View: UIView!
    @IBOutlet weak var page2View: UIView!
    @IBOutlet weak var page3View: UIView!
    @IBOutlet weak var page4View: UIView!
    @IBOutlet weak var page5View: UIView!

    @IBOutlet weak var page1Label: UILabel!
    @IBOutlet weak var page2Label: UILabel!
    @IBOutlet weak var page3Label: UILabel!
    @IBOutlet weak var page4Label: UILabel!
    @IBOutlet weak var page5Label: UILabel!

    @IBOutlet weak var page1ImageView: UIImageView!
    @IBOutlet weak var page2ImageView: UIImageView!
    @IBOutlet weak var page3ImageView: UIImageView!
    @IBOutlet weak var page4ImageView: UIImageView!
    @IBOutlet weak var page5ImageView: UIImageView!

    @IBOutlet weak var activityIndicatorView: UIActivityIndicatorView!
    private var responseData: Array<Dictionary<String, AnyObject>>?
    private let numberOfPages: Int = 5 // ページ数
    private let viewHeight: CGFloat = 140 // 画面の高さ
    private let imageURLBase: String = "https://*******"
    private let imageURLSize: String = "********"
    private let endpoint : String = "https://**************"
    private var loading: Bool = false
    private var pageViews: [UIView] = []
    private var pageLabels: [UILabel] = []
    private var pageImageViews: [UIImageView] = []
    private var imageIds: [String] = []
    private var currentCountryCode: String = ""
    override func viewDidLoad() {
        super.viewDidLoad()
        self.loading = false
        var locale = NSLocale.currentLocale()
        currentCountryCode = locale.objectForKey(NSLocaleCountryCode) as String
        pageViews = [
            page1View, page2View, page3View,
            page4View, page5View
        ]
        pageLabels = [
            page1Label, page2Label, page3Label,
            page4Label, page5Label
        ]
        pageImageViews = [
            page1ImageView, page2ImageView, page3ImageView,
            page4ImageView, page5ImageView
        ]

        // pageControlの準備
        pageControl.numberOfPages = numberOfPages

        // scrollViewの準備
        let scrollViewWidth = scrollView.frame.size.width
        scrollView.contentSize = CGSize(
            width: CGFloat(numberOfPages) * scrollViewWidth,
            height: viewHeight
        )
        for var i = 0; i < numberOfPages; i++ {
            pageViews[i].frame = CGRectMake(
                CGFloat(i) * scrollViewWidth, 0,
                scrollViewWidth, viewHeight
            )
            scrollView.addSubview(pageViews[i])
            pageImageViews[i].layer.cornerRadius = pageImageViews[i].frame.size.width/2
            pageImageViews[i].clipsToBounds = true
        }

        // Widgetに高さを明示的に教える
        self.preferredContentSize = CGSizeMake(0, viewHeight)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    func widgetPerformUpdateWithCompletionHandler(completionHandler: ((NCUpdateResult) -> Void)!) {
        if self.loading == false {
            dispatch_async(dispatch_get_main_queue(), {
                self.activityIndicatorView.startAnimating()
            })
            self.loading = true
            let config = NSURLSessionConfiguration.defaultSessionConfiguration()
            let session = NSURLSession(configuration: config)
            var url = NSURL(string: self.endpoint)
            let task = session.dataTaskWithURL(url!) {
                (data, response, error) in
                var dict = NSJSONSerialization.JSONObjectWithData(data, options: NSJSONReadingOptions.MutableContainers, error:nil) as Dictionary<String, Array<Dictionary<String, AnyObject>>>;
                if error == nil && dict["root"] != nil {
                    self.responseData = dict["root"]?
                    if self.responseData?.count > 0 {
                        self.updateScrollViewContent()
                        completionHandler(NCUpdateResult.NewData)
                    } else {
                        completionHandler(NCUpdateResult.NoData)
                    }
                } else {
                    completionHandler(NCUpdateResult.Failed)
                }
                self.loading = false
            }
            task.resume()
        }
    }

    // 戻るボタンアクション
    @IBAction func backButton(sender: UIButton) {
        if pageControl.currentPage > 0 {
            pageControl.currentPage--
            nextButton.hidden = false
        }
        if pageControl.currentPage == 0 {
            backButton.hidden = true
        }
        self.updateScrollViewContentOffset()
    }

    // 進むボタンアクション
    @IBAction func nextButton(sender: UIButton) {
        if pageControl.currentPage < numberOfPages {
            pageControl.currentPage++
            backButton.hidden = false
        }
        if pageControl.currentPage == numberOfPages-1 {
            nextButton.hidden = true
        }
        self.updateScrollViewContentOffset()
    }

    // pageControlのcurretPageValueが更新された時の処理
    @IBAction func pageChanged(sender: UIPageControl) {
        self.updateScrollViewContentOffset()
    }

    @IBAction func openURL1(sender: UIButton) {
        self.openURL(0)
    }

    @IBAction func openURL2(sender: UIButton) {
        self.openURL(1)
    }

    @IBAction func openURL3(sender: UIButton) {
        self.openURL(2)
    }

    @IBAction func openURL4(sender: UIButton) {
        self.openURL(3)
    }

    @IBAction func openURL5(sender: UIButton) {
        self.openURL(4)
    }

    func openURL(index: Int) {
        var url = NSURL(string:"snapdish://dish?id=" + self.imageIds[index])
        self.extensionContext?.openURL(url!, completionHandler:{
            (success: Bool) -> Void in
        })
    }

    // 横スクロールのオフセットをページ開始に合わせる
    func updateScrollViewContentOffset() {
        scrollView.setContentOffset(
            CGPoint(
                x: scrollView.frame.size.width * CGFloat(pageControl.currentPage),
                y: 0.0
            ),
            animated: true
        )
    }

    // 画像を更新する
    func updateImageInScrollViewContent(index: Int, imageId: String?) {
        if let imageId = imageId? {
            self.imageIds.append(imageId)
            let url = NSURL(string: imageURLBase + imageId + imageURLSize);
            let req = NSURLRequest(URL: url!)
            NSURLConnection.sendAsynchronousRequest(req, queue:NSOperationQueue.mainQueue()){
                (res, data, error) in
                if error == nil {
                    self.pageImageViews[index].image = UIImage(data: data)
                } else {
                    self.pageImageViews[index].image = nil;
                }
            }
        } else {
            self.pageImageViews[index].image = nil;
        }
    }

    // scrollViewの内容を更新する
    func updateScrollViewContent() {
        dispatch_async(dispatch_get_main_queue(), { // main threadへ移動
            self.pageControl.numberOfPages = self.numberOfPages
            if let newNumberOfPages = self.responseData?.count {
                if newNumberOfPages < self.numberOfPages {
                    self.pageControl.numberOfPages = newNumberOfPages
                }
            }
            let w = self.scrollView.frame.size.width
            for i in 0..<self.numberOfPages {
                if self.pageControl.numberOfPages > i {
                    if let dict = self.responseData?[i] {
                        self.pageViews[i].hidden = false
                        self.pageLabels[i].text = dict["title"] as? String
                        if let imageId = dict["image_id"] as? Dictionary<String, String> {
                            self.updateImageInScrollViewContent(i, imageId: imageId["$oid"])
                        }
                    }
                } else {
                    self.pageViews[i].hidden = true
                }
            }
            self.nextButton.hidden = false
            self.activityIndicatorView.stopAnimating()
        })
    }
}

まとめ

今更だけどSwift書くとObjective-Cに戻れなくなりそう。直感的にサクサクかけてしまう。