a consistent base for your Android

如果您是用實感設計的原則來開發 Android 應用程式

app built on the principles of material design.

那麼 AppCompat 能讓您的應用程式呈現一致的介面風格

But material design is a lot more

但實感設計可不只是加上工具列和強調色而已

than adding a toolbar and some accent colors.

但實感設計可不只是加上工具列和強調色而已

For everything else, there's a design library.

您可以在設計庫中找到所需的其他資源

The design library provides many of the high-level components

設計庫提供了許多進階元件

you'll need to build a great app that feels

方便您開發融合實感設計的優質應用程式

at home with material design.

方便您開發融合實感設計的優質應用程式

So what do you get?

舉例來說

A text input layout for adding floating labels and errors

使用 TextInputLayout 可在編輯文字中加入浮動標籤和錯誤訊息

to edit text.

使用 TextInputLayout 可在編輯文字中加入浮動標籤和錯誤訊息

Floating action button for the primary action

FloatingActionButton 適用於介面中的主要動作

in your interface.

FloatingActionButton 適用於介面中的主要動作

SnackBars for quick feedback messages

Snackbar 提供快速的回饋訊息 並讓使用者選擇採取其他動作

with an optional action.

Snackbar 提供快速的回饋訊息 並讓使用者選擇採取其他動作

Material design compliant tabs and navigation

採用實感設計的分頁和 NavigationView 可建立導覽匣選單項目

view for building your Navigation Drawer menu items.

採用實感設計的分頁和 NavigationView 可建立導覽匣選單項目

Plus a lot of work, specifically around motion and scrolling.

還有許多動態和捲動效果的相關元素 也都能向下相容至 API 7

All this back through API7.

還有許多動態和捲動效果的相關元素 也都能向下相容至 API 7

Text Input Layer wraps and edits text, providing always visible

TextInputLayout 能將文字換行、編輯文字內容 提供固定顯示的提示文字

hint text, and a convenient way of showing error

TextInputLayout 能將文字換行、編輯文字內容 提供固定顯示的提示文字

text via the set error method.

方便您透過 SetError 方法顯示錯誤文字

Floating Action Buttons are ideal for that primary action

FloatingActionButton 很適合當成使用者介面的主要動作

in your UI.

FloatingActionButton 很適合當成使用者介面的主要動作

The design library's Floating Action Button

在設計庫中，FloatingActionButton 提供預設大小和迷你大小

sports both a default size as well as a mini size,

在設計庫中，FloatingActionButton 提供預設大小和迷你大小

useful for when the Floating Action Button needs

讓您能夠配合其他元素 設計出適當的浮動操作按鈕

to match with other elements.

讓您能夠配合其他元素 設計出適當的浮動操作按鈕

Snackbars are a new way to provide lightweight feedback

Snackbar 能以全新的方式向使用者顯示精簡的回饋訊息

to your users.

Snackbar 能以全新的方式向使用者顯示精簡的回饋訊息

Unlike toast messages, SnackBars are an interactive part

但與浮動訊息不同 Snackbar 在使用者介面上具有互動性

of your UI, allowing you to add an optional action

您可以新增選用的動作 或讓使用者滑動螢幕來關閉 Snackbar

or allow the user to swipe to dismiss the SnackBar.

您可以新增選用的動作 或讓使用者滑動螢幕來關閉 Snackbar

This makes SnackBars very useful around potentially destructive

不妨多加利用 Snackbar 避免使用者做出可能難以挽回的操作

operations.

不妨多加利用 Snackbar 避免使用者做出可能難以挽回的操作

A Click Undo Action can save a lot of headache,

相較於確認對話方塊 ClickUndoAction 更加方便安全

while providing a far better experience than confirmation

也提供更理想的使用體驗

dialogs.

也提供更理想的使用體驗

Tabs have always been a common pattern on Android,

「分頁」是 Android 中的常見元素

both as top level navigation for your app,

可以當成應用程式的頂層導覽 也可以把應用程式中的內容分門別類

and for grouping content within your app.

可以當成應用程式的頂層導覽 也可以把應用程式中的內容分門別類

The design library's tab layout supports fixed tabs

設計庫的 TabLayout 支援固定分頁和可捲動分頁

where each views width is split equally between tabs, suitable

固定分頁的寬度相等 適合用在只有少數重要分頁的情況

if you only have a few important tabs,

固定分頁的寬度相等 適合用在只有少數重要分頁的情況

as well supporting scrollable tabs where you

可捲動分頁則適用在分頁數較多的情況

have a large number of tabs.

可捲動分頁則適用在分頁數較多的情況

We've made it easy to attach your tab layout to a ViewPager,

您可以輕鬆把 TabLayout 附加於 ViewPager

keeping your tabs and pages content in sync.

讓分頁和頁面內容保持同步

Just make sure your pager adapter overrides

只要用 PagerAdapter 覆寫 getPageTitle

Get Page Title.

只要用 PagerAdapter 覆寫 getPageTitle

And then call Set Up With ViewPager

然後呼叫 setupWithViewPager

to tie everything together.

分頁和頁面內容就能保持同步

An alternative to using tabs as your top-level navigation

分頁還可以做為導覽匣中的頂層導覽使用

is the Navigation Drawer-- a slide out

分頁還可以做為導覽匣中的頂層導覽使用

pane which offers navigation between different parts

導覽匣是一種滑出式窗格 能帶您前往應用程式的不同部分

of your app.

導覽匣是一種滑出式窗格 能帶您前往應用程式的不同部分

Navigation View gives you a perfectly styled drawer.

您可以透過 NavigationView 為導覽匣自訂風格

You just provide the header, and then you

只要輸入標頭

can add navigation items programmatically

然後寫程式碼或透過選單資源檔 新增導覽項目即可

or via a Menu Resource File.

然後寫程式碼或透過選單資源檔 新增導覽項目即可

The simplest drawer menus will have a group of checkable menu

如要建立最簡單的導覽匣選單

items, using the checkable behavior

請將 checkableBehavior 屬性設為 single 來新增一組可勾選的選單項目

equals single attribute.

請將 checkableBehavior 屬性設為 single 來新增一組可勾選的選單項目

This ensures that the checked items will appear highlighted

這樣就能確保勾選的項目 會在 NavigationView 中醒目顯示

in the Navigation View.

這樣就能確保勾選的項目 會在 NavigationView 中醒目顯示

Support for subheaders using subviews is also available.

您還可以利用子畫面來建立子標頭

That takes care of a lot of the visuals of material design.

關於實感設計的視覺效果就說明到這裡

What about the motion side of material design?

接著要說明實感設計的動態效果

Coordinator motion is critical to a great experience.

Coordinator 的動態效果 對使用者體驗有很大的影響

That's why the design library is introducing CoordinatorLayout.

設計庫因此推出 CoordinatorLayout

CoordinatorLayout is a new layout

CoordinatorLayout 這種新畫面配置 可讓子系項目透過宣告行為

that allows children to declare a behavior, giving them

CoordinatorLayout 這種新畫面配置 可讓子系項目透過宣告行為

extra controls around touch events

進一步管理觸控事件

and the ability to build dependencies between views.

並且建立畫面間的依存關係

A great example of this is when you use CoordinatorLayout

舉例來說，如果您同時使用 CoordinatorLayout FloatingActionButton 和 Snackbar

with the floating action button, and then show a Snackbar.

舉例來說，如果您同時使用 CoordinatorLayout FloatingActionButton 和 Snackbar

The default behavior for these components

當 Snackbar 在畫面上顯示時

allow the floating action button to automatically move up

浮動操作按鈕會自動向上移

as the Snackbar animates onto the screen,

確保各元件不會重疊

ensuring that components don't overlap,

以上都是這些元件的預設行為 您完全不需寫任何程式碼

without you writing any code at all.

以上都是這些元件的預設行為 您完全不需寫任何程式碼

A major focus for CoordinatorLayout

在這個最初版本中，CoordinatorLayout 著重於

in this initial release is around

讓應用程式列能在主要內容捲動時 產生互動

enabling your appbar to react to your main content scrolling.

讓應用程式列能在主要內容捲動時 產生互動

By wrapping your toolbar and other views, such as Tab

只要在應用程式列畫面配置中 加入工具列和其他畫面，例如 TabLayout

Layout, in an appbar layout, you'll

只要在應用程式列畫面配置中 加入工具列和其他畫面，例如 TabLayout

gain access to the special control flags,

您就能使用特殊控制標記

allowing you to annotate each component as something that

為每個元件加上註解

scrolls off the screen, stays pinned

讓元件在向下捲動時一併捲動到畫面外 固定在畫面頂端，或是立即傳回元件

to the top of the screen, or even returns immediately,

讓元件在向下捲動時一併捲動到畫面外 固定在畫面頂端，或是立即傳回元件

when you downward scroll, making implementing a quick return

只要在 XML 中加註幾行程式碼

pattern just a few lines of XML.

就能完成上述操作

No custom synchronized scrolling code needed.

您完全不需編寫任何同步捲動程式碼

You can take things even further by using a collapsing toolbar

您還能藉由 CollapsingToolbarLayout 進一步調整其他設定

layout.

您還能藉由 CollapsingToolbarLayout 進一步調整其他設定

This allows an extended hide toolbar

您可以調整 工具列收合時的標題文字大小

to grow and shrink its title text size as it collapses.

您可以調整 工具列收合時的標題文字大小

Pin elements to the top of the collapsing toolbar,

將元素固定在收合工具列或視差圖片的頂端

parallax images, and even add a full bleed scrim color

或是在工具列收合時 新增滿版的花紋圖樣

once it becomes collapsed.

或是在工具列收合時 新增滿版的花紋圖樣

Again, just a few lines of XML, and that's all you'll need.

只要在 XML 中加上幾行程式碼 就能辦到

Getting started with the design library is easy.

使用設計庫很容易上手

It's just a single dependency to add.

只要加入一行相依程式碼就行了

With AppCompat as the base, and the components provided

利用 AppCompat 架構及設計庫提供的元件

by the design library on top of it,

利用 AppCompat 架構及設計庫提供的元件

there's no better time to get started building great material

您就能著手開發優秀的實感設計應用程式

design apps.

您就能著手開發優秀的實感設計應用程式

We've only touched on the features in the design library.

這一次我們初步為大家介紹了設計庫的幾項功能

You're can learn even more about the design library in the blog

如要進一步瞭解設計庫 歡迎參閱網誌文章和開發人員網站

post and on the developer site.

如要進一步瞭解設計庫 歡迎參閱網誌文章和開發人員網站

I'm looking forward to your great material design apps.

期待您也能製作出很棒的實感設計應用程式