The realization method of the shadow effect of the Android programming sliding effect (with demo source download) _android

Source: Internet
Author: User
Tags abs event listener reflection

An example of this article describes the implementation of the slide effect of Android programming. Share to everyone for your reference, specific as follows:

The previous introduction of the use of "Android programming 3D sliding rotation effect of the method", now introduce the image of the implementation of reflection, first look at the effect chart

This is achieved primarily through custom gallery and Imageadapter (inherited from Baseadapter)

1. Reflection Drawing

Imageadapter inherits from Baseadapter, and the detailed implementation shows the previous usage of the Android Gallery. This article focuses on the reflection principle and realization

Reflection principle:

Reflection effect is mainly from the original image + spacing + reflection of the three parts, the height of about 3/2 of the original image (the original image is 1, the reflection is 1/2)
The original image, is that we saw the beginning of the picture
Spacing, is the original image and reflection between the gap, such as: Reflectiongap = 4;
The reflection is the lower half of the original image 1/2 height, through the Matrix transformation Matrix.prescale (1,-1); Get an inverted picture and then add a linear mask and shadow implementation

Reflection realization:

/** Reflection Reflection * * Public boolean createreflectedimages () {final int reflectiongap = 4;
  int index = 0;
    For (map<string, object> map:list) {Integer id = (integer) map.get ("image"); Bitmap originalimage = Bitmapfactory.decoderesource (Mcontext.getresources (), id);
    Get the original picture int width = Originalimage.getwidth ();
    int height = originalimage.getheight ();
    Matrix matrix = new Matrix (); Matrix.prescale (1,-1);  Picture matrix Transformation (reflection from the lower part to the top) Bitmap reflectionimage = Bitmap.createbitmap (originalimage, 0, HEIGHT/2, width, height/2, matrix, FALSE); Intercept the lower part of the original Bitmap bitmapwithreflection = Bitmap.createbitmap (width, (height + height/2), config.argb_8888); Create a reflection picture (height is original 3/2) Canvas Canvas = new Canvas (bitmapwithreflection); Draw Reflection (original image + spacing + reflection) Canvas.drawbitmap (originalimage, 0, 0, NULL);
    Draw the original Paint Paint = new Paint (); Canvas.drawrect (0, height, width, height + reflectiongap, paint); Draw the spacing between the original image and the reflection Canvas.drawbitmap (reflectionimage, 0, HeigHT + REFLECTIONGAP, NULL);
    Draw Reflection Map Paint = new paint (); LinearGradient shader = new LinearGradient (0, Originalimage.getheight (), 0, bitmapwithreflection.getheight () +
    Reflectiongap, 0x70ffffff, 0X00FFFFFF, Tilemode.clamp); Paint.setshader (shader); Linear gradient effect Paint.setxfermode (new Porterduffxfermode (mode.dst_in)); Shadow mask Effect canvas.drawrect (0, height, width, bitmapwithreflection.getheight () + reflectiongap, paint);
    Draw the shadow effect of the reflection imageview ImageView = new ImageView (mcontext); Imageview.setimagebitmap (bitmapwithreflection);
    Set the reflection Picture Imageview.setlayoutparams (New Mygallery.layoutparams (180, 240));
    Imageview.setscaletype (Scaletype.matrix);
  mimages[index++] = ImageView;
return true;

 }

2, Mygallery

Custom Gallery to realize the browsing and selection of reflection images

public class Mygallery extends Gallery {private Camera Mcamera = new Camera (); private int mmaxrotationangle = 60;
  Max rotation angle of int mmaxzoom =-120;
  private int mcoveflowcenter;
    Public Mygallery {Super (context);
  This.setstatictransformationsenabled (TRUE);
    Public Mygallery (context, AttributeSet attrs) {Super (context, attrs);
  This.setstatictransformationsenabled (TRUE);
    Public Mygallery (context, AttributeSet attrs, int defstyle) {Super (context, attrs, Defstyle);
  This.setstatictransformationsenabled (TRUE);
  public int Getmaxrotationangle () {return mmaxrotationangle;
  The public void setmaxrotationangle (int maxrotationangle) {mmaxrotationangle = Maxrotationangle;
  public int Getmaxzoom () {return mmaxzoom;
  The public void setmaxzoom (int maxzoom) {mmaxzoom = Maxzoom; /** Get Gallery Center x */private int getcenterofcoverflow () {return (GetWidth ()-GetpaddinglefT ()-getpaddingright ())/2 + getpaddingleft ();
  /** get view's center X/private static int Getcenterofview (view view) {return view.getleft () + view.getwidth ()/2; @Override protected void onsizechanged (int w, int h, int oldw, int oldh) {mcoveflowcenter = GETCENTEROFCOVERFL
    ow ();
  Super.onsizechanged (W, H, OLDW, OLDH); @Override protected Boolean getchildstatictransformation (View Child, transformation trans) {Final int childcent
    ER = Getcenterofview (child);
    Final int childwidth = Child.getwidth ();
    int rotationangle = 0;
    Trans.clear (); Trans.settransformationtype (Transformation.type_both); Alpha and Matrix both transform if (Childcenter = = Mcoveflowcenter) {//center of Childview Transformimagebitmap ((imageview) ch
    ILD, trans, 0); else {//side of Childview RotationAngle = (int) ((float) (mcoveflowcenter-childcenter)/childwidth) * Mmaxrota
      Tionangle); if (Math.Abs (rotationangle) > Mmaxrotationangle) {rotationAngle = (RotationAngle < 0)?
      -mmaxrotationangle:mmaxrotationangle;
    } transformimagebitmap ((ImageView) Child, trans, rotationangle);
  return true;
    } private void Transformimagebitmap (ImageView child, Transformation trans, int rotationangle) {mcamera.save ();
    Final Matrix Imagematrix = Trans.getmatrix ();
    Final int imageheight = Child.getlayoutparams (). Height;
    Final int imagewidth = Child.getlayoutparams (). width;
    Final int rotation = Math.Abs (rotationangle); In the z-axis forward moving camera, the actual effect is enlarged picture; If you move on the y axis, the picture moves up and down;
    The corresponding picture on the x-axis moves around.
    Mcamera.translate (0.0f, 0.0f, 100.0f);  As the angle of the view gets less, zoom in if (Rotation < Mmaxrotationangle) {float zoomamount = (float)
      (Mmaxzoom + (rotation * 1.5));
    Mcamera.translate (0.0f, 0.0f, Zoomamount); } mcamera.rotatey (RotationAngle);
    The rotationangle is positive, rotates along the y axis, is negative and rotates Mcamera.getmatrix (Imagematrix) along the y axis; Imagematrix.pretranslate (-(IMAGEWIDTH/2),-(imagEHEIGHT/2));
    Imagematrix.posttranslate ((IMAGEWIDTH/2), (IMAGEHEIGHT/2));
  Mcamera.restore ();

 }
}

3. Activity

In the activity, mainly realizes the custom gallery picture fills Imageadapter, Mygallery selects the event listens, clicks the event listens

private void Initres () {
  tvtitle = (TextView) Findviewbyid (r.id.tvtitle);
  Gallery = (mygallery) Findviewbyid (r.id.mygallery); Gets the custom Mygallery control
  adapter = new Imageadapter (this);
  Adapter.createreflectedimages (); Create Reflection Effect
  Gallery.setadapter (adapter);
  Gallery.setonitemselectedlistener (New Onitemselectedlistener () {//Set selection event listener
    @Override public
    Void Onitemselected (adapterview<?> Parent, view view, int position, long id) {
      tvtitle.settext (adapter.titles[ Position]);
    }
    @Override public
    void onnothingselected (adapterview<?> parent) {
    }
  });
  Gallery.setonitemclicklistener (New Onitemclicklistener () {//Set click event Listener
    @Override public
    void Onitemclick ( Adapterview<?> Parent, view view, int position, long id) {
      toast.maketext (main.this, "img" + (position+1) + " Selected ", Toast.length_short). Show ();}}


Main.xml layout file, display a collection of pictures by implementing a custom Mygallery

<?xml version= "1.0" encoding= "Utf-8"?> <relativelayout xmlns:android=
"http://schemas.android.com/apk" /res/android "
  android:layout_width=" fill_parent "
  android:layout_height=" fill_parent "
  android:o" rientation= "vertical" >
  <textview
    android:id= "@+id/tvtitle" android:layout_width= "WRAP_"
    Content "
    android:layout_height=" wrap_content "
    android:layout_centerhorizontal=" true "
    Android: Textsize= "16sp"/>
  <com.homer.reflect.mygallery
    android:id= "@+id/mygallery"
    android:layout _width= "Fill_parent"
    android:layout_height= "wrap_content"
    android:layout_below= "@id/tvtitle"
    android:layout_margintop= "10dip"/>
</RelativeLayout>

Full instance code click here to download the site.

More interested readers of Android-related content can view this site: "Android Development Animation Tips", "Android Development introduction and Advanced Course" and "Android Control usage summary."

I hope this article will help you with the Android program.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.