Android 使用Gallery仿3D画廊效果实现

前言

在项目中遇到了一个画廊展示照片墙效果支持左右滑动看起来效果不错！
今天就把这个效果做出来展示一下!

Gallery介绍

/*** A view that shows items in a center-locked, horizontally scrolling list.* <p>* The default values for the Gallery assume you will be using* {@link android.R.styleable#Theme_galleryItemBackground} as the background for* each View given to the Gallery from the Adapter. If you are not doing this,* you may need to adjust some Gallery properties, such as the spacing.* <p>* Views given to the Gallery should use {@link Gallery.LayoutParams} as their* layout parameters type.* * @attr ref android.R.styleable#Gallery_animationDuration* @attr ref android.R.styleable#Gallery_spacing* @attr ref android.R.styleable#Gallery_gravity* * @deprecated This widget is no longer supported. Other horizontally scrolling* widgets include {@link HorizontalScrollView} and {@link android.support.v4.view.ViewPager}* from the support library.*/

在使用这个组件的时候官方API注明
该类已被弃用，其他水平滚动窗口小部件包括HorizontalScrollView和ViewPager从支持库。
因为这个类是里面的，时间比较久了。虽说被弃用，也只是不再支持后续的更新。

Gallery 是用来水平滚动的显示一系列项目。Gallery组件可以横向显示一个图像列表，当单击当前图像的后一个图像时，这个图像列表会向左移动一格，当单击当前图像的前一个图像时，这个图像列表会向右移动一样。也可以通过拖动的方式来向左和向右移动图像列表在使用Gallery的时候，我们应指定他的背景，不然它的项目会紧凑的贴在一起，不会产生画廊的效果了。但是，你也可以通过指定Gallery的属性来设置距离，高度等参数来产生画廊的效果。显然这样做比较麻烦，除非自定义一些其他效果!

Gallery组件主要用于横向显示图像列表，不过按常规做法。Gallery组件只能有限地显示指定的图像。也就是说，如果为Gallery组件指定了10张图像，那么当Gallery组件显示到第10张时，就不会再继续显示了。这虽然在大多数时候没有什么关系，但在某些情况下，我们希望图像显示到最后一张时再重第1张开始显示，也就是循环显示。要实现这种风格的Gallery组件，就需要对Gallery的Adapter对象进行一番改进。

Gallery使用

想要预期の效果那就动手完成它吧
自定义View MyGallery 继承画廊类把我们想要的属性设置一下

public class MyGallery extends Gallery {private int centerPoint;private static final String TAG = "MyGalleryHAHA";private Camera mCamera;private int maxRoate = 60;//旋转的最大角度public MyGallery(Context context) {super(context);mCamera = new Camera();setStaticTransformationsEnabled(true);}public MyGallery(Context context, AttributeSet attrs) {super(context, attrs);mCamera = new Camera();setStaticTransformationsEnabled(true);}public MyGallery(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);mCamera = new Camera();setStaticTransformationsEnabled(true);}@Overrideprotected boolean getChildStaticTransformation(View child, Transformation t) {int viewCenterPoint = getItemViewCenterPoint(child);   // item的中心点int rotateAngle = 0;      // 默认旋转角度为0// 如果当前的View的中心点不等于gallery的中心点, 就是两边的图片, 需要计算旋转角度if (viewCenterPoint != centerPoint) {// gallery中心点 - 图片中心点 = 差值int diff = centerPoint - viewCenterPoint;// 差值 / 图片的宽度 = 比值float scale = (float) diff / (float) child.getWidth();// 比值 * 最大旋转角度 = 最终的旋转角度rotateAngle = (int) (scale * maxRoate);if (Math.abs(rotateAngle) > maxRoate) {    // 当前角度超过了50, 需要赋值到50 或者 -50rotateAngle = rotateAngle > 0 ? maxRoate : -maxRoate;}}// 设置变换效果之前, 需要把Transformation中的上一个item的变换效果清楚t.clear();t.setTransformationType(Transformation.TYPE_MATRIX);   // 设置变换效果的类型为矩阵类型setItemStartAnim((ImageView) child, rotateAngle, t);return true;}/*** 设置变换效果** @param iv          gallery的item* @param rotateAngle 旋转的角度* @param t           变换的对象*/private void setItemStartAnim(ImageView iv, int rotateAngle, Transformation t) {mCamera.save();       // 保存状态int absRotateAngle = Math.abs(rotateAngle);    // 取旋转角度的绝对值// 放大效果mCamera.translate(0, 0, 100f);    // 给摄像机定位int zoom = -240 + (absRotateAngle * 2);mCamera.translate(0, 0, zoom);// 透明度(中间的图片是完全显示, 两边有一定的透明度)int alpha = (int) (255 - (absRotateAngle * 2.5));iv.setAlpha(alpha);       // 透明度取值范围: 0 ~ 255, 0 就是完全隐藏, 255 完全显示// 旋转(在中间的图片没有旋转角度, 只要不在中间就有旋转角度)mCamera.rotateY(rotateAngle);Matrix matrix = t.getMatrix();     // 变换的矩阵, 需要把变换的效果添加到矩阵中// 给matrix赋值mCamera.getMatrix(matrix);    // 把matrix矩阵给camera对象, camera对象就会把上面添加的效果转换成矩阵添加到matrix对象中// 矩阵前乘matrix.preTranslate(-iv.getWidth() >> 1, -iv.getHeight() >> 1);// 矩阵后乘matrix.postTranslate(iv.getWidth() >> 1, iv.getHeight() >> 1);mCamera.restore(); // 恢复到之前保存的状态}/*** 获取gallery的中心点** @return*/public int getCenterPoint() {return getWidth() / 2;}/*** 获取item  view的中心点*/public int getItemViewCenterPoint(View itemView) {if (itemView != null) {return itemView.getWidth() / 2 + itemView.getLeft();}return 0;}@Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);centerPoint = getCenterPoint();}
}

完成自定义View MyGallery 后

如何使用？
如果为Gallery组件指定了10张图像，那么当Gallery组件显示到第10张时，就不会再继续显示了。这虽然在大多数时候没有什么关系，但在某些情况下，我们希望图像显示到最后一张时再重第1张开始显示，也就是循环显示。

public class InviteShareActivity extends AppCompatActivity {private int[] ids = {R.mipmap.image_1, R.mipmap.image_2, R.mipmap.image_3, R.mipmap.image_4, R.mipmap.image_5,R.mipmap.image_6, R.mipmap.image_7, R.mipmap.image_8, R.mipmap.image_9, R.mipmap.image_10};private Unbinder mUnbinder;@BindView(R.id.toolbar)Toolbar mToolbar;@BindView(R.id.gallery)MyGallery gallery;private int screenWidth;private int screenHeigh;private int count;//记录画廊图数@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_invite_share);StatusBarUtils.transparencyBar(this);mUnbinder = ButterKnife.bind(this);setSupportActionBar(mToolbar);Objects.requireNonNull(getSupportActionBar()).setDisplayShowTitleEnabled(false);ActivityUtils.addToolbarTitle(this, mToolbar, "仿3D画廊");mToolbar.setNavigationOnClickListener(v -> onBackPressed());getScreenWidthAndHeight();MyAdapter adapter = new MyAdapter();gallery.setAdapter(adapter);gallery.setOnItemClickListener(new AdapterView.OnItemClickListener() {@Overridepublic void onItemClick(AdapterView<?> parent, View view, int position, long id) {ToastUtils.showShort(InviteShareActivity.this, "您点击了第" + position + "张画廊图");}});}/*** 内部Adapter*/class MyAdapter extends BaseAdapter {public MyAdapter() {count = ids.length;//用于照片循环滑动}@Overridepublic int getCount() {return Integer.MAX_VALUE;//用于循环滑动}@Overridepublic Object getItem(int position) {return position;}@Overridepublic long getItemId(int position) {return position;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {ImageView iv = null;position = position % count;if (convertView == null) {iv = new ImageView(InviteShareActivity.this);} else {iv = (ImageView) convertView;}Bitmap bitmap = AppUtils.compoundBitmap(getResources(), ids[position]);BitmapDrawable bd = new BitmapDrawable(bitmap);bd.setAntiAlias(true);    // 消除锯齿iv.setImageDrawable(bd);Gallery.LayoutParams params = new Gallery.LayoutParams(screenWidth / 2, screenHeigh / 2);iv.setLayoutParams(params);return iv;}}/*** 获取屏幕的宽和高*/public void getScreenWidthAndHeight() {DisplayMetrics dm = new DisplayMetrics();getWindowManager().getDefaultDisplay().getMetrics(dm);screenWidth = dm.widthPixels;screenHeigh = dm.heightPixels;}@Overrideprotected void onDestroy() {super.onDestroy();mUnbinder.unbind();}
}

总结

重新学习了一下自定义View 把自定义的属性又用了一次
效果还可以的完成后心情还是很高兴地！

共勉

我要一步一步往上爬
在最高点乘着叶片往前飞
任风吹干流过的泪和汗
我要一步一步往上爬
等待阳光静静看着它的脸
小小的天有大大的梦想
我有属于我的天
任风吹干流过的泪和汗
总有一天我有属于我的天