Placeholder Image

字幕列表 影片播放

  • MALE SPEAKER: AppCompat gives you

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

  • 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.

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

MALE SPEAKER: AppCompat gives you

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

字幕與單字

單字即點即查 點擊單字可以查詢單字解釋