Android Imitation micro-letter Picture Click Full Screen effect _android

Don't say much nonsense, first look at the effect:

First, the micro-mail.

It's just another imitation.

First of all, the principle of implementation, and then a step-by-step analysis

There are a total of 2 activity is the homepage, one is to show the effect of our picture page, parameters through intent transmission, material content are from the network, (thanks to smart mushrooms) pictures are glide asynchronous, under, the next important thing said three times, Then it is to use the animation to enlarge the operation and then display it (and did not do the download the original image of the implementation, anyway is the same download down set up and the animation does not need to be simpler).

OK, let's look at the analysis.

OBJ, 2 objects were created in the directory, one used to handle the picture size information and location information for the display page, and one was used to accompany the URL and resolution

Config This class is our URL and nothing else.

We look at a page, first see mainactivity

What he did was simply to initialize some of the information on the next page and pass it through the intent, not doing anything extra.

Package wjj.com.imitatewechatimage.activity;
Import android.content.Intent;
Import android.support.v7.app.AppCompatActivity;
Import Android.os.Bundle;
Import Android.view.View;

Import Android.widget.ImageView;

Import WJJ.COM.IMITATEWECHATIMAGE.R;
Import Com.apkfuns.logutils.LogUtils;

Import Com.bumptech.glide.Glide;
Import Wjj.com.imitatewechatimage.Config;
Import WJJ.COM.IMITATEWECHATIMAGE.OBJ.IMAGEINFOOBJ;

Import WJJ.COM.IMITATEWECHATIMAGE.OBJ.IMAGEWIDGETINFOOBJ;
  public class Mainactivity extends Appcompatactivity implements View.onclicklistener {private ImageView ImageView;
  Private Imageinfoobj imageinfoobj;

  Private Imagewidgetinfoobj imagewidgetinfoobj;
    @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);
    Setcontentview (R.layout.activity_main);
    Findid ();
    Init ();
  Listener ();
  private void Findid () {ImageView = (ImageView) Findviewbyid (R.id.imageview); private void Init () {Glide. with (Mainactivity.this). Load (Config.image_url). Placeholder (R.mipmap.maimai). into (ImageView);
    Imageinfoobj = new Imageinfoobj ();
    Imageinfoobj.imageurl = Config.image_url;
    Imageinfoobj.imagewidth = 1280;

    Imageinfoobj.imageheight = 720;
    Imagewidgetinfoobj = new Imagewidgetinfoobj ();
    imagewidgetinfoobj.x = Imageview.getleft ();
    IMAGEWIDGETINFOOBJ.Y = Imageview.gettop ();
    Imagewidgetinfoobj.width = Imageview.getlayoutparams (). width;

  Imagewidgetinfoobj.height = Imageview.getlayoutparams (). Height;
  private void Listener () {Imageview.setonclicklistener (this);
    } @Override protected void Onresume () {super.onresume ();
  LOGUTILS.D ("--->mainactivity onresume");
    } @Override protected void OnPause () {super.onpause ();
  LOGUTILS.D ("--->mainactivity onpause");
    } @Override protected void OnDestroy () {Super.ondestroy ();
  LOGUTILS.D ("--->mainactivity ondestroy"); @Override public void OnClick (VieW v) {switch (V.getid ()) {case R.id.imageview://Carry parameter jump Intent Intent = new Intent (mainactivit
        Y.this, Howimageactivity.class);
        Intent.putextra ("Imageinfoobj", imageinfoobj);
        Intent.putextra ("Imagewidgetinfoobj", imagewidgetinfoobj);
        StartActivity (Intent);
      Break
    Default:break;

 }
  }
}

Specific Business class showimageactivity

public class Showimageactivity extends Appcompatactivity {private relativelayout mainview;
  Private ImageView Showimageview;
  Private Imageinfoobj imageinfoobj;
  Private Imagewidgetinfoobj imagewidgetinfoobj;

  Button button;
  Screen width public float width;
  Original original high private float y_img_h;
  Screen height public float height;
  Private float size, Size_h, img_w, Img_h;
  protected float to_x = 0;
  protected float to_y = 0;
  Private float TX;


  private float Ty; Private final Spring spring = Springsystem. Create (). Createspring (). AddListener (New Examplespringliste

  NER ());
    @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);
    Setcontentview (R.layout.activity_how_image);
    LOGUTILS.D ("--->showimageactivity onCreate");
    Findid ();
    Init ();
  Listener ();
    private void Findid () {Mainview = (relativelayout) Findviewbyid (R.id.mainview);
 Button = (button) Findviewbyid (R.id.button); private void Init () {displaymetrics dm = getresources (). Getdisplaymetrics ();
    Width = Dm.widthpixels;

    Height = Dm.heightpixels;
    Imageinfoobj = (imageinfoobj) getintent (). Getserializableextra ("Imageinfoobj");
    Imagewidgetinfoobj = (imagewidgetinfoobj) getintent (). Getserializableextra ("Imagewidgetinfoobj");
    if (imageinfoobj = = null) {LOGUTILS.D ("--->imageinfoobj==null");
    } if (imagewidgetinfoobj = = null) {LOGUTILS.D ("--->imagewidgetinfoobj==null");
    } Showimageview = new ImageView (this);

    Showimageview.setscaletype (ImageView.ScaleType.CENTER_CROP);

    Glide.with (showimageactivity.this). Load (Imageinfoobj.imageurl). into (Showimageview);
    img_w = Imagewidgetinfoobj.width;
    Img_h = imagewidgetinfoobj.height-300;
    size = width/img_w;
    Y_img_h = Imageinfoobj.imageheight * width/imageinfoobj.imagewidth;

    Size_h = Y_img_h/img_h; Relativelayout.layoutparams p = new Relativelayout.layoutparams ((int)Imagewidgetinfoobj.width, (int) imagewidgetinfoobj.height);
    P.addrule (Relativelayout.center_horizontal, relativelayout.true);
    P.addrule (relativelayout.center_vertical, relativelayout.true);
    Showimageview.setlayoutparams (P); P.setmargins ((int) imagewidgetinfoobj.x, (int) imagewidgetinfoobj.y, (int) (Width-imagewidgetinfoobj.x + Imagew
    Idgetinfoobj.width)), (int) (Height-(imagewidgetinfoobj.y + imagewidgetinfoobj.height)));

    Mainview.addview (Showimageview);
      New Handler (). Post (new Runnable () {public void run () {Showimageview ();
  }
    }); private void Listener () {Showimageview.setonclicklistener (new View.onclicklistener () {@Override Pub
      LIC void OnClick (View v) {Showimageview ();

    }
    }); Button.setonclicklistener (New View.onclicklistener () {@Override public void OnClick (View v) {Showima
      Geview ();
  }
    }); } @Override protected void OnresuMe () {super.onresume ();
  LOGUTILS.D ("--->showimageactivity onresume");
    } @Override protected void OnPause () {super.onpause ();
  LOGUTILS.D ("--->showimageactivity onpause");
    } @Override protected void OnDestroy () {Super.ondestroy ();
  LOGUTILS.D ("--->showimageactivity ondestroy"); Private class Examplespringlistener implements Springlistener {@Override public void onspringupdate (Spring
      Spring) {Double currentvalue = Spring.getcurrentvalue ();
      float Mappedvalue = (float) springutil.mapvaluefromrangetorange (currentvalue, 0, 1, 1, size);
      float mapy = (float) springutil.mapvaluefromrangetorange (currentvalue, 0, 1, 1, size_h);
      Showimageview.setscalex (Mappedvalue);
      Showimageview.setscaley (mapy);
      if (CurrentValue = = 1) {//Showimageview.setvisibility (View.gone); @Override public void Onspringatrest (Spring spring) {} @Override public void Onspringactiv ATe (Spring spring) {} @Override public void Onspringendstatechange (Spring spring) {}}//Implementation effect P
    rivate void Moveview () {objectanimator.offloat (Mainview, Alpha, 0.8f). Setduration (0). Start ();
    Mainview.setvisibility (view.visible);
    Animatorset set = new Animatorset (); Set.playtogether (Showimageview, "Translationx", TX). Setduration (objectanimator.offloat), Objectanimat Or.offloat (Showimageview, "Translationy", Ty). Setduration, Objectanimator.offloat (Mainview, "Alpha", 1). setDu
    Ration (200));

      Set.addlistener (New Animator.animatorlistener () {@Override public void Onanimationstart (animator animator) { @Override public void Onanimationend (animator animator) {Showimageview.setscaletype (Imagevi ew.
        SCALETYPE.FIT_XY);
      Spring.setendvalue (1); @Override public void Onanimationcancel (animator animator) {} @Override public voiD Onanimationrepeat (animator animator) {}});

  Set.start ();
    ///Close page private void Movebackview () {Animatorset set = new Animatorset (); Set.playtogether (Objectanimator.offloat (Showimageview, "Translationx", to_x). Setduration (ObjectAnim)
    Ator.offloat (Showimageview, "Translationy", to_y). Setduration (200));

      Set.addlistener (New Animator.animatorlistener () {@Override public void Onanimationstart (animator animator) {
      @Override public void Onanimationend (animator animator) {finish (); @Override public void Onanimationcancel (animator animator) {} @Override public void on
    Animationrepeat (animator animator) {}});
  Set.start (); }//Specific animation class private void Showimageview () {if (spring.getendvalue () = 0) {//Elastohydrodynamic friction SPRING.SETSPRINGC
      Onfig (Springconfig.fromorigamitensionandfriction (300, 5)); Position at end of animation tx = 0;
      ty = Height/2-(imagewidgetinfoobj.y + img_h + 600);
      Moveview ();
    Return
    } spring.setspringconfig (Springconfig.fromorigamitensionandfriction (1, 5));
    Spring.setendvalue (0);
      New Handler (). Post (new Runnable () {public void run () {Movebackview ();

  }
    });

      @Override public boolean onKeyDown (int keycode, keyevent event) {if (keycode = = Keyevent.keycode_back) {
      Showimageview.setvisibility (view.visible);

    Showimageview ();
  return true;



 }

}

General process:
1. In init () Get the screen information, the parameters from the previous class, and some calculations on the coordinate points, and then use handler to start the animation effect

2.ShowImageView () processing the implementation of the animation (animation effect is compile ' com.facebook.rebound:rebound:0.3.8 ' implementation, this side does not do a tutorial on the delivery door: http:// facebook.github.io/rebound/)

Summarize:

The overall implementation is not too difficult, because the framework of the relationship, so that the complex animation parts do not have to write, call in the callback to do business on the line, here to add some of the technical points used in the process

1. Picture Zoom mode:
Android:scaletype is the size that controls how the picture resized/moved to the ImageView.

Meaning difference of Imageview.scaletype/android:scaletype value:

Center/center is centered by the original size of the picture, and the center portion of the picture is displayed when the picture is longer/wider than the view's length/width.

Center_crop/centercrop Proportionally enlarge the size of the picture to be centered so that the picture is long (wide) equal to or greater than the view's length (width)

Center_inside/centerinside The contents of the picture to the full center, by scaling or the original size so that the picture length/width is equal to or less than the view's length/width

fit_center/fitcenter Enlarge/Shrink the picture to the width of view, centered

fit_end/fitend expands/shrinks the picture to the width of the view, displayed in the lower part of the view

Fit_start/fitstart expands/shrinks the picture to the width of the view, displayed in the upper part of the view

fit_xy/fitxy enlarge/Reduce picture to view size display

The Matrix/matrix is plotted with a matrix, and the image is displayed by zooming in dynamically.

* * Note that the name of the picture in the Drawable folder cannot be capitalized

2.Layout Common Properties:

<a href= "HTTP://LIB.CSDN.NET/BASE/15" class= replace_word "title=" undefined "target=" _blank "style=" relative to the given ID control Color:rgb (223, 52, 52); Font-weight:bold; " 
>android</a>:layout_above Place the bottom of the control over the control with the given ID; 
Android:layout_below Place the bottom of the control under the control of the given ID; 
Android:layout_toleftof aligns the right edge of the control with the left edge of the control with the given ID; 
 
Android:layout_torightof aligns the left edge of the control with the right edge of the control with the given ID; 
Android:layout_alignbaseline aligns the baseline of the control with the baseline of the given ID; 
Android:layout_aligntop aligns the top edge of the control with the top edge of the given ID; 
Android:layout_alignbottom aligns the bottom edge of the control with the bottom edge of the given ID; 
Android:layout_alignleft aligns the left edge of the control with the left edge of the given ID; 
Android:layout_alignright aligns the right edge of the control with the right edge of the given ID; 
Relative to the parent component Android:layout_alignparenttop if true, aligns the top of the control with the top of its parent control; 
Android:layout_alignparentbottom If true, aligns the bottom of the control with the bottom of its parent control; 
Android:layout_alignparentleft If true, aligns the left part of the control with the left part of its parent control; 
Android:layout_alignparentright If true, aligns the right part of the control with the right part of its parent control; 
Center Android:layout_centerhorizontal If true, center the control horizontally; 
Android:layout_centervertical If True, centers the control vertically; Android:layout_centerinpArent if true, place the control in the center of the parent control; 
Specifies the value of the offset on the move pixel android:layout_margintop; 
Android:layout_marginbottom the value of the offset; 
The value of the android:layout_marginleft left offset; 
 Android:layout_marginright the value of the right offset;

This example is just an example, part of the coordinates and style is written dead, if you want to apply to the actual project or a little bit on this, in the process of loading multiple pictures were tested, no occurrence of oom situation, fill up the Memory usage chart (has been very stable)

Here to write a picture description

Code Address: Https://github.com/ddwhan0123/BlogSample/tree/master/ImitateWeChatImage
SOURCE Download Address: https://github.com/ddwhan0123/BlogSample/blob/master/ImitateWeChatImage/ImitateWeChatImage.zip?raw=true

The above is the entire content of this article, I hope to help you realize the Android imitation micro-letter Picture Click Full-screen Effect, thank you for your reading.