Android ViewPager 属性clipToPadding的巧妙用法

喜欢ヅ旅行 2022-06-13 02:07 235阅读 0赞

<?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));  
    	}
    }

MyAdapter.java的代码:

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);  
        }  
    }

ScaleTransformer.java的代码

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);
                }
            }
        }
    }

OK，代码都很简单。

我们来直接看看运行的效果:

![Center][]

一开始运行的情况，这是静止时候的样子，我们发现左边padding的部分是很明显(因为第一个page前面没有page了)，但是右边padding部分却被忽略了，显示了下一张局部。

然后我们慢慢往左滑动：

![Center 1][]

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，其他的不变，我们来看看效果吧：

![Center 2][]

这是静止，刚运行默认时候的样子。

OK，我们发现这个page view只有了一个padding边界的限制，padding空间并不能显示东西，所以我们只看到了一个page。

接下来我们滑动试试看吧。

![Image 1][]

![Center 3][]

OK，我们看到，当我们往左滑动的时候，page view 并不能穿过padding边界，而是限定在padding内部滑动。

所以知道这个细节之后，我们在实现某些UI效果的时候，可能就用的上这样的一个技巧。

[Center]: /images/20220613/73ee3c189ea64bb4aa0603b67ddc75b2.png
[Center 1]: /images/20220613/2df7f3bdd19c4644adc95aefa7dd3de3.png
[Center 2]: /images/20220613/66b7729a72514ea1a2c27e57a43be71e.png
[Image 1]: 
[Center 3]: /images/20220613/e4b192abe51a4387a52b27e8ff15d576.png