Name: 安卓設計支持庫（谷歌開發100天》）。 (Android Design Support Library (100 Days of Google Dev))
Uploaded: 2021-01-14T05:43:41.000Z
Duration: 5 min 17 s

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

app built on the principles of material design.

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

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

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

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

A text input layout for adding floating labels and errors

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

Floating action button for the primary action

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

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

Material design compliant tabs and navigation

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

view for building your Navigation Drawer menu items.

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

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

Text Input Layer wraps and edits text, providing always visible

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

hint text, and a convenient way of showing error

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

Floating Action Buttons are ideal for that primary action

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

The design library's Floating Action Button

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

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

useful for when the Floating Action Button needs

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

Snackbars are a new way to provide lightweight feedback

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.

This makes SnackBars very useful around potentially destructive

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

A Click Undo Action can save a lot of headache,

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

while providing a far better experience than confirmation

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

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

as well supporting scrollable tabs where you

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

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

An alternative to using tabs as your top-level navigation

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

pane which offers navigation between different parts

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

Navigation View gives you a perfectly styled drawer.

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

You just provide the header, and then you

can add navigation items programmatically

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

The simplest drawer menus will have a group of checkable menu

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

This ensures that the checked items will appear highlighted

這樣就能確保勾選的項目 會在 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 這種新畫面配置 可讓子系項目透過宣告行為

that allows children to declare a behavior, giving them

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.

The default behavior for these components

allow the floating action button to automatically move up

as the Snackbar animates onto the screen,

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

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

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

enabling your appbar to react to your main content scrolling.

By wrapping your toolbar and other views, such as Tab

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

gain access to the special control flags,

allowing you to annotate each component as something that

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

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

when you downward scroll, making implementing a quick return

No custom synchronized scrolling code needed.

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

You can take things even further by using a collapsing toolbar

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

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

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

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