Android layout skills: Use ViewStub to improve UI Performance

Thanks to the <include/> label, you can easily share and reuse the UI components in Android. In Android development, it is easy to create a complex UI structure. As a result, a lot of views are used, and some of them are rarely used. In response to this situation, Android also provides us with a special component ViewStub, which allows you to fully enjoy the benefits of <include/> without wasting useless views.

ViewStub is an invisible, lightweight View. It has no size, does not draw and participates in the layout in some form. This means that ViewStub's cost of inflate and retaining it at the View level is very low. The best description of ViewStub is "lazy include ". The layout referenced in ViewStub is displayed only when you want to add it to the UI.

The following comes from the Shelves application. In the figure, the Activity shows a list of books that can be viewed by users:

The same Activity is also used for users to add or import new books. In this operation, Shelves displays an additional UI. The following shows a schedule and a Cancel button at the bottom of the screen during the import process:

Since importing books is not a common operation, at least it is not relative to browsing the book list. Therefore, ViewStub is responsible for importing the panel:

When you perform an import operation, ViewStub is inflate. In this case, the layout file content referenced by ViewStub is displayed in an alternative way:

To use ViewStub, all you need to do is to specify the android: id feature for later inflate, specify the android: layout feature, and reference the layout file. ViewStub also allows you to use the third feature, android: inflatedId. You can use it to override the id of the root element in the layout file. Finally, the layout _ * parameter set on ViewStub will be applied to the top of the included layout file. Here is an example:

 
 

  
  
<ViewStub 
  
  
 
  
  
  android:id="@+id/stub_import" 
  
  
 
  
  
  android:inflatedId="@+id/panel_import" 
  
  
 
  
  
  android:layout="@layout/progress_overlay" 
  
  
 
  
  
  android:layout_width="fill_parent" 
  
  
 
  
  
  android:layout_height="wrap_content" 
  
  
 
  
  
  android:layout_gravity="bottom" /> 
 
 

Call the inflate () method when preparing inflate ViewStub. You can also set the Visibility of ViewStub to VISIBLE or INVISIBLE, which also triggers inflate. Note that the inflate () method can return the Root View of the layout file:

 
 

  
  
 ((ViewStub) findViewById(R.id.stub_import)).setVisibility(View.VISIBLE); 
  
  
 
  
  
// or 
  
  
 
  
  
View importPanel = ((ViewStub) findViewById(R.id.stub_import)).inflate(); 
 
 

One thing to remember is that after ViewStub inflate, this ViewStub will be removed from the View level. Therefore, there is no need to keep a reference to ViewStub, such as in the field of the class ).

ViewStub is a product between quick and efficient programming. Compared with manual inflate views and adding them to the View hierarchy at runtime, ViewStub is recommended. It is quite cheap and easy to use. ViewStub currently does not support <merge/> labels.