前言

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!-- 這是個線性布局， match_parent意思是與上級視圖保持一致-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!-- 這是個文本視圖，名字叫做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標簽為該界面的根節(jié)點，中間的LinearLayout標簽為布局節(jié)點，最內(nèi)層的TextView為控件節(jié)點。由于根節(jié)點和布局節(jié)點都存在下級節(jié)點，因此它們要有配對的標簽頭與標簽尾，才能將下級節(jié)點包裹起來。根節(jié)點其實是特殊的布局節(jié)點，它的標簽名稱可以跟布局節(jié)點一樣，區(qū)別之處在于下列兩點：

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

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

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

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

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

XML固然表達不了復(fù)雜的業(yè)務(wù)邏輯，這副重擔(dān)就得交給App后臺的Java代碼了。Android Studio每次創(chuàng)建新項目，除了生成默認的首頁布局activity_main.xml之外，還會生成與其對應(yīng)的代碼文件MainActivity.java。趕緊打開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);
    }
}

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

public class MainActivity extends AppCompatActivity {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
        // 當(dāng)前的頁面布局采用的是res/layout/activity_main.xml
        setContentView(R.layout.activity_main);
        // 獲取名叫tv_hello的TextView控件，注意添加導(dǎo)包語句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)用控件對象的setText方法，為其設(shè)置新的文字內(nèi)容。

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

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

總結(jié)

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

最新評論