Android (Android) achieves 3DTouch effect _android

This blog to do the effect of the map:

To a low quality moving diagram:

The effect is not very good, in fact, the fuzzy effect should be like the first picture above, the following will release the code, interested can try to run a look at the effect.

First of all, we want to achieve this effect only need to master a few things:

1. Screen capture

2, Fuzzy Gaussian blur)

3. Add View

4, pop-up animation

5, processing long by event

6, optimization (fuzzy speed and intensity)

process: When the user a long press one Item , we first intercept a picture of the current screen, then the picture is compressed and then the Gaussian blur, and then cover the entire layout above (including covering toolbar), so the effect of the interface blurred out. Then we dynamically add one to the interface to CardView present our Item layout, which is CardView now on the corresponding item we clicked on. Finally add a corresponding 3D touch pop-up animation can be.

Next we complete the process step-by-step:

① Screen Capture

This part is relatively simple, because we have a ready-made way to get the current screen display Bitmap , and the code is as follows:

  Private Bitmap Getscreenimage () {//intercepts a picture of a screen
    view view = root;
    View.setbackgroundcolor (color.white);
    View.setdrawingcacheenabled (true);
    View.builddrawingcache ();
    Bitmap Bitmap = Bitmap.createbitmap (View.getdrawingcache (), 0, 0, view.getwidth (), View
        . GetHeight ());
    View.destroydrawingcache ();
    return bitmap;
  }

Let's start with the layout, where the layout file looks like this:

<?xml version= "1.0" encoding= "Utf-8"?> <framelayout xmlns:android= "http://schemas.android.com/apk/res/"
  Android "xmlns:app=" Http://schemas.android.com/apk/res-auto "xmlns:tools=" Http://schemas.android.com/tools " Android:id= "@+id/activity_main" android:layout_width= "match_parent" android:layout_height= "match_parent" Tools: context= "Com.fndroid.threedtouchdemo.MainActivity" > <linearlayout android:id= "@+id/root" Android:layout_w Idth= "Match_parent" android:layout_height= "match_parent" android:orientation= "vertical" > <android.suppo Rt.v7.widget.Toolbar android:id= "@+id/toolbar" android:layout_width= "Match_parent" android:layout_height = "? Attr/actionbarsize" android:background= "@color/colorprimary" app:title= "@string/app_name" App:titlete Xtcolor= "#fff"/> <listview android:id= "@+id/lv" android:layout_width= "Match_parent" android:l ayout_height= "Match_parent" Tools:listitem= "@layout/item"/> </LinearLayout> <imageview android:id= "@+id/cover" Android:layout_width= "Mat" Ch_parent "android:layout_height=" match_parent "/> <android.support.v7.widget.cardview android:id=" @+id/cv "Android:layout_width=" wrap_content "android:layout_height=" wrap_content "android:translationz=" 5DP "app: cardcornerradius= "10DP"/> </FrameLayout>

We can see that the outermost layer uses one FrameLayout , because we need to cover the entire layout of a Gaussian blurred screenshot, you can see the bottom ImageView is used to do fuzzy effect, at the beginning we just need to set it ImageAlpha to 0 to make it transparent. The bottom one CardView is the pop-up control, which is later. Our screenshot root is FrameLayout down LinearLayout , because we need to make ToolBar it also blurred.

② Gaussian Blur

This is in my last blog--dynamic Gaussian blur has been said to do, you can refer to, this gives the corresponding code:

  Private Bitmap Blur (Bitmap Bitmap, float radius) {
    Bitmap output = Bitmap.createbitmap (Bitmap);//create export picture
    renders Cript rs = renderscript.create (this); Construct a Renderscript object
    scriptintrinsicblur gaussianblue = scriptintrinsicblur.create (RS, Element.u8_4 (RS));
    //Create a Gaussian blur script
    Allocation Allin = Allocation.createfrombitmap (rs, bitmap); Open up input memory
    allocation Allout = Allocation.createfrombitmap (rs, output);//Open up output memory
    Gaussianblue.setradius ( RADIUS); Set the blur radius, range 0f<radius<=25f
    gaussianblue.setinput (Allin);//Set Input memory
    Gaussianblue.foreach (allout);// Fuzzy coding, and filling the memory into the output memory
    allout.copyto (output);////////////////////////////////////Bitmap
    >=23 use Rs.releaseallcontexts () return
    output;
  

To configure the Build.gradle file for the corresponding module:

  Defaultconfig {
    ...
    .. Renderscripttargetapi
    renderscriptsupportmodeenabled True
  }

③ Pop-up View

This view we need to Item View add to CardView , and let CardView the position above the corresponding Item position.

//display corresponding card private void ShowView (int position, view view) {Newview = Layoutinfla Ter.from (This). Inflate (R.layout.item, NULL); Load itme layout TextView TV = (TextView) Newview.findviewbyid (R.ID.ITEM_TV); Gets the corresponding control Tv.settext (Data.get (position). Get ("name"));
    Set the value of the item's corresponding control back to Newview.setbackgroundcolor (Color.White); Set the style of the card, where the position is computed by margintop framelayout.layoutparams params = new Framelayout.layoutparams (View.getwidth ()-View.
    GetHeight ()); Params.topmargin = (int) (view.gety () + mtoolbar.getheight ());
    The margintop of the card is set to the Y of the item plus the height of the toolbar params.leftmargin = 15;
    Params.rightmargin = 15;
    Mcardview.setvisibility (view.visible);
    Mcardview.setlayoutparams (params); Mcardview.addview (Newview, View.getlayoutparams ()); Load the view into the CardView and set the style to item style startanimate (Mcardview); Play an animated} 

This can not be item directly view loaded into the load CardView , because item the View already have a parent layout, will throw an exception. The solution is to map one back to the layout and then populate the data. Then set the position and size information of the card, because we want the card to be displayed on the corresponding Item .

④ Pop-up Animation

This is the simpler part, and we use it directly PropertyValuesHolder to do a pop-up and a contraction of the motion, because we need to scale both X and Y, and of course we can do it in other ways, the code is as follows:

  private void Startanimate (CardView cardview) {Propertyvaluesholder Pyhscalex = propertyvaluesholder.offloat ("scale
    X ", 0.1f, 1.05f);
    Propertyvaluesholder Pyhscaley = propertyvaluesholder.offloat ("ScaleY", 0.1f, 1.05f); Objectanimator animator_out = Objectanimator.ofpropertyvaluesholder (Mcardview, Pyhscalex, PyhScaleY);
    Scales both X and y Animator_out.setinterpolator (New Acceleratedecelerateinterpolator ());
    Animator_out.setduration (350);
    Propertyvaluesholder pyhScaleX2 = propertyvaluesholder.offloat ("ScaleX", 1.05f, 1f);
    Propertyvaluesholder pyhScaleY2 = propertyvaluesholder.offloat ("ScaleY", 1.05f, 1f);
    Objectanimator animator_in = Objectanimator.ofpropertyvaluesholder (Mcardview, pyhScaleX2, pyhScaleY2);
    Animator_in.setinterpolator (New Acceleratedecelerateinterpolator ());

    Animator_in.setduration (100);
    Animatorset animatorset = new Animatorset (); Animatorset.playsequentially (Animator_out, animator_in); Perform two animations sequentially animatorSet.start (); }

⑤ Monitor Long press event

Because this is only used ListView to simplify this content, it can be done directly through existing listeners:

@Override Public
  Boolean Onitemlongclick (adapterview<?> parent, view view, int position, long id) {
    mcover . Setimagebitmap (Blur (Blur (Getscreenimage (), 25f), 25f)); Two times Gaussian Blur
    Mcover.setvisibility (view.visible) on the captured picture;
    Mcover.setimagealpha (0);
    New Thread (New Runnable () {
      int progress = =;

      @Override public
      Void Run () {While
        (Progress < 255) {
          try {
            thread.sleep (1);
          } catch ( Interruptedexception e) {
            e.printstacktrace ();
          }
          msg = new Message ();
          Msg.obj = progress++;
          Mhandler.sendmessage (msg);}}}
    ). Start ();
    ShowView (position, view);
    return true;
  }

The 3rd line here calls the two-time blur method to blur the picture, if you read the previous blog, each Gaussian blur the maximum fuzzy radius is 25, if you want to do to iOS that also blur effect, 25 is not enough, so you can blur out the picture again, Contrast chart (left for 2 blur, right 1 times):

⑥ optimization

However, in fact, for a relatively high resolution of the mobile phone, the interception of large screen resolution, the use of multiple blurring is not recommended . Here you can imagine, assuming that we first get to the screenshot, and then whether it can be the interception of the image first compression, after all, the late still need to blur, that is, this image is compressed does not affect the fact that we are blurred (because to the end is blurred). In fact, when we compress the image, we find that the blur effect of the picture is different under the same blur radius, as shown in the following two figure:

The reason is: Gaussian fuzzy algorithm to determine the color of a point is through the point near the other points to obtain the average (with the right), and take the vicinity of more than a pixel, that is, through the fuzzy radius to determine. When the image is compressed, the same blur radius, each sample area becomes larger, so the fuzzy strength is even greater.

In this way, we can not need to do multiple blur, and, after compressing the picture, the total pixel point becomes less, the blur speed will become faster.

Here also gives the code for picture compression:

  Private Bitmap Getsmallsizebitmap (Bitmap source, float percent) {
    if (Percent > 1 | | percent <= 0) {
      throw n EW illegalargumentexception ("percent must be > 1 and <= 0");
    }
    Matrix matrix = new Matrix ();
    Matrix.setscale (percent, percent);
    Return Bitmap.createbitmap (source, 0, 0, source.getwidth (), Source.getheight (), Matrix, true);
  

Summarize

The above is in the Android (Android) to achieve the full 3DTouch effect of the content, just interested in the practice of their own hands, I hope the content of this article can help.