読者です 読者をやめる 読者になる 読者になる

Swift,Objective-Cプログラミング ~ iOS ~

Objective-C,Swift,Apple Watchなどのプログラミング

【iOS Swift入門 #278】ScrollMenu(スクロールメニュー)を作ってみました

iOS Swift carthage ライブラリ

この記事を読んでわかること

  • ScrollMenuの使い方

はじめに

画面の上のほうに横スクロールメニューを作りました。 ニュース系アプリやブログまとめアプリで使われているのを見ますね。

↓のキャプチャのように動きます。

github.com https://cloud.githubusercontent.com/assets/4578511/17367235/25c7e36e-59ca-11e6-988d-765819c878aa.gif

実践編

画像の切替

簡単な例ですが、スクロールメニューを使って、
表示されている画像を切り替えられるようにしてみます。

https://cloud.githubusercontent.com/assets/4578511/17402517/a61451dc-5a8e-11e6-972c-06bd2baabd1e.gif

githubでプロジェクトをダウンロードすることができます。 GitHub - fuji2013/ScrollMenu

  1. 新規プロジェクトを作成します
  2. Carhtageを使って、スクロールメニューのframeworkを追加します。(詳細はGitHub - fuji2013/ScrollMenu)
  3. 表示する画像リソースを追加(001.jpg ~ 003.jpgという名前の画像を追加した)
  4. ViewController.swiftを下記のとおりに編集
import UIKit
import ScrollMenu

class ViewController: UIViewController, ScrollMenuDelegate {
    let images = ["001.jpg", "002.jpg", "003.jpg", "004.jpg"]
    let imageView = UIImageView(frame: CGRectZero)
    let scrollMenu = ScrollMenu(frame: CGRectZero)

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // スクロールメニューの作成
        buildScrollMenu()
        
        // スクロールメニューの位置、サイズ
        scrollMenu.scrollMenuDelegate = self
        scrollMenu.frame = CGRect(x: 0, y: 20.0, width: view.bounds.width, height: 60)
        view.addSubview(scrollMenu)

        // 画像表示の位置、サイズ
        let center = CGPoint(x: view.bounds.width/2, y: view.bounds.height/2)
        let size = CGSize(width: view.bounds.width/2, height: view.bounds.height/2)
        imageView.frame = CGRect(origin: CGPointZero, size: size)
        imageView.center = center
        view.addSubview(imageView)
        
        // 最初のメニューを選択
        scrollMenu.selectIndex(0)
    }
    
    private func buildScrollMenu(){
        let colors = [UIColor.yellowColor(), UIColor.redColor(), UIColor.blueColor(), UIColor.brownColor()]
        for i in 0 ..< images.count{
            let menu = Menu(title: "image\(i)",
                            defaultBarColor: colors[i],
                            selectedBarColor: colors[i],
                            selectedTitleColor: colors[i])
            
            scrollMenu.addMenu(menu)
        }
    }

    func scrollMenuDidSelect(index index: Int) {
        // 画像の切替
        imageView.image = UIImage(named: images[index])
    }
    
    func scrollMenuDidDeselect(index index: Int) {
        // do nothing
    }
}


参考情報

Swift

iOSアプリ開発未経験の人向け
・Swift初心者の人に評判が良いようですね


・わかりやすくていい、と聞いた本
立ち読みした感じだと【アプリ作成未経験の人向け】

絶対に挫折しない iPhoneアプリ開発「超」入門【Swift & iOS8.1以降 完全対応】

絶対に挫折しない iPhoneアプリ開発「超」入門【Swift & iOS8.1以降 完全対応】


②を終えたくらいの知識の方向け
・アプリ開発独学中に2冊めに購入した書籍
プログラミング知識はなくても、若干理解するのに時間がかかる程度で、
読み進められるわかりやすさがある。

iPhoneアプリ開発塾

iPhoneアプリ開発塾


③中級者、上級者向け

詳解 Swift

詳解 Swift

詳解 Swift 改訂版

詳解 Swift 改訂版