Android development and learning path-3DTouch effect imitation, android-3dtouch

Android development and learning path-3DTouch effect imitation, android-3dtouch

We should all know what effect 3D Touch has. What? I don't know. That's no way. I didn't show you the iPhone 6 s.

What I want to do in this blog:

A low-quality animation:

This animation does not work very well. In fact, the operation is smooth, and the blur effect should be as shown in the first figure above. The Code will be released later, if you are interested, try to run it to see the effect.

 

 

Let's talk about the idea first. To achieve this effect, we only need to know a few things:

• Screen
• Blur (Gaussian Blur)
• Add View
• Pop-up animation
• Handling long-cycle events

Process: When you press an Item for a long time, we first take an image of the current screen, then blur the image with Gaussian blur, and then overwrite the entire layout (including overwriting the Toolbar ), in this way, the blur effect is displayed. Then we dynamically Add a CardView to the interface to display our Item layout. This CardView will appear on the corresponding Item we click. Add an animation corresponding to the 3D Touch pop-up.

 

Next we will complete the entire process step by step:

① Screen

This part is relatively simple, because we need to obtain the Bitmap of the content displayed on the current screen. The Code is as follows:

Private Bitmap getScreenImage () {// capture the image of a screen. 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 ;}

The layout file here is as follows:

<?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_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical">        <android.support.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:titleTextColor="#fff"/>        <ListView            android:id="@+id/lv"            android:layout_width="match_parent"            android:layout_height="match_parent"            tools:listitem="@layout/item"/>    </LinearLayout>    <ImageView        android:id="@+id/cover"        android:layout_width="match_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 a FrameLayout, because we need to overwrite a Gaussian blur to the entire layout. We can see that the bottom ImageView is used for blur, at first, we only need to set its ImageAlpha to 0 to make it transparent. The bottom CardView is the pop-up control. Let's wait. Our root is the LinearLayout in FrameLayout, because we need to blur the ToolBar.

 

② Gaussian blur

This is already mentioned in my previous blog-How to Implement Dynamic Gaussian blur. You can refer to it and provide the corresponding code:

Private Bitmap blur (Bitmap bitmap, float radius) {Bitmap output = Bitmap. createBitmap (bitmap); // create the output image RenderScript rs = RenderScript. create (this); // construct an RenderScript object ScriptIntrinsicBlur gaussianBlue = ScriptIntrinsicBlur. create (rs, Element. u8_4 (rs); // create the Gaussian fuzzy script Allocation allIn = Allocation. createFromBitmap (rs, bitmap); // open the input memory Allocation allOut = Allocation. createFromBitmap (rs, output); // open the output memory gaussianBlue. setRadius (radius); // set the Blur radius, range: 0f <radius <= 25f gaussianBlue. setInput (allIn); // set the input memory gaussianBlue. forEach (allOut); // fuzzy encoding, and fill in the memory with the output memory allOut. copyTo (output); // encode the output memory as Bitmap. Pay attention to rs for the image size. destroy (); // closes the RenderScript object. rs is used when the API is greater than or equal to 23. releaseAllContexts () return output ;}

Configure the build. gradle file of the corresponding Module:

    defaultConfig {        ...        renderscriptTargetApi 18        renderscriptSupportModeEnabled true    }

 

③ Pop-up view

In this View, we need to add the View of the Item to CardView and place the CardView on the corresponding Item.

// Display the corresponding private void showView (int position, View view) {newView = LayoutInflater. from (this ). inflate (R. layout. item, null); // loads the layout of the Itme TextView TV = (TextView) newView. findViewById (R. id. item_ TV); // gets the TV of the corresponding control. setText (data. get (position ). get ("name"); // set the value of the Item control back to newView. setBackgroundColor (Color. WHITE); // set the card style. The position is calculated by margintop. layoutParams params = new FrameLayout. layoutParams (view. getWidth ()-30, view. getHeight (); params. topMargin = (int) (view. getY () + mToolbar. getHeight (); // The marginTop of the card is set to Y of 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 CardView and set the style to the item style startAnimate (mCardView); // play the animation}

The view of the item cannot be directly loaded into CardView, because the View of the item already has a parent layout, and an exception is thrown. The solution is to map a new one based on the layout and then fill in the data. Set the position and size of the card, because we want the card to be displayed on the corresponding Item.

 

④ Animation

This is a relatively simple part. We directly use PropertyValuesHolder to make a pop-up and shrink motion, because we need to scale X and Y at the same time. Of course, we can also use other methods. The Code is as follows:

Private void startAnimate (CardView cardView) {PropertyValuesHolder pyhScaleX = PropertyValuesHolder. ofFloat ("scaleX", 0.1f, 1.05f); PropertyValuesHolder pyhScaleY = PropertyValuesHolder. ofFloat ("scaleY", 0.1f, 1.05f); ObjectAnimator animator_out = ObjectAnimator. ofPropertyValuesHolder (mCardView, pyhScaleX, pyhScaleY); // simultaneously scales X and Y degrees (new degrees (); 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); new round (); animator_in.setDuration (100); AnimatorSet animatorSet = new AnimatorSet (); animatorSet. playSequentially (animator_out, animator_in); // execute two animations in sequence. start ();}

 

⑤ Listen for long-time events

Because ListView is used to simplify this content, it can be implemented directly through an existing listener:

1 @ Override 2 public boolean onItemLongClick (AdapterView <?> Parent, View view, int position, long id) {3 mCover. setImageBitmap (blur (getScreenImage (), 25f), 25f); // perform Gaussian blur 4 mCover on the captured image twice. setVisibility (View. VISIBLE); 5 mCover. setImageAlpha (0); 6 new Thread (new Runnable () {7 int progress = 50; 8 9 @ Override10 public void run () {11 while (progress <255) {12 try {13 Thread. sleep (1); 14} catch (InterruptedException e) {15 e. printStackTrace (); 16} 17 Message msg = new Message (); 18 msg. obj = progress ++; 19 mHandler. sendMessage (msg); 20} 21} 22 }). start (); 23 showView (position, view); 24 return true; 25}

The second line calls the blur method twice to blur the image. If you have read the previous blog, the maximum blur radius of each Gaussian blur is 25, if you want to blur the image to iOS, 25 is not enough, so you can blur the blurred image again, and compare the image (two blurred pictures on the left and one fuzzy picture on the right):

Source Code address: Github

 

Thanks for your support.