跳到主要內容

Borderless Ripple Effect using Appcompat v21

        Google 日前發表了新的設計準則: Material design, 其中定義了新的 touch effect: Ripple effect。而在最近也發佈了新的 support v7 library，可以讓 api level 7 以上都能建立 Material design 的 UI。我自己是滿偷懶的, 都只會設計一種 layout/style, 讓所有 api level 通吃, 此時 support library 就幫了我很大的忙 XDD。

        最近剛好看到如何讓 view 按下去的時候會有 ripple effect, Google 官方其實就有提供說明了, 請參考 https://developer.android.com/training/material/animations.html#Touch, 只要在 layout xml, 想出現此效果的view 加上 android:background= ?android:attr/selectableItemBackground 就可以啦~~ 要是想向下相容, 就必需使用 support v7 library, 其實也只是把上面那行改成 android:background="?attr/selectableItemBackground"

        但是請注意, 使用上述產生的 ripple effect 最大範圍是 view 的大小。有注意看 Google 的一些 app, Appbar(Action bar/ Toolbar) 上的按鈕按下去的話, ripple effect 是會超出 view, 也就是說, 邊界會是圓形的而不是方形的。要達到這個效果的話, 只要把 selectableItemBackground 改成 selectableItemBackgroundBorderless  就可以啦, support v7 libaray 也可以用喔。

        最後再提醒一點, ripple effect 目前只有 Android 5.0 以上的裝置才會有, 將上述做法用在 5.0 以下的話, 還是之前的 touch effect 喔, 而且要用 Material design 的效果, app theme 要使用 @android:style/Theme.Material.XXX , support library 則要改用 Theme.AppCompat.XXX

 參考資料

 1. Android Customize Touch Feedback
   https://developer.android.com/training/material/animations.html#Touch

 2. Using the Material Theme
    https://developer.android.com/training/material/theme.html

 3. AppCompat v21 — Material Design for Pre-Lollipop Devices!
    http://android-developers.blogspot.tw/2014/10/appcompat-v21-material-design-for-pre.html
標籤：

留言

張貼留言

這個網誌中的熱門文章

動態更新 ViewPager 的目前顯示頁面

        ViewPager 在 Android 裡是一個很好用的元件，使用者只要左右滑動，就可以顯示多頁的資訊。假如你的資料是從網路取得，如圖片，當使用者滑到還沒載入完成的頁面時，該怎麼辦呢？         雖然 ViewPager 會動態更新頁面，但是當下顯示的頁面是不會更新的。要達到上述的目的，我們要做一些事。ViewPager 主要是由 PagerAdapter 來處理內部的資料的，因此我們要從它下手。         PagerAdapter 有一個 method：getItemPosition。看 API 說明應該是用來判斷目前頁面的內容位置是否有變，但是也可以用它來滿足我們的要求，pseudo code 如下： public int getItemPosition(Object object) {         if ( 你的資料準備好了 )         {                 return POSITION_NONE;         }         else         {                 // 資料還沒準備好，此頁面維持不變                 return POSITION_UNCHANGED;         } }         雖然 overwrite 了 getItemPosition，但是這個 method 並不是我們主動去 invoke 的，PagerAdapter 提供了另一個 method 可以讓我們通...
張貼留言
閱讀完整內容

透明背景的 AlertDialog

        Android dialog 預設都會有一個背景底色，要怎麼把它去掉呢？其實直接改 AlertDialog 的 style 就可以了，但我改好久…以下的範例是使用了 Support v7 AppCompat 的 theme，其他 theme 我不知道可不可以，有興趣的人可以試試看。 <style name="TransparentDialog" parent="@style/Base.Theme.AppCompat.Dialog"> <item name="android:windowFrame">@null</item> <item name="android:windowBackground">@android:color/transparent</item> <item name="android:windowIsFloating">true</item> <item name="android:windowTitleStyle">@null</item> <item name="android:background">@android:color/transparent</item> <item name="android:windowNoTitle">true</item> <item name="android:alertDialogStyle">@style/TransparentDialog.Color</item> </style> <style name="TransparentDialog.Color" parent="@style/Base.Theme.AppCompat.Dialog"> <item name="androi...
張貼留言
閱讀完整內容

Deprecated API

        當透過 IDE 使用 API，或是查 Document 時，常會看到一段途述:  This method was deprecated… 這是什麼意思呢？這是告訴我們還是可以使用此 method，但未來可能會沒有用、甚至是 在新版本的 SDK 會把這個 method 移掉 。         以 API level 11 出現的 Fragment  為例子，在使用時常會 override 一個 callback 叫 onAttach (Activity activity)，但到了 API level 23 (Lollipop) 時，可以發現 onAttach (Activity activity) 被標記為 deprecated 了，取而代之的是 onAttach (Context context)。         像我個人寫程式不太喜歡出現 warning，而使用到 deprecated api 會被 Android Studio 檢查出來，我在用 Fragment 時就直接都換成 onAttach (Context context)，結果程式在 api level 較低的手機就出現不符合預期的行為。Debug 了一陣子才發現 onAttach (Context context) 是新的 API，舊版本 SDK 當然沒有這個  API，自然就不會執行到該 API。         因此，雖然有些 API 被標記為 deprecated，但當你的程式還需要支援較舊版本時，還是得使用這些 API，假如要用的 API 在 Support Library  也有對應版本的話，我會建議用 Support Library 版本，因為放在裡面的 API 本來就是為了向下相容而設計的。以 Support Libaray 裡的Fragment 來說，onAttach (Activity activity) 一樣被標記為 deprecated，也一樣有 onAttach (Context context) ...
張貼留言
閱讀完整內容