跳到主要內容

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

這個網誌中的熱門文章

如何把 Status Bar 變透明

Android 從 4.4 (KitKat, api level 19) 後才支援這個功能, 到了 5.0 (Lollipop, api level 21) 自訂性更高, 可以讓我們設定各種顏色, 當然也包含透明色。以下分別介紹如何使用這兩種版本的方法。

方法1: 利用 attribute "android:windowTranslucentStatus", 在 style.xml 加上這個 attribute 就好。要注意的是 Android 版本要在 4.4 以上才可以用這個 attribute:

<resources> <!-- Base application theme for API 19+. This theme completely replaces AppTheme from res/values/styles.xml on API 19+ devices. --> <style name="AppTheme" parent="@style/AppBaseTheme"> <!-- API 19 theme customizations can go here. --> <item name="android:windowTranslucentStatus">true</item> </style> </resources>         下面的圖分別為 4.4 跟 5.0 的手機使用這個 attribute 的結果:


        因為設定了這個 attribute, 畫面會從 status bar 下方開始畫。要解決這個有兩種方法, 第一個是在 layout 畫面設定 attribute "android:fitsSystemWindows"

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:to…

在 Fragment 裡使用 ViewPager 搭配 FragmentPagerAdapter

Fragment 是個強大的東西,可以想成 Activity 的子頁面,可隨時替換頁面內容(但使用起來還滿麻煩的…)。這麼強大的東西,在 ViewPager 當然也會提供 Fragment 的版本。在官方文件就有一個 PagerAdapter 的實作:FragmentPagerAdapter,可以用 Fragment 來當成每個 ViewPager 的子頁。FragmentPagerAdapter 的官方文件中也有提供 sample code。

        但我自己參考 sample code 寫出來的效果卻怪怪的,ViewPager 裡子頁面的 lifecycle 竟然沒有跟著父 Fragment ,看起來比較像是跟著 Activity。仔細看 sample code 才發現,它是在 Activity 裡使用 ViewPager + FragmentPagerAdapter。那要如何使用在 Fragment 呢?

        其實只要改一行 code 就可以了。 sample code 裡的
mAdapter = new MyAdapter(getSupportFragmentManager()); 只要改成
mAdapter = new MyAdapter(Fragment.getChildFragmentManager()); 就可以囉 ~~

        由於 getChildFragmentManager() api level 17+ 才有的東西,而 Fragment 是 11+ 才有,不想定太高的 api level 可以使用 support v4 library,怎麼使用就不多說啦。

參考資料:

support v4 Fragment:
http://developer.android.com/intl/zh-tw/reference/android/support/v4/app/Fragment.html

support v4  FragmentPagerAdapter:
http://developer.android.com/intl/zh-w/reference/android/support/v4/app/FragmentPagerAdapter.html


透明背景的 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="android:…