Android 開發(八十五) Lolipop Activity Transition ShareElement (part2)

第一眼看到上面的transition時，覺得這個transition沒什麼，使用shareelement就可以很輕鬆的做到，但是在使用了activity transition 一陣子之後，發現有一個很嚴重的問題，
如果前一個view是recyclerview，後面一個view也是recyclerview的話，
image移動的動畫是不會出現的.

不會動的原因是當shareelement的動畫開始執行的時候，view 還沒有被lay出來，這個問題一直找不到解決的辦法，直到最近意外的看到了幾個method之後，這個問題才出現的解決方案

postponeEnterTransition(); and startPostponedEnterTransition();
顧名思義，我們可以延遲transition的時間，並且自己決定何時要start transition，
不過在這邊會有一個比較tricky的地方，假設postpone之後沒有立刻call startPostponedEnterTransition，整個ui會呈現卡住的狀態，（例如 postpone之後又等httprequest回來才lay 圖，就會造成ui呈現卡住的樣子），所以假設要使用這類的transition，必須要先把這層需要的資料帶進來. 這樣才能在postpone之後立刻使用
startPostponedEnterTransition.

最後附上sample code https://github.com/nightbear1009/LolipopActivityTransition
請切換到branch recyclerviewTorecyclerview

Android 開發(八十四) TripleLayoutRecyclerView

今天要介紹如何利用recyclerview建立可切換layout，如下圖所示

要建立這樣的layout有兩個挑戰必須克服
1.如何動態切換column
2.如何動態切換layout


1.如何動態切換column

要解決這個問題，我們可以使用 GridLayoutManager裡的method setSpanSizeLookup
SpanSizeLookup可以幫我們決定特定position的span是多少，
for example:
mManager = new GridLayoutManager(this,2);
代表著這個gridlayout每一行的Span size都會是2，當某個item的SpanSize 為 1則該行可以放兩個item，當某個item的SpanSize為2則該行只能放一個item，利用這個特性，我們就可以改變我們的layout每行的個數. 這樣我們就能動態的切換column數了
如下，當改變mViewSpan則每行item的數量就會改變
           ((GridLayoutManager) layout).setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
                @Override
                public int getSpanSize(int i) {
                    return ((GridLayoutManager) getLayoutManager()).getSpanCount() - mViewSpan +1;
                }
            });


在我們解決切換column的問題之後，接著要處理的就是如何動態切換layout

所幸這個問題非常容易解決，我們只需要修改getItemViewType，根據不同的type回傳不同的值，再利用onCreateView去實作不同的view即可.

最後還是要附上sample code

how to capture screen to gif

首先 mac 裡的 quickTimePlayer可以擷取螢幕

擷取完螢幕之後可以去下載
https://gist.github.com/dergachev/4627207


安裝完成之後

執行

ffmpeg -i firstgif.mov -vf "scale=min(iw\,600):-1" -pix_fmt rgb24 -r 10 -f gif - | gifsicle --optimize=3 --delay=7 --colors 128 > out16.gif

就可以輕鬆擷取螢幕資料了

Android 開發(八十三) Lolipop Activity Transition ShareElement

在android 5.0裡除了新增RecyclerView toolBar之外，另一個最特別的就是
Activity Transition，而且可以根據圖片的位置坐相對應的移動，如上圖，
假設我們的圖片在畫面底部，當點擊完成時，我們會導到另外的頁面，同時該圖片會從原本的位置移動到新的Activity放的位置. 這會增加很多的user experience. 當然個人也相當喜歡這個功能.

接下來要講如何實作

首先要先有兩個Activity(廢話..)
接著我們必須在Theme底下修改一些參數

 <style name="AppTheme" parent="android:Theme.Material.Light">
        <item name="android:windowSharedElementEnterTransition">
            @transition/change_image_transform</item>
        <item name="android:windowSharedElementExitTransition">
            @transition/change_image_transform</item>
    </style>

這是為了將動畫加入


接著必須在 res/transition/ 加入change_image_transform

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <changeBounds />
    <changeImageTransform/>
</transitionSet>

接著當圖片被點擊時

        Intent intent = new Intent(this,NextActivity.class);
        ActivityOptions options = ActivityOptions
                .makeSceneTransitionAnimation(this,
                        Pair.create(event.getView(),
                                NextActivity.VIEW_NAME));
        startActivity(intent, options.toBundle());

利用 view 以及 對應到下個view的參數 NextActivity.VIEW_NAME 產生ActivityOptions

接著在下個Activity裡
img.setTransitionName(VIEW_NAME);

這樣就大功告成了


最後附上github https://github.com/nightbear1009/LolipopActivityTransition

Android 開發(八十二) Scroll with ToolBar

不知道大家有沒有看過google play的toolbar會隨著滑動顯示隱藏，如下圖所示

我相當喜歡這個滑動的效果，所以最近花了一點時間研究這個的實踐辦法，
要實踐這個方法
1.首先我們必須使用toolbar而不是actionbar，使用toolbar我們才能控制這個view.
2.接著我們必須使用recyclerview，因為recyclerview的setOnScrollListener才可以計算scroll的距離.

看到這裡我猜大部分的人都已經猜到我們要怎麼實做這個行為了，
當recyclerview往上滑動時，我們就要想辦法把toolbar往上移動直到整個toolbar消失，
當recyclerview往下滑動時，我們就要想辦法把toolbar往下移動直到整個toolbar出現，
當toolbar出現>一半時則利用動畫將toolbar顯示
當toolbar出現<一半時則利用動畫將toolbar隱藏

當我們將這些邏輯定義完成，接著我們只需要將這些邏輯寫出來即可

最後附上sample code