2015年3月15日 星期日

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

2015年3月9日 星期一

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

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

2015年3月8日 星期日

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

2015年3月2日 星期一

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