Viewpager 實現畫廊Gallery效果,左右兩側隨著滑動一定比例縮放
阿新 • • 發佈:2019-02-06
畫廊效果系列一:
- 左側和右側的頁面顯示30%,且隨著頁面滑動,左側右側和中間的頁面有著不同的變化效果。頁面切換很平滑。
效果圖如下:
實現原理:
- ViewPager 無限輪播,設定了Integer.MAX_VALUE ; 其實也可以設定為前一張後一張,不過麻煩點兒
- ViewPager 的PageTransformer監聽,用於設定ViewPager的頁面切換時的動畫效果
- clipChildren 屬性,用於設定是否約束子控制元件
遇到的問題
設定clipChildren不起作用
解決辦法: 應該把此屬性設定給ViewPager的父控制元件,因為約束是父控制元件約束子控制元件,而非平級
載入新頁面時,需要手動觸動一下,左側/右側載入的頁面才會變成70%
解決辦法:頁面初始化的時候就設定大小為70%
核心程式碼
- ViewPager 佈局設定
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="false"
tools:context="ha.houviewpagergallery.MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_marginTop="100dp"
android:layout_marginLeft="100dp"
android:layout_marginRight="100dp"
android:layout_width="match_parent"
android:layout_height="500dp"></android.support.v4.view.ViewPager>
</RelativeLayout>
2 . 程式碼中ViewPager的PageTransformer的監聽
pager.setPageTransformer(true, new ViewPager.PageTransformer() {
@Override
public void transformPage(View page, float position) {
page.setScaleY(1f - ((float) (0.3 * Math.abs(position))));
page.setScaleX(1f - ((float) (0.3 * Math.abs(position))));
}
});
3 . 預設ViewPager載入的頁面的大小
view.setScaleY(0.7f);
view.setScaleX(0.7f);