android viewpager实现画廊效果,android viewpager 实现画廊效果
首先看一下效果图：
xml布局：
activity代码：
(这里我是在fragment里面写的 ，其实跟activity布局里面差不多)
public class FollowFragment extends Fragment {
private LinearLayout fol_lnlay;
private ViewPager fow_viewpager;
int[] picArray;
ImageView[] ivArray;
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_follow,container,false);
fol_lnlay = (LinearLayout) view.findViewById(R.id.fol_lnlay);
fow_viewpager = (ViewPager) view.findViewById(R.id.fow_viewpager);
initData();
//设置Page间间距
fow_viewpager.setPageMargin(60);
//设置缓存的页面数量
fow_viewpager.setOffscreenPageLimit(4);
fow_viewpager.setPageTransformer(true, new PagerTransformer());
fow_viewpager.setAdapter(new PagerAdapter() {
@Override
public int getCount() {
return Integer.MAX_VALUE;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
int p = position % 4;
RoundAngleImageView view = new RoundAngleImageView(getActivity());
view.setScaleType(ImageView.ScaleType.FIT_XY);
// ViewGroup.LayoutParams vl = new ViewGroup.LayoutParams(100 , 300);
view.setImageResource(picArray[p]);
container.addView(view);
return view;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
});
fow_viewpager.setCurrentItem(Integer.MAX_VALUE/2);
return view;
}
private void initData() {
picArray = new int[4];
picArray[0] = R.mipmap.lunpou1;
picArray[1] = R.mipmap.lunpou2;
picArray[2] = R.mipmap.lunpou3;
picArray[3] = R.mipmap.lunpou4;
}
}
PagerTransformer布局：
public class PagerTransformer implements ViewPager.PageTransformer {
public static final float minScale = 0.9f;
private static final float DEFAULT_MAX_ROTATE = 15f;
private float mMaxRotate = DEFAULT_MAX_ROTATE;
public static final float DEFAULT_CENTER = 0.4f;
/**
* 每个状态的view该显示多大是根据position的值来设置的。
* 本例中值关心3张图片的大小，就只有3个状态。position小于-1 ， -1到1 大于1
* 等于-1 就是屏幕上左边的图片 ， 等于1 是屏幕右边的图 等于0是中间的图。
* @param page
* @param position -- 第一个view的position初始为0 ，向左滑第一个view的position就慢慢减少成为负数。
* 第二个view的position初始为1，向左滑慢慢变成0.变成0时就是这个view在最中间的时候。
* 整个过程，每个view的position都是在变的、
*/
@Override
public void transformPage(View page, float position) {
page.setPivotY(page.getHeight()/2);//旋转轴
if (position < -1) {
// view.setAlpha(mMinAlpha);
page.setScaleY(minScale);
page.setScaleX(minScale);
page.setRotationY(-1 * mMaxRotate);
page.setPivotX(page.getWidth());
} else if (position <= 1) { // [-1,1]
page.setRotationY(position * mMaxRotate);
if (position < 0) //[0，-1]
{
float factor = minScale + (1 - minScale) * (1 + position);
page.setScaleY(factor);
page.setScaleX(factor);
// page.setPivotX(page.getWidth() * (DEFAULT_CENTER + DEFAULT_CENTER * (-position)));
page.setPivotX(page.getWidth());
} else//[1，0]
{
float factor = minScale + (1 - minScale) * (1 - position);
page.setScaleY(factor);
page.setScaleX(factor);
// page.setPivotX(page.getWidth() * DEFAULT_CENTER * (1 - position));
page.setPivotX(0);
}
} else { // (1,+Infinity]
page.setScaleY(minScale);
page.setScaleX(minScale);
page.setRotationY(1 * mMaxRotate);
page.setPivotX(0);
}
}
}
在我写适配器的时候，new了一个类，那个类就是我自定义的imageview的圆角，可以参考：https://blog.csdn.net/why_111/article/details/80720043
如果不想写的话 直接new一个Imageview就可以。