In Android, bottom options menu is where you should include actions and other options that are relevant to the current activity context, such as “Search,” “Compose email,” and “Settings”. If you’ve developed your application for Android 2.3.x (API level 10) or lower, the contents of your options menu appear at the bottom of the screen when the user presses the Menu button, as shown in this figure.
In this tutorial we will create menu with five action items. Lets start step by step:
1: Create a Container with 20% height at bottom of Viewport
Create a container with 20% height and 100% width. Add this container with bottom 0px.
1
2
3
4
5
6
7
8
9
| Ext.define('SenchaDemo.view.PopupMenu',{ extend: 'Ext.Container', xtype: 'popupbox', config:{ itemId: 'popupMenu', bottom:0, height: '20%', width: '100%'}}); |
2: Add show/hide animation to this Container
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| Ext.define('SenchaDemo.view.PopupMenu',{ extend: 'Ext.Container', xtype: 'popupbox', config:{ itemId: 'popupMenu', bottom:0, height: '20%', width: '100%', cls: 'removeBorder', showAnimation: { type: 'slide', easing: 'ease-out', direction: 'up', duration: 300 }, hideAnimation: { type: 'slideOut', easing: 'ease-out', direction: 'down', duration: 400 }}); |
3: Add two Panels in this Container
Add layout vbox and flex as 1 to the Container. Now add two panels with layout hbox and flex as 1 in the Container.
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
32
33
34
35
36
37
38
39
40
41
42
43
| Ext.define('SenchaDemo.view.PopupMenu',{ extend: 'Ext.Container', xtype: 'popupbox', config:{ itemId: 'popupMenu', bottom:0, height: '20%', width: '100%', cls: 'removeBorder', showAnimation: { type: 'slide', easing: 'ease-out', direction: 'up', duration: 300 }, hideAnimation: { type: 'slideOut', easing: 'ease-out', direction: 'down', duration: 400 }, layout:'vbox', defaults:{ flex: 1, }, items:[ { xtype: 'panel', layout:'hbox', defaults:{ flex: 1, } },{ xtype: 'panel', layout:'hbox', style: 'border-top:1px solid', defaults:{ flex: 1, } } ] }}); |
4: Add Action Items in these two panels
Add menu action items or buttons in these two panels. Either we can put in items direct button as xtype or can use html. In this example I am putting directly buttons in these two panels.
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
| xtype: 'panel',layout:'hbox',style: 'border-top:1px solid',defaults:{ flex: 1},items: [{ xtype: 'panel', cls: 'segment', items:[{ xtype: 'button', iconCls: 'settings', iconmask: true, text: 'settings', cls: 'menuButtons', handler: function(){ Ext.ComponentQuery.query('#popupMenu')[0].hide(); }}]},{xtype: 'panel',cls: 'segment',items:[{ xtype: 'button', iconCls: 'search', iconmask: true, text: 'search', cls: 'menuButtons', handler: function(){ Ext.ComponentQuery.query('#popupMenu')[0].hide(); }}]},{xtype: 'panel',cls: 'segment',items:[{ xtype: 'button', iconCls: 'refresh', iconmask: true, text: 'refresh', cls: 'menuButtons', handler: function(){ Ext.ComponentQuery.query('#popupMenu')[0].hide(); }}] |
5: Make it perfect with CSS
Create a css file like popup-menu.css with required css and add it to app.json.
css:
css:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| .removeBorder{ padding: 0px !important; background-color: white;}.segment .x-button-label{ left: -24% !important; position: relative;}.segment{ border-left:1px solid; border-radius:0px; background-image:none; background-color:white; text-align:center;}.menuButtons{ border:none; background-image:none; background-color:white; display:inline-block !important;} |
Add in app.json:
1
2
3
4
5
6
7
8
9
10
| "css": [ { "path": "resources/css/app.css", "update": "delta" }, { "path": "touch/resources/css/popup-menu.css", "update": "delta" }] |
댓글 없음:
댓글 쓰기