前幾天接到一個需求系洛,老板覺著喵街主頁滑動折疊效果不錯援奢,就要求在自己的項目中加上這個效果寒砖,自己平時也會收集一些比較炫的效果,但是都沒有用到踢械,最后在csdn下載看到了仿喵街首頁效果的demo 趟薄,下載下來看了下效果绽诚,但總覺著和喵街的效果差距甚遠,折疊效果變成了放大的效果,沒有陰影效果和文字放縮效果恩够,沒有使用ListView回收機制多了會導致UI卡頓甚至內存溢出卒落,快速滑動沒有效果僅僅手指觸碰屏幕才會有效果,不能放大最后幾個Item蜂桶,額外添加頭部View或者尾部View會被當作普通item處理儡毕。
基于上面種種原因,我放棄了這個Demo扑媚,決定熬夜加班自己寫
效果預覽腰湾,真機上看到的效果會很清晰
View選擇
上文中提到的效果是使用ListView實現(xiàn)的,我也嘗試在它的基礎上完善功能疆股,但是各種奇葩的問題隨之而來费坊,焦點問題,快滑問題旬痹,還有辛苦添加的HeaderView居然無法動態(tài)更新數(shù)據(jù)和UI葵萎,最后想到了Google的新控件RecyclerView,本文的主角正是RecyclerView唱凯。
效果實現(xiàn)關鍵點
只需關心界面上第一個可見的ItemView和界面上第一個完全可見的ItemView
//界面上第一個可見的ItemView
linearLayoutManager.findFirstVisibleItemPosition()
//界面上第一個完全可見的ItemView
linearLayoutManager.findFirstCompletelyVisibleItemPosition()
通過ViewHolder初始化所有ItemView羡忘,第一個ItemView高度最高,其余的都是普通高度
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
if (isFirst && position == 0) {
isFirst = false;
holder.itemView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, item_max_height));
} else {
holder.itemView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, item_normal_height));
}
holder.imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
Glide.with(holder.imageView.getContext()).load(walls.get(position)).into(holder.imageView);
}
圖片高度固定為最高Item高度磕昼,圖片放縮類型為scaleType卷雕,不然折疊效果出不來
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/image"
android:layout_width="match_parent"
android:layout_height="@dimen/item_max_height"
android:scaleType="centerCrop" />
</FrameLayout>
縱向滑動距離監(jiān)聽,RecyclerView提供了這樣的接口回調
recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
// TODO: 2015/12/6 根據(jù)縱向滑動距離dy實現(xiàn)滑動折疊票从,陰影漸變漫雕,文字放縮效果
}
});
關于怎么樣利用dy來實現(xiàn)炫酷的動畫效果我就不細說了,我會稍后將代碼傳到github峰鄙,代碼是最好的老師浸间,如果有發(fā)現(xiàn)bug或者有更好的想法,歡迎反饋哦吟榴。
項目已miaojiedemo