跳到主要內容

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


ADT 開新專案不使用 support.v7.appcompat

ADT 愈來愈煩了…不知道從哪一版開始,我目前版本是 Android SDK Tools 22.6.4,Android SDK Platform-Tools 19.0.2,只要開新專案選 Blank Activity,預設 MainActivity 就會 extends AtionBarActivity 並使用 Fragment 顯示頁面,而且 project list 還會多一個 appcompat_v7,可是我一點都不喜歡 Fragment 阿!!!但是選專案 Activity 時,多了一個 Empty Activity,我選它總可以了吧!


        很好,總算是 extends Activity了,但還是一樣會多一個 appcompat_v7 的專案。這看了真的很礙眼,我索性就把它刪了。結果刪掉後,反而新專案怎麼 build 都失敗。看一下錯誤都是在 style.xml



        看一下錯誤訊息,是No resource found that matches the given name 'Theme.AppCompat.Light'。因為這是在 support v7 appcompat 裡的東西,把它砍了當然就找不到,build 失敗也是正常的,這裡教大家如何能順利 build 這個新專案:

1. 對專案按右鍵 --> Properties --> 左邊 Panel 選 Android --> 右邊 Scroll bar 拉到最下面 -->             Library 的地方把 appcompat_v7 這個 project library 給 remove 掉 --> Apply and OK。

2. 把 style.xml 裡的 parent theme 都改成原有的 theme,例如 android:Theme.Light

3. 重新 build project --> 打完收工!

        這是不想用 Fragment 的情形才要這樣做啦,要是你的 app 想要呈現多頁的資訊的話,Fragment + ActionBar/ViewPager 還是不錯的選擇啦!(但是滿難用就是了)