IOS苹果TabView视图和Horizontal水平布局控件

QQ896757558

IOS苹果TabView视图和Horizontal水平布局控件

导航条视图模式可以支持多个页面标签切换

案例:

http://www.postbbs.com/template/ ... mg/codebg.gif"); color: rgb(102, 102, 102); zoom: 1; font-family: "Microsoft YaHei", Tahoma, Helvetica, SimSun, sans-serif;">

1. var tab = new TabView()
   
2. tab.setTitles(["首页", "关于", "我的"])
   
3. tab.show(() => {
   
4.       //页面加载完后执行以下代码
   
5.       tab.addView(0, h1());
   
6.       tab.addView(0, h2());
   
7. 
   
8.       printl("hello IOS")
   
9. });
   
10. 
    
11. //第一行
    
12. function h1() {
    
13.       var h = new Horizontal();
    
14.       var lb = new Lable();
    
15.       lb.setText("用户名")
    
16.       lb.setWidth(60)
    
17.       var input = new Input();
    
18.       input.setWidth(150)
    
19.       h.addView(lb);
    
20.       h.addView(input);
    
21.       return h;
    
22. }
    
23. //第二行
    
24. function h2() {
    
25.       var h = new Horizontal();
    
26. 
    
27.       //创建一个按钮
    
28.       var btn = new Button();
    
29.       btn.setText("启动app")
    
30.       //按钮添加到水平容器中
    
31.       h.addView(btn)
    
32. 
    
33.       //设置按钮颜色
    
34.       btn.setColor(25, 10, 130)
    
35. 
    
36.       btn.onClick(() => {
    
37.           printl("按钮点击了")
    
38.       })
    
39. 
    
40.       return h;
    
41. }

复制代码

创建TAB视图

http://www.postbbs.com/template/ ... mg/codebg.gif"); color: rgb(102, 102, 102); zoom: 1; font-family: "Microsoft YaHei", Tahoma, Helvetica, SimSun, sans-serif;">

1. var tab = new TabView()

复制代码

显示视图

function show(function fun)

参数 func ：ui显示以后调用的方法

设置tab

tab.setTitles(["首页", "关于", "我的"])

//关闭视图

tab.dismiss()

添加子视图

tab.addView(tabindex,view)

参数tabindex：tab的序号从0开始

参数 view：子视图

案例

http://www.postbbs.com/template/ ... mg/codebg.gif"); color: rgb(102, 102, 102); zoom: 1; font-family: "Microsoft YaHei", Tahoma, Helvetica, SimSun, sans-serif;">

1. var tab = new TabView()
   
2. tab.setTitles(["首页", "关于", "我的"])
   
3. tab.show(() => {
   
4. 
   
5. //创建一个按钮
   
6.       var btn = new Button();
   
7.       btn.setText("启动app")
   
8. 
   
9.       //设置按钮颜色
   
10.       btn.setColor(25, 10, 130)
    
11. 
    
12.       btn.onClick(() => {
    
13.           printl("按钮点击了")
    
14.           tab.dismiss()
    
15.       })
    
16.   
    
17.       //页面加载完后执行以下代码
    
18.       tab.addView(0,btn);
    
19. 
    
20.       printl("hello IOS")
    
21. });

复制代码

Horizontal水平布局控件

用于横向放置多个控件

http://www.postbbs.com/template/ ... mg/codebg.gif"); color: rgb(102, 102, 102); zoom: 1; font-family: "Microsoft YaHei", Tahoma, Helvetica, SimSun, sans-serif;">

1. //创建一个水平容器
   
2.   var h = new Horizontal()
   
3. 
   
4.   //创建一个按钮
   
5.   var btn = new Button();
   
6.   //设置按钮颜色
   
7.   btn.setColor(25, 10, 130)
   
8.   btn.onClick(() => {
   
9.     printl("按钮1被点击了")
   
10.   })
    
11. 
    
12.   //创建一个按钮
    
13.   var btn2 = new Button();
    
14.   //设置按钮颜色
    
15.   btn2.setColor(25, 10, 130)
    
16.   btn2.onClick(() => {
    
17.     printl("按钮2被点击了")
    
18.   })
    
19. 
    
20.   //按钮添加到水平容器中
    
21.   h.addView(btn)
    
22.   h.addView(btn2)

复制代码

案例:

http://www.postbbs.com/template/ ... mg/codebg.gif"); color: rgb(102, 102, 102); zoom: 1; font-family: "Microsoft YaHei", Tahoma, Helvetica, SimSun, sans-serif;">

1. //申请一个UI
   
2. var vc = new IOSView();
   
3. vc.show(() => {
   
4.   //页面加载完后执行以下代码
   
5. 
   
6.   printl("hello IOS")
   
7.   //获取当前视图
   
8.   var view = vc.getView()
   
9.   //创建一个水平容器
   
10.   var h = new Horizontal()
    
11. 
    
12.   //创建一个按钮
    
13.   var btn = new Button();
    
14.   //设置按钮颜色
    
15.   btn.setColor(25, 10, 130)
    
16.   btn.onClick(() => {
    
17.     printl("按钮1被点击了")
    
18.   })
    
19. 
    
20.   //创建一个按钮
    
21.   var btn2 = new Button();
    
22.   //设置按钮颜色
    
23.   btn2.setColor(25, 10, 130)
    
24.   btn2.onClick(() => {
    
25.     printl("按钮2被点击了")
    
26.   })
    
27. 
    
28.   //按钮添加到水平容器中
    
29.   h.addView(btn)
    
30.   h.addView(btn2)
    
31. 
    
32.   //水平容器添加到视图中
    
33.   view.addView(h)
    
34. });

复制代码