1,普通样式
-
1,效果图
这里写图片描述
- 2,布局文件
clipChild被设置为true,需要在根布局和ViewPager中设为false.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="@+id/ll_gallery_outer"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="false">
<android.support.v4.view.ViewPager
android:id="@+id/vp_gallery_vp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="false"
android:layout_margin="50dp"/>
</LinearLayout>
- 3,主要代码
/**
* Created by on 2017/11/8
* <p>
* 普通画廊
*/
public class GalleryActivity2 extends AppCompatActivity {
private LayoutInflater mLayoutInflater;
private ViewPager mVp;
private int[] mImg = new int[]{R.mipmap.sea, R.mipmap.sunset, R.mipmap.sea, R.mipmap.lotus, R.mipmap.red};
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_gallery);
mLayoutInflater = LayoutInflater.from(this);
mVp = (ViewPager) findViewById(R.id.vp_gallery_vp);
mVp.setAdapter(new MyAdapter());
mVp.setOffscreenPageLimit(mImg.length);//设置预加载数量
mVp.setPageMargin(10);//控制两幅图之间的间距
mVp.setPageTransformer(true,new ZoomOutPageTransformer());
//viewPager左右两边滑动无效的处理
findViewById(R.id.ll_gallery_outer).setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View view, MotionEvent motionEvent) {
return mVp.dispatchTouchEvent(motionEvent);
}
});
}
class MyAdapter extends PagerAdapter {
@Override
public int getCount() {
return mImg.length;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = mLayoutInflater.inflate(R.layout.item_img, container, false);
ImageView img = view.findViewById(R.id.img_item_img);
//img.setImageResource(R.mipmap.sea);
img.setImageResource(mImg[position]);
img.setScaleType(ImageView.ScaleType.CENTER_CROP);
container.addView(view);
return view;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
}
- 4,PageTransformer
//设置切换动画
public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
//自由控制缩放比例
private static final float MAX_SCALE = 1f;
private static final float MIN_SCALE = 0.85f;//0.85f
@Override
public void transformPage(View page, float position) {
if (position <= 1) {
float scaleFactor = MIN_SCALE + (1 - Math.abs(position)) * (MAX_SCALE - MIN_SCALE);
page.setScaleX(scaleFactor);
if (position > 0) {
page.setTranslationX(-scaleFactor * 2);
} else if (position < 0) {
page.setTranslationX(scaleFactor * 2);
}
page.setScaleY(scaleFactor);
} else {
page.setScaleX(MIN_SCALE);
page.setScaleY(MIN_SCALE);
}
}
}
2, 3d画廊
-
1,效果图
这里写图片描述 - 2,布局文件,同上
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="@+id/ll_gallery_outer"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="false">
<android.support.v4.view.ViewPager
android:id="@+id/vp_gallery_vp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="false"
android:layout_margin="50dp"/>
</LinearLayout>
- 3,主代码
/**
* Created by on 2017/11/8
*
* 3d画廊
*/
public class GalleryActivity extends AppCompatActivity {
private ViewPager mVp;
private int [] mImg=new int[]{R.mipmap.sea,R.mipmap.sunset,R.mipmap.sea,R.mipmap.lotus,R.mipmap.red};
private ArrayList<Integer> mImgList;
private LayoutInflater mLayoutInflater;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_gallery);
mLayoutInflater = LayoutInflater.from(this);
mVp = (ViewPager) findViewById(R.id.vp_gallery_vp);
mImgList = new ArrayList<>();
for (int i = 0; i < mImg.length; i++) {
mImgList.add(mImg[i]);
}
mVp.setAdapter(new MyAdapter());
mVp.setOffscreenPageLimit(mImgList.size());//设置预加载数量
mVp.setPageMargin(10);//控制两幅图之间的间距,尽量以屏幕的宽度来确定
//mVp.setPageTransformer(true,new GallyPageTransformer());//3D画廊模式
mVp.setPageTransformer(true,new RotationPageTransformer());//3D画廊模式
//viewPager左右两边滑动无效的处理
findViewById(R.id.ll_gallery_outer).setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View view, MotionEvent motionEvent) {
return mVp.dispatchTouchEvent(motionEvent);
}
});
}
class MyAdapter extends PagerAdapter{
@Override
public int getCount() {
return mImgList.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view==object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = mLayoutInflater.inflate(R.layout.item_img, container, false);
ImageView img = view.findViewById(R.id.img_item_img);
//img.setImageResource(R.mipmap.sea);
img.setImageResource(mImgList.get(position));
img.setScaleType(ImageView.ScaleType.CENTER_CROP);
container.addView(view);
return view;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View)object);
}
}
}
- 4,PageTransform
public class RotationPageTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE=0.85f;
@Override
public void transformPage(View page, float position) {
float scaleFactor = Math.max(MIN_SCALE,1 - Math.abs(position));
float rotate = 10 * Math.abs(position);
//position小于等于1的时候，代表page已经位于中心item的最左边，
//此时设置为最小的缩放率以及最大的旋转度数
if (position <= -1){
page.setScaleX(MIN_SCALE);
page.setScaleY(MIN_SCALE);
page.setRotationY(rotate);
}//position从0变化到-1，page逐渐向左滑动
else if (position < 0){
page.setScaleX(scaleFactor);
page.setScaleY(scaleFactor);
page.setRotationY(rotate);
}//position从0变化到1，page逐渐向右滑动
else if (position >=0 && position < 1){
page.setScaleX(scaleFactor);
page.setScaleY(scaleFactor);
page.setRotationY(-rotate);
}//position大于等于1的时候，代表page已经位于中心item的最右边
else if (position >= 1){
page.setScaleX(scaleFactor);
page.setScaleY(scaleFactor);
page.setRotationY(-rotate);
}
}
}
