apicloud apicloud

注册
查看: 11438|回复: 202

[公告] APICloud重磅推出TabLayout高级窗口组件

 

主题:
20
帖子:
6521
云币:
6039

端午节

[公告] APICloud重磅推出TabLayout高级窗口组件

 
11438 202 | 发表于 2019-2-27 16:06:43 |阅读模式 | |
APICloud重磅推出TabLayout高级窗口组件

      TabLayout是在APICloud现有窗口系统基础上升级而来的高级窗口组件,符合Material Design规范,可通过简单的配置为窗口实现原生的导航栏和TabBar,它将帮助您节省30%以上的重复编码工作量,同时为APP节省50%以上的系统资源开销,带来APP页面打开速度、应用性能上的整体提升,助您更快速的开发精美APP。

使用tabLayout主要有以下优点:

1、减少代码,提升开发效率

使用tabLayout只需要简单配置参数即可实现首页tabBar+frameGroup的整体布局,不用在window页面中书写header、footer标签和css样式来实现导航栏、标签栏,同时也不用考虑适配状态栏和虚拟home键。因此可以将更多时间花在具体业务的实现上面,从而提高开发效率。

2、加快打开页面速度,提升应用性能

使用tabLayout来实现导航栏时,由于导航栏是原生实现的,那么只需要打开一个window页面来实现内容页,相较于之前window+frame的结构,减少了一个webView的开销,因此大大提高了页面打开速度,并且减少了应用的内存占用。


tabLayout相关的方法请参考API文档,下面介绍tabLayout的基本使用:

一、实现导航栏navigationBar效果

tabLayout封装了原生的导航栏,可以方便地实现头部效果,导航栏会自动适配屏幕状态栏和沉浸式,效果如图:

示例1.2019-02-27 14_40_17.gif

实现的代码只需要简单的几行:

function openNavWin(){
    var param = {
        name: 'nav',
        url: './main_content.html',
        bgColor: '#fff',
        title: 'navigationBar',
        navigationBar: {
            rightButtons: [{
                iconPath: "widget://image/more.png"
            }]
        }
    }
    api.openTabLayout(param);
}

对于导航栏上面按钮的点击事件,则可以在打开的页面中通过监听事件进行处理:

function apiready(){
    api.addEventListener({
        name: 'navbackbtn'
    }, function(ret, err) {
        alert('点击了返回按钮');
        api.closeWin();
    });

    api.addEventListener({
        name: 'navitembtn'
    }, function(ret, err) {
        if (ret.type == 'right') {
            alert('点击了右边按钮');
        }
    });
}


二、实现tabBar效果

tabLayout将tabBar控件和frameGroup结合到了一起,tabLayout会自动管理tabBar项和对应的页面,同时tabBar会自动适配底部虚拟home键,效果如图:

示例2.2019-02-27 14_42_20.gif

实现的代码如下:

function openNavTabWin(){
    var param = {
        name: 'nav-tab',
        title:'nav-tab',
        bgColor:'#fff',
        slidBackEnabled: false,
        navigationBar: {
            hideBackButton: true
        },
        tabBar: {
            animated: true,
            list: [
                {
                    text: "微信",
                    iconPath: "widget://image/nav_tab_1.png",
                    selectedIconPath: "widget://image/nav_tab_1_on.png"
                }, {
                    text: "通讯录",
                    iconPath: "widget://image/nav_tab_2.png",
                    selectedIconPath: "widget://image/nav_tab_2_on.png"
                }, {
                    text: "发现",
                    iconPath: "widget://image/nav_tab_3.png",
                    selectedIconPath: "widget://image/nav_tab_3_on.png"
                }, {
                    text: "我",
                    iconPath: "widget://image/nav_tab_4.png",
                    selectedIconPath: "widget://image/nav_tab_4_on.png"
                }
            ],
            frames: [
                {
                    title: "微信",
                    name: "tab_frm_1",
                    url: "widget://html/tab_content_1.html"
                }, {
                    title: "通讯录",
                    name: "tab_frm_2",
                    url: "widget://html/tab_content_2.html"
                }, {
                    title: "发现",
                    name: "tab_frm_3",
                    url: "widget://html/tab_content_3.html"
                }, {
                    title: "我",
                    name: "tab_frm_4",
                    url: "widget://html/tab_content_4.html"
                }
            ]
        }
    }
    api.openTabLayout(param);
}

如果需要在点击tabBar项后做其它的处理,可以监听tabitembtn事件进行处理,监听点击事件后tabBar将不会自动切换页面,需要调用setTabBarAttr方法进行切换。

function apiready(){
    api.addEventListener({
        name:'tabitembtn'
    }, function(ret) {
        console.log('点击了第'+(ret.index+1)+'项');
        api.setTabBarAttr({
            index: ret.index
        });
    });
}

打开tabBar后,可以为tabBar上面的各项设置角标,如:

function setTabBarItemDot(){
    api.setTabBarItemAttr({
        index: 2,
        badge: {
            text: '',
            radius: 5,
            x: 8
        }
    });
}

附件为以上示例代码:

widget.zip (42.45 KB, 下载次数: 1304)

驾校小白

UID:759853

主题:
2
帖子:
30
云币:
32
发表于 2019-3-4 12:22:40 |
常山赵子云 发表于 2019-3-4 12:02
已与ios保持一致,重新编译看看。

安卓navigationBar问题:
1.顶部的返回图标不能控制大小(全靠UI切图)如果切的不好会导致title不居中,不加text也不会居中,
2.title,不能控制大小,字体也不能加粗。

3.如果有侧滑导航效果,怎么加?
4.root用配置,事件无法添加,全自动的,需要判断登陆,前置条件很困难。




ios 更严重的问题;
分页不会触发!
api.addEventListener({
                                    name:'scrolltobottom',
                                    extra:{
                                        threshold:70            //设置距离底部多少距离时触发,默认值为0,数字类型
                                    }
                                }, function(ret, err) {
                                        alert('不触发!')
                                });

驾校小白

UID:533287

主题:
6
帖子:
23
云币:
31
发表于 2019-3-5 17:01:46 |
在打开的页面能否获取标题栏的高度??

马路杀手

UID:218807

主题:
8
帖子:
152
云币:
578

端午节

发表于 2019-3-1 22:52:01 |
api.addEventListener({
    name:'tabitembtn'
},function(ret, err){
    var index = ret.index + 1;
    alert('点击了第'+index+'项');
});
监听tabLayout中tabBar项的点击事件。默认点击每一项时会切换到对应的页面,如果监听了此事件则页面不会自动切换过去,可以通过setTabBarAttr设置选中项,字符串类型
这里设置了监听,还是会默认切换,没法拿到对应的index

主题:
21
帖子:
199
云币:
359

足球狗APICloud粉丝女朋友

发表于 2019-2-28 10:54:45 |
widgrt包同步后无效,显示这个怎么回事
234324242.jpg

主题:
9
帖子:
49
云币:
284
发表于 2019-2-27 19:00:56 |
这个可以

老司机

UID:673413

主题:
175
帖子:
12677
云币:
5649

圣诞节

发表于 2019-2-27 19:07:36 |
赞一下

马路杀手

UID:501183

主题:
30
帖子:
235
云币:
395

APICloud粉丝装逼侠

发表于 2019-2-28 10:11:30 |
可以  支持

主题:
68
帖子:
255
云币:
247
发表于 2019-2-28 10:17:18 |
强烈支持这个。

主题:
21
帖子:
199
云币:
359

足球狗APICloud粉丝女朋友

发表于 2019-2-28 10:32:24 |
很6这个,支持

主题:
36
帖子:
9033
云币:
9305

端午节社会摇圣诞节老司机你吃屎!首长好!我还是个孩子!托马斯全旋女朋友不想上班!装逼侠单身狗超人锤子侠SB侠我李白贼6APICloud大会专属勋章狗年旺旺旺足球狗捣蛋鬼儿童节快乐

发表于 2019-2-28 10:44:13 |
66666666
微信公众号、小程序、app、webapp、pc网页端项目合作点击QQ455600672

主题:
20
帖子:
6521
云币:
6039

端午节

 楼主| 发表于 2019-2-28 10:58:52 |
undefined_null 发表于 2019-2-28 10:54
widgrt包同步后无效,显示这个怎么回事

是用最新引擎编译的吗?引擎版本1.2.99及以上

新手上路

UID:709316

主题:
6
帖子:
80
云币:
123
发表于 2019-2-28 11:18:54 |
终于更新了
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表