【APP/Android】如何使用前端的 Tools Attributes (整理)

tags: APP Android

Common 簡介

• 讓 Layout 設計所見即所得，真實數據預覽
  • TextView的文本屬性寫上一些假數據，而當運行到模擬器或手機上時這些假數據就成了造成體驗上甚至測試BUG的髒數據
  • XML的預覽界面上就看到ListView中的項目內容
• 開發階段很有用而且不會影響用戶體驗，因為 build app 時，build 工具會刪除這些屬性，因此對 APK 大小或運行時行為沒有任何影響

Import

• 於前端 Layout 使用 tools 屬性時，必須於最上方加入 xmlns:tools="http://schemas.android.com/tools"
• Example 範例：

<RootTag xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" >

Error handling

• 抑制 Lint 警告訊息的出現
• Lint：延伸閱讀

tools:ignore

• 提醒 Android Studio 忽略其後所標註的東西，例如：屬性或拼音
  • MissingTranslation：某些字串尚未被翻譯
  • contentDescription：圖片未加入文字敘述
    • 若不使用 ignore：使用 ImageView 的時候都要加上 android:contentDescription="@null"，否則會出現黃色警告
  • UnusedAttribute
• Example 範例：
  tools:ignore="ContentDescription, UnusedAttribute"

Design-time view

• 定義在 Layout 預覽時，才可見的 Layout 屬性、特徵

tools：context

• 這個屬性基本上是設定在 Activity 的 Layout XML 的根元素 (root element) 上
• 記錄該 Layout 所屬的 Activity/Activities (一個 Layout 可以被多個 Activity 重複使用)
• 藉由記錄該 Layout 所屬的 Activity 這個動作，Android Studio 便能夠取得該 Activity 的佈景主題 (theme，每個 Activity 可以有自己所要套用的 theme)
• 在 Preview 視窗中顯示套用套用該主題後的預覽畫面
• Example 範例：

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity" >

tools:itemCount

• 使用於 <RecyclerView>
• 指定 Layout 在預覽時，呈現的 item 數目
• Example 範例：

<android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:itemCount="3"/>

tools:layout

• 使用於 <fragment>
• 指定 Layout 在預覽時，<fragment> 內呈現的 Layout 文件
• Example 範例：

<fragment
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	tools:layout="@layout/fragment_content"/>

tools: listitem / listheader / listfooter

• 使用於 <AdapterView>和其 subclass, <ListView>, <GridView>,
• 指定 Layout 在預覽時，listitem、頁首和頁尾呈現的 Layout 文件
• Example 範例：

<ListView
    android:id="@+id/list_item"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:listitem="@layout/item_row" />

• 比較：

  

tools:showIn

• 使用於任何 <View> 或 <Layout>，且該元件的 (子)Layout 被其他 (父)Layout include
• (父)Layout 在預覽時，可以看到 (子)Layout 的設定
• Example 範例：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:showIn="@layout/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

tools:menu

• 使用於任何 <View> 或 <Layout>
• 指定 Layout 預覽時，在 App Bar (Action Bar) 顯示的 menu。
• 可以是一個或多個 menu Id
• Example 範例：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:menu="menuA, menuB" />

tools:minValue / tools:maxValue

• 使用於 <NumberPicker>：延伸閱讀
• 用法類似後端 Java 的
  • setMinValue(int minValue)
  • setMaxValue(int maxValue)
• Example 範例：

<NumberPicker 
    android:id="@+id/numberPicker"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:minValue="0"
    tools:maxValue="10" />

tools:openDrawer

• 使用於 <DrawerLayout>
• 允許 Layout 預覽時，打開 DrawerLayout
• Example 範例：

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:openDrawer="start" />

其他

• 用 tools: 替換 android: 的屬性中的資料
• 此替換只是為了 Layout 預覽時，看到的結果
• 運行時則會被忽略，參考 Common 簡介
• 舉例：tools:text="Example"

Extensive Reading 延伸閱讀

1. Improve Your Code with Lint：https://developer.android.com/studio/write/lint
   • 中文版：https://developer.android.com/studio/write/lint?hl=zh-CN
2. 文字選擇器 - NumberPicker 的應用：
   https://spicyboyd.blogspot.tw/2018/04/app-numberpicker.html

Reference 參考資料

1. 圖示：https://andro4all.com/2012/10/bricoandroid-acceso-root-instalar-rom-i
2. Tools Attributes Reference 官方文件：
   https://developer.android.com/studio/write/tool-attributes
3. Android : Tools Attributes
   http://cloudchen.logdown.com/posts/247618/android-tools-attributes
4. Android Tools Attributes，让布局设计所见即所得：http://yifeng.studio/2016/10/13/android-tools-attributes/