Build a UI with Layout Editor(翻譯文章)Android Studio 可視化界面編輯器

原文

   在Android Studio 的佈局管理器中,你能夠迅速的通過在可視化編輯器中拖拽控件而不用在xml文件中手動編輯了。這個編輯器能夠在不同的尺寸上的設備預覽你的佈局。你可以自動調整你的佈局保證能在不同的設備上適配。這個佈局管理器在你使用ConstraintLayout進行佈局的時候功能顯得尤爲強大。ConstraintLayout是一個提供兼容庫兼容到 2.3以上的庫。

此頁將簡單介紹佈局編輯器的使用。想學習更多的關於ConstraintLayout的知識,請點擊

介紹

當你用Android Studio 打開一個XML的layout文件的時候就可以看到編輯器了。如下圖所示

  1. 調色板:提供一個空間/佈局的控件列表,這些東西你可以直接拖拽到編輯器中。

  2. 組件列表/組件樹:展示你的佈局的繼承佈局關係,點擊一下就能在編輯器中看到對應控件被選中。

  3. 工具欄:提供一些能配置佈局的展示效果和能夠編輯佈局的按鈕選項等。

  4. 設計編輯器:把你的設計圖按照設計圖紙真實展現出來,還能看到設計的藍圖。

  5. 屬性:提供可以修改控件的一些屬性。

這裏寫圖片描述



  當你打開一個xml的佈局文件,佈局編輯會默認打開。就想上圖所示。你想切換到XML的文件編輯器的狀態,你可以點擊屏幕下方的Text Tab 按鈕。在你使用xml文件編輯器的同時,你也可以點擊編輯器右邊的預覽按鈕,查看Palette,組件的繼承關係。就像下圖所示一樣。但是屬性窗口就看不到了哦。


這裏寫圖片描述


小貼士:你可以使用快捷鍵 Control+Shift+Right/Left ,切換文本/拖拽兩種編輯模式。

修改預覽效果

這裏寫圖片描述

上圖所示的功能現在來一一介紹:

  1. 設計藍圖:可以切換到你想展示的樣子,窗口中會顯示真是的預覽效果並且還會顯示只包含view輪廓的設計藍圖。這兩種試圖也可以並排顯示。 小貼士:你可以按 B 鍵進行切換。
  2. 屏幕方向:你可以橫向縱向切換你預覽設備。
  3. 設備類型和尺寸:選擇設備類型(手機 /pad/ 手錶) 屏幕配置(尺寸、像素密度)。你可以從預先定義好的設備類型、或者你自己定義的設備中選擇一個。或者從列表中選擇一個新的AVD進行重新定義。 小貼士:你可以拖拽右下角進行縮放操作。
  4. API version:選擇一個Android系統版本預覽你的佈局。
  5. App 主題:選擇一個主題應用到你的預覽中。 提示:只支持 layouts的佈局屬性,所以有個主題顯示會出現問題。
  6. 語言:選擇一個string的資源文件夾顯示在你的預覽中。只會顯示你項目中已經適配的語言資源。如果你想編輯的翻譯文件,從下拉菜單中 選擇Edit Translations 選項。
  7. Layout Variants(這個會翻譯):從下來菜單中選擇一個layout文件應用到你的預覽中,或者創建一個新的。


創建一個新的佈局文件


當你給應用添加一個新的佈局,在你的項目的默認路徑layout/ directory 下創建這個文件,這個佈局文件就可以在不同的設備上使用。一旦你有一個一個默認的layout佈局文件之後,你可以創建一個layout文件的子類應用於特殊的設備上。(比如 配置 xlarge 的屏幕)如果你想創建一個layout另外的配置文件,跳轉到創建一個layout 的變種。
There are a few different ways to create a new layout, depending on your Project window view, but the following procedure is accessible from any view:
有幾種方法可以創建一個新的layout,取決於你的項目窗口視圖,但是下面的這個步驟你在任何界面都可以。
1. 在項目窗口,點擊你想添加layout文件的module
2. 在頂部主菜單中 選擇 File > New > XML > Layout XML File.
3. 彈出一個提示窗,給這個文件取一個名字,根佈局tag,目標資源列表(main、debug、release)意思就是你創建的這個資源是給哪個資源用的。

這裏寫圖片描述


另一種創建layout文件的方法如下:

* 如果你正在項目視圖的project結構視圖下,打開這個項目modle的res目錄,右鍵res/layouts目錄,然後 New > Layout resource
* 如果你在項目視圖的android結構目錄下,右鍵layout文件然後點擊New > Layout resource
* 列表內容


創建layout變量

   如果你已經有一個layout文件夾了,你想創建另一個同類型的layout文件針對不同的屏幕尺寸/橫屏 優化佈局文件 ,使用如下步驟:

  1. 打開你的原始的layout文件夾並且確保你正常的瀏覽Design editor 編輯器
  2. 點擊的Layout Variants 這裏寫圖片描述 在toolbar裏面,然後在下拉列表中,你可以選擇系統建議的Create Landscape Variant然後確定,或者點擊創建Other然後點擊下一步
  3. 在彈出的對話框中,你只需要給文件名命名的時候給文件名使用資源限定符。你可以在目錄名字中直接輸入或者從可用限定符的列表中選擇一個。一次選一個,然後點擊添加。
  4. 當你已經添加完畢所有想添加的,然後點擊確定。
    當你有很多layout的變種文件時候,你可以通過點擊 Layout Variants 很方便的在下來列表中選擇他們。




想知道更多的關於創建不同尺寸屏幕的layout文件,看這裏

轉化你的layout佈局到ConstraintLayout
ConstraintLayout 是一個Constraint佈局庫裏面的一個可用視圖組。在 Android Studio 2.2 還有更高版本中可以使用。直接可以從 Layout 編輯器的界面上直接操作,你可以不去手動編輯xml文件。最方便的是基礎約束系統允許你建立大多數的佈局兒不用內嵌任何視圖組。

   爲了提供layout性能,你最好轉換之前的佈局到ConstraintLayout,Android Studio 已經建立了一個工具幫助你做這些:

  1. 在Android Studio 打開已經存在的layout佈局並且點擊編輯器窗體底部的設計欄。

  2. 在窗體組件輸上,右鍵點擊layout佈局然後點擊轉換佈局到ConstraintLayout

如果想學習更多的關於ConstraintLayout的佈局,see Build a Responsive UI with ConstraintLayout


添加視圖到佈局


   給app構建佈局需要你懂佈局文件構建的基本原理。除此之外Android Studio 已經去掉了許多對xml進行修改的複雜操作。許多操作你可以直接在佈局編輯器中拖拽控件並且把屬性展示在頁面的右方。

   開始構建你的佈局,從 Palette pane 簡單的拖拽到編輯器中間,當你拖拽一個view到佈局中,編輯器會給出一個恰當的提示,告知view與當前的佈局中剩餘部分的關係你可以選擇何種屬性關係。

下面是視頻中展示如何拖拽一個 TextView 到 ConstraintLayout 中並且設置在Textview控件下方並且左對齊。
視頻地址 視頻只有大概10S左右。

   當拖拽一個view到一個非ConstraintLayout 佈局中的時候,佈局編輯器效果是不同的,會給出當前的佈局可用的屬性。

  錯誤提示會已數字方式在toolBar上顯示,想看到它,點擊 Show Warnings and Errors .

   在佈局管理器中的效果只是用於預覽,所以編輯器中你看到的效果與實際運行效果有偏差,你最好在模擬器或者是真是設備上跑你的佈局獲得真是運行效果。

For more information about how Android’s View APIs work to build a layout, see Layout Fundamentals. Or for a guide to using ConstraintLayout, see Build a Responsive UI with ConstraintLayout.
想要知道更多的關於 View APIs 如果構建的,see Layout Fundamentals,或者想知道如何使用ConstraintLayout佈局的,see Build a Responsive UI with ConstraintLayout



編輯控件的屬性


   可以不在xml文件裏面編輯屬性的另一種方法,你能夠從Properties window (在佈局編輯窗口的右邊)中直接進行操作。你確保你已經選擇 窗體底部的 Design tab 窗口按鈕。

   在編輯窗口中選擇一個控件編輯控件通用屬性。如果你需要進入更多的屬性窗口,點擊View all properties

   當你選擇一個在ConstraintLayout佈局裏面的view的時候, Properties window 窗口在最上面將顯示view的檢查器,想要知道更多see Build a Responsive UI with Constraint
這裏寫圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章