知乎日報App下拉效果如何實現的？

01-23

知乎日報App (iphone版)，列表頁下拉刷新，頂部的圖片有個彈性縮放效果，是如何實現的？

這個效果其實原理很簡單。

頂部的圖片是一張正方形的圖片，在原始狀態下只顯示中間一部分。下拉的過程中，頂部的圖片會隨著列表的移動改變高度，露出上下部分。由於移動速度的不同，標題和背景圖之間會有一種層次感。

謝邀…（邀請我這個半吊子 Android 開發幹嘛）

今天剛好是長假前一天，相對比較空一些就回答下這個問題。至於題主的意思是 iOS 平台還是 Android 平台不表，我這裡暫時就認定他指的是 Android 平台（iOS 我也不懂呀）。

我寫了一個 DEMO ，錄了個視頻看看是否是題主想要的效果：

IMG_3096視頻

ListView 類似，為了方便我就使用 SeekBar 了，原理是一樣的，就是綁定和判斷的事件有所不同。

原理上說，就是動態改變 ImageView 的大小。

我們先看布局

&

& &

其中比較重要的屬性是 ImageView 的

android:scaleType="centerCrop"

顧名思義就是居中切除（中文表述不清楚，見諒）。

然後代碼這邊除了獲取 View 和綁定事件外（相信你也能寫），最重要的就是在

的時候，動態改變 ImageView 的大小，我這邊的實現是：

thumb.setLayoutParams(new LinearLayout.LayoutParams(width, height));

注意，ImageView 元素必須在 LinearLayout 下。

當然，你也可以在返回的時候加個動畫，這樣看起來會流暢一些。

具體代碼在 onStopTrackingTouch ，也就是釋放的時候觸發。

還是看源代碼吧，打包如下:

http://files.gracecode.com/2013_09_30/1380517500.7z

UPDATE

如何標題在圖片上面？

呃，這個用 FrameLayout 就好啦，至於字體陰影、發光等效果，您可以自行搜索下。

UPDATE 1

這裡有個比我更好的效果，雖然複雜了一點：

知乎日報的首頁效果Demo-Android 開發教程實例演算法-eoe Android開發者社區

PS，我們團隊在招聘 Android 開發，如果有兄弟最近想換個工作，歡迎打聽。

具體信息：丁香園（dxy.cn）技術部招聘 Android 開發工程師-Android 開發人才招聘-eoe Android開發者社區