Question

我正在使用Swift 3和xcode 8为iOS应用程序构建一个滑出菜单（我不想使用任何开源库）所以我构建了它，我面临两个问题， 1.如果中心视图有导航栏，则侧面菜单视图出现在导航栏下方，我希望它从屏幕边界开始。

2.幻灯片菜单视图还显示了载体，菜单视图顶部的时间，我想要的行为类似于谷歌加iOS应用程序，其中菜单加载在主视图的顶部。

请在下面找到我用来打开幻灯片菜单的代码，我不确定上述问题是否正在发生，因为我已经将菜单视图添加为子视图，如果有更好的方法可以做到，请提示。从主视图控制器打开菜单视图

let canvas = $("#canvas")[0];
let ctx = canvas.getContext("2d");

let mouseX = 0;
let mouseY = 0;

class Paddle {
    constructor(x, y, w, h, color) {
        this.x = canvas.width / 2 - 100 / 2;
        this.y = canvas.height - 60;
        this.w = 100;
        this.h = 10;
        this.color = "#fff";
    }

    draw() {
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.w, this.h); 
    }
}

class Ball {
    constructor (x, y, r, speedX, speedY, color) {
        this.x = canvas.width / 2 - 10 / 2;
        this.y = canvas.height / 2 - 10 / 2;
        this.r = 10;
        this.speedX = 3;
        this.speedY = 3;
        this.color = "#fff";
    }

    draw() {
        ctx.fillStyle = this.color;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
        ctx.fill();
    }

    animate() {
        this.x += this.speedX;
        this.y += this.speedY;
    }

    collision() {
        if(this.x >= canvas.width) {
            this.speedX *= -1;
        }
        if(this.x <= 0) {
            this.speedX *= -1;
        }
        if(this.y >= canvas.height) {
            this.reset();
        }
        if(this.y <= 0) {
            this.speedY *= -1;
        }

        let paddleTop = paddle.y;
        let paddleBottom = paddleTop + paddle.h;
        let paddleLeft = paddle.x;
        let paddleRight = paddle.x + paddle.w;

        if(ball.x >= paddleLeft &&
           ball.x <= paddleRight &&
           ball.y >= paddleTop &&
           ball.y <= paddleBottom) {
            ball.speedY *= -1;
            ballControl();
        }
    }

    reset() {
        this.speedX = 3;
        this.speedY = 3;

        this.x = canvas.width / 2 - 10 / 2;
        this.y = canvas.height / 2 - 10 / 2;
    }
}

class Brick {
    constructor(x, y, w, h, col, row, gap, color) {
        this.x = 0;
        this.y = 0;
        this.w = 100;
        this.h = 50;
        this.col = 5; //# of brick columns
        this.row = 2; //# of brick rows
        this.gap = 2; //gap betweeb each brick
        this.color = "#0000ff";
    }

    draw() {
        for(let brickRow = 0; brickRow < this.row; brickRow++) {
            for(let brickCol = 0; brickCol < this.col; brickCol++) {
                ctx.fillStyle = this.color;
                ctx.fillRect(this.x * brickCol, this.y * brickRow, this.w - this.gap, this.h - this.gap);
            }
        }
    }
}

let paddle = new Paddle(this.x, this.y, this.w, this.h, this.color);
let ball = new Ball(this.x, this.y, this.r, this.speedX, this.speedY, this.color);
let brick = new Brick(this.x, this.y, this.w, this.h, this.col, this.row, this.gap, this.color);

// START

$(document).ready(() => {
    let fps = 120;
    setInterval(init, 1000 / fps);

    $(canvas).bind("mousemove", paddleControl);
})

// INIT
let init = () => {
    draw();
    animate();
    collision();
}

// DRAW
let draw = () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    paddle.draw();
    ball.draw();
    brick.draw();
}

// ANIMATE
let animate = () => {
    ball.animate();
}

// COLLISION
let collision = () => {
    ball.collision();
}

// BALL CONTROL
let ballControl = () => {
    let paddleCenter = paddle.x + paddle.w / 2;
    let ballDistFromPaddleCenter = ball.x - paddleCenter;

    ball.speedX = ballDistFromPaddleCenter * 0.15;
}

// PADDLE CONTROL
let paddleControl = (e) => {
    let rect = canvas.getBoundingClientRect();
    let root = document.documentElement;

    mouseX = e.pageX - rect.left - root.scrollLeft;
    mouseY = e.pageY - rect.top - root.scrollTop;

    paddle.x = mouseX;
}

Answer 1

如果您真的希望查看状态栏和导航控制器，可以将其添加到窗口中：

UIApplication.shared.keyWindow?.addSubview(menuVC.view)

请注意，视图不再是ViewController的子视图，因此您还需要在deinit中手动关闭它，否则即使视图控制器消失，它也会保留在屏幕上：

menuVC.view.removeFromSuperview()

Answer 2

您可以在应用程序窗口中添加左侧菜单作为子视图，并使用动画进行滑动。
如果您不想在菜单视图顶部显示运营商，则隐藏/显示状态栏

Answer 3

类ViewController：UIViewController {

@IBOutlet weak var leading: NSLayoutConstraint!

@IBOutlet weak var sideview: UIView!

var showmenu = false

override func viewDidLoad() {
    super.viewDidLoad()


       leading.constant = -160

// sideview.layer.shadowOpacity = 5 // sideview.layer.shadowRadius = 5

}


@IBAction func btnmenu(_ sender: UIBarButtonItem) {



    if (showmenu)
    {

        leading.constant = -160

    }
    else
    {

        leading.constant = 0



       UIView.animate(withDuration: 0.5, animations:{self.view.layoutIfNeeded() })




    }
    showmenu = !showmenu





}


@IBAction func btntblview(_ sender: UIButton) {

    let hk = storyboard?.instantiateViewController(withIdentifier: "TableViewController")as! TableViewController

    self.navigationController?.pushViewController(hk, animated: true)

}

Slide Out菜单iOS显示iOS中的状态栏

3 个答案: