<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center" >

    <android.support.v4.view.ViewPager
        android:background="#0000ff"
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:clipToPadding="false"
        android:paddingBottom="24dp"
        android:paddingLeft="40dp"
        android:paddingRight="40dp"
        android:paddingTop="24dp" />

</RelativeLayout>
 

上面的佈局檔案，是activity的佈局檔案，只有一個ViewPager，大家仔細的話會發現，我們設定了四個padding，即上下左右的padding，上下的padding值為24dp，左右的padding值為40dp，然後比較關鍵的一個屬性，也就是今天的主角，clipToPadding這個屬性我們設定了false。

為了區分我們給ViewPager設定背景色藍色。

OK，我們來看看MainActivity.java的程式碼：

package com.example.cardview.pager;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.util.TypedValue;

import com.example.cardviewpager.R;


public class MainActivity extends Activity {
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main_activity);
		ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);  
        String[] list = new String[20];
        MyAdapter adapter = new MyAdapter(this, list);  
        viewPager.setAdapter(adapter);  
        viewPager.setOffscreenPageLimit(4);
        viewPager.setPageMargin((int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,  20, getResources().getDisplayMetrics()));  
        viewPager.setPageTransformer(false, new ScaleTransformer(this));  
	}
}
 

package com.example.cardview.pager;

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.example.cardviewpager.R;

public class MyAdapter extends PagerAdapter {  
    private Context context;  
    private LayoutInflater inflater;  
    private String[] list = new String[20];
    public MyAdapter(Context context, String[] list) {  
        this.context = context;  
        this.list = list;  
        inflater = LayoutInflater.from(context);  
    }  
    @Override  
    public int getCount() {  
        return list.length;  
    }  
  
    @Override  
    public boolean isViewFromObject(View view, Object object) {  
        return view == object;  
    }  
  
    @Override  
    public Object instantiateItem(ViewGroup container, int position) {  
        View view = inflater.inflate(R.layout.cardview_item, container, false);  
        TextView tv = (TextView) view.findViewById(R.id.tv);
        tv.setText(position+"");
        container.addView(view);  
        return view;  
    }  
  
    @Override  
    public void destroyItem(ViewGroup container, int position, Object object) {  
        container.removeView((View) object);  
    }  
}  
 

package com.example.cardview.pager;

import android.content.Context;
import android.support.v4.view.ViewPager;
import android.support.v7.widget.CardView;
import android.util.TypedValue;
import android.view.View;


public class ScaleTransformer implements ViewPager.PageTransformer {
    private Context context;
    private float elevation;

    public ScaleTransformer(Context context) {
        this.context = context;
        elevation = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
                20, context.getResources().getDisplayMetrics());
    }

    @Override
    public void transformPage(View page, float position) {
        if (position < -1 || position > 1) {

        } else {
            if (position < 0) {
                ((CardView) page).setCardElevation((1 + position) * elevation);
            } else {
                ((CardView) page).setCardElevation((1 - position) * elevation);
            }
        }
    }
}

我們來直接看看執行的效果:

一開始執行的情況，這是靜止時候的樣子，我們發現左邊padding的部分是很明顯(因為第一個page前面沒有page了)，但是右邊padding部分卻被忽略了，顯示了下一張區域性。

然後我們慢慢往左滑動：

OK，我們發現，當page滑動到paddingLeft的空間的時候，並沒有被clip掉，沒有被裁剪掉，而是被保留了下來，並且還能繼續往paddingLeft更左邊的位置滑動。

，而且paddingRight空間的地方也被忽略顯示下一個page的區域性，所以這就是似的pading值被忽略了，對，當我們把clipToPadding的屬性設定為false的時候，在滑動的時候，就會忽略padding邊界的存在，view在滑動的時候，自由穿過padding的位置。

OK，我們在把clipToPadding屬性的值設定為true試試看呢？

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center" >

    <android.support.v4.view.ViewPager
        android:background="#0000ff"
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:clipToPadding="true"
        android:paddingBottom="24dp"
        android:paddingLeft="40dp"
        android:paddingRight="40dp"
        android:paddingTop="24dp" />

</RelativeLayout>

這是靜止，剛執行預設時候的樣子。

OK，我們發現這個page view只有了一個padding邊界的限制，padding空間並不能顯示東西，所以我們只看到了一個page。

接下來我們滑動試試看吧。

OK，我們看到，當我們往左滑動的時候，page view 並不能穿過padding邊界，而是限定在padding內部滑動。

所以知道這個細節之後，我們在實現某些UI效果的時候，可能就用的上這樣的一個技巧。