Search…
Side Menu
Overview
The SideMenu component is a navigation drawer that slides on the side of the current view. By default, slide from the left, but the side can be replaced. The sideMenu is customized through containers and specifications that allow you to set the SideMenu object or through the SideMenuContainer class.
The sideMenu, as an important part of the user interface, have their own standards. Therefore it is recommended to review the Material Design for more information and to enjoy the component better. To learn how to design notifications and their interactions, read what MaterialDesing talks about Menus.
Creating SideMenu
First, you create the
SideMenuContainerobject and inside the initUI() you instantiate the objects corresponding to the items, through the SideMenuContainer.Item and there you pass the characteristics you want, such as caption, icon, presenter.After that, you instantiate your
SideMenuContainerobject and point to the SideMenuContainer.item that you created earlier.And then just customize the header of your Side Menu through
topMenu.header.Finally just pass the other information you want on your
sideMenuContainer object, such as font color, bar size and so on.
Content Needed to Create a SideMenu
sideMenuContainersideMenuContainer.Item- Capition
- Image or IconType
- Presenter
TopMenu.HeaderIcon _Menu.
Optional SideMenu Settings and Content
Inside the sideMenuContainer.Item you can still have:
- Caption
- Image or IconType (advise using MaterialIcon)
- Color
- Boolean showTitle
- Presenter
And you can even specify directly in the sideMenuContainer.topMenu:
.drawSeparators = boolean- To place or not the lines separating the items.itemHeightFactor = int- To say the item's size.
Usage
SideMenuSample
1
public void initUI(){
2
SideMenuContainer.Item home = new SideMenuContainer.Item("Home", MaterialIcons._HOME, 0x4A90E2, ()-> {return new Home();});
3
SideMenuContainer.Item sample = new SideMenuContainer.Item("Home", MaterialIcons._THUMB_UP, 0x4A90E2, ()-> {return new Sample();});
4
SideMenuContainer sideMenu = new SideMenuContainer(null, home, sample);
5
6
sideMenu.topMenu.header = new Container(){
7
public void initUI(){
8
setBackColor(0xaa443b);
9
10
Label title = new Label("SideMenu", CENTER, Color.WHITE, false);
11
title.setFont(Font.getFont("Lato Bold", false, this.getFont().size+5));
12
title.setForeColor(Color.WHITE);
13
add(title, LEFT+45, BOTTOM-45, PARENTSIZE+40, DP+56);
14
}
15
};
16
17
sideMenu.setBarFont(Font.getFont(Font.getDefaultFontSize()+2));
18
sideMenu.setBackColor(0x4A90E2);
19
sideMenu.setForeColor(Color.WHITE);
20
sideMenu.setItemForeColor(Color.BLACK);
21
sideMenu.topMenu.drawSeparators = false;
22
sideMenu.topMenu.itemHeightFactor = 3;
23
24
Icon icon = new Icon(MaterialIcons._MENU);
25
icon.setBackColor(Color.WHITE);
26
add(icon, CENTER, TOP);
27
add(sideMenu, LEFT, TOP, PARENTSIZE, PARENTSIZE);
28
}
Copied!
References
​
Last modified 3yr ago