CocosStudio（十四）登陆界面

       登陆界面UI主要包含了用户账号的输入，密码的输入，提交账号和密码的按钮。登陆界面对TextField输入框和editbox的运用。看看效果图，你想下你会怎么用CocosStudio来做这界面。

一、创建画布

画布的名字为：Login，根节点命名为：Panel_Root，子控件布局为：相对布局。

二、界面制作

1.Panel_Main

• Panel_Root下创建Panel对象
• 名字：Panel_Main
• 子控件布局：绝对布局
• 尺寸：970*800
• 文件：把图片bg_window.png拖拽到文件中
• 九宫格：X = 90，Y = 120，W = 160，H = 138
• 交互：关闭
• 停靠：Panel_Root
• 横向布局：居中
• 纵向布局：居中
• 填充颜色：无颜色

2.Label_Title

• Panel_Main下创建Label对象
• 名字：Label_Title
• 停靠：Panel_Main
• 横向布局：居中
• 纵向布局：居顶
• 边缘上：23
• 字号：60
• 文本：登陆

3.Label_UserName

• Panel_Main下创建Label对象
• 名字：Label_UserName
• 停靠：Panel_Main
• 横向布局：居左 110
• 纵向布局：居上 248
• 字号：60
• 文本：账号：

4.TextField_UserName

• Panel_Main下创建TextField对象
• 名字：TextField_UserName
• 模式：Custom
• 尺寸：W = 500，Y = 100
• 停靠：Label_UserName
• 停靠边界：停靠在Label_UserName右边，左边空隙30
• 纵向布局：纵向停靠在Label_UserName中间
• 字号：60
• 占位文本：请输入账号

5.Label_Password同Label_UserName

6.TextField_Password同TextField_UserName

7.Button_Login

• Panel_Main下创建Button对象
• 名字：Button_Login
• 停靠：Panel_Main
• 横向布局：居中
• 纵向布局：居低 45
• 字号：60
• 文本：登陆

三、导出

登陆界面就简单的做好了，更多的工作是在代码中，天气转冷了，今天有点小感冒，头晕晕的。

资源地址：http://pan.baidu.com/s/1gfhufjP