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

    @Override
    protected 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 或者 -50
                rotateAngle = 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;
    }

    @Override
    protected 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;//记录画廊图数

    @Override
    protected 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() {
            @Override
            public 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;//用于照片循环滑动
        }

        @Override
        public int getCount() {
            return Integer.MAX_VALUE;//用于循环滑动
        }

        @Override
        public Object getItem(int position) {
            return position;
        }

        @Override
        public long getItemId(int position) {
            return position;
        }

        @Override
        public 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;
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        mUnbinder.unbind();
    }
}

总结

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

共勉

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