美文网首页iOS随心记_夏点程序员iOS Developer
仿网易云音乐界面尝试学习MAC App

仿网易云音乐界面尝试学习MAC App

作者: 夏点 | 来源:发表于2017-03-31 13:17 被阅读423次

    首先我要说自己并不会Mac开发,只是知道Mac开发用Xcode可以,oc语言。说一下这次要尝试的效果,就只是练习Mac APP的布局,打算画一个类似网易云音乐的首页
    ps:说明一下 本人所使用的方法很多都是试出来的 我也不知道是不是真实开发项目中所用 只是为了实现想要效果。


    买家秀

    边尝试变开发吧,看看自己最终实现的效果(买家秀与卖家秀,哈哈)

    1.首先创建一个Mac项目


    创建项目

    2.运行一下 ,第一个Mac项目 就这么一个小窗体(算项目么...)


    小窗体
    3.看了一下项目结构有Main.storyboard 这个可以啊 就直接把控件拖进去吧 开始布局啦 查了资料Mac中控件都是NS开头 找一个按钮来 拖进去 发现还能添加约束诶 那布局更方便了 固定宽100高50固定在屏幕中心
    按钮布局

    点击事件也是可以拖出来的(和iOS差不多嘛)


    点击事件
    运行一下 哎呦不错嘛 可以点击有响应事件了 (迈出了一小步 哈哈)
    响应事件
    4.但是有个问题发现Mac项目窗体是可变化的大小 为了减轻适配的难度(新手啊) 我决定给他固定一个大小来仿做界面 找到这个window 把他的最大最小都调成800*500的 这样就不能变化了吧()
    window
    5.主要窗体弄好了,开工啦 大体先分四块吧 用四个NSView给先铺上(把我第一个按钮删掉了 存在时间好短...)
    分块.png
    吧约束添加上 属性拖出来 设置背景颜色然后发现居然没有backgroundColor这个属性,发现有layer属性 好吧 原来这个颜色的丑吧....我就是做个区分
    //设置颜色
     self.topView.layer.backgroundColor=[NSColor redColor].CGColor;
     self.bottomView.layer.backgroundColor=[NSColor grayColor].CGColor;
     self.leftView.layer.backgroundColor=[NSColor orangeColor].CGColor;
     self.rightView.layer.backgroundColor=[NSColor blueColor].CGColor;
    
    布局.png

    6.开始先把头给做了 上面从左到右就是一些NSImage NSButton NSTextField 看下效果 :

    Screenshot 2017-03-31_13-16-36.png

    7.感谢大家恩宠 先把demo上传(虽然还没做完) 附上Demo地址

    相关文章

      网友评论

      • 5e4caaf7c8b7:不知道Mac版网易云音乐用的什么技术,才10M大小,虾米和Spotify一个140多M一个200多M,貌似都是用的electron。
      • 白兔兔_228f:这一天:joy:

      本文标题:仿网易云音乐界面尝试学习MAC App

      本文链接:https://www.haomeiwen.com/subject/bfwmottx.html