Skalierungsanimation der benutzerdefinierten Ansicht (relativ zum Mittelpunkt)

Question

Ich habe eine benutzerdefinierte Ansicht, die ich relativ zur Mitte skalieren möchte.

Wenn ich diese Zeile Code für das Image verwende es sehr gut funktioniert und maßstäblich korrekt:

imageView.animate().scaleX(2.5f).scaleY(2.5f).setDuration(2000); 

Aber wenn ich es für meine benutzerdefinierte Ansicht verwenden, es nach oben geht, und Animation sieht nicht richtig , wie man es repariert? Hier

ist ein Video: https://youtu.be/f0-jMqE9ULU
(Die Animation des roten Kreises falsch gehen, Animation des rosaen Kreises (Imageview) korrekt funktioniert)

Meine benutzerdefinierte Ansicht:

public class CircleDrawView extends View { 
    private Paint paint; 
    private int x; 
    private int y; 
    private String labelName; 
    private int radius = 40; 

    public CircleDrawView(Context context, AttributeSet attrs) 
    { 
     super(context, attrs); 
    } 

    public CircleDrawView(Context context) 
    { 
     super(context); 
     paint = new Paint(); 
    } 

    public CircleDrawView(Context context, int x, int y, String labelName) 
    { 
     super(context); 
     paint = new Paint(); 
     this.x=x; 
     this.y=y; 
     this.labelName=labelName; 
    } 


    @Override 
    protected void onDraw(Canvas canvas) 
    { 
     super.onDraw(canvas); 
     paint.setColor(Color.RED); 
     canvas.drawCircle(x, y, radius, paint); 
     Paint textPaint = new Paint(); 
     textPaint.setTextSize(25); 
     textPaint.setColor(Color.WHITE); 
     textPaint.setAntiAlias(true); 
     textPaint.setTextAlign(Paint.Align.CENTER); 
     Rect bounds = new Rect(); 
     textPaint.getTextBounds(labelName, 0, labelName.length(), bounds); 
     canvas.drawText(labelName, x, y, textPaint); 

    } 
} 

Aktivität:

public class MainActivity extends AppCompatActivity { 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_main); 

     LinearLayout rootView =(LinearLayout) findViewById(R.id.test_layout); 
     ImageView imageView = (ImageView) findViewById(R.id.test_image); 

     CircleDrawView circle = new CircleDrawView(getApplicationContext(), 200, 200, "1"); 
     rootView.addView(circle); 
     rootView.invalidate(); 
     circle.animate().scaleX(1.2f).scaleY(1.2f).setDuration(2000); 
     imageView.animate().scaleX(2.5f).scaleY(2.5f).setDuration(2000); 
} 
} 

xml:

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:paddingBottom="@dimen/activity_vertical_margin" 
    android:paddingLeft="@dimen/activity_horizontal_margin" 
    android:paddingRight="@dimen/activity_horizontal_margin" 
    android:paddingTop="@dimen/activity_vertical_margin" 

    tools:context="com.example.attracti.animation.MainActivity"> 

    <LinearLayout 
     android:id="@+id/test_layout" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:orientation="horizontal"> 

     <ImageView 
      android:id="@+id/test_image" 
      android:layout_width="40dp" 
      android:layout_height="40dp" 
      android:layout_gravity="center_vertical" 
      android:layout_marginLeft="100dp" 
      android:background="@drawable/circle_shape" /> 

    </LinearLayout> 

</RelativeLayout> 

Answer 1

Ihr Anruf an circle.animate() gibt eine ViewPropertyAnimator zurück. Die scaleX() und scaleY() Methoden, die Sie auf dieser ViewPropertyAnimator Skala die View über ihre Pivot aufrufen.

Der Drehpunkt von View wird durch die Methoden View.setPivotX() und View.setPivotY() festgelegt.

Setzen Sie diese Werte in Ihrem Konstruktor auf das angegebene x und y. Ihre Ansicht wird dann um den angegebenen Mittelpunkt skaliert.