Android Studio:探索佈局編輯器!開始佈置您開發的 APP!

2019/09/21 3,302 2 軟體應用 , 行動平台 , 程式設計 , Android , Kotlin , APP開發

Android APP 中,一個畫面通常與一個 class 關聯,我們稱做一個行為(activity),使用者可以與此畫面互動以執行動作,這個顯示「Hello World」的畫面就是由一個行為所產生,它被命名為 MainActivity,這是在您建立新項目時自動生成的。Android APP 中的每個可見行為都有一個佈局(Layout),該佈局定義了該行為的用戶界面。 Android Studio 有佈局編輯器,您可以在其中建立和設計佈局。

APP 的佈局以 XML 定義。佈局編輯器使您可以通過 XML 或者使用互動式視覺化編輯器來定義與修改佈局。您可以根據需要在 XML 和視覺化編輯器中切換來編輯佈局。佈局中的每個元素都是一個視圖。 在這篇文章,您將探索佈局編輯器中的某些面板,並將學習如何更改視圖的屬性值,像是顏色、文字、字體、邊距等。接著以圖文方式教學。

關於實際安裝於手機或模擬器測試 APP,請參考我先前的文章:
▶️ Android Studio:建立虛擬設備(模擬器)、運行開發中的 APP 在模擬器上
▶️ Android Studio:將開發中的 APP 安裝到手機上教學(USB 偵錯模式)


▲ 從左側找到 res 目錄,打開後再開 layout 目錄,雙擊點開 activity_main.xml。接著右側就會開啟佈局編輯器。

▲ 下方可以切換「視覺化編輯器」與「XML」,官方標籤為「Design(設計)」和「Text(純文字)」。

▲ 預覽區可以旋轉,模擬手機直的或橫的拿。預覽區可以調整顯示百分比。

▲ 還可以切換不同尺寸的裝置來預覽。

▲ 在左側 Component Tree 面板顯示佈局中視圖的層次結構(小技巧:點「-」可以收起)。在這個佈局中,ConstraintLayout 為根視圖,每個佈局都必須具有包含所有其他視圖的根視圖。根視圖始終是一個視圖組,該視圖組包含其他視圖。 ConstraintLayout 是視圖組的一個範例,建立 APP 項目時會自動生成。

點其包含的 TextView,右邊 Attributes(屬性)面板就可以看到這個視圖所有的屬性值,可以直接設定,調整顯示的文字、字體大小、文字顏色等。我們改一下設定讓它不再是原來的「Hello World」。


▲ 小技巧,在需要顏色的屬性值欄位輸入「@color」可以找到自定義的顏色,輸入「@android:color」可以找到 Android 提供的顏色定義,當然也可以用十六進位值色碼。

▲ 切換成「Text」查看佈局的 XML,您可以發現到剛剛在「Design」中更改的屬性值都寫在內,您還可以在此手動添加屬性,像是第一步箭頭所輸入的 android:background 屬性,接著賦予值 @android:color/darker_gray" ,這樣就有灰色的背景囉!點第二步所指的按鈕可以開啟模擬器查看實際運作的樣子。

▲ 模擬器上的文字正常顯示,非常棒!

▲ 回到「Design」模式,從左側 Palette 面板找到「Button」,將該按鈕視圖拉入下方的 Component Tree 面板,並且納入 ConstraintLayout 這個視圖組,這樣就可以為這個佈局添加一顆按鈕。接著在預覽畫面用拖曳的方式將按鈕上方連接文字下方,這樣可以做位置上的關聯。

▲ 接著可以運用位置上的關聯調整邊距,當然之前提的文字、顏色通通可以做修改,最後按上方「RUN」讓模擬器重新安裝 APP 以實際運行新的變更!

▲ 真棒!「OK」按鈕成功添加!右方功能列可以旋轉模擬器的手機。

▲ 可以測試橫向的顯示結果。

▲ 切換成「Text」查看佈局的 XML,橘色方框框起的是「OK」按鈕的原始碼。

多使用佈局編輯器,很快就可以上手啦!☺️ 本文參考「Explore the layout editor」這篇英文教學。
《下一篇:Android Studio:添加字串與顏色資源(Add string and color resources)》

贊助廣告 ‧ Sponsor advertisements

留言區 / Comments

萌芽論壇