这个画廊的效果利用到了View的clipChildren属性,我们在这里要把ViewPager以及它的父窗体都设置为false,如下:
Android:clipChildren=”false”
因为如果clipChildren属性设置为true,就表明我们要将children给clip掉,就是说对于子元素来说,超出当前view的部分都会被切掉,那我们在这里把它设置成false,就表明超出view的部分,不要切掉,依然显示。
xml代码部分:
<!– 配置Container和pager的clipChildren=false, 并且指定marginLeft 和 marginRight 的值–>
<LinearLayout
android:id=”@+id/container”
android:layout_width=”match_parent”
android:layout_height=”100dp”
android:clipChildren=”false”
android:gravity=”center_horizontal”
android:layerType=”software”
android:orientation=”horizontal” >
<android.support.v4.view.ViewPager
android:id=”@+id/viewpager”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:layout_marginLeft=”110dp”
android:layout_marginRight=”110dp”
android:clipChildren=”false” >
</android.support.v4.view.ViewPager>
</LinearLayout>
Java代码部分:
// 1.设置幕后item的缓存数目
mViewPager.setOffscreenPageLimit(3);
// 2.设置页与页之间的间距
mViewPager.setPageMargin(10);
// 3.将父类的touch事件分发至viewPgaer,否则只能滑动中间的一个view对象
container.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
return mViewPager.dispatchTouchEvent(event);
}
});
参考效果图(上面代码并不能实现效果图,仅供参考):
先看一下我做的demo:
- public class MainActivity extends AppCompatActivity {
- ViewPager mViewPager;
- RelativeLayout mViewPagerBox;
- private ViewPagerAdapter1 mViewPagerAdapter1;
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
- mViewPager = (ViewPager) findViewById(R.id.view_pager);
- mViewPagerBox = (RelativeLayout) findViewById(R.id.view_pager_box);
- mViewPager.setOffscreenPageLimit(3);
- mViewPagerAdapter1 = new ViewPagerAdapter1(this);
- mViewPager.setAdapter(mViewPagerAdapter1);
- mViewPagerBox.setOnTouchListener(new View.OnTouchListener() {
- @Override
- public boolean onTouch(View v, MotionEvent event) {
- return mViewPager.dispatchTouchEvent(event);
- }
- });
- }
- }
ZoomOutPageTransformer:
- public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
- private static final float MIN_SCALE = 0.85f;
- private static final float MIN_ALPHA = 0.5f;
- public void transformPage(View view, float position) {
- int pageWidth = view.getWidth();
- int pageHeight = view.getHeight();
- if (position < –1) { // [-Infinity,-1)
- // This page is way off-screen to the left.
- view.setAlpha(0);
- } else if (position <= 1) { // [-1,1]
- // Modify the default slide transition to shrink the page as well
- float scaleFactor = Math.max(MIN_SCALE, 1 – Math.abs(position));
- float vertMargin = pageHeight * (1 – scaleFactor) / 2;
- float horzMargin = pageWidth * (1 – scaleFactor) / 2;
- if (position < 0) {
- view.setTranslationX(horzMargin – vertMargin / 2);
- } else {
- view.setTranslationX(-horzMargin + vertMargin / 2);
- }
- // Scale the page down (between MIN_SCALE and 1)
- view.setScaleX(scaleFactor);
- view.setScaleY(scaleFactor);
- // Fade the page relative to its size.
- view.setAlpha(MIN_ALPHA +
- (scaleFactor – MIN_SCALE) /
- (1 – MIN_SCALE) * (1 – MIN_ALPHA));
- } else { // (1,+Infinity]
- // This page is way off-screen to the right.
- view.setAlpha(0);
- }
- }
- }
DepthPageTransformer:
- public class DepthPageTransformer implements ViewPager.PageTransformer {
- private static final float MIN_SCALE = 0.75f;
- public void transformPage(View view, float position) {
- int pageWidth = view.getWidth();
- if (position < –1) { // [-Infinity,-1)
- // This page is way off-screen to the left.
- view.setAlpha(0);
- } else if (position <= 0) { // [-1,0]
- // Use the default slide transition when moving to the left page
- view.setAlpha(1);
- view.setTranslationX(0);
- view.setScaleX(1);
- view.setScaleY(1);
- } else if (position <= 1) { // (0,1]
- // Fade the page out.
- view.setAlpha(1 – position);
- // Counteract the default slide transition
- view.setTranslationX(pageWidth * -position);
- // Scale the page down (between MIN_SCALE and 1)
- float scaleFactor = MIN_SCALE
- + (1 – MIN_SCALE) * (1 – Math.abs(position));
- view.setScaleX(scaleFactor);
- view.setScaleY(scaleFactor);
- } else { // (1,+Infinity]
- // This page is way off-screen to the right.
- view.setAlpha(0);
- }
- }
- }
可以看到 较 之前那篇博客 好看了很多, 下面上代码:
- private static float defaultScale = (float) 14 / (float) 15;
- public class MyPageTransformer implements ViewPager.PageTransformer {
- @Override
- public void transformPage(View view, float position) {
- View cardView = view.findViewById(R.id.img_box);
- View img = view.findViewById(R.id.img);
- int diffWidth = (cardView.getWidth() – img.getWidth()) / 2;
- if (position < –1) { // [-Infinity,-1)
- cardView.setScaleX(defaultScale);
- cardView.setScaleY(defaultScale);
- img.setTranslationX(diffWidth);
- } else if (position <= 0) { // [-1,0]
- cardView.setScaleX((float) 1 + position / (float) 15);
- cardView.setScaleY((float) 1 + position / (float) 15);
- img.setTranslationX((0 – position) * diffWidth);
- } else if (position <= 1) { // (0,1]
- cardView.setScaleX((float) 1 – position / (float) 15);
- cardView.setScaleY((float) 1 – position / (float) 15);
- img.setTranslationX((0 – position) * diffWidth);
- } else { // (1,+Infinity]
- cardView.setScaleX(defaultScale);
- cardView.setScaleY(defaultScale);
- img.setTranslationX(-diffWidth);
- }
- }
- }