Introduction to the
Achieve the following effect
Realize the point
- ViewPager, which displays the left and right sides with some space between them, and the entire viewpger responds to touch events
- Use PageTransformer to add animations, transparency and image size transitions to the ViewPager
implementation
ViewPager shows the left and right sides
Using the Android :clipChildren property of the View, clipChildren: whether the parent View can restrict the display range of the child View. If the parent View has the padding, then the child View cannot display the content in the padding area. However, if you set Android :clipChildren to false, the child View will display the following layout in the parent View’s padding area
<RelativeLayout
android:id="@+id/rl_viewPager_box"
android:clipChildren="false"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager_photo"
android:layout_marginLeft="50dp"
android:layout_marginRight="134dp"
android:clipChildren="false"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>Copy the codeThe outer RelativeLayout and ViewPager are both set to Android :clipChildren is false and the contents of the previous and subsequent pages in the ViewPager can be set to layout_marginLeft as well Layout_marginRight range is displayed
Viewpager sets the spacing between pages
viewPagerPhoto.setPageMargin(ScreenUtil.dip2px(12));Copy the codeThe parameter passed in is px
Set the touch response area
After the above method is implemented, only the middle item can trigger the left or right sliding effect, so that the entire viewPager can slide left or right to do the following Settings
rlViewPagerBox.setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { return viewPagerPhoto.dispatchTouchEvent(event); }});Copy the codeSet the adapter
public class PhotoViewPagerAdapter extends PagerAdapter { private Context mContext; private List<String> mImages; private OnItemClickListener onItemClickListener; public PhotoViewPagerAdapter(Context context, List<String> mImages) { this.mContext = context; this.mImages = mImages; } public void setData(List<String> mImages) { this.mImages = mImages; notifyDataSetChanged(); } @Override public int getCount() { return this.mImages.size(); } @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == arg1; } @Override public void destroyItem(View container, int position, Object object) { ((ViewPager) container).removeView((View) object); } @Override public Object instantiateItem(View container, int position) { ImageView image = new ImageView(mContext); GlideUtils.INSTANCE.setRoundImageByUrl(mContext, image, mImages.get(position), R.drawable.loading_image_default, R.drawable.loading_image_default); image.setScaleType(ImageView.ScaleType.CENTER_CROP); image.setCropToPadding(true); image.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if (onItemClickListener ! = null) { onItemClickListener.onItemClick(); }}}); ((ViewPager) container).addView(image); return image; } public interface OnItemClickListener { void onItemClick(); } public void setOnItemClickListener(OnItemClickListener onItemClickListener) { this.onItemClickListener = onItemClickListener; }}Copy the codeViewpager toggle adds animation
Implement PhotoPageTransformer implements ViewPager. PageTransformer
Public class PhotoPageTransformer implements ViewPager. PageTransformer {private static final float MIN_SCALE = 0.9 f; Private float mMinAlpha = 0.3f; Private float leftScaleY = 0.9f; Private Float rightScaleY = 0.5f; Private float leftTransY = 0.05f; //(1-0.9)/2 private float rightTransY = 0.25f; public void transformPage(View view, float position) { int pageHeight = view.getHeight(); LogUtils.e("transformPage position: " + view + "," + position); if (position < -1) { // [-Infinity,-1) This page is way off-screen to the left. view.setAlpha(mMinAlpha); view.setScaleY(leftScaleY); view.setTranslationY(pageHeight * leftTransY); } else if (position <= 1) { if (position <= 0) {//[-1, 0] Page A from 0.0 to -1, B page from 1 to 0.0 //1 to mMinAlpha float factor = mMinAlpha + (1-mminalpha) * (1 + position); view.setalpha (factor); View.setscaley (leftScaleY + (1 - leftScaleY) * (1 + position)) } else //[0,1] 1~0 {//minAlpha to 1 float factor = mMinAlpha + (1 - mMinAlpha) * (1 - Position); view.setalpha (factor); view.setScaley (rightScaleY + (1-RightScaley) * (1-position)); // Change rightTransY to 0 view.setTranslationY(pageHeight * (rightTransY * position)); } } else { // (1,+Infinity] // This page is way off-screen to the right. view.setAlpha(mMinAlpha); view.setScaleY(rightScaleY); view.setTranslationY(pageHeight * rightTransY); } } }Copy the codePostion:
- [-infinity,-1) : left page
- (1,+Infinity] : page on the right
- [-1,1] : the page displayed in the middle
For the left and right pages, directly set the status of the final effect of the page, here set the transparency and y-scale, because the y-scale is the center of the scale, so it is panned down to align the bottom.
Assume that A is the current middle display page, and B is the next page on the right, that is, slide a to b, that is, slide left. The change range of positon is from 0.0 to -1 on page A and from 1 to 0.0 on page B.
- A to left, corresponding to alpha should be: 1 to minAlpha, setScaleY: 1 to leftScaleY, TranslationY: 0 to leftTransY
- B to middle, corresponding to alpha should be: minAlpha to 1, setScaleY: rightScaleY to 1, TranslationY: rightTransY to 0
For page A, calculate the 1 to minAlpha process:
- Position: 0 ~ 1
- 1 + position: 1 ~ 0
- (1-mminalpha)*(1+position) :(1-mminalpha)~0
- MMinAlpha +(1-mminalpha)*(1 + position) : 1~minAlpha and so on
viewPager.setPageTransformer
photoViewPagerAdapter = new PhotoViewPagerAdapter(this, mImageViews);
viewPagerPhoto.setPageTransformer(true, new PhotoPageTransformer());Copy the codeconclusion
Ok, this completes the toggle effect