Help us understand the problem. What is going on with this article?

サイドから出てくるスワイプメニューを作る

More than 5 years have passed since last update.

アプリ画像

やったこと

  • GmailとかFacebookとか、スマホアプリでよくある、左とか右にスワイプしたら、メニューが出てくる、逆向きにスワイプしたら戻るやつを作る。
  • メニューが出ている間は、メイン部分の上に透明ボタンを被せる。
  • 透明ボタンを押すと、メニューを閉じる。

コード

ViewController.swift
class ViewController: UIViewController {

    // フロントビュー
    @IBOutlet var frontView: UIView!

    // カバーボタン(透明)
    @IBOutlet var coverButton: UIButton!
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        // カバーボタンを隠す
        self.coverButton.hidden = true
    }

    // スワイプ(メニューを表示、非表示)
    @IBAction func swipeView(sender: UISwipeGestureRecognizer) {

        var location:CGPoint = self.frontView.center;
        var center_x:CGFloat = self.view.center.x;

        //スワイプした方向で分岐
        if (sender.direction == UISwipeGestureRecognizerDirection.Right) {
            // 右に開ける
            location.x = center_x + 120
            // カバーボタンを表示
            self.coverButton.hidden = false
        } else {
            //左に閉じる
            location.x = center_x
            // カバーボタンを隠す
            self.coverButton.hidden = true
        }
        UIView.animateWithDuration(
            0.2,
            delay:0.5,
            options : UIViewAnimationOptions.CurveEaseIn,
            animations : {
                self.frontView.center = location
            },
            completion: {
                (value: Bool) in
                println("");
            }
        )

    }

    // カバーボタンをタップするとメニューを閉じる
    @IBAction func closeMenu(sender: UIButton) {

        var location:CGPoint = self.frontView.center;
        var center_x:CGFloat = self.view.center.x;

        //左に閉じる
        location.x = center_x
        // カバーボタンを隠す
        self.coverButton.hidden = true

        UIView.animateWithDuration(
            0.2,
            delay:0.5,
            options : UIViewAnimationOptions.CurveEaseIn,
            animations : {
                self.frontView.center = location
            },
            completion: {
                (value: Bool) in
                println("");
            }
        )

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


}

コツとか

  • Recognizerなどの名前を変えるのに、コツが要る 名前を変える

ツリーから名前を変えるんだけど、最初は、編集状態にする方法がよく分からなかった。選択してから、短いクリックをする。ダブルクリックではできない。
* iosシミュレーターでスワイプするときは、普通にマウスでドラッグする。

ソースアップ

https://github.com/hanoopy/ios_study_swipecat.git

コメント

  • animateWithDurationの書き方はすごい適当で、こちらを参考にしました。
    http://qiita.com/skatata/items/a0b908c899748c843db3

  • SwipeCatという名前で犬の写真にしてしまった。

  • 始めはMenu2だけ前に出てしまって、作りなおしたら直ったけどよくわからない。

  • 共通処理をまとめてあげたい。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away