preface

In the project encountered a gallery display photo wall effect support left and right sliding looks good!

Make this effect to show today!

Gallery is introduced

/**
 * 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.
 */
Copy the code

The official API notes that this class is deprecated when using this component. Other horizontal scrolling widgets include the HorizontalScrollView and ViewPager from the support library. Because this class is inside, it’s been a long time. Although deprecated, it is no longer supported for subsequent updates.

A Gallery is used to scroll horizontally to show a list of items. The Gallery component displays a list of images horizontally that moves one space to the left when the next image is clicked, or to the right when the previous image is clicked. We can also drag to move the list of images left and right. When using a Gallery, we should specify its background, otherwise its items will be tightly packed together and will not have the effect of a Gallery. However, you can also create the Gallery effect by specifying the Gallery properties to set parameters such as distance and height. Obviously this is a hassle, unless you customize some other effects!

The Gallery component is primarily used to display a list of images horizontally, but as a general practice. The Gallery component can only display a limited number of specified images. That is, if you specify 10 images for the Gallery component, by the time the Gallery component is displayed on page 10, it will no longer be displayed. This doesn’t matter most of the time, but in some cases we want the image to go to the last one before the first one is displayed, a circular display. To implement this style of Gallery component, you need to make some improvements to the Adapter object of the Gallery.

Gallery use

Customize the View MyGallery class and set the desired properties

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); Int rotateAngle = 0; // If the center point of the View is not equal to the center point of the gallery, it is necessary to calculate the rotation Angle if (viewCenterPoint! Int diff = centerPoint - viewCenterPoint; // Width = ratio float scale = (float) diff/(float) child.getwidth (); RotateAngle = (int) (scale * maxRoate); If (math.abs (rotateAngle) > maxRoate) {// If (math.abs (rotateAngle) > maxRoate) {// If (math.abs (rotateAngle) > maxRoate) { maxRoate : -maxRoate; The Transformation to the last item must be clear before the Transformation is set. t.setTransformationType(Transformation.TYPE_MATRIX); // Set the transform effect type to matrix type setItemStartAnim((ImageView) child, rotateAngle, t); return true; } /** * set the transform effect ** @param iv gallery item * @param rotateAngle * @param t transform object */ private void setItemStartAnim(ImageView iv, int rotateAngle, Transformation t) { mCamera.save(); // Save state int absRotateAngle = math.abs (rotateAngle); // Take the absolute value of the rotation Angle // Translate (0, 0, 100f); Int zoom = -240 + (absRotateAngle * 2); mCamera.translate(0, 0, zoom); Int alpha = (int) (255 - (absRotateAngle * 2.5)); iv.setAlpha(alpha); MCamera. RotateY (rotateAngle); mCamera. RotateY (rotateAngle); Matrix matrix = t.getMatrix(); // assign McAmera.getmatrix (matrix); PreTranslate (-iv.getwidth () >> 1); preTranslate(-iv.getwidth ()); -iv.getHeight() >> 1); PostTranslate (iv.getwidth () >> 1, iv.getheight () >> 1); mCamera.restore(); Public int getCenterPoint() {return getWidth() / 2; public int getCenterPoint() {return getWidth(); } 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(); }}Copy the code

After completing the customization of View MyGallery

How to use it? If you specify 10 images for the Gallery component, by the time the Gallery component is displayed on the 10th page, it will no longer be displayed. This doesn’t matter most of the time, but in some cases, we want the image to go to the last one before the first one is displayed, which is a loop.

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, "fake 3 d gallery"); 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, "You clicked the" + position + "gallery "); }}); } /** * 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); // Remove aliasing 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(); }}Copy the code

conclusion

Re-learning about the custom View to customize the attributes of the use of the effect can also be completed after the mood is still very happy!

‘

I want to work my way up

Fly forward on the blades at the highest point

Let the wind blow dry tears and sweat

I want to work my way up

Waiting for the sun to watch its face

Little days have big dreams

I have my day

Let the wind blow dry tears and sweat

One day I will have my day