How to customize?

• The Helper holds a reference to the view, so you can get the view (getViews) and then operate the view
• callback before and after onLayout (updateprelay / updateprelay) is provided
• The Helper inherits the view, so the Helper itself is also a view

CircularRevealHelper

[the external chain picture transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the picture and upload it directly (img-laixdiew-1631248395413)( https://user-gold-cdn.xitu.io/2019/6/20/16b7364b1e037ba5?imageslim )]

ViewAnimationUtils provides us with the function createcirclarreveal to make a circlarreveal effect on an image

public static Animator createCircularReveal(View view,
            int centerX,  int centerY, float startRadius, float endRadius) 

With this function, you only need to calculate the center point (centerX,centerY) and endRadius (radius), which can easily achieve the effect of CircularReveal

class CircularRevealHelper @JvmOverloads constructor(
        context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : ConstraintHelper(context, attrs, defStyleAttr) {

    override fun updatePostLayout(container: ConstraintLayout) {
        super.updatePostLayout(container)
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            val views = getViews(container)
            for (view in views) {
                val anim = ViewAnimationUtils.createCircularReveal(view, view.width / 2,
                        view.height / 2, 0f,
                        Math.hypot((view.height / 2).toDouble(), (view.width / 2).toDouble()).toFloat())
                anim.duration = 3000
                anim.start()
            }
        }
    }
} 

updatePostLayout will be called after onLayout, and animation can be done here.

After having the CircularRevealHelper, it can be used directly in xml. In the constraint of the CircularRevealHelper_ referenced_ The view to be animated is specified in IDS.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/img_mario"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/mario" />

    <cn.feng.constraintLayout2.helps.CircularRevealHelper
        android:id="@+id/helper"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="img_mario"
        tools:ignore="MissingConstraints" />

</android.support.constraint.ConstraintLayout> 

Later, if you want to do CircularReveal for the view, you can directly specify it in xml, which achieves good reuse.

FlyinHelper

[external chain picture transfer failed. The source station may have anti-theft chain mechanism. It is recommended to save the picture and upload it directly (img-9g7s5tja-1631248395415)( https://user-gold-cdn.xitu.io/2019/6/20/16b7364b1d3586bd?imageslim )]

Let's take a look at the flying in effect of this Flyin. The view flies from all around to their respective positions.

The key to this animation is to calculate the direction in which each view should fly in.

[external chain picture transfer failed. The source station may have anti-theft chain mechanism. It is recommended to save the picture and upload it directly (img-9vqoxker-1631248395416)( https://user-gold-cdn.xitu.io/2019/6/20/16b7364b50a10938?imageView2/0/w/1280/h/960/ignore -error/1)]

The position of the red border can be found with the help of the Layer described above (of course, it can also be [calculated by yourself without the help of Layer](

), slightly complex), so as to calculate the middle point position of the red frame, and then compare it with the middle point of each view in the figure (the position of each white point in the figure) to find out which direction each view should fly in.

The initial location code of each view is calculated as follows, which should be well understood with the help of the above figure.

 for (view in views) {

            val viewCenterX = (view.left + view.right) / 2
            val viewCenterY = (view.top + view.bottom) / 2

            val startTranslationX = if (viewCenterX < centerPoint.x) -2000f else 2000f
            val startTranslationY = if (viewCenterY < centerPoint.y) -2000f else 2000f


            view.translationX = (1 - animatedFraction) * startTranslationX
            view.translationY = (1 - animatedFraction) * startTranslationY
        } 

FlyinHelper complete code [refer here](

)

ComposeMultipleHelper

Each view can accept not only one constrainthhelper, but also multiple constrainthhelpers at the same time.

[external chain picture transfer failed. The source station may have anti-theft chain mechanism. It is recommended to save the picture and upload it directly (img-sp2kjnbv-1631248395418)( https://user-gold-cdn.xitu.io/2019/6/20/16b7364b540a1cf8?imageslim )]

The four imageviews on the left and the FloatingActionButton on the lower right have the effect of Flyin. At the same time, the four imageviews on the left are still 3D rotating around the Y axis. The background of Seekbar above is doing the effect of CircularReveal. With the CircularRevealHelper and FlyInHelper written earlier, we can easily achieve this effect.

[code reference here](

)

Flow (VirtualLayout)

Flow is VirtualLayout. Like Chain, flow can help you quickly lay out the elements in constraint _referenced _idshorizontally / vertically. You can specify the specific arrangement mode through flow_wrapMode. There are three modes

• wrap none: simply compose the elements in constraint_referenced_ids into a chain, even if there is not enough space

[external chain picture transfer failed. The source station may have anti-theft chain mechanism. It is recommended to save the picture and upload it directly (img-1ohmgep-1631248395420)( https://user-gold-cdn.xitu.io/2019/6/20/16b7364b5693d337?imageView2/0/w/1280/h/960/ignore -error/1)]

• wrap chain: one or more chains are formed according to the size of space and elements

[external chain picture transfer failed. The source station may have anti-theft chain mechanism. It is recommended to save the picture and upload it directly (img-ahbk28xx-1631248395421)( https://user-gold-cdn.xitu.io/2019/6/20/16b7364b5a39cb1d?imageView2/0/w/1280/h/960/ignore -error/1)]

• Wrap aligned: similar to wrap chain, but aligned

[external link picture transfer failed. The source station may have anti-theft chain mechanism. It is recommended to save the picture and upload it directly (img-4ueztpgw-1631248395422)( https://user-gold-cdn.xitu.io/2019/6/20/16b7364b6c30dca9?imageView2/0/w/1280/h/960/ignore -error/1)]

Here's how to implement this calculator layout:

[the external chain picture transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the picture and upload it directly (img-ldnoqplu-1631248395422)( https://user-gold-cdn.xitu.io/2019/6/20/16b7364b601f1a6c?imageView2/0/w/1280/h/960/ignore -error/1)]```

<?xml version="1.0" encoding="utf-8"?>

<android.support.constraint.ConstraintLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activity.MainActivity">

<android.support.constraint.helper.Flow
    android:id="@+id/flow"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#FFC107"
    android:padding="20dp"
    app:constraint_referenced_ids="tv_num_7,tv_num_8,tv_num_9,tv_num_4,tv_num_5,tv_num_6,tv_num_1,tv_num_2,tv_num_3,tv_num_0,tv_operator_div,tv_dot,tv_operator_times"
    app:flow_horizontalGap="10dp"
    app:flow_maxElementsWrap="3"
    app:flow_verticalGap="10dp"
    app:flow_wrapMode="aligned"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

<TextView
    android:id="@+id/tv_num_7"
    style="@style/text_view_style"
    android:text="7" />

<TextView
    android:id="@+id/tv_num_8"
    style="@style/text_view_style"
    android:text="8" />

<TextView
    android:id="@+id/tv_num_9"
    style="@style/text_view_style"
    android:text="9" />

<TextView
    android:id="@+id/tv_num_4"
    style="@style/text_view_style"
    android:text="4" />

<TextView
    android:id="@+id/tv_num_5"
    style="@style/text_view_style"
    android:text="5" />

<TextView
    android:id="@+id/tv_num_6"
    style="@style/text_view_style"
    android:text="6" />

<TextView
    android:id="@+id/tv_num_1"
    style="@style/text_view_style"
    android:text="1" />

<TextView
    android:id="@+id/tv_num_2"
    style="@style/text_view_style"
    android:text="2" />

<TextView
    android:id="@+id/tv_num_3"
    style="@style/text_view_style"
    android:text="3" />

<TextView
    android:id="@+id/tv_num_0"
    style="@style/text_view_style"

end of document

Interview: if you don't prepare a full interview, it's a waste of time and irresponsible for yourself!

In any case, no matter what kind of interview, if you don't want to be abused by the interviewer, you have to make comprehensive preparations. Of course, in addition to this, you also need to lay a solid foundation at ordinary times. In this way, no matter how the interviewer chisels his knowledge, you can also cope with the flow * * [CodeChina open source project: Android learning notes summary + mobile architecture Video + big factory interview real questions + project actual combat source code](

)**

This article has been Tencent CODING open source hosting project: Android learning notes summary + mobile architecture Video + big factory interview real questions + project actual combat source code Collection, self-study resources and series of articles are continuously updated
How can you cope with a knowledge point like a stream * * [CodeChina open source project: Android learning notes summary + mobile architecture Video + real interview questions in large factories + project actual combat source code](

)**

This article has been Tencent CODING open source hosting project: Android learning notes summary + mobile architecture Video + big factory interview real questions + project actual combat source code Collection, self-study resources and series of articles are continuously updated