Android應用開發筆記(13): Android行動裝置 App介面的模板化設計

Android沒有像蘋果開發那樣功能強大的介面開發工具，本身ADT外掛程式提供的介面編輯能力有限，沒辦法刻畫所有的介面情況；Android的介面xml代碼可以進行人工修改，而Iphone的全部在圖形介面上拖動完成，可沒提供任何方式的代碼級修改。Android的UI設計開發過程非常繁瑣，容易出錯，需要很長時間調節介面細節，開發過Android應用的人肯定深有同感。用幾年前的網頁設計來打個比方，開發Iphone的軟體介面就好比是用Frontpage弄點控制項拖成一張頁面，而開發Android更接近於閉著眼睛在Notepad裡一行行的寫html標籤。為了使開發Android應用更加簡便快捷，減少代碼冗餘，增強軟體品質，在諮詢行情的開發上我們大量使用了模板化的頁面。

思路很簡單：將軟體裡用到的大量重複的頁面配置抽象出來，編寫成一個抽象的Activity類，然後在實現具體頁面時繼承它，並且在主內容空白區填入需要的內容。

例如在最近開發的一款資訊類應用中，每張頁面上面都有一個頂欄，上面有兩個按鈕，按鈕中間是一列名文字。按鈕上的文字及點擊後的功能在每個頁面中可能會都不相同。如所示的。

面對這樣一個頁面的需求，我們可以設計出一個基本的頁面模板AbstractAc1，代碼如下所示。

/**<br /> * 通用頁面模板1：含上欄，包括左右兩個按鈕，一個title文字區<br /> * @author zhe.yangz<br /> */<br />public class AbstractAc1 extends BaseActivity {<br /> @Override<br /> public void onCreate(Bundle savedInstanceState) {<br /> super.onCreate(savedInstanceState);<br /> setContentView(R.layout.abac_1);<br /> }<br /> /**<br /> * 設定主內容地區的layoutRes<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 /> * 隱藏左側按鈕<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 /> /**<br /> * 隱藏右側按鈕<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 /> /**<br /> * 得到模板上導覽列的左側按鈕，一般為[返回]<br /> * @return 成功則返回Button對象，失敗則返回null。<br /> */<br /> public Button alabGetButtonLeft() {<br /> return (Button) findViewById(R.id.btBack1);<br /> }<br /> /**<br /> * 得到模板上導覽列的右側按鈕，一般為[重新整理]<br /> * @return 成功則返回Button對象，失敗則返回null。<br /> */<br /> public Button alabGetButtonRight() {<br /> return (Button) findViewById(R.id.btRefresh1);<br /> }<br /> /**<br /> * 設定模板上導覽列中間的標題文字<br /> * @param titleText<br /> * @return 修改成功返回true，失敗返回false<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 />}<br />

我們建立了一張模板頁面，然後在應用中的實際頁面繼承於它。這樣，每張繼承的頁面都可以擁有類似的頂欄布局，並且代碼簡潔。下面就是繼承的例子。

/**<br /> * 範例頁面<br />* @author zhe.yangz<br /> */<br />public class HomeActivity extends AbstractAc1 {<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"); // 設定Title標題<br /> alabGetButtonLeft().setText("LeftBt"); // 設定左按鈕上的文字<br /> alabGetButtonRight().setText("RightBt"); // 設定右按鈕上的文字<br /> alabGetButtonRight().setOnClickListener(new OnClickListener() {<br /> @Override<br /> public void onClick(View v) {<br /> // 按鈕執行事件<br /> // ...<br /> }<br /> });<br /> }<br />}<br />

就完成了一張具有如下頂欄效果的頁面，頁面的背景、按鈕配色等效果在AbstractAc1中定義。

alabSetContentView()是在AbstractAc1中定義的方法，在衍生類中調用該方法，傳入一個介面定義xml，方法中實現了使用LayoutInflater產生view，使得這個頁面中定義的主內容區的介面xml會和原來AbstractAc1的介面xml合并在一起，成為一個完整的頁面。有些情況下，左右按鈕可以單獨或一起隱藏，可以使用AbstractAc1中定義的alabHideButtonLeft和alabHideButtonRight進行設定。

使用模板化方式開發介面，目前我們開發的Android應用中的Activity的階層大致如下。

這樣模板化的頁面探索的實踐被用在我們目前Android應用開發中。大致估計一下，介面代碼比原來減少40%，減少了冗餘，也間接提高了軟體品質和可維護性，極大提升了業務需求變化帶來的快速反應能力。接下去我們希望能夠繼續深入探索，找到更多的提升移動軟體介面開發效率和品質的方法，也希望有好想法的同學和我們深入交流，共同探討，博採眾長。

 

補充：

謝謝dong3560
的提醒，文中模板1中所用的布局定義檔案abac_1.xml忘給出了，代碼如下，

<?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 /><!-- 頂欄 --><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 /><!-- 主內容架構 --><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><p></LinearLayout><br />

 

轉載請註明出處：http://blog.csdn.net/xjanker2/archive/2011/06/15/6546941.aspx