Android Study Notes 31: Dynamic Layout loading using the inert control viewstub

In Android development, this situation is often encountered.ProgramWhen running, you can dynamically decide whether to display a widget or layout based on the current conditions. In this case, you can use the inert control viewstub to conveniently complete this function.

The viewstub is a lightweight view that enables Dynamic Layout loading. The viewstub object is an invisible, zero-size view, and is dynamically loaded as needed when the program is running. Only when the viewstub object is set to visible or the viewstub. Inflate () method is called will the layout pointed to by the viewstub object be instantiated and loaded to the parent layout. In this way, a widget or layout is dynamically loaded by using the inert control viewstub.

In this blog, we will use an example to demonstrate how to use the inertia control viewstub to perform the dynamic loading layout operation. The program running effect 1 is displayed.

Figure 1 Main Interface display

On the main interface shown in 1, click the "show baby details" button to load the dynamic layout by using the inertia control viewstub, and introduce a text description of the product, as shown in 2.

Figure 2 Dynamic Layout Loading

As shown in figure 2, by using the inertia control viewstub, We dynamically Add a description about the product in the original layout. When you click the "Hide baby details" button, the product description is hidden, and the main interface is changed to the display effect shown in Figure 1.

The following describes how to implement the instance.

 

1. static loading layout

Before using viewstub to dynamically load the layout, it is necessary to talk about the static loading layout.

In Android development, sometimes a UI interface is complicated and contains many layout modules and controls. If you write it in an XML layout fileCodeRedundancy and poor code readability, making it difficult to maintain code later.

At this time, we can break down a complex UI interface into several independent sub-modules and write a separate XML layout file for each sub-module. In the parent layout, use the <include> </include> label to load the layout files of each sub-module.

In this way, the static loading layout of the UI interface is realized.

In this example, we define the product images and baby ratings at the top of the main interface in a separate XML file "includelayout. XML, and then load it in the layout file of the main interface through the <include> label. The specific implementation method is as follows:

 1  <  Linearlayout  Xmlns: Android  = "Http://schemas.android.com/apk/res/android"  2   Xmlns: Tools  = "Http://schemas.android.com/tools"  3   Android: Orientation  = "Vertical"  4  Android: layout_width  = "Match_parent"  5   Android: layout_height  = "Match_parent"   >  6  7  <! --  Static Loading  -->  8  <  Include  9  Android: layout_width  = "Wrap_content"  10   Android: layout_height  = "Wrap_content"  11   Layout  = "@ Layout/includelayout"      >  12  </  Include  >  13  14  <  Viewstub  15  Android: ID  = "@ + ID/viewstub"  16   Android: layout_width  = "Wrap_content"  17   Android: layout_height  = "Wrap_content"  18   Android: layout_marginleft  = "2dp"  19  Android: Layout  = "@ + Layout/viewstublayout"      >  20  </  Viewstub  >  21  22  <! --  Button  -->  23  <  Linearlayout 24  Android: Orientation  = "Horizontal"  25   Android: layout_width  = "Match_parent"  26   Android: layout_height  = "Wrap_content"      >  27  <  Button  28  Android: ID  = "@ + ID/button_extend"  29   Android: layout_weight  = "1"  30   Android: layout_width  = "Wrap_content"  31   Android: layout_height  = "Wrap_content"  32   Android: Text  = "Show baby details"      /> 33  <  Button  34  Android: ID  = "@ + ID/button_hide"  35   Android: layout_weight  = "1"  36   Android: layout_width  = "Wrap_content"  37   Android: layout_height = "Wrap_content"  38   Android: Text  = "Hide detailed descriptions of baby"      />  39  </  Linearlayout  >  40  41  </  Linearlayout  > 

As above, we use the statement layout = "@ layout/includelayout" to load the "includelayout. xml" layout file statically in the <include> label. In the "delayout. xml" layout file, we designed the layout of product images, baby ratings, and baby scoring controls.

 

2. viewstub

From the code above, we can easily see that in the main layout file, we set an inert control viewstub on the top of the button control. In viewstub, the Android: Layout = "@ + layout/viewstublayout" statement specifies that the layout to be dynamically loaded by viewstub is the "viewstublayout. xml" file. In the "viewstublayout. xml" file, we use the textview control to display the detailed description of the product. The specific implementation method is as follows:

 1  <?  XML version = "1.0" encoding = "UTF-8"  ?>  2  <  Linearlayout  Xmlns: Android  = "Http://schemas.android.com/apk/res/android"  3   Android: layout_width  = "Match_parent"  4   Android: layout_height  = "Match_parent"  5   Android: Orientation  = "Vertical"   >  6  7  <  Textview  8  Android: layout_width  = "Match_parent"  9   Android: layout_height  = "Wrap_content"  10   Android: Text  = "Brand: kepma"      />  11  < Textview  12  Android: layout_width  = "Match_parent"  13   Android: layout_height  = "Wrap_content"  14   Android: Text  = "Model: d1c"      />  15  <  Textview  16  Android: layout_width  = "Match_parent"  17   Android: layout_height  = "Wrap_content"  18   Android: Text  = "Specifications: 41"      />              19  <  Textview  20  Android: layout_width  = "Match_parent" 21   Android: layout_height  = "Wrap_content"  22   Android: Text  = "Panel: yunshu"      />  23  <  Textview  24  Android: layout_width  = "Match_parent"  25   Android: layout_height = "Wrap_content"  26   Android: Text  = "Bottom side: Nanyang mu"      />      27  <  Textview  28  Android: layout_width  = "Match_parent"  29   Android: layout_height  = "Wrap_content"  30  Android: Text  = "String button: black nickel plated steel seal closed string button"      />  31  <  Textview  32  Android: layout_width  = "Match_parent"  33   Android: layout_height  = "Wrap_content"  34   Android: Text  = "Edging: Pearl strips inlaid"     />      35  <  Textview  36  Android: layout_width  = "Match_parent"  37   Android: layout_height  = "Wrap_content"  38   Android: Text  = "Taste: 21 products"      />     39  40  </  Linearlayout  > 

 

3. Loading of viewstub with the inertia control

So far, we have defined the inertia control viewstub and specified the specific content to be dynamically loaded by the inertia control viewstub. So how can I load the viewstub inertia control while the program is running?

First, let's take a look at the common methods of the inertia control viewstub, as shown in 3.

Figure 3 common methods of viewstub for inert controls

The method inflate () is used to load the layout resource identified by the getlayoutresource () method, and replaces itself in the parent container by loading the layout resource. Method setvisibility (INT visibility). When the visibility is set to visible or invisible, inflate () will be called and viewstub will be replaced in the parent container when the view resource is loaded. The visibility parameter can be set with values: visible (Display), invisible (hidden), and gone (completely hidden, without occupying the layout position ).

Therefore, we can add the event listener onclicklistener for the two button buttons in the instance, and implement the onclick () method in this interface as follows:

 1  /*  2   * Function: Process event listening.  3   * Author: blog Park-still indifferent  4        */  5       Public   Void  Onclick (view v ){  6           Switch (V. GETID ()){  7           Case R. Id. button_extend: //  The viewstub control content is displayed when you click the expand button.  8 View view = Mviewstub. Inflate ();  9 Linearlayout = (Linearlayout) view;  10               Break  ;  11           Case R. Id. button_hide: //  Hide the content of the viewstub control when you click "hide ".  12   Mviewstub. setvisibility (view. Gone );  13               Break  ;  14   }  15 }

 

4. Two points of attention

When using the inert control viewstub, pay special attention to the following two points:

(1) The viewstub object can only be inflate once, and then the viewstub object will be left blank. In other words, after a layout specified by the viewstub object is inflate once, you cannot control it through the viewstub object again.

(2) The viewstub control can only be used to inflate a layout file, rather than a specific view.