Android-bottom menu Architecture Design and encapsulation implementation

Introduction

In Android applications, the bottom menu is often seen. For example, the bottom menu is as follows:

 

There are also the same requirements for enterprise-level Android applications, but the difference with these public software is that enterprise-level Android applications have many UI pages and each page needs a bottom menu, in addition, the menu buttons at the bottom of each page may be completely different. Therefore, in order to ensure the consistency of each page and facilitate UI page creation, the menu at the bottom is specially designed and encapsulated, is particularly important.

 

Design Selection

When designing the menu at the bottom, there are two ideas:

1. Customize the bottom menu block separately, introduce the menu block code to each layout. xml file that needs to be used in the bottom menu, and then define the buttons to be used in the code.

 

This method is in line with the normal thinking logic. The disadvantage is that every page must be introduced repeatedly. In fact, this can be avoided.

 

2. In Android, you can extract a custom UI from layout. layoutinflater is used for instantiation in XML. Based on this technology, we can solve this problem with another idea: When writing a page layout file, we do not need to worry about the bottom menu. Then, in the displayed code, define a large view page to include the layout file of the page and the layout of the bottom menu, as shown in the process:

 

Detailed Design

1. design the large view page layout: bottom_menu_layout.xml, which is used to include custom business pages and the bottom menu.

 

<? XML version ="1.0"Encoding ="UTF-8"?> <Linearlayout xmlns: Android =Http://schemas.android.com/apk/res/android" Android: layout_width ="Fill_parent"Android: layout_height ="Fill_parent"Android: Orientation ="Vertical"> <Linearlayout Android: Orientation ="Horizontal"Android: layout_width ="Fill_parent"Android: gravity ="Bottom" Android: layout_height ="Wrap_content"Android: Id ="@ + ID/bottom_menu_button_group_id"> </Linearlayout> </Linearlayout>

 

 

2. design the bottom menu button layout: bottom_menu_button_frame.xml. This page defines the style of each button. Generally, it must contain an image at the top and a button text at the bottom.

 

<? XML version ="1.0"Encoding ="UTF-8"?> <Linearlayout xmlns: Android =Http://schemas.android.com/apk/res/android" Android: Orientation ="Vertical"Android: layout_width ="64px" Android: layout_height ="Wrap_content"Android: Id ="@ + ID/bottom_menu_template_button_id" Android: Background ="@ Drawable/tab_one_normal"> <Imageview Android: Id ="@ + ID/bottom_menu_template_img_id"Android: paddingtop ="5px"Android: layout_gravity ="Center" Android: layout_width ="Wrap_content"Android: layout_height ="Wrap_content"Android: src ="@ Drawable/image"/> <Textview Android: layout_width ="Wrap_content"Android: Id ="@ + ID/bottom_menu_template_text_id" Android: layout_height ="Wrap_content"Android: layout_gravity ="Center" Android: gravity ="Center"Android: textsize ="11sp"Android: paddingbottom ="5px"/> </Linearlayout>

 

 

3. Java class of the custom encapsulation button: bottombutton. It encapsulates the basic information of the bottom menu button, such as the image, text, button event, and whether the button is currently selected.

 

Public classBottombutton { // Button menu text Private StringText; // Button menu Image Private intBackgroundresource; // Click an event. PrivateView. onclicklistener clicklistener; // Whether the selected button is selected. If yes, the button is highlighted and the click event is ignored. Private BooleanIscurrent =False; }

 

 

4. Custom bottom menu layout class: bottommenulayout, which inherits from linearlayout and is used to process button display. This class is responsible for the following three tasks:

A) add the bottom menu layout to the entire large view page.

B) bind each menu button.

C) recalculate the layout and fix the menu at the bottom.

 

 

Public classBottommenulayoutExtendsLinearlayout {   // Instantiate the class used by Layout PrivateLayoutinflater minflater;   // Save the set of menu buttons. Each set element represents a button and contains the information required by the button: image, text, and buttons for event processing. PrivateList <bottombutton> bottombuttons; // Encapsulate the layout of menu buttons. PrivateViewBottommenulayout;   Public voidProcessinitbutton () { // Initialize the layout and add the bottom menu layout to the view. Initlayout (This. Getcontext ()); // Bind each menu button Bindingbutton ();   // Recalculate the size of the entire layout, and use the height of the entire screen minus the height of the bottom menu, // Obtain and set the height of the intermediate page to fix the menu at the bottom. Resizelayout (); }

Note: The Implementation Details are blocked here. For details, refer to the attachment code.

 

 

5. after each of the preceding scattered parts is completed, an assembler is required to assemble the parts so that they can operate normally. Here, a class inherited from the activity is defined: basebottommenuactivity is used to act as the assembler. You need to change the mode when developing the business. The class originally inherited from the activity is changed to inherit the class. This class mainly completes the following tasks:

A) Create the entire large view page.

B) create an intermediate content page, that is, the actual layout content defined by the developer. And add it to the entire big view page.

C) Create the bottom menu and add the bottom menu to the entire large view page.

D) the ID of the layout page to be used after the subclass inherits the class. The abstract method is defined by the subclass to provide the ID.

E) which menu buttons are required after the subclass inherits the class, and define the abstract method implemented by the subclass to provide a list of buttons.

F) What page initialization work should be done after the subclass inherits the class, and define the abstract method to be implemented by the subclass so that it can be called during the initial process of the page.

 

Public abstract classBasebottommenuactivityExtendsActivity { PrivateLayoutinflater minflater; // instantiate the class used by Layout ProtectedBottommenulayout; // ui of the bottom menu ProtectedView contentview; // UI in the middle of the page Final protected voidOncreate (bundle savedinstancestate) { // A) Create the entire large view page. // B) create an intermediate content page, that is, the actual layout content defined by the developer. And add it to the entire big view page. // C) Create the bottom menu and add the bottom menu to the entire large view page. } /** * After subclass implementation, the content in the original oncreate method will be moved here for operation. *@ ParamSavedinstancestate */ Protected abstract voidOncreatoverride (bundle savedinstancestate ); /** * Return layout.XMLID * Setcontentview (R. layout. xxxxlayoutid) originally called in the oncreate method of activity; it is now returned from this method. *@ Return */ Public abstract intGetcontentviewlayoutresid ();   /** * Create the bottom menu, which must be implemented by sub-classes. In this method, * Create multiple bottombutton objects and place them in the list to return the objects. * If any button is selected, set the iscurrent attribute of bottombuttonTure. *@ ParamBottombuttons *@ ParamBottommenulayout *@ Return */ Public AbstractList <bottombutton> getbuttonlist ();

Note: The Implementation Details are blocked here. For details, refer to the attachment code.

 

 

Implementation and use

For the specific implementation code, see the attachment.

After all the parts of the above design are implemented, you can use it. during use, the steps are the same as those for normal page development. First, draw layout. XML, then define activity, bind and configure androidmanifest. XML file, the difference is that the defined activity must inherit basebottommenuactivity. Follow these steps to develop the activity:

 

1. Inherit and implement the getbuttonlist method in the subclass. encapsulate the returned result of the bottombutton object in the method. Each bottombutton represents a menu item. For specific properties, see the bottombutton definition. 2. inherit the getcontentviewlayoutresid method in the subclass and return the LayoutXML. 3. inherit the oncreatoverride method in the subclass. The previous tasks completed in the oncreat method are moved here. Super. oncreate (savedinstancestate); and setcontentview do not need to be called.

 

 

Test

Let's write a simple demo for testing. In this demo, except for the bottom menu, there is only one textview text, which inherits basebottommenuactivity:

 

Public classDemoExtendsBasebottommenuactivity {   PublicList <bottombutton> getbuttonlist (){ Map <string, string> buttonmaps =NewHashmap <string, string> (); Buttonmaps. Put ("menu1", String.Valueof(R. drawable.Home)); Buttonmaps. Put ("menu2", String.Valueof(R. drawable.Home)); Buttonmaps. Put ("menu3", String.Valueof(R. drawable.Home)); Buttonmaps. Put ("menu4", String.Valueof(R. drawable.Home)); Buttonmaps. Put ("Main Menu", String.Valueof(R. drawable.Home));     List <bottombutton> buttons =NewArraylist <bottombutton> (); Iterator <string> itkey = buttonmaps. keyset (). iterator (); While(Itkey. hasnext ()) { Stringkey = itkey. Next (); Stringvalueres = buttonmaps. Get (key ); Bottombuttononebottombutton =NewBottombutton (); Onebottombutton. settext (key ); Onebottombutton. setbackgroundresource (integer.Parseint(Valueres )); Buttons. Add (onebottombutton ); } ReturnButtons; }   Public intGetcontentviewlayoutresid (){ReturnR. layout.Main;}   Protected voidOncreatoverride (bundle savedinstancestate ){} }

In the getbuttonlist method of the return button, five buttons are returned.

 

The layout file is as follows:

 

<? XML version ="1.0"Encoding ="UTF-8"?> <Linearlayout xmlns: Android =Http://schemas.android.com/apk/res/android" Android: Orientation ="Vertical" Android: layout_width ="Fill_parent"Android: layout_height ="Fill_parent"> <Textview Android: layout_width ="Fill_parent" Android: layout_height ="Wrap_content"Android: text ="@ String/hello"/> </Linearlayout>

 

 

Shows the results of the program:

Source code: http://download.csdn.net/detail/linghu_java/5023136