Android app development notes (13): templated design of the Android mobile app Interface

Android does not have an interface development tool that is as powerful as Apple's. Its ADT plug-in provides limited interface editing capabilities and cannot portray all interface conditions. Android interface xml code can be manually modified, the Iphone is dragged on the graphic interface without any code-level modifications. Android's UI design and development process is very cumbersome and error-prone. It takes a long time to adjust the Interface Details. People who have developed Android applications must feel the same way. For example, when I used Web page design several years ago, developing an Iphone software interface is like using Frontpage to drag a widget into a page, android development is closer to writing html tags in a line with your eyes closed in Notepad. In order to make development of Android applications easier and faster, reduce code redundancy, and enhance software quality, we have used a large number of templated pages in the Development of consulting quotations.

The idea is simple: abstract a large number of repeated page la s used in the software, write them into an abstract Activity class, and inherit them when implementing a specific page, enter the required content in the blank area of the main content.

For example, in a recently developed information application, each page has a top bar with two buttons and a line of title text in the middle of the button. The text and click functions on the button may be different on each page. As shown in.

To meet the requirements of such a page, we can design a basic Page Template named AbstractAc1. The Code is as follows.

/** <Br/> * General Page Template 1: contains the upper column, including two buttons, one title text area <br/> * @ author zhe. yangz <br/> */<br/> public class extends actac1 extends BaseActivity {<br/> @ Override <br/> public void onCreate (Bundle savedInstanceState) {<br/> super. onCreate (savedInstanceState); <br/> setContentView (R. layout. abac_1 ); <br/>}< br/>/** <br/> * Set layoutRes in the main content area <br/> * @ param layoutResId <br/> */<br/> public void alabSetContentView (Int layoutResId) {<br/> LinearLayout llContent = (LinearLayout) findViewById (R. id. llContent1); <br/> LayoutInflater inflater = (LayoutInflater) getSystemService (<br/> Context. LAYOUT_INFLATER_SERVICE); <br/> View v = inflater. inflate (layoutResId, null); <br/> llContent. addView (v ); <br/>}< br/>/** <br/> * Hide the button on the left <br/> */<br/> public void alabHideButtonLeft (boolean bSetHide) {<br/> Button bt = AlabGetButtonLeft (); <br/> if (null! = Bt) {<br/> if (bSetHide) bt. setVisibility (View. INVISIBLE); <br/> else bt. setVisibility (View. VISIBLE ); <br/>}< br/>/** <br/> * Hide the button on the right <br/> */<br/> public void alabHideButtonRight (boolean bSetHide) {<br/> Button bt = alabGetButtonRight (); <br/> if (null! = Bt) {<br/> if (bSetHide) bt. setVisibility (View. INVISIBLE); <br/> else bt. setVisibility (View. VISIBLE); <br/>}< br/>/** <br/> * click the button on the left-side navigation bar of the template, generally [return] <br/> * @ return: if return succeeds, the Button object is returned. If return fails, null is returned. <Br/> */<br/> public Button alabGetButtonLeft () {<br/> return (Button) findViewById (R. id. btBack1); <br/>}< br/>/** <br/> * obtain the right button in the navigation bar of the template, generally [refresh] <br/> * @ return returns the Button object if return is successful, and returns null if return fails. <Br/> */<br/> public Button alabGetButtonRight () {<br/> return (Button) findViewById (R. id. btRefresh1 ); <br/>}< br/>/** <br/> * set the title text in the middle of the navigation bar on the template <br/> * @ param titleText <br/> * @ return returns true if the modification is successful, false is returned for failure <br/> */<br/> public boolean alabSetBarTitleText (String titleText) {<br/> TextView TV = (TextView) findViewById (R. id. txBarTitle1); <br/> if (null! = TV) {<br/> TV. setText (titleText); <br/> return true; <br/>}< br/> return false; <br/>}< br/>

We created a template page, which inherits the actual page in the application. In this way, each inherited page can have a similar top-bar layout and the code is concise. The following is an example of inheritance.

/** <Br/> * Sample page <br/> * @ author Zhe. yangz <br/> */<br/> public class homeactivity extends actac1 {<br/> @ override <br/> Public void oncreate (bundle savedinstancestate) {<br/> super. oncreate (savedinstancestate); <br/> alabsetcontentview (R. layout. ac_home); <br/> settopbarandaction (); <br/>}< br/> private void settopbarandaction () {<br/> alabsetbartitletext ("test home "); // set the title <br/> alabgetbuttonleft (). settext ("leftbt"); // set the text on the left button <br/> alabgetbuttonright (). settext ("rightbt"); // set the text on the right button <br/> alabgetbuttonright (). setonclicklistener (New onclicklistener () {<br/> @ override <br/> Public void onclick (view V) {<br/> // button execution event <br/> //... <br/>}< br/>}); <br/>}< br/>

A page with the following top bar effects is completed. The background, button color, and other effects of the page are defined in abstractac1.

AlabSetContentView () is a method defined in AbstractAc1. This method is called in the catalog class and an interface definition xml is passed in. In this method, LayoutInflater is used to generate a view, the interface xml of the main content area defined in this page will be merged with the interface xml of the original container actac1 to form a complete page. In some cases, the left and right buttons can be hidden independently or together. You can use the alabHideButtonLeft and alabHideButtonRight defined in abstractac1.

The template-based development interface is used. Currently, the hierarchies of the activity in the Android Application we have developed are roughly as follows.

In this way, templated page exploration practices are used in our current Android application development. It is estimated that the interface code is reduced by 40% compared with the original code, which reduces redundancy and indirectly improves the software quality and maintainability, greatly improving the rapid response capability brought about by changes in business requirements. Next, we hope we can continue our in-depth exploration and find more ways to improve the efficiency and quality of mobile software interface development. We also hope that our colleagues who have good ideas can communicate with us in depth, discuss them together, and make a wide selection.

 

Supplement:

Thank you, dong3560.
The layout definition file abac_1.xml used in TEMPLATE 1 is missing. The Code is as follows,

<? Xml version = "1.0" encoding = "UTF-8"?> <Br/> <LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android" <br/> android: orientation = "vertical" android: layout_width = "fill_parent" <br/> android: layout_height = "fill_parent" android: background = "@ color/section_bgcolor"> <br/> <! -- Top bar --> <br/> <LinearLayout <br/> android: layout_width = "fill_parent" <br/> android: layout_height = "43dp" <br/> android: padding = "5dp" <br/> android: background = "@ drawable/topbar_bg" <br/> android: orientation = "horizontal" <br/> android: gravity = "center"> <br/> <Button style = "@ style/AliBt" mce_style = "@ style/AliBt" <br/> android: id = "@ + id/btLeft" <br/> android: text = "Left"/> <br/> <Spinner android: id = "@ + id/sp_HY" <Br/> android: visibility = "invisible" <br/> android: layout_width = "0dp" <br/> android: layout_height = "0dp"/> <br/> <TextView style = "@ style/AliBarTitle" mce_style = "@ style/AliBarTitle" <br/> android: id = "@ + id/txBarTitle1" <br/> android: text = ""/> <br/> <Button style = "@ style/AliBt" mce_style = "@ style/AliBt" <br/> android: id = "@ + id/btRight" <br/> android: text = "Right"/> <br/> </LinearLayout> <br/> <! -- Main Content Framework --> <br/> <LinearLayout <br/> android: id = "@ + id/llContent1" <br/> android: orientation = "vertical" <br/> android: layout_width = "fill_parent" <br/> android: layout_height = "0dp" <br/> android: layout_weight = "1"> <br/> </LinearLayout> </p> </LinearLayout> <br/>

 

Reprinted please indicate the source: http://blog.csdn.net/xjanker2/archive/2011/06/15/6546941.aspx