现在的位置: 首页 > 移动开发> 正文
Sencha Touch 程序设计之 Android 平台 Back 按键处理
2012年04月09日 移动开发 暂无评论 ⁄ 被围观 2,433+

利用 Sencha Touch 结合PhoneGap设计本地APP,免不了要分别处理android平台和iphone平台,两个平台的最大区别之一就是back键的处理。iphone平台没有back按键,只有home按键,按下该键的话程序会自动转入后台处理,该按键的效用等同于android平台的home按键,但是,android平台特殊的地方在于,它还有一个back键,熟悉了android平台的开发者或使用者,把该键的作用理解为退回程序的上一个页面,如果程序已经在主页面,此时则退出程序。

因为Sencha Touch对android平台进行了消息封装,默认对back键的处理,同home键的处理一致,这令很多android开发者或使用者使用其功能的话不太友好,我自己在调试程序的过程中就误操作过了N次,每次按下back键期望程序回退到上一个页面,没想到程序直接消失了,转到后台去了。

网上搜索了一些解决方案,各有利弊,汇总贴可参照Sencha Touch官方论坛《Why-can-t-I-control-Android-phone-s-hardware-Back-button-in-Sencha-with-PhoneGap》,下面介绍一下我设计的一个解决方案,在实测环境中工作良好,总结如下:

1. 首先在Sencha 启动代码中捕获android平台的back按键消息,阻止Sencha 框架的默认处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var App = new Ext.application({
 // ... APP 配置参数
 
 launch : function () {
  // ... 界面初始化
   BBGlobalData.mainPanel = Ext.create('Ext.Panel', {
       fullscreen: true,
       layout : 'card',
       cardAnimation : 'slide',
       items: [
           Ext.create('BBShow.view.LoginPanel'),
           Ext.create('BBShow.view.HomePanel'),
           Ext.create('BBShow.view.MediaPanel'),
           Ext.create('BBShow.view.PicCarousel'),
           Ext.create('BBShow.view.ReportListPanel'),
           Ext.create('BBShow.view.ReportPanel'),
       ]
   });
 
   Ext.Viewport.add(BBGlobalData.mainPanel);
 
   document.addEventListener('deviceready', function () {
     console.log('deviceready');
     document.addEventListener("backbutton", function () {
           console.log('user presses the back button on Android');
           // 获取当前的焦点页面,并发送自定义消息'back'
           BBGlobalData.mainPanel.getActiveItem().fireEvent('back');
    }, false);
  }, false);
}
})
var App = new Ext.application({
 // ... APP 配置参数

 launch : function () {
  // ... 界面初始化
   BBGlobalData.mainPanel = Ext.create('Ext.Panel', {
       fullscreen: true,
       layout : 'card',
       cardAnimation : 'slide',
       items: [
           Ext.create('BBShow.view.LoginPanel'),
           Ext.create('BBShow.view.HomePanel'),
           Ext.create('BBShow.view.MediaPanel'),
           Ext.create('BBShow.view.PicCarousel'),
           Ext.create('BBShow.view.ReportListPanel'),
           Ext.create('BBShow.view.ReportPanel'),
       ]
   });

   Ext.Viewport.add(BBGlobalData.mainPanel);

   document.addEventListener('deviceready', function () {
     console.log('deviceready');
     document.addEventListener("backbutton", function () {
           console.log('user presses the back button on Android');
           // 获取当前的焦点页面,并发送自定义消息'back'
           BBGlobalData.mainPanel.getActiveItem().fireEvent('back');
    }, false);
  }, false);
}
})

2. 在子页面中注册back消息的监听器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/*定义登录面板*/
Ext.define('BBShow.view.LoginPanel', {
extend: 'Ext.Panel',
 
    config: {
      items: [
      {
        xtype: 'titlebar',
        docked: 'top',
        title: '用户登录'
      },
      // 其他页面内容
     ],
    listeners: [
     {
      fn: 'onBack',
      event: 'back', //注册监听自定义back按键消息
     }
    ]
  },
 
  onBack: function() {
    //BBGlobalData.gotoHomePanel(); //如,跳转到其他页面
    BBGlobalData.exitApp(); //或退出程序
  },
});
/*定义登录面板*/
Ext.define('BBShow.view.LoginPanel', {
extend: 'Ext.Panel',

    config: {
      items: [
      {
        xtype: 'titlebar',
        docked: 'top',
        title: '用户登录'
      },
      // 其他页面内容
     ],
    listeners: [
     {
      fn: 'onBack',
      event: 'back', //注册监听自定义back按键消息
     }
    ]
  },

  onBack: function() {
    //BBGlobalData.gotoHomePanel(); //如,跳转到其他页面
    BBGlobalData.exitApp(); //或退出程序
  },
});

3. 实现退出程序的处理,借助于PhoneGap

1
2
3
   BBGlobalData.exitApp = function() {
   navigator.app.exitApp();
}
   BBGlobalData.exitApp = function() {
   navigator.app.exitApp();
}

4. 实现页面跳转的处理(主页面采用card view,类似于扑克的翻牌)

1
2
3
BBGlobalData.gotoHomePanel = function() {
   BBGlobalData.mainPanel.setActiveItem(1);
}
BBGlobalData.gotoHomePanel = function() {
   BBGlobalData.mainPanel.setActiveItem(1);
}

总结:其实总的解决方法还是很简单,只要把整体的框架搭建完善了,很容易就能在多平台之间转换了。

给我留言

留言无头像?


×
腾讯微博