前言

主要是介紹了App工程的源碼設(shè)計(jì)規(guī)范，首先App將看得見(jiàn)的界面設(shè)計(jì)與看不見(jiàn)的代碼邏輯區(qū)分開(kāi)，然后利用XML標(biāo)記描繪應(yīng)用界面，同時(shí)使用Java代碼書寫程序邏輯，從而形成App前后端分離的設(shè)計(jì)規(guī)約，有利于提高App集成的靈活性。

一，界面設(shè)計(jì)與代碼邏輯

手機(jī)的功能越來(lái)越強(qiáng)大，某種意義上相當(dāng)于微型電腦，比如打開(kāi)一個(gè)電商App，仿佛是在電腦上瀏覽網(wǎng)站。網(wǎng)站分為用戶看得到的網(wǎng)頁(yè)，以及用戶看不到的Web后臺(tái)；App也分為用戶看得到的界面，以及用戶看不到的App后臺(tái)。雖然Android允許使用Java代碼描繪界面，但不提倡這么做，推薦的做法是將界面設(shè)計(jì)從Java代碼剝離出來(lái)，通過(guò)單獨(dú)的XML文件定義界面布局，就像網(wǎng)站使用HTML文件定義網(wǎng)頁(yè)那樣。直觀地看，網(wǎng)站的前后端分離設(shè)計(jì)如圖一所示，App的前后端分離設(shè)計(jì)如圖二所示。

把界面設(shè)計(jì)與代碼邏輯分開(kāi)，不僅參考了網(wǎng)站的Web前后端分離，還有下列幾點(diǎn)好處：

（1）使用XML文件描述App界面，可以很方便地在Android Studio上預(yù)覽界面效果。比如新創(chuàng)建的App項(xiàng)目，默認(rèn)首頁(yè)布局為activity_main.xml，單擊界面右上角的Design按鈕，即可看到如圖三所示的預(yù)覽界面。如果XML文件修改了Hello World的文字內(nèi)容，立刻就能在預(yù)覽區(qū)域觀看最新界面。倘若使用Java代碼描繪界面，那么必須運(yùn)行App才能看到App界面，無(wú)疑費(fèi)時(shí)許多。

（2）一個(gè)界面布局可以被多處代碼復(fù)用，比如看圖界面，既能通過(guò)商城購(gòu)物代碼瀏覽商品圖片，也能通過(guò)商品評(píng)價(jià)代碼瀏覽買家曬單。

（3）反過(guò)來(lái)，一段Java代碼也可能適配多個(gè)界面布局，比如手機(jī)有豎屏與橫屏兩種模式，默認(rèn)情況App采用同一套布局，然而在豎屏?xí)r很緊湊的界面布局（見(jiàn)圖四），切換到橫屏往往變得松垮乃至變形（見(jiàn)圖五）。

鑒于豎屏與橫屏遵照一樣的業(yè)務(wù)邏輯，僅僅是屏幕方向不同，若要調(diào)整的話，只需分別給出豎屏?xí)r候的界面布局，以及橫屏?xí)r候的界面布局。因?yàn)橛脩舳鄶?shù)習(xí)慣豎屏瀏覽，所以res/layout目錄下放置的XML文件默認(rèn)為豎屏規(guī)格，另外在res下面新建名為layout-land的目錄，用來(lái)存放橫屏規(guī)格的XML文件。

land是landscape的縮寫，意思是橫向，Android把layout-land作為橫屏XML的專用布局目錄。然后在layout-land目錄創(chuàng)建與原XML同名的XML文件，并重新編排界面控件的展示方位，調(diào)整后的橫屏界面如圖六所示，從而有效適配了屏幕的水平方向。

總的來(lái)說(shuō)，界面設(shè)計(jì)與代碼邏輯分離的好處多多，后續(xù)的例程都由XML布局與Java代碼兩部分組成。

二，利用XML標(biāo)記描繪應(yīng)用界面

在前面“2.1.2 App的開(kāi)發(fā)語(yǔ)言”末尾，給出了安卓控件的XML定義例子，如下所示：

<TextView
    android:id="@+id/tv_hello"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!" />

注意到TextView標(biāo)簽以“<”開(kāi)頭，以“/>”結(jié)尾，為何尾巴多了個(gè)斜桿呢？要是沒(méi)有斜桿，以左右尖括號(hào)包裹標(biāo)簽名稱，豈不更好？其實(shí)這是XML的標(biāo)記規(guī)范，凡是XML標(biāo)簽都由標(biāo)簽頭與標(biāo)簽尾組成，標(biāo)簽頭以左右尖括號(hào)包裹標(biāo)簽名稱，形如“”；標(biāo)簽尾在左尖括號(hào)后插入斜桿，以此同標(biāo)簽頭區(qū)分開(kāi)，形如“”。標(biāo)簽頭允許在標(biāo)簽名稱后面添加各種屬性取值，而標(biāo)簽尾不允許添加任何屬性，因此上述TextView標(biāo)簽的完整XML定義是下面這樣的：

<TextView
    android:id="@+id/tv_hello"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!">
</TextView>

考慮到TextView僅僅是個(gè)文本視圖，其標(biāo)簽頭和標(biāo)簽尾之間不會(huì)插入其他標(biāo)記，所以合并它的標(biāo)簽頭和標(biāo)簽尾，也就是讓TextView標(biāo)簽以“/>”結(jié)尾，表示該標(biāo)簽到此為止。

然而不是所有情況都能采取簡(jiǎn)化寫法，簡(jiǎn)寫只適用于TextView控件這種末梢節(jié)點(diǎn)。好比一棵大樹(shù)，大樹(shù)先有樹(shù)干，樹(shù)干分岔出樹(shù)枝，一些大樹(shù)枝又分出小樹(shù)枝，樹(shù)枝再長(zhǎng)出末端的樹(shù)葉。一個(gè)界面也是先有根節(jié)點(diǎn)（相當(dāng)于樹(shù)干），根節(jié)點(diǎn)下面掛著若干布局節(jié)點(diǎn)（相當(dāng)于樹(shù)枝），布局節(jié)點(diǎn)下面再掛著控件節(jié)點(diǎn)（相當(dāng)于樹(shù)葉）。因?yàn)闃?shù)葉已經(jīng)是末梢了，不會(huì)再包含其他節(jié)點(diǎn)，所以末梢節(jié)點(diǎn)允許采用“/>”這種簡(jiǎn)寫方式。

譬如下面是個(gè)XML文件的布局內(nèi)容，里面包含了根節(jié)點(diǎn)、布局節(jié)點(diǎn)，以及控件節(jié)點(diǎn)：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!-- 這是個(gè)線性布局， match_parent意思是與上級(jí)視圖保持一致-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!-- 這是個(gè)文本視圖，名字叫做tv_hello，顯示的文字內(nèi)容為“Hello World!” -->
        <TextView
            android:id="@+id/tv_hello"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!" />
     </LinearLayout>
</LinearLayout>

上面的XML內(nèi)容，最外層的LinearLayout標(biāo)簽為該界面的根節(jié)點(diǎn)，中間的LinearLayout標(biāo)簽為布局節(jié)點(diǎn)，最內(nèi)層的TextView為控件節(jié)點(diǎn)。由于根節(jié)點(diǎn)和布局節(jié)點(diǎn)都存在下級(jí)節(jié)點(diǎn)，因此它們要有配對(duì)的標(biāo)簽頭與標(biāo)簽尾，才能將下級(jí)節(jié)點(diǎn)包裹起來(lái)。根節(jié)點(diǎn)其實(shí)是特殊的布局節(jié)點(diǎn)，它的標(biāo)簽名稱可以跟布局節(jié)點(diǎn)一樣，區(qū)別之處在于下列兩點(diǎn)：

（1）每個(gè)界面只有一個(gè)根節(jié)點(diǎn)，卻可能有多個(gè)布局節(jié)點(diǎn)，也可能沒(méi)有中間的布局節(jié)點(diǎn)，此時(shí)所有控件節(jié)點(diǎn)都掛在根節(jié)點(diǎn)下面。

（2）根節(jié)點(diǎn)必須配備“xmlns:android=“http://schemas.android.com/apk/res/android””，表示指定XML內(nèi)部的命名空間，有了這個(gè)命名空間，Android Studio會(huì)自動(dòng)檢查各節(jié)點(diǎn)的屬性名稱是否合法，如果不合法就提示報(bào)錯(cuò)。至于布局節(jié)點(diǎn)就不能再指定命名空間了。

有了根節(jié)點(diǎn)、布局節(jié)點(diǎn)、控件節(jié)點(diǎn)之后，XML內(nèi)容即可表達(dá)豐富多彩的界面布局，因?yàn)槊總€(gè)界面都能劃分為若干豆腐塊，每個(gè)豆腐塊再細(xì)分為若干控件罷了。三種節(jié)點(diǎn)之外，尚有“”這類注釋標(biāo)記，它的作用是包裹注釋性質(zhì)的說(shuō)明文字，方便其他開(kāi)發(fā)者理解此處的XML含義。

三，使用Java代碼書寫程序邏輯

在XML文件中定義界面布局，已經(jīng)明確是可行的了，然而這只是靜態(tài)界面，倘若要求在App運(yùn)行時(shí)修改文字內(nèi)容，該當(dāng)如何是好？倘若是動(dòng)態(tài)變更網(wǎng)頁(yè)內(nèi)容，還能在HTML文件中嵌入JavaScript代碼，由js片段操作Web控件。但Android的XML文件僅僅是布局標(biāo)記，不能再嵌入其他語(yǔ)言的代碼了，也就是說(shuō)，只靠XML文件自身無(wú)法動(dòng)態(tài)刷新某個(gè)控件。

XML固然表達(dá)不了復(fù)雜的業(yè)務(wù)邏輯，這副重?fù)?dān)就得交給App后臺(tái)的Java代碼了。Android Studio每次創(chuàng)建新項(xiàng)目，除了生成默認(rèn)的首頁(yè)布局activity_main.xml之外，還會(huì)生成與其對(duì)應(yīng)的代碼文件MainActivity.java。趕緊打開(kāi)MainActivity.java，看看里面有什么內(nèi)容，該Java文件中MainActivity類的內(nèi)容如下所示：

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

可見(jiàn)MainActivity.java的代碼內(nèi)容很簡(jiǎn)單，只有一個(gè)MainActivity類，該類下面只有一個(gè)onCreate方法。注意onCreate內(nèi)部的setContentView方法直接引用了布局文件的名字activity_main，該方法的意思是往當(dāng)前活動(dòng)界面填充activity_main.xml的布局內(nèi)容?，F(xiàn)在準(zhǔn)備在這里改動(dòng)，把文字內(nèi)容改成中文。首先打開(kāi)activity_main.xml，在TextView節(jié)點(diǎn)下方補(bǔ)充一行android:id=“@+id/tv_hello”，表示給它起個(gè)名字編號(hào)；然后回到MainActivity.java，在setContentView方法下面補(bǔ)充幾行代碼，具體如下：

public class MainActivity extends AppCompatActivity {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
        // 當(dāng)前的頁(yè)面布局采用的是res/layout/activity_main.xml
        setContentView(R.layout.activity_main);
        // 獲取名叫tv_hello的TextView控件，注意添加導(dǎo)包語(yǔ)句import
android.widget.TextView;
        TextView tv_hello = findViewById(R.id.tv_hello);
        // 設(shè)置TextView控件的文字內(nèi)容
        tv_hello.setText("你好，世界");
    }
}

新增的兩行代碼主要做了這些事情：先調(diào)用findViewById方法，從布局文件中取出名為tv_hello的TextView控件；再調(diào)用控件對(duì)象的setText方法，為其設(shè)置新的文字內(nèi)容。

代碼補(bǔ)充完畢，重新運(yùn)行測(cè)試App，發(fā)現(xiàn)應(yīng)用界面變成了如圖七所示的樣子。

可見(jiàn)使用Java代碼成功修改了界面控件的文字內(nèi)容。

總結(jié)

到此這篇關(guān)于Android App設(shè)計(jì)規(guī)范的文章就介紹到這了,更多相關(guān)Android App設(shè)計(jì)規(guī)范內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論